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

希望這有助於:)