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

Приветствую вас, уважаемы читатели!

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

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

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

Вывод миниатюры записи wordpress

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

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

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

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

У каждого будут свои блоки, все зависит от шаблона. Тут вам нужно посмотреть есть ли блок с миниатюрами. Если он есть, то включаем его, если нет, то поехали дальше.

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

add_theme_support('post-thumbnails');

Теперь проверяем появился ли в записях блок с миниатюрами. На 98%, если вы все сделали правильно, блок должен был появиться. На всякий пожарный случай, если блок у вас все-таки не появился, вместо первого кода, туда же, вставьте вот этот код:

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

Один из них обязательно должен сработать. Хотя у меня дело до второго кода никогда не доходило. С миниатюрами разобрались, поехали дальше.

Выводим похожие записи без плагина

Для начала нужно определиться с местом отображения блока. Как правило, ставиться он сразу после текста статьи. Для этого в редакторе заходим в файл 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($categories as $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 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,

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

После того как вы сохраните файл, на странице с записью вы можете сразу увидеть блок с похожими записями. Но выглядеть он будет не очень презентабельно. Для этого мы с вами зададим ему свои стили. Заходим в файл  style.css и в самом конце вставляем вот этот код

.katalog { /* общие стили для блока */
	width: 99%; /* общая ширина блока */
	margin: 0 auto; /* внешние отступы сверху и снизу, а также выравнивание по центру */
}
.katalog li{ /* стили для одной записи */
    border: 2px solid #CCCCCC; /* рамка */
    border-radius: 20px 0px; /* закругления */
    box-shadow: rgba(50, 50, 50, 0.74902) 4px 4px 5px 0px; /* тень */
	padding: 0 0 0 6px; /* внутренний отступ */
    margin: 11px 13px 20px 0; /* внешний отступ */
    display: block;
    text-decoration: none; /* текст без подчеркивания */
    text-align: center; /* текст по центру */
    cursor: pointer; /* изменение курсора */
    background-color: rgb(236, 230, 202); /* цвет заднего фона */
	float: left; /* миниатюры располагаются слева от соседней */
	height: 270px; /* высота ячейки с миниатюрой и заголовком */
	width: 28%; /* ширина ячейки */
	overflow:hidden; /* скрываем все что не поместилось в ячейку */
}
.katalog li:hover{ /* стили для одной записи при наведении */
    background-color: #F7E56C;/* изменение цвета заднего фона при наведении */
}
.katalog a:visited img { /* стили картинки посещенной записи */
	border: 4px solid #F76400; /* стили картинки посещенной записи, изменение цвета рамки картинки */
}
.katalog img{/* стили картинки */
	width: 90%; /* ширина картинки % считается от блока в котором она находится */
	height: auto; /* высота картинки */
	border: 4px solid #6FA80D; /* рамка картинки */
	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: 4px solid #6FA80D;
	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: #2A960C;
	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: #2A960C;
	text-decoration: none;
}
.katalog a:visited {
    color: #F76400; /* Цвет посещенных ссылок */
}

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

.katalog li{
	float: left;
	height: auto;
	width: 28%;
	margin: 5px 16px 10px 0;
	list-style: none;
	padding: 4px;
	display: block;
}
.katalog a{
	font:13px arial;
	text-decoration:none;
}
.katalog img {
	margin: 0 0 3px 0;
	padding: 0;
	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: 0 0 6px #A5A5A5;
}

На этом буду заканчиваться эту статью. Если вам что-то не понятно или у вас имеются какие-нибудь идеи по улучшению моей статьи, пишите в комментариях, буду рад. Всем спасибо, всем пока!!!

Загрузка…

• 
  

  Как создать свой сайт?

• Ваше имя
• Ваш email-адрес
  

Интересные статьи по теме: