Изображение продукта WooCommerce переписывает мое изображение – WordPress

Я использую тему Dazzling с плагином WooCommerce и на страницах WooCommerce, на которых есть продукты, изображение продукта также отображается в качестве моего изображенного изображения. У меня есть установленный набор изображений, но изображение продукта, похоже, перезаписывает его.

Изображение Feature, которое я установил для всех страниц магазина, является 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/

Любая идея, как это избежать?

Хорошо, поэтому я рекомендую вам создать отдельный обмен для ваших сообщений и страниц, которые будут иметь возможность использовать другое изображение в качестве изображения вашей панировки.

Создать обмен

В вашем файле 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 .

Затем вы создаете для него функцию метаболизма и сохранения. Теперь, поскольку вы хотите иметь функциональность Featured image, вам понадобится jquery, чтобы все это работало. Вот почему вам нужно вставить отдельный сценарий, который появится только в вашем бэкэнд (вот почему вы подключаетесь к admin_enqueue_scripts ).

И в вашем admin.js который вы вложили в папку js theme, просто поставьте это:

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

Надеюсь это поможет 🙂