Question

我在WooCommerce插件中使用了炫目主题，在其上有产品的WooCommerce页面上，产品图片也显示为我的精选图片。我有一个精选的图像集，但产品图像似乎覆盖了它。

我设置的功能图像适用于所有商店页面是home_off.jpg。购物车和结帐页面看起来很好并且正在加载正确的特征图像（这些页面上没有产品图像）所以我猜目录页面上的产品图像使用相同/类似的post_thumbnail代码？

我用来加载我的精选图片作为div背景的代码片段

<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),
'single-post-thumbnail' ); ?>
<div id="featureImg" style="background-image: url('<?php echo $image[0]; ?>')">
</div>
<?php endif; ?>

您可以在此页http://dev.tdfinternational.net/index.php/product/finding-your-place-the-tdf-map-book/

上看到最佳效果

但是购物车，结账等都看起来不错！ http://dev.tdfinternational.net/index.php/cart/

知道如何防止这种情况发生吗？

Answer 1

好的，所以我建议您为帖子和页面创建单独的元数据库，以便能够使用不同的图像作为面包屑图像。

创建元数据

在functions.php或您放置元数据的任何地方，放置此代码（应该正常工作）：

add_action( 'add_meta_boxes', 'my_add_custom_box' );

function my_add_custom_box($postType) {
    $types = array('page', 'post');
    if(in_array($postType, $types)){
        add_meta_box(
                'breadcrumbs-image-metabox-options',
                esc_html__('Breadcrumbs', 'yourtheme' ),
                'breadcrumbs_image_meta_box',
                $postType,
                'side',
                'low'
        );
    }
}

if (!function_exists('breadcrumbs_image_meta_box') ) {
    function breadcrumbs_image_meta_box($post) {
        $custom = get_post_custom( $post->ID );
        $breadcrumbs_image = (isset($custom["breadcrumbs_image"][0])) ? $custom["breadcrumbs_image"][0] : '';
        wp_nonce_field( 'breadcrumbs_meta_box', 'breadcrumbs_meta_box_nonce' );
        ?>
        <style type="text/css">
            .hidden{display: none;}
            .postbox .separator{padding-top: 0;margin-top: 20px;}
        </style>
        <p class="separator">
            <input id="breadcrumbs_image_input" type="hidden" name="breadcrumbs_image" value="<?php echo esc_html($breadcrumbs_image); ?>"/>
            <a title="<?php esc_html_e('Set Breadcrumbs Image', 'mytheme'); ?>" href="#" id="add-post-breadcrumbs_image">
            <?php
                if(!empty($custom["breadcrumbs_image"][0]) ){
                    echo '<img width="254" src="'.esc_url($breadcrumbs_image).'" />';
                } else{
                    esc_html_e('Set Breadcrumbs Image', 'mytheme');
                } ?></a>
            <?php
                if (empty($custom["breadcrumbs_image"][0])) {
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'" href="#" id="remove-post-breadcrumbs_image" class="hidden">'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'</a>';
                } else{
                    echo '<a title="'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'" href="#" id="remove-post-breadcrumbs_image" >'.esc_html__('Remove Breadcrumbs Image', 'mytheme').'</a>';
                }
            ?>
        </p>
        <?php
    }
}

add_action( 'save_post', 'save_breadcrumbs_image_meta_box' );

if ( ! function_exists( 'save_breadcrumbs_image_meta_box' ) ){
    function save_breadcrumbs_image_meta_box( $post_id ){
        if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
            return;
        }
        if( !current_user_can( 'edit_pages' ) ) {
            return;
        }
        if( !isset( $_POST['breadcrumbs_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['breadcrumbs_meta_box_nonce'], 'breadcrumbs_meta_box' ) ) {
            return;
        }

        $breadcrumbs_image = (isset($_POST["breadcrumbs_image"]) && $_POST["breadcrumbs_image"]!='') ? $_POST["breadcrumbs_image"] : '';
        update_post_meta($post_id, "breadcrumbs_image", $breadcrumbs_image);

    }
}


add_action('admin_enqueue_scripts', 'backend_scripts');

if ( ! function_exists( 'backend_scripts' ) ){
    function backend_scripts() {
        wp_enqueue_script( 'breadcrumbs_image_upload', get_template_directory_uri().'/js/admin.js' );
    }
}

第一部分在您的页面和帖子中创建了一个breadcrumbs元框。对于woocommerce产品，您应该将product添加到$types数组。

然后为它创建一个元箱并保存功能。现在，既然你想拥有一个特色图像的功能，你需要一些jquery来使它全部工作。这就是为什么你需要排队一个只出现在你后端的单独脚本（这就是为什么你要挂钩admin_enqueue_scripts）。

在您放入js主题文件夹的admin.js中，只需输入：

jQuery(document).ready(function($) {
    "use strict";

    //Breadcrumbs Image
    $(document).on('click', '#add-post-breadcrumbs_image', upload_breadcrumbs_image_button);

    function upload_breadcrumbs_image_button(e) {
        e.preventDefault();
        var $input_field = $(this).prev();
        var $image = $('#add-post-breadcrumbs_image');
        var custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Add Breadcrumbs Image',
            button: {
                text: 'Add Breadcrumbs Image'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            var attachment = custom_uploader.state().get('selection').first().toJSON();
            $input_field.val(attachment.url);
            $image.html('');
            $image.html('<img width="254" src="'+attachment.url+'" />');
            $('#remove-post-breadcrumbs_image').removeClass('hidden');
        });
        custom_uploader.open();
    }

    $(document).on('click', '#remove-post-breadcrumbs_image', remove_breadcrumbs_image_button);

    function remove_breadcrumbs_image_button(e){
        e.preventDefault();
        var $input_field = $('#breadcrumbs_image_input');
        var $image = $('#add-post-breadcrumbs_image');

        $input_field.val('');
        var title = $image.attr('title');
        $image.html(title);
        $('#remove-post-breadcrumbs_image').addClass('hidden');
    }

});

我在Twenty Fifteen中测试了它并且它正在工作：

然后您可以通过

来使用它

$custom = get_post_custom(get_the_ID());
$custom['breadcrumbs_image'][0];

希望这会有所帮助：）

WooCommerce产品图像覆盖我的特色图像 - Wordpress

1 个答案: