Функциональность подобных, или связанных постов - часто желаемая функция для владельцев веб-сайтов WordPress. Небольшая сетка связанных статей под постом в блоге стала широко использоваться в первую очередь  с точки зрения SEO и удержания пользователя на сайте. Это настолько распространено и эффективно, что многие сайты уже сложно представить без такого вида перекрестных ссылок.

Вы можете найти плагины для выполнения этой задачи. Их достаточное количество в WordPress, достаточно в поиске написать "Related Post" - и вуа-ля, устанавливайте тот, который подходит больше.

Но допустим, вам нужно реализовать такой дизайн, который ни один из плагинов вам не дает. Давайте разберемся, как создать надежную функциональность подобных постов с помощью самописного плагина. Он невелик и несложен, не использует большого количества настроек, но, возможно, вы давно хотели написать свой плагин!

С точки зрения реализации вы можете также можете писать код для темы.

Создание плагина

Основной файл плагина мы назовем mini-related-post.php и поместим его в папку с тем же названием mini-related-post в директорию wp-content/plugins. Если вы установили свой WordPress-сайт на локальный сервер, то сделать это будет несложно.

В файле в комментариях записываем все данные о плагине:

Название плагина будет Mini Related Post. Думаю, что подставить свои данные в нужные поля описания вам не составит труда.

Основы  функционала подобных записей

Прежде чем перейти к коду, давайте разберем, на чем основан вывод подобных записей. Мы используем запросы (query) и цикла WordPress (loop):

  • Запрос WP_Query выберет записи WordPress из базы данных MySQL в соответствии с нашими инструкциями.
  • Цикл выведет информацию о публикации на страницу. В нашем случае это будут такие вещи, как миниатюра публикации и  заголовок, обернутые в ссылку на соответстующую запись.
  • Код, который обрабатывает обе эти части, нужно будет как-то добавить в файл single.php любой темы. Для этого мы воспользуемся фильтром add_filter( 'the_content')

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

Функция, добавляющая подобные записи после основного контента

Поскольку у нас плагин, а не тема, то мы должны будем "отфильтровать контент", т.е. воспользоваться функцией add_filter( 'the_content', 'mrp_add_related_post_view' ) и добавить записи только, если это одиночная страница (is_single()).

Код добавляем после вводных комментариев о плагине.

Уже можно активировать плагин в соответствующем меню админки:

Активируем плагин подобных постов

На данный момент, перейдя в любую запись, мы уже можем увидеть следующее отображение постов:

Отображение подобных постов под записью

Чего не хватает? Правильно - стилей и расположения в 2 или 3 колонки.

Добавим стили

Все наши подобные записи будут выводится для просмотра одиночной записи. Стилей предполагается немного, поэтому особого смысла создавать отдельный файл и подключать его с помощью функции wp_enqueue_style() к нашему WordPress-сайту нет.

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

Поэтому мы внесем такой код в наш главный файл mini-related-post.php:

Сейчас блоки стали больше, появились эффекты увеличения картинки при наведении.

Стили для подобных постов под записью

Добавляем настройки для плагина подобных записей

Нашему плагину все еще не хватает css-форматирования для колонок. Однако у пользователя вполне уже могут быть стили, которые разбивают контент на 2,3 и более колонок. Поэтому мы не будем выстраивать подобные посты в ряд, а зададим для этого настройки.

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

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

Поскольку создание настроек - процес довольно длительный с массой объяснений, как называть все страницы, блоки и опции, а хочется сделать все быстро, то мы используем генератор настроек и зальем его код в отдельный файл settings.php.

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

Обратите внимание на то, что справа вверху мы выбираем родительский пункт меню в админке WP  - это Posts (Записи). Именно там нужно будет искать наши настройки.

Добавляем настройки к плагину подобных постов

Вот, что получилось с помощью генератора:

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

Подключаем файл settings.php в коде файла mini-related-post.php (в примере мы укладываем его в папку inc плагина).

Заполняем настройки, которые появились у нас в меню "Записи" в админке WordPress.

Заполняем настройки плагина подобных записей

Формируем вывод подобных записей с настройками

Теперь мы можем получить функционал уже с использованием настроек.

Результат наших манипуляций с настройками для разных разрешений экранов:

Внешний вид блока с related posts

Надеюсь, что у вас все получилось.

Автор: Админ

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

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