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


Приветствую, уважаемые! Мало кто знает, что помимо всего прочего я еще изучаю веб-программирование. Эта статья открывает новую рубрику на нашем сайте, посвященную коду. Нет, это не уроки по какому-либо языку программирования, а просто полезные фрагменты кода, которые могут пригодиться вам, если у вас есть свой сайт. Например, сегодня мы поговорим про вывод похожих записей на движке WordPress. Почему эта тема? Потому что я сам столкнулся недавно с этой «проблемой» и хочу помочь другим.

Иногда бывает, что в теме оформления WordPress возможность вывода похожих записей уже присутствует по умолчанию и все красиво оформлено. Однако же чаще всего эта возможность не предусмотрена.

А все мы хорошо знаем, что «похожие записи» в конце статьи или сбоку в сайдбаре очень положительно влияют на поведенческие факторы (внутренняя СЕО оптимизация). И первое, что приходит на ум – установить плагин, который бы выводил эти самые похожие записи.

Но всегда существует какое-то «НО…»!

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

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

Если есть хоть малейшие познания в движке Вордпресс и стилизации (CSS), то лучшим решением будет внедрить код напрямую в шаблон вашего сайта. Приступим!

Код для вывода похожих записей в WordPress

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

Вот сам код (нажмите):

Для тех, кто хоть немного разбирается в коде, понятно, что тут используется язык php, некоторые стандартные функции Вордпресс и все это элегантно завернуто в HTML разметку. Вставляем его в нужное место (у многих это файл single.php в корне темы). И что мы получаем на выходе? А вот что:

Похожие записи без плагина для Вордпресс

То, как «Похожие записи» выглядят без миниатюр

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

Добавляем миниатюры на наши похожие записи

Для начала нужно избавиться от списка. Для этого заменяем теги «ul» (ненумерованный список) на теги «div» (простой блочный элемент) в двух местах (!) и добавляем ему вразумительный идентификатор (чтобы потом было удобно стилизовать). Потом просто удаляем теги элементов списка «li» (только оставьте их содержимое).

Внутри «div» у вас сейчас осталась голая ссылка с заголовком записи в качестве текста. Для удобства я обернул заголовок еще в один тег. А теперь самое главное – добавляем миниатюру к записям. Для этого существует стандартная функция Вордпрессthe_post_thumbnail() , которая возвращает нам миниатюру записи в теге «img».

Теперь у нас код выглядит немного иначе. Наши похожие записи уже выводятся с миниатюрами, и, как видите, мы смогли этого добиться без помощи сторонних плагинов. Но не советую оставлять все в таком виде. Выглядит это по-прежнему безобразно. Огромные картинки на ширину всей страницы. Еще и в ужасном качестве. А под ними подписи синего цвета (обычные ссылки). Можете вставить этот код и посмотреть на все своими глазами. Хотя в любом случае вставляйте, потому что в этот код мы лезть больше не будем.

Немного переделали, сравните (нажмите):

Стилизация похожих записей с миниатюрами

Приступаем к пункту третьему или какой там у нас уже? Тут я покажу, как я оформил свои похожие записи, но вы, возможно, захотите по-другому. Код стилей, который я приведу ниже, нужно вставить в файл стилей вашего сайта (желательно в конце для удобства). Он находится в корне темы оформления вашего сайта и называется style.css (но может и по-другому и находиться в папке, например, «css» или «styles»). Вот сам код:

Код стилей (CSS):
Похожие записи с миниатюрами без плагина

Застилизованные «Похожие записи». Чувствуете разницу?

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

Вместо итога:

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

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

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

Вам будет интересно еще кое-что:

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

Добавить комментарий

Вашу электронную почту никто не увидит и не узнает!