WooCommerce产品图像覆盖我的特色图像 - Wordpress [英] WooCommerce product image overwriting my featured image - Wordpress

问题描述

我正在使用带有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 =featureImgstyle =background-image：url（'<？php echo $ image [0];？>'）> 
< / div> 
<？php endif; ？> 
  

您可以在此页面上看到它

然后你就可以使用它了

  $ custom = get_post_custom（get_the_ID（））; 
 $ custom ['breadcrumbs_image'] [0]; 
  

希望这会有所帮助：）

I'm using the Dazzling theme with the WooCommerce Plugin and on the WooCommerce pages that have products on them, the product image is also showing up as my featured image. I have a featured image set, but the product image seems be overwriting it.

The Feature image I have set is for all the shop pages is home_off.jpg. The cart and checkout pages look fine and are loading the proper feature image (no product images on those pages) So I guess the product image on the catalogue pages is using same/similar post_thumbnail code?

the code snippet I'm using to load my featured image as the background of a div is

<?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; ?>

You can see it best on this page http://dev.tdfinternational.net/index.php/product/finding-your-place-the-tdf-map-book/

But cart, checkout, etc, are looking good! http://dev.tdfinternational.net/index.php/cart/

Any idea how to keep this from happening?

解决方案

Ok, so what I recommend is that you create separate metabox for your posts and pages that will have the ability to use different image as your breadcrumbs image.

Create metabox

In your functions.php or wherever you put your metaboxes, put this code (should be working):

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

The first part creates a breadcrumbs metabox in your pages and posts. For woocommerce product you should probably add product to the $types array.

Then you create a metabox and save function for it. Now, since you want to have the functionality of a Featured image, you'll need some jquery to make it all work. That's why you need to enqueue a separate script that will appear only in your backend (that's why you're hooking to admin_enqueue_scripts).

And in your admin.js that you've put in your js theme folder, just put this:

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

});

I've tested it in Twenty Fifteen and it's working:

And you can then use it by simply

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

Hope this helps :)

这篇关于WooCommerce产品图像覆盖我的特色图像 - Wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！