Расширяем возможности движка WordPress.

kartinki dlia rubrikПриветствую вас! Сегодня мы с вами будем расширять возможности движка Вордпресс, а именно «Картинки для рубрик — wordpress изображение». В банальной сборке движка Вордпресс, к сожалению, нет такой функции. Такая функция существует у записей single и у страниц page, но категории как-то упустили из виду. Это камень в огород разработчиков WP (краткое название движка), почему они не до сих пор не додумались внедрить такую функцию, а он я так считаю очень необходим. Изображения для рубрик просто необходимы! К примеру, у ваших рудрик, существует множество подрубрик, и наша задача будет состоять в том, чтобы вывести все наши подрубрики в виде каталога с миниатюрками на страничке родительской категории.

К сожалению эта проблема многих блогов. Понятно, что присутствие личного изображения, которое закреплено за каждой категорией заметно упростит решение этой задачи. Но тут напрашивается вопрос, а как это сделать? Конечно самым простым вариантом будет воспользоваться плагином «Taxonomy Images» или ждать неопределенное время, пока разработчики наконец прозреют и решат данную проблему. Я думаю эти варианты нам не подойдут, и мы самостоятельно создадим такую функцию. Ну что, приступим?

Создаем функцию «каркас» для вывода рисунков.

Чтобы у нас все выглядело наикрасивейшим образом, первым что нам необходимо сделать, это продумать изображение заглушку, которая будет отражаться в админ панели управления сайтом, но это только в случае если у вас не задана картинка для рубрики. Вы можете воспользоваться моим вариантом заглушки. kartinki dlia rubrik 1

Следующим шагом нам нужно открыть файл для редактирования functions.php и вставить следующую функцию в самое начало, после знака<?php. 

add_action( 'category_edit_form_fields', 'kopslav_update_category_image' , 10, 2 );
function kopslav_update_category_image ( $term, $taxonomy ) {
?&gt;
 &lt;style&gt;
 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;}
 &lt;/style&gt;
 &lt;tr class="form-field term-group-wrap"&gt;
 &lt;th scope="row"&gt;
 &lt;label for="id-cat-images"&gt;Изображение&lt;/label&gt;
 &lt;/th&gt;
 &lt;td&gt;
 &lt;p&gt;&lt;input type="button" class="button bitton_images" id="bitton_images" name="bitton_images" value="+" /&gt;&lt;/br&gt;
 &lt;input type="button" class="button bitton_images_remove" id="bitton_images_remove" name="bitton_images_remove" value="&amp;ndash;" /&gt;&lt;/p&gt;
 &lt;?php $id_images = get_term_meta ( $term -&gt; term_id, 'id-cat-images', true ); ?&gt;
 &lt;input type="hidden" id="id-cat-images" name="id-cat-images" value="&lt;?php echo $id_images; ?&gt;"&gt;
 &lt;div id="cat-image-miniature"&gt;
 &lt;?php if (empty($id_images )) { ?&gt;
 &lt;img src="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/&gt;
 &lt;?php } else {?&gt;
 &lt;?php echo wp_get_attachment_image ( $id_images, 'thumbnail' ); ?&gt;
 &lt;?php } ?&gt;
 &lt;/div&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
&lt;?php
}
Хочу особо отметить строчку под номером 22.
&lt;img src="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/&gt;

Здесь мы прописываем путь до изображения-заглушки. На странице редактирования категорий, после проделанных манипуляций, должен появиться интерфейс для добавления рисунков. 

kartinki dlia rubrik 2
Не ждите что кнопки начнут работать сразу, им еще необходимо привязать банальный загрузчик картинок WP.

Изображения WordPress-вгоняем загрузчик.

Чтобы наш загрузчик картинок начал свою работу, нужно проделать следующую манипуляцию. Копируем и вставляем в файл functions.php следующий код. 

add_action( 'admin_footer', 'kopslav_loader'  );
function kopslav_loader() { ?&gt;
   &lt;script&gt;
     jQuery(document).ready( function($) {
       function kopslav_image_upload(button_class) {
         var mm = true,
         _orig_send_attachment = wp.media.editor.send.attachment;
         $('body').on('click', button_class, function(e) {
           var mb = '#'+$(this).attr('id');
           var mt = $(mb);
           mm = true;
           wp.media.editor.send.attachment = function(props, attachment){
             if (mm) {
               $('#id-cat-images').val(attachment.id);
               $('#cat-image-miniature').html('&lt;img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" /&gt;');
               $('#cat-image-miniature .custom_media_image').attr('src',attachment.sizes.thumbnail.url).css('display','block');
             } else {
               return _orig_send_attachment.apply( mb, [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('&lt;img class="custom_media_image" src="" style="margin:0;padding:0;max-height:100px;float:none;" /&gt;');
     });
     $(document).ajaxComplete(function(event, xhr, settings) {
       var mk = settings.data.split('&amp;');
       if( $.inArray('action=add-tag', mk) !== -1 ){
         var mh = xhr.responseXML;
         $mr = $(mh).find('term_id').text();
         if($mr!=""){
           $('#cat-image-miniature').html('');
         }
       }
     });
   });
&lt;/script&gt;
&lt;?php }

Теперь, если мы нажмем на плюс, то нам откроется до боли знакомый загрузчик изображений Вордпресс. 

kartinki dlia rubrik 3

Теперь грузим рисунок и его миниатюра будет отображаться на странице редактирования категории за место заглушки.

kartinki dlia rubrik 4
Вы думаете, что мы все сделали? Смею вас огорчить. Теперь нам необходимо занести информацию об картинках в базу данных. Это нужно проделать по одной простой причине. Если вы нажмете на «сохранить изменения», то выбранный рисунок просто исчезнет.

Сохраняем данные в таблице «wp_termmeta».

Идем дальше. Для настройки сохранения данных в «БД», проделываем следующее действие. 

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

 

Теперь в таблице «wp_termmeta» после обновления страницы редактирования рубрики, появятся вот такие данные. 

kartinki dlia rubrik 5

Мы получили следующее: в поле «meta_key» у нас записался ключ «id-cat-images», он будет одинаков для всех изображений, а вот в поле «meta_value» записался ID рисунка.

Чтобы вывести рисунок или рисунки в необходимом месте на блоге, этих данных вполне достаточно. Идем дальше.

Выводим картинки на страничке категории.

Открываем файл category.php или archive.php (взависимости от вашего шаблона) и вставляем вот этот код. Это нужно для того чтобы наша картинка выводилась на странице категории, к которой она прикреплена. 

&lt;?php
$term = get_category(get_query_var('cat'));
$cat_id = $term-&gt;cat_ID;
$image_id = get_term_meta($cat_id, 'id-cat-images', true);
echo '&lt;div class="image_id"&gt;'.wp_get_attachment_image($image_id, 'medium').'&lt;/div&gt;';
?&gt;

В строке под номером 5 указываем размер картинки:

1 Исходный размер-full.

2 Крупный размер-large.

3 Средний размер-medium.

4 Миниатюра-thumbnail.

Если вы хотите вывести рисунок с описанием категории, то в строку под номером 5 добавляем функцию «category_description ()».

echo '&lt;div class="image_id"&gt;'.wp_get_attachment_image($image_id, 'medium').category_description().'&lt;/div&gt;';

Можно привязать различные стили, для этого предназначен класс «image_id».

Выводим подрубрики в виде каталога (с миниатюрами).

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

function kopslav_cats_images(){
$ags = array(
'taxonomy'=&gt;'category',
'parent' =&gt; get_query_var('cat'),
'meta_query' =&gt; array(array('key' =&gt; 'id-cat-images',)),
);
$terms = get_terms($ags);
 $count = count($terms);
 if($count &gt; 0){
	 echo '&lt;div class="cat-thumbnail"&gt;&lt;ul&gt;';
	 foreach ($terms as $term) {
	 $term_taxonomy_id = $term-&gt;term_taxonomy_id;
	 $image_id = get_term_meta ( $term_taxonomy_id, 'id-cat-images', true );
	   echo '&lt;li&gt;
	   &lt;a href="'.get_category_link($term_taxonomy_id).'"&gt;'.wp_get_attachment_image ( $image_id, 'thumbnail' ).'&lt;/a&gt;
	   &lt;a href="'.get_category_link($term_taxonomy_id).'"&gt;'.$term-&gt;name.'&lt;/a&gt;
	   &lt;/li&gt;';
	 }
	 echo '&lt;/ul&gt;&lt;/div&gt;';
 }
}

Вставляем функцию в файл «functions.php». Дальше нам нужно найти файл, который у нас отвечает за вывод рубрик. В обычных случаях это файл «archive.php», но иногда это может быть и файл «category.php».

В файле в необходимое место (за пределами цикла WP) вставляем вот этот код для вызова функции. 

&lt;?php kopslav_cats_images(); ?&gt;

Я проделал данные манипуляции с помощью класса «cat-thumbnail», теперь без особого труда вы можете расставить ссылки и картинки, в нужном вам порядке. 

kartinki dlia rubrik 6

.cat-thumbnail {
    list-style-type: none;
	width:750px;
	text-align:center;
	margin:0 auto;
}
.cat-thumbnail li {
	width:160px;
	height:150px;
	float:left;
	margin: 5px 10px;
}
.cat-thumbnail a{
    font-size:16px;
}
/* Для мобильный устройств*/
@media screen and (max-width:760px){
.cat-thumbnail {
    width:auto;
    display:block;
    position:relative;
}
.cat-thumbnail ul {
    width:auto;
}
.cat-thumbnail li {
    float:left;
}
}

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

С уважением Вячеслав Коптяков!

 

Понравился материал? Поделитесь с друзьями!

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

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

:good:  :bye:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :-)  :rose:  :whistle:  :yes:  :cry:  :mail:  :-( 
:unsure:  ;-) 
 
Мой магазин
Shop
Подарок автора
dvd200
Отличный выбор
Дешевый хостинг. Выбор профессионалов!