WooCommerce产品图像覆盖我的精选图像-Wordpress

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/

但是车，结账等上的代码片段，看起来不错！ ​​

任何想法如何防止这种情况发生？

Answer 1

好吧，我建议你为你的帖子和页面创建单独的metabox，以便能够使用不同的图像作为你的面包屑图像。

创建metabox

在你functions.php或任何你把你的metaboxes，把这个代码（应该是工作）：

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

，第一部分在您的网页和帖子创建一个面包屑metabox 。对于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'); 
    } 

}); 

我在二十五测试，它的工作：

然后您可以通过它简单地使用它

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

希望这有助于:)