Похожие статьи с миниатюрами в WordPress без плагина 29


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

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

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

На сегодняшний день миниатюры поддерживаются всеми темами (шаблонами) оформления. Достаточно при написании статьи выбрать подходящую картинку и всё готово.

 

Миниатюра к статье

Миниатюра к статье

По умолчанию размер миниатюр в WordPress задан 150х150 пикселей. Изменить эти размеры вы можете в разделе «Настройки» «Медиафайлы».

Код блока похожих статей с миниатюрами.

Код похожих статей вы можете взять из прошлой статьи. Любой, в зависимости от сортировки статей.

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

Список похожих статей

Список похожих статей

Без применения стилей css, вид списка будет в соответствии с заданными стилями в вашей теме оформления.

Доработанный код будет выглядеть так:

<!--Похожие статьи-->
<h3 class="relatedtitle">Похожие статьи из категории: <?php the_category( ', ' ) ?></h3>
<div><?php
 global $post;
 $backup = $post;
 $categories = get_the_category($post->ID);
 if ($categories) {
 $categories_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),
 'posts_per_page'=>6, // Количество похожих статей.
 'ignore_sticky_posts'=>1
 );
 $my_query = new wp_query($args);
 if( $my_query->have_posts() ) {
 echo '<ul class="relatedPosts">';
 while ($my_query->have_posts()) {
 $my_query->the_post();
 ?>
 <li><div class="relatedblok"><a href="<?php the_permalink() ?>" rel="bookmark" title="Перейти к статье <?php the_title_attribute(); ?>"><?php the_post_thumbnail('thumbnail'); ?><br><?php the_title(); ?></a></div></li>
 <?php
 }
 echo '</ul>';
 }
 }
 $post = $backup;
 wp_reset_query();
 ?></div>

Дополнения, которые я внёс в код, обозначены оранжевым цветом. Я лишь поясню, что они обозначают.

class="relatedtitle" – позволит управлять стилями заголовка.

<div class="relatedblok"> – этот блок нужен для определения стилей ячейки каждой статьи.

<?php the_post_thumbnail('thumbnail'); ?> – код, отвечающий за вывод миниатюры.

<br> – перенос строки.

Где вставить код похожих статей.

Конечно же, раз речь идёт о похожих статьях, то и вставлять код нужно в файл, отвечающий за вывод статей (single.php).

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

Итак, открываем административную панель WordPress – «Внешний вид»«Редактор»«Одна запись (single.php)» и после вывода статьи, вставляете код похожих статей с миниатюрами.

Вставка кода в single.php

Вставка кода в single.php

Создание стилей для блока похожих статей.

После того как вы вставите код. Внешний вид такого блока вас не порадует. Выглядеть он будет примерно так:

Блок похожих статей без стилей

Блок похожих статей без стилей

Для того чтобы вид блока был более привлекательный, необходимо добавить стили оформления в файл style.css.

Сегодня все современные шаблоны адаптированы под мобильные устройства. И практически все старые переделаны по адаптивный дизайн.

Это нужно учитывать при добавлении стилей в файл style.css. Ваша задача вставить стили оформления до медиазапросов, в которых расположены стили адаптации темы.

Для этого открываете файл стилей – нажимаете комбинацию клавиш CTRL+F – вводите поисковый запрос «@media» и вы найдёте, откуда начинаются медиазапросы.

Вставка стилей оформления

Вставка стилей оформления

Вот выше этих медиазапросов вы и вставляете стили для блока похожих статей. Подробнее в видеоуроке.

.relatedtitle {margin-left: 20px;}
.relatedblok {width: 250px;}
.relatedPosts li {display: inline-block;
width: 250px;
text-align: center;}

Если медиазапросов вы не нашли, значит ваша тема не адаптивная и стили вы можете вставить в конце файла style.css.

Теперь вид похожих статей с миниатюрами примет вот такой вид.

Вид блока похожих статей со стилями

Вид блока похожих статей со стилями

Цвет заголовка и ссылок наследуется из стилей темы. Поэтому у вас они будут в соответствии с дизайном вашей темы.

Также вы должны сменить параметры ширины ячейки width: 250px, так как в вашей теме ширина блока с контентом может отличаться и ячейки в 250 пикселей либо не вместятся, либо будут смотреться мелковато.

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

