Главная › Новости

Простой список ссылок в сайдбаре с картинками, блогролл плагины

Опубликовано: 23.08.2018

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

Отчасти решение зависит от конкретной поставленной задачи. Во-первых, какие именно объекты нужно выводить в боковой панели сайта: посты блога? перелинковку произвольных страниц? внешние линки? В зависимости от этого и ваших навыков WordPress я бы выделил такие варианты:

Виджет «Текст» с визуальным редактором

Начиная с версии  WordPress 4.9 в обычном текстовом виджете у пользователя есть кнопки добавления ссылок, картинок и списков. Даже человек со слабыми способностями в веб-разработке сможет создать соответствующий инфоблок на сайте.

Алгоритм приблизительной такой:

Сначала добавляете элементы списка в «текстовом варианте». Потом проставляете соответствующие ссылки. Далее размещаете курсор мышки перед началом определенного пункта и кликаете «Добавить медиафайл». Важно чтобы картинка (IMG) была помещена внутрь тега A. В таком случае ссылка на изображение  вставится автоматически. Проверить можно, перейдя в режим «Текст». Сохраняем. В визуальном режиме наша конструкция будет «разваливаться», но это нормально. Главное чтобы итоговый код был правильным.

Если знаете и любите работать в HTML, можете воспользоваться одноименным виджетом. Там теперь есть подсветка синтаксиста, хотя через текстовый элемент все равно удобнее.

По умолчанию в Wordpress наш новый список ссылок с иллюстрациями будет выглядеть «коряво». Поэтому требуется дополнить файл стилей (обычно style.css). Переходим в раздел «Внешний вид» — «Редактор» либо правим код через FTP. Как минимум, туда следует вставить следующее оформление:

#text-2 .textwidget ul { list-style : none ; } #text-2 .textwidget ul li { float : left ; }

#text-2 .textwidget ul { list-style: none; } #text-2 .textwidget ul li { float: left; }

Здесь #text-2 — ID блока, содержащего ваш список (посмотрите код страницы через инспектор Ctrl+Shift+I или любым другим методом). В стилях выше задается выравнивание по левому краю и убирается оформление отдельных пунктов, если оно есть.

Внимание! Статья — не урок по CSS, поэтому я не останавливаюсь детально на данном моменте. Размер картинки можно править в самом виджете или тоже через стили. Напоследок проверьте адаптивность блока. 

Модули блогролла в сайдбаре

Если так подумать, то список линков с картинками или без — классический вариант блогролла в WordPress . Следует заметить, что раньше в системе для этих целей в панели управления даже был специальный раздел.

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

Link Manager

Плагин Link Manager  как альтернативу прошлой функциональности советуют сами создатели CMS. Насколько я понимаю, он полностью повторяет старые фишки блогролла, возможно, когда-то был частью ядра.

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

Если указать вариант с рейтингом, то сможете настроить нужную вам очередность пунктов. При установке модуля из админки ищите его по автору «Nacin«, а не названию. Загрузок здесь очень много (90к), но решение не обновлялось более 2х лет. Также, возможно, пригодится хак с добавлением nofollow в blogroll блога.

Simple Links

Не смотря на меньшее число скачиваний (10тысяч) плагин  Simple Links является намного более функциональным и продвинутым. Поддерживаются актуальные версии системы, последний апдейт был не так давно.  Кроме базовых фишек найдете:

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

Здесь также имеются какие-то премиальные опции, хотя в базовом комплекте Simple Links и так уже есть все необходимое. 

Альтернативные решения

Как говорил в начале статьи, встречаются разные специфические задачи, например, ранее в данном блоге я рассматривал:

В качестве еще одного необычного метода можно вообще использовать базовое меню WordPress:

Переходите в раздел «Внешний вид» — «Меню», где формируете желаемый список, в котором могут быть как страницы, так и посты с внешними линками. Далее размещаете в боковой колонке виджет «Меню навигации» («Произвольное» в старых версиях Вордпресс). Нужно будет установить модуль Menu Image, позволяющий добавлять иконки в меню WordPress (о нем уже рассказывал).

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

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

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

Если знаете еще какие-то интересные нюансы по теме, интересно будет услышать.