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

Question

我将 Dazzling 主题与 WooCommerce 插件一起使用，并且在包含产品的 WooCommerce 页面上，产品图片也显示为我的特色图片。我有一个特色图片集，但产品图片似乎覆盖了它。

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

我用来加载我的特色图片作为 div 的背景的代码 sn-p 是

<?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' );
    }
}

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

然后您创建一个元框并为其保存函数。现在，由于您想拥有特色图像的功能，您需要一些 jquery 才能使其全部工作。这就是为什么您需要将一个单独的脚本排入队列，该脚本只会出现在您的后端（这就是您连接到admin_enqueue_scripts 的原因）。

在你的 admin.js 中，你已经把它放在你的 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');
    }

});

我已经在 25 岁时对其进行了测试，并且可以正常工作：

然后你可以简单地使用它

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

希望这会有所帮助:)