.relatedblok {
width: 250px;
height: 250px;
overflow: hidden;
border: 1px solid #d2d2d2;
margin-bottom: 4px;
box-shadow: 0px 2px 3px #d2d2d2;}

В результате блок приобретёт вот такой симпатичный вид.

Стили для блока второй вариант

Стили для блока второй вариант

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

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

Друзья, всем удачи и до встречи в новых статьях.

С уважением, Максим Зайцев.



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

29 коммент. к статье “Похожие статьи с миниатюрами в WordPress без плагина

  • Иван

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

    Максим, подскажи пожалуйста, как ты форму RSS такую простую сделал. Блин, думал чё у меня вечно 30 подписчиков, сейчас 27 — проверил, а фид вообще не работает 🙂 Хотел на Смарте зарегистрироваться, да там долго и фиг разберёiся, прошлый раз копался, так и не смог осилить.

    • Максим Зайцев От автора

      Ваня, привет. Раньше и я отдавал предпочтение плагину, а теперь склоняюсь к коду.
      По feeddurner вот статья http://1zaicev.ru/feedburner-sozdanie-i-nastrojka-formy-podpiski-dlya-sajta/
      А на смарте нет такой возможности на бесплатном аккаунте. Так что можешь и не заморачиваться.

      • Иван

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

        Также требуется пройти огромную регу, дофига всего зачем-то указывать — номер телефона и прочее. В фидбурнере всё намного проще, а ему каждый год гибель пророчат.

        • Максим Зайцев От автора

          Да, feeddurner справляется со своей задачей на все 100%. И не хотелось бы его менять на другой сервис.

  • Иван

    Макс, вот какую тенденцию заметил, она у меня на разных сайтах проявляется! Короче, мне оставляют внятный комментарий, владелец тематического блога, но ссылку он в разделе «сайт» оставляет не на главную, а на тематическую страницу. Допустим, у меня статья «Кто такой копирайтер?», а у него ссылка ведёт на тематическую страницу «кто такой копирайтер?» или «как стать копирайтером», да не суть важно. Дело в другом, если у меня ссылки не закрыты — получается, что такие комментаторы воруют вес моей странички и повышают свои позиции за счёт моего сайта. Кстати, такие авторы частенько комментируют и другие блоги подобным образом, да и посещалка у них Максим довольно большая. Неужели это такой способ продвижения?

    • Максим Зайцев От автора

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

      • Иван

        Уже сделал, а я ему такой же коммент отправил, как и тебе. В принципе он прав, вон тот же Девака, у которого сотни комментов и все ссылки открыты — а он ведь похлеще нас в СЕО разбирается. Я не буду закрывать, вообще, не сторонник запрета, у самого на всех блогах всё открыто. D общем, я не считаю что ссылки нуждаются в закрытии, главное не делать из сайта ссылочную помойку.

        Вот знаешь, мне кажется, что поисковики обращают внимание на ссылки, которые появляются практически на всех страницах — баннеры! Если их много, то не видать повышения. Кстати, закрытые счётчики это полная дурь, ибо поисковики уже давно научились распознавать счётчики. Опять-таки на авторитетном блоге читал.

        Вспомнил сутейшн неприятную. Как только на моём новом блоге появились ссылки, сразу траст упал. Был 5, а стал 3 и с тех пор возврата не произошло. При том, я практически уверен, что падение случилось именно и за пары ссылок. Меня Яндекс пугает, он критически любые изменения воспринимает. Я как понял, если Яндекс вдруг подобрел, от блога надо отстать — никаких изменений, только добавление контента. Лично для Яши ссылки зло, даже в комментах, в то время как гугл обожает тематическую ссылочную массу.

        • Максим Зайцев От автора

          Действительно полезный пример из практики. У меня в начале ведения блога были все ссылки открыты. Я ведь решил это в качестве эксперимента. Так вот Яша мой сайт вообще не воспринимал. После я закрыл ссылки в комментариях и через 4-5 апдейтов ситуация стала меняться в лучшую сторону. Но, ссылки на авторов комментариев так и остались исходящими с моего сайта. Так что я тоже с ссылками особо не играюсь. Если и делаю ссылки, то на ресурсы, которые дополняют мой материал и являются релевантными. От индексации эти ссылки не закрываю.

  • Иван

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

    • Максим Зайцев От автора

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

  • Кристина

    Огромное спасибо за статью!Информация интересная и полезная!
    Посмотрите какими примерами пользуюсь я, чтобы мои статьи читали тысячи людей!
    Всего доброго!

    • Максим Зайцев От автора

      Здравствуйте, Кристина. В следующий раз разместите адрес своего сайта, чтобы можно было посмотреть на тысячную аудиторию, а в комментарии можете поделится партнёрской ссылкой, если этот материал вам действительно помог. Спасибо за понимание!

  • Валерий

    Здравствуйте, для меня все это сложновато. Многие пишут,что лучше использовать скрипт, а не плагин. Так ли это? Если так, то с какого момента нужно начинать отказываться от плагинов?

    • Максим Зайцев От автора

      Здравствуйте, Валерий. Абсолютно без плагинов не обойтись, но на сайте должны быть только самые необходимые. Обычно это количество в пределах 5-6 плагинов. Многие вещи лучше сделать напрямую и они не будут вызывать нагрузку на сервер. К тому же такие доработки всегда можно видоизменить с помощью стилей css.

  • DimSim

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

    • Максим Зайцев От автора

      Добрый день, Артём. Используя свои собственные стили оформления, можно сделать блоки под любой дизайн. Я считаю это очень важным моментом.

  • Иван

    Максим, здравствуйте. Подскажите, пожалуйста, почему у меня маркеры списка не пропали после добавления стилей. У вас в уроке их нет , когда стили добавили.

    • Максим Зайцев От автора

      Добрый день, Иван. Это связано с вашей темой. У вас это не маркеры списка, а элементы before для идентификатора #main_content_post ul li:before, где прописаны стили для этих маркеров на 1027 строке в файле style.css. Уберите стиль бекграунда и маркеры исчезнут. Но, учтите, что они исчезнут и в других списках. Поэтому вам нужно дописать ещё стили .relatedPosts li:before {background:none;} В общем избавиться от этих маркеров только для этого списка.

      • Иван Дмитриев

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

        • Максим Зайцев От автора

          Иван, достаточно будет убрать фон на 1027 строке в стилях, если не получается определить новые стили.

          • Иван Дмитриев

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

          • Максим Зайцев От автора

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

          • Иван Дмитриев

            я медиазапросов не нашел, в самом конце я вставлял стили для похожих ссылок…

          • Иван Дмитриев

            буду пытаться, в любом случае, большое спасибо за помощь!