Код отображение картинки категории

Как отображать картинку категории в wordpress

На одном из сайтов wordpress нужно было сделать отображение картинки категории на странице. Решил это написанием простой функции. Она применяется к обычным категориям, а также будет показывать картинку категории woocommerce.

Пошаговая инструкция с картинками

Для того чтобы активировать картинку категории wordpress нужно сделать следующее:

1. Входим в админ-панель wordpress, Открываем Внешний вид-Редактор-Функции темы (файл function.php)

Файл функций wordpress
Файл функций wordpress

2. Добавляем следующий код:
add_action( ‘woocommerce_archive_description’, ‘woocommerce_category_image’, 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo ‘<img class=»category-product-image» src=»‘ . $image . ‘» alt=»‘.$cat->name.'» />';
}
}
}

Все. Он позволит отображать картинку на странице категории, в том числе и для интернет-магазинов на woocommerce.

Отображение картинки категории wordpress (woocommercs)
Отображение картинки категории wordpress (woocommercs)

Как сделать всплывающую картинку категории при нажатии на нее

Для того, чтобы картинка всплывала при нажатии нужно добавить тег <a> в код и активировать плагин (например, самый простой LightBox).

1. Заменяем код выше этим полный кодом:
add_action( ‘woocommerce_archive_description’, ‘woocommerce_category_image’, 2 );
function woocommerce_category_image() {
if ( is_product_category() ){
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, ‘thumbnail_id’, true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo ‘<a href=»‘ . $image . ‘»><img class=»category-product-image» src=»‘ . $image . ‘» alt=»‘.$cat->name.'» /></a>';
}
}
}

2. Активируем плагин LightBox.

Всплывающая картинка категории  при нажатии wordpress (woocommerce)
Всплывающая картинка категории при нажатии wordpress (woocommerce)

Пользуемся и радуемся. Если что-то не работает или нужно отредактировать — пишите в комментариях, буду помогать  :wink:

0 Comments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

девять + 18 =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">