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