首页 > 解决方案 > wordpress 过滤器动态更改某些页面上的徽标

问题描述

我在编辑页面屏幕上创建了一个元框,我想传入徽标图像的地址并让它在渲染之前替换原始徽标。

函数.php


$logo = get_theme_mod('custom_logo');
$image = wp_get_attachment_image_src($logo, 'full');
$image_url = $image[0];
/**
 *
 * Add Metabox
 *
 */
add_action('add_meta_boxes', function () {
    add_meta_box('qc_lpp_meta_box', 'Upload Logo', 'qc_lpp_meta_box_func', 'page', 'advanced', 'high');
}, 10);

/**
 *
 * Metabox render Function
 *
 */
function qc_lpp_meta_box_func($post)
{
    global $image_url;
    // $original_image = get_post_meta($post->ID, 'qc_lpp_original_url', true);
    $original_image = $image_url;
    $replaced_image = get_post_meta($post->ID, 'qc_lpp_replacing_image_url', true);
    $image_width = get_post_meta($post->ID, 'qc_lpp_image_width', true);
    $image_height = get_post_meta($post->ID, 'qc_lpp_image_height', true);
?>
    <p hidden>
        <label for="qc_lpp_original_url">Original Image Source</label> <br />
        <input type="text" class="large-text" id="qc_lpp_original_url" name="qc_lpp_original_url" value="<?php echo $original_image; ?>">
    </p>

    <p>
        <label for="qc_lpp_replacing_image_url"><?php _e('Upload new logo', 'image-replace-by-mycore') ?></label><br>

        <!-- The actual field that will hold the URL for our file -->
        <input type="url" class="large-text" name="qc_lpp_replacing_image_url" id="qc_lpp_replacing_image_url" value="<?php echo esc_attr($replaced_image); ?>"><br>

        <!-- 
         The button that opens our media uploader
         The `data-media-uploader-target` value should match the ID/unique selector of your field.
         We'll use this value to dynamically inject the file URL of our uploaded media asset into your field once successful (in the myplugin-media.js file)
        -->

        <button style="margin-top: 10px;" type="button" class="button" id="image-replace-by-mycore_video_upload_btn" data-media-uploader-target="#qc_lpp_replacing_image_url"><?php _e('Upload Media', 'myplugin') ?></button>
    </p>

    <p>
        <label for="qc_lpp_image_width">Width : </label>
        <input type="text" id="qc_lpp_image_width" name="qc_lpp_image_width" value="<?php echo esc_attr($image_width); ?>"> &nbsp; ex. 300
    </p>

    <p>
        <label for="qc_lpp_image_height">Height : </label>
        <input type="text" id="qc_lpp_image_height" name="qc_lpp_image_height" value="<?php echo esc_attr($image_height); ?>"> &nbsp; ex. 300
    </p>

    <?php wp_nonce_field('qc_lpp_form_metabox_nonce', 'qc_lpp_form_metabox_process'); ?>
<?php
}

/**
 *
 * Metabox saved Function
 *
 */

add_action('save_post', function ($post_id) {

    if (!isset($_POST['qc_lpp_form_metabox_process']) || !wp_verify_nonce($_POST['qc_lpp_form_metabox_process'], 'qc_lpp_form_metabox_nonce')) {
        return;
    }

    if (!current_user_can('edit_post', $post_id)) {
        return $post_id;
    }

    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    if (isset($_POST['qc_lpp_replacing_image_url'])) {
        update_post_meta($post_id, 'qc_lpp_replacing_image_url', sanitize_text_field($_POST['qc_lpp_replacing_image_url']));
        // apply_filters('get_custom_logo', get_custom_logo(), $_POST['qc_lpp_replacing_image_url'], $post_id);
        // apply_filters('get_custom_logo', logo_url($_POST['qc_lpp_replacing_image_url']), $post_id);
    }
    if (!isset($_POST['qc_lpp_replacing_image_url'])) {
        update_post_meta($post_id, 'qc_lpp_replacing_image_url', sanitize_text_field($_POST['qc_lpp_original_url']));
        // apply_filters('get_custom_logo', logo_url($_POST['qc_lpp_original_url']), $post_id);
    }

    if (isset($_POST['qc_lpp_original_url'])) {
        update_post_meta($post_id, 'qc_lpp_original_url', sanitize_text_field($_POST['qc_lpp_original_url']));
    }

    if (isset($_POST['qc_lpp_image_width'])) {
        update_post_meta($post_id, 'qc_lpp_image_width', sanitize_text_field($_POST['qc_lpp_image_width']));
    }

    if (isset($_POST['qc_lpp_image_height'])) {
        update_post_meta($post_id, 'qc_lpp_image_height', sanitize_text_field($_POST['qc_lpp_image_height']));
    }
});

add_filter('get_custom_logo', function ($html, $src, $post_id) {
    global $image_url;
    global $post;
    echo $image_url;
    die;

    if ($post->ID == $post_id) {
        $url = network_site_url();
        // $html = sprintf(
        //  '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',
        //  esc_url($url),
        //  wp_get_attachment_image($custom_logo_id, 'full', false, array(
        //      'class'    => 'custom-logo',
        //      'src' => $_POST['qc_lpp_replacing_image_url']
        //  ))
        // );
        $html = sprintf(
            '<a href="%1$s" class="custom-logo-link" rel="home"><img src="%2$s" class="custom-logo" alt="Logo Switcher"></a>',
            $url,
            $src
        );
        return $html;
    } else return $html;
}, 10, 3);

我最初是通过 javascript(jQuery) 执行此操作的,我正在排队一个脚本,该脚本用类似于 $_POST['qc_lpp_original_image_url'] 的 src 替换图像组件,但这发生在页面加载后,我不希望那样。

有没有办法让它在过滤器中发生(可能在元框保存功能中)?

标签: phpjquerywordpress

解决方案


推荐阅读