Вывод похожих записей для wordpress с миниатюрами без плагина

4 Июн 2017 - Жукова Татьяна Нет комментариев
Просмотров: 3487

вывод похожих записей

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

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

Шаг 1. Включаем поддержку миниатюр для вывода похожих записей

Итак, в первую очередь нам надо узнать поддерживает ли ваш шаблон wordpress миниатюры. Для этого заходим в «Записи – Добавить новую» и в колонке с правой стороны ищем блок «Миниатюры записи» или «Изображение записи». Обычно он расположен в самом низу.

Если у вас есть такой блок, то следующий абзац можете не читать и перейти сразу же к Шагу 2.

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

В зависимости от шаблона, у всех будут разные блоки, но суть у всех одинакова — надо посмотреть имеется ли у вас блок с миниатюрами. Если он есть, то включаем его,

если нет, то включаем эту функцию у себя в шаблоне. Заходим во «Внешний вид – Редактор» и выбираем файл «Функции темы» (functions.php). В самом начале после <?php вставляем вот этот код.

add_theme_support('post-thumbnails');

 

включить миниатюры

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

if ( function_exists('add_theme_support') )
add_theme_support('post-thumbnails');

Результат должен появиться. У меня на моих шаблонах всегда обходилось с первым кодом.

Читайте также:  Лучший хостинг - HandyHost

Шаг 2. Вносим изменения в single.php

В редакторе заходим в файл single.php и ищем функцию, которая отвечает за вывод контента статьи: <?php the_content(); ?>.

Нажав «Ctrl+F» вводим в поле поиска «the_content», так как функция может быть немного другой, а нам нужно строчка, где есть «the_content». В той строке, где нашли это сочетание, сразу же после ?> вставляем вот этот код:

<!-- похожие записи -->
<h3>Интересные статьи по теме:</h3>
<div align="center"class="katalog">
<?php
$categories = get_the_category($post->ID); if ($categories) { $category_ids= array(); foreach($categoriesas$individual_category) $category_ids[] = $individual_category->term_id; $args=array( 'category__in' => $category_ids,//сортировка по категориям
'post__not_in' => array($post->ID), 'showposts'=>3,//количество выводимых ячеек 'orderby'=>rand, 'caller_get_posts'=>1);//исключаем одинаковые записи $my_query = new wp_query($args); if( $my_query->have_posts() ) { echo '<ul>'; while ($my_query->have_posts()) { $my_query->the_post(); ?> <li><a target="_blank" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"> <?php the_post_thumbnail(array(150,150)); ?><br /><?php the_title(); ?></a></li> <?php } echo '</ul>'; } wp_reset_query(); } ?> </div> <!--  похожие записи--> 

Здесь вы можете изменить по своему вкусу несколько параметров. Во-первых, название блока и тег h3 на другой

<h3>Интересные статьи по теме:</h3>

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

'category__in' => $category_ids,

заменить на код

'tag__in' => $tag_ids,

ну и в строчке

'showposts'=>3,

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

Читайте также:  Что такое GZIP-сжатие и как его включить

Шаг 3. Редактируем стили вывода похожих записей

Заходим в редакторе в style.css и вставляем в конец следующий код. С ним вы можете поработать, чтобы изменить на нужные вам цвета.

.katalog li{
    float:left;height:auto;width:28%;
   margin:5px16px10px;list-style:none;padding:4px;display: block; } .katalog a{    font:13px arial;    text-decoration:none; } .katalog img {    margin:  3px ;    padding: ;    height: auto;    width: 100%; } .katalog a {     color :#333;    text-decoration: none;     display:block;    padding: 4px;    width: 100%; } .katalog li:hover {     
    background-color:rgba(255, 255, 255, 0.45);    box-shadow:   6px #A5A5A5; } 

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

/*------------------- стили похожих записей ------------------*/
.katalog { /* общие стили для блока */
width: 100%; /* общая ширина блока */
margin: avto; /* внешние отступы сверху и снизу, а также выравнивание по центру */
}
.katalog li{ /* стили для одной записи */
border: 2px solid #7a1632; /* рамка */
border-radius: 20px 0px; /* закругления */
box-shadow: rgba(50, 50, 50, 0.74902) 4px 4px 5px 0px; /* тень */
padding: 0 0 0 6px; /* внутренний отступ */
margin: 0px 13px 20px 0; /* внешний отступ */
display: block;
text-decoration: none; /* текст без подчеркивания */
text-align: center; /* текст по центру */
cursor: pointer; /* изменение курсора */
background-color: #fefcfd; /* цвет заднего фона */
float: left; /* миниатюры располагаются слева от соседней */
height: 230px; /* высота ячейки с миниатюрой и заголовком */
width: 28%; /* ширина ячейки */
overflow:hidden; /* скрываем все что не поместилось в ячейку */
}
.katalog li:hover{ /* стили для одной записи при наведении */
background-color: #ebddf7;/* изменение цвета заднего фона при наведении */
}
.katalog a:visited img { /* стили картинки посещенной записи */
border: 2px solid #d9113b; /* стили картинки посещенной записи, изменение цвета рамки картинки */
}
.katalog img{/* стили картинки */
width: 90%; /* ширина картинки % считается от блока в котором она находится */
height: auto; /* высота картинки */
border: 1px solid #791624; /* рамка картинки */
border-radius: 20px 0; /* закругления по углам */
margin: 8px 6px 12px 0px; /* внутренние отступы картинки */
-moz-transition: all 0.5s ease-out; /* эффект увеличения */
-o-transition: all 0.5s ease-out; /* эффект увеличения */
-webkit-transition: all 0.5s ease-out; /* эффект увеличения */
}
.katalog li:hover img{ /* стили картинки при наведении на блок */
width: 90%;
height: auto;
border: 2px solid #f6051c;
border-radius: 25%;
margin: 8px 6px 12px 0px;
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.katalog li:hover a{ /* стили ссылки при наведении на блок */
border: 0pt none;
margin: 3px 0pt 0pt;
padding: 0pt;
font-family: ;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 12px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
color: #fb0208;
text-decoration: underline;
}
.katalog a{ /* стили ссылки */
border: 0pt none;
margin: 3px 0pt 0pt;
padding: 0pt;
font-family: ;
font-style: normal;
font-variant: normal;
font-weight: 600;
font-size: 12px;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
color: #8a1727;
text-decoration: none;
}
.katalog a:visited {
color: #ff0042; /* Цвет посещенных ссылок */
}

и тогда блок похожих записей у вас будет с эффектами. Выбор за вами! Удачи!


Посмотрите другие статьи из этой рубрики:




Хотите быть в курсе новостей блога?

Подпишитесь на бесплатную рассылку новых статей
Ваш e-mail:

Есть что сказать? Оставьте комментарий!