Приветствую вас, уважаемы читатели!
В этой статье вы узнаете, как можно сделать похожие записи для 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;
}
На этом буду заканчиваться эту статью. Если вам что-то не понятно или у вас имеются какие-нибудь идеи по улучшению моей статьи, пишите в комментариях, буду рад. Всем спасибо, всем пока!!!
Чем дальше, тем интереснее! Будь в курсе!