Создаем список ссылок в сайдбаре с картинками +плагины блогролла

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

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

• Использование виджетов (появился в WP 4.9);
• Модули для сайдбара;
• Альтернативные возможности.

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

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

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

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

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

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

#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 и так уже есть все необходимое. 

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

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

• Вывод списка последних постов из категории — реализуется через WP_Query, можно добавлять картинку и вообще оформить код как угодно.
• Отображение произвольного списка страниц в WordPress с миниатюрами. Вставка выполняется через шорткоды.
• Интересный хак про вывод всех подстраниц для текущей (часто встречается в корпоративных сайтах).

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

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

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

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

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 2, средний балл: 6,50 из 7)

Загрузка...

Категории: Виджеты; Возможности; Начинающим;
Теги: вордпресс веб-разработка, меню и навигация, новичкам, оформление, плагины и виджеты, решение задач wordpress, сайдбар, списки записей.