Картинки для рубрик — wordpress изображение

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

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

Это камень в огород разработчиков WP (краткое название движка), почему они не до сих пор не додумались внедрить такую функцию, а он я так считаю очень необходим. Изображения для рубрик просто необходимы!

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

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

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

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

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

Следующим шагом нам нужно открыть файл для редактирования functions.php и вставить следующую функцию в самое начало, после знака<?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="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/>
<?php } else {?>
<?php echo wp_get_attachment_image ( $id_images, 'thumbnail' ); ?>
<?php } ?>
</div>
</td>
</tr>
<?php
}

Хочу особо отметить строчку под номером 22.

;

<img src="Путь до картинки-заглушки" alt="Zaglushka" width="84" height="89"/>

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

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

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

Чтобы наш загрузчик картинок начал свою работу, нужно проделать следующую манипуляцию. Копируем и вставляем в файл functions.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 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 ('<img class="custom_media_image" src="« style=»margin:0;padding:0;max-height:100px;float:none;" />');
$('#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 ('<img class="custom_media_image" src="« style=»margin:0;padding:0;max-height:100px;float:none;" />');
});
$(document).ajaxComplete (function (event, xhr, settings) {
var mk = settings.data.split ('&');
if ( $.inArray ('action=add-tag', mk) !== -1 ){
var mh = xhr.responseXML;
$mr = $(mh).find ('term_id').text ();
if ($mr!="«){
$('#cat-image-miniature').html ('');
}
}
});
});
</script>
<?php }

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

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

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

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

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

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'] ){
$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» после обновления страницы редактирования рубрики, появятся вот такие данные.

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

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

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

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

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

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

• 1 Исходный размер-full
• 2 Крупный размер-large
• 3 Средний размер-medium
• 4 Миниатюра-thumbnail

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

echo '<div class="image_id">'.wp_get_attachment_image ($image_id, 'medium').category_description ().'</div>';

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

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

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

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"><ul>';
foreach ($terms as $term) {
$term_taxonomy_id = $term->term_taxonomy_id;
$image_id = get_term_meta ( $term_taxonomy_id, 'id-cat-images', true );
echo '<li>
<a href="'.get_category_link ($term_taxonomy_id).'">'.wp_get_attachment_image ( $image_id, 'thumbnail' ).'</a>
<a href="'.get_category_link ($term_taxonomy_id).'">'.$term->name.'</a>
</li>';
}
echo '</ul></div>';
}
}

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

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

<?php mayak_cats_images (); ?>

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

.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;
}
}

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

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