Приветствую вас, уважаемы читатели!
В этой статье вы узнаете, как можно сделать похожие записи для 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». В строчке, где нашли это сочетание, сразу же после ?> вставляем вот этот код:
&amp;lt;h3&amp;gt;Интересные статьи по теме:&amp;lt;/h3&amp;gt; &amp;lt;!-- похожие записи --&amp;gt; &amp;lt;div align="center" class="katalog"&amp;gt;&amp;lt;?php $categories = get_the_category($post-&amp;gt;ID); if ($categories) { $category_ids = array(); foreach($categories as $individual_category) $category_ids[] = $individual_category-&amp;gt;term_id; $args=array( 'category__in' =&amp;gt; $category_ids,//сортировка по категориям 'post__not_in' =&amp;gt; array($post-&amp;gt;ID), 'showposts'=&amp;gt;3,//количество выводимых ячеек 'orderby'=&amp;gt;rand, 'caller_get_posts'=&amp;gt;1);//исключаем одинаковые записи $my_query = new wp_query($args); if( $my_query-&amp;gt;have_posts() ) { echo '&amp;lt;ul&amp;gt;'; while ($my_query-&amp;gt;have_posts()) { $my_query-&amp;gt;the_post(); ?&amp;gt; &amp;lt;li&amp;gt;&amp;lt;a href="&amp;lt;?php the_permalink() ?&amp;gt;" rel="bookmark" title="&amp;lt;?php the_title(); ?&amp;gt;"&amp;gt; &amp;lt;?php the_post_thumbnail(array(150,150)); ?&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;?php the_title(); ?&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt; &amp;lt;?php } echo '&amp;lt;/ul&amp;gt;'; } wp_reset_query(); } ?&amp;gt; &amp;lt;/div&amp;gt;&amp;lt;!-- похожие записи--&amp;gt;Здесь мы с вами, по желанию, будем изменять только пару параметров:
&amp;lt;h3&amp;gt;Интересные статьи по теме:&amp;lt;/h3&amp;gt;С этой строчкой мне кажется все понятно. Вы можете поменять текст на свой и изменить тег h3 на любой другой.
'category__in' =&amp;gt; $category_ids,Заменив этот код на этот:
'tag__in' =&amp;gt; $tag_ids,Мы будем выводить похожие статьи по меткам (тегам), а не категориям, как в первом коде. Я хотел найти способ, чтобы можно было выводить и по тегам и по категориям одновременно, но у меня ничего не получилось. Если вы найдете, как это сделать, поделитесь, пожалуйста. А пока, либо только по метка, либо только по категориям.
'showposts'=&amp;gt;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; }На этом буду заканчиваться эту статью. Если вам что-то не понятно или у вас имеются какие-нибудь идеи по улучшению моей статьи, пишите в комментариях, буду рад. Всем спасибо, всем пока!!!
Спасибо. Из всех статей на эту тему самая компетентная. Поставил ваш вариант. Сергей
Олег, спасибо огромное за ваш труд, статья понравилась, поставлю себе такой же вывод
Перерыл кучу статей и здесь стили самые классные, спасибо