Як додати зображення до категорії WordPress і відобразити його на сайті Overcod.net

Як додати зображення до категорії WordPress і відобразити його на сайті

У стандартному WordPress категорії не мають зображень. Але іноді це потрібно:
✔ для каталогу товарів,
✔ для рубрик новин,
✔ для красивої сітки категорій,
✔ для блогу з прев’ю.

У цій статті розберемо, як додати можливість завантажувати картинку для кожної категорії, зберегти її і відобразити на сайті.
Жодних плагінів — тільки невеликий шматок коду.

1. Додаємо поле “Зображення” до категорії

Цей код виводить нове поле та дві кнопки:
+ завантажити
– видалити

Скопіюйте код і вставте у файл:

/wp-content/themes/ВАША_ТЕМА/functions.php

або у functions.php дочірньої теми (бажано).

Код додавання поля та медіазавантажувача

add_action( 'category_edit_form_fields', 'mayak_update_category_image' , 10, 2 ); 
function mayak_update_category_image ( $term, $taxonomy ) { 
?>
   <style>
   img{border:3px solid #ccc;}
   .term-group-wrap p{float:left;}
   .term-group-wrap input{font-size:18px;font-weight:bold;width:40px;}
   #bitton_images{font-size:18px;}
   #bitton_images_remove{font-size:18px;margin:5px 5px 0 0;}
   </style>

   <tr class="form-field term-group-wrap">
     <th scope="row">
       <label for="id-cat-images">Изображение</label>
     </th>
     <td>
       <p><input type="button" class="button bitton_images" id="bitton_images" name="bitton_images" value="+" /><br>
       <input type="button" class="button bitton_images_remove" id="bitton_images_remove" name="bitton_images_remove" value="&ndash;" /></p>

       <?php $id_images = get_term_meta ( $term->term_id, 'id-cat-images', true ); ?>
       <input type="hidden" id="id-cat-images" name="id-cat-images" value="<?php echo $id_images; ?>">

       <div id="cat-image-miniature">
         <?php if (empty($id_images)) { ?>
           <img src="/wp-content/uploads/2023/03/logo.png" alt="Zaglushka" width="84" height="89"/>
         <?php } else {?>
           <?php echo wp_get_attachment_image($id_images, 'thumbnail'); ?>
         <?php } ?>
       </div>
     </td>
   </tr>

<?php
if(preg_match("#tag_ID=([0-9.]+)#", $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']))
add_action( 'admin_footer', 'mayak_loader' );
function mayak_loader() { ?>
   <script>
     jQuery(document).ready(function($) {
       function mayak_image_upload(button_class) {
         var mm = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var mt = $(this);
           mm = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if (mm) {
               $('#id-cat-images').val(attachment.id);
               $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;" />');
               $('#cat-image-miniature .custom_media_image').attr('src',attachment.sizes.thumbnail.url).css('display','block');
             } else {
               return _orig_send_attachment.apply(mt, [props, attachment]);
             }
           }
           wp.media.editor.open(mt);
           return false;
         });
       }

       mayak_image_upload('.bitton_images.button');

       $('body').on('click','.bitton_images_remove',function(){
         $('#id-cat-images').val('');
         $('#cat-image-miniature').html('<img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;" />');
       });

       $(document).ajaxComplete(function(event, xhr, settings) {
         var mk = settings.data.split('&');
         if( $.inArray('action=add-tag', mk) !== -1 ){
           var mh = xhr.responseXML;
           var mr = $(mh).find('term_id').text();
           if(mr!=""){
             $('#cat-image-miniature').html('');
           }
         }
       });
     });
   </script>
<?php 
  }
}

2. Збереження зображення категорії

Цей код записує ID зображення в базу даних:

add_action( 'edited_category','mayak_updated_category_image' , 10, 2 );
function mayak_updated_category_image ( $term_id, $tt_id ) {
   if( isset( $_POST['id-cat-images'] ) && '' !== $_POST['id-cat-images'] ){
     update_term_meta($term_id, 'id-cat-images', $_POST['id-cat-images']);
   } else {
     update_term_meta($term_id, 'id-cat-images', '');
   }
}

3. Як вивести зображення категорії на сайті

Залежить від того, де ви хочете його показати.

Варіант 1: В середині файлів категорії (category.php, archive.php)

Обычно шлях:

/wp-content/themes/ВАША_ТЕМА/category.php

Вставте туди:

<?php
$term = get_queried_object();
$image_id = get_term_meta($term->term_id, 'id-cat-images', true);

if ($image_id) {
    echo '<div class="category-image">';
    echo wp_get_attachment_image($image_id, 'large');
    echo '</div>';
}
?>

Варіант 2: Вивести список підкатегорій з картинками

Часто використовують для каталогу.

Вставте функцію у functions.php:

function mayak_cats_images(){
$ags = array(
'taxonomy'=>'category',
'parent' => get_query_var('cat'),
'meta_query' => array(array('key' => 'id-cat-images')),
);

$terms = get_terms($ags);
$count = count($terms);

if($count > 0){
     echo '<div class="cat-thumbnail">';
     foreach ($terms as $term) {
       $image_id = get_term_meta($term->term_id, 'id-cat-images', true);

       echo '<style>
         .cat-thumbnail img { width: 100%; height: auto; }
       </style>';

       echo wp_get_attachment_image($image_id, 'large');

       echo '<h3>
         <a href="'.get_category_link($term->term_id).'">' 
           . $term->name .
         '</a>
       </h3>';
     }
     echo '</div>';
 }
}

Тепер ви можете вивести сітку підкатегорій у будь-якому місці шаблону: