Ноя
30
1

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

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

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

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

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

Виджет список ссылок

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

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

HTML код для списка ссылок

Если знаете и любите работать в 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

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

Link Manager

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

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

Виджет Link Manager

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

Simple Links

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

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

Настройки виджета Simple Links

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

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

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

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

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

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

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

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

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

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

  • Markul   15.12.2017

    Как раз была похожая задача недавно, делал через HTML виджет, оказывается теперь и в текстовом эта фишка есть.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Заработай в GoGetLinks
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости