Апр

Усовершенствуем стандартные виджеты в WordPress

Управлять элементами сайдбара с помощью виджетов в WordPress более наглядно и легко чем вносить изменения непосредственно в шаблон сайта. Единственной сложностью может стать недостаточная гибкость в их настройке, особенно, если речь идет о стандартных решениях. Нашел в сети парочку интересных модулей, которые помогут справиться с некоторыми специфическими задачами для виджетов. Это простые плагины, что выполняют, по сути, одну функцию, но делают это максимально наглядно и/или элементарно (без необходимости ковыряться в шаблонах или файлах системы). При желании, кстати, можете вставлять виджеты на страницы и в посты блога.

В данной статье найдете:

Как удалить заголовок элемента (Remove Widget Titles).
Добавление ссылки в тайтл виджета (Widget Title Links).
Дополнительные настройки у базовых виджетов (Widgets Reloaded).

Также хочу посоветовать продвинутый виджет Enhanced Text Widget, о котором написал в другой заметке. Он позволяет вставлять в сайдбар HTML/CSS, JavaScript, PHP коды и Shortcode.

Как скрыть заголовок виджета в WordPress?

Так иногда бывает, что в дизайне шаблона вам не нужно отображать заголовок блока, например, если хотите добавить элемент поиска или рекламные баннеры. Помочь с этим может плагин Remove Widget Titles — он максимально легкий, содержит очень мало кода, устанавливается проще простого. Автор рассказывает, что имеется также альтернативный вариант решения задачи, но тот скрывает заголовок виджета с помощью CSS хаков — не всем такое понравится. В Remove Widget Titles все более логично.

Вам нужно будет зайти в раздел «Внешний вид» — «Виджеты» и добавить знак восклицания «!» перед заголовком того виджета, для которого хотите скрыть тайтл.

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

Теоретически подобные трюки можно сделать с помощью CSS стилей, но тут есть свои нюансы. Во-первых, задача не только в скрытии текста, что выполняется элементарно, нужно разбираться с отступами так чтобы это не влияло на другие виджеты. В итоге это может вылиться во множество CSS кода и хаков — проще просто не выводить тайтл. Во-вторых, плагин Remove Widget Titles дает возможность самому пользователю определять где выводить заголовки, а где скрывать без необходимости обращения к разработчику и вникания в стили и код.

Как добавить ссылку в заголовок виджета?

Еще одна очень простая, хоть и нетривиальная задача. Она, конечно, возникает далеко не часто, но ситуация имеет место быть. Допустим, вы создаете блок подписки для социальной сети Google+ или выводите виджет с предложением подписки на обновления сайта. А может хотите добавить в виджет архива ссылку на страницу с полным архивом wordpress блога? Что бы там ни было, решить задачу поможет плагин Widget Title Links. Такой же простой в установке и использовании как предыдущий.

Для каждого виджета будет добавлено дополнительное поле «Title Link» куда по желаю можно вставить ссылку.

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

Расширение возможностей базовых виджетов

Напоследок припас еще один интересный плагин — Widgets Reloaded. К сожалению, он уже года два как не обновляется, но на сайте разработчика сообщается, что модуль вполне себе работает и с последними версиями wordpress. С его помощью 8 базовых виджетов системы (архивы, авторы, закладки, календарь, категории, меню, страницы, поиск, теги) получают расширенный набор дополнительных настроек.

Возьмем, к примеру, виджет архивов.

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

Еще один пример — облако тегов. В базовом виджете можете выбрать только какие записи отображать + ввести заголовок. Специальная функция wp_tag_cloud поможет разработчику подправить облако тегов под свои нужды, но рядовой пользователь wordpress вряд ли во всем этом разберется. После установки Widgets Reloaded виджет будет иметь куда больше настроек.

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

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

(голосов - 9, средний балл: 5,00 из 7)

Загрузка...

Категории: Виджеты; Начинающим; Плагины;

Теги: виджеты, обзоры плагинов, полезные плагины, простые плагины.

комментарий 21 к статье “Усовершенствуем стандартные виджеты в WordPress”

Mars 01.05.2013
И снова здравствуйте! Решусь спросить у Вас еще раз.
Подскажите, пожалуйста, как сделать маркированный список в сайдбаре? Мне надо в Свежих записях визуально отделить друг от друга ссылки на статьи с помощью вот таких «булек»:
•
Плагинами не хочется пользоваться. Хочу сделать с помощью изменения кода шаблона, но ничего путного пока не получается.
В коде шаблона никаких уникальных классов у пунктов не вижу, как прописать стили для этих классов – не знаю. Поможете? Может, статью на своем сайте напишете на эту тему?
А как Вы вставили стрелки на своем сайте в разделе Категории и Последние посты?
Tod 02.05.2013
Mars, это все делается через css стили в файле style.css — нужно по html коду глянуть какой используется class или id для списка пунктов (li). Вот статья по оформлению списка, там же можно добавлять и картинку. Кстати, можно подсмотреть html код на моем блоге и какой стиль определен для списка.
Mars 02.05.2013
Множество перепробованных мною вариантов ни к чему положительному не привели, к сожалению (((
Максимум, что получалось, это сделать маркированный список с квадратными «бульками», даже не смотря на то, что все значения «square» везде были изменены на «disc». И текст в виждетах подчеркивался. Не очень красиво получалось.
Чего-то я не догоняю в php.
Мой код style.css, ответственный за этот участок:
.widget-area ul {
list-style: none;
margin-left: 0;
}
.widget-area ul ul {
list-style: square;
margin-left: 1.3em;
}
.widget_search #s {
/* This keeps the search inputs in line */ width: 60%;
}
Tod 03.05.2013
Mars, тут нужно продолжать экспериментировать:) все шаблоны разные и у всех свои стили. Есть может быть такое, что стиль «перекрывается» каким-то другим css файлом из темы. В таком случае допишите что-то вроде:
dist-style: disc !important;
Mars 03.05.2013
Спасибо, буду продолжать :)
Хотя, времени совсем нет на эксперименты. После основной работы, в свободное время, я довольно успешно пишу на Textsale. Правда, работа там почти остановилась, так как мои новые сайты настоятельно требуют внимания к себе )))
Постарайтесь, пожалуйста, это сообщение не публиковать. Не для всех оно :)
Mars 03.05.2013
Tod, Вы Гений! Получилось! Всего-то одно слово надо было добавить :) Похоже, к одному элементу обращались два взаимоисключающих селектора, и действительно, как Вы и сказали, надо было добавить дополнительный атрибут !important.
Yury 22.06.2013
Отличная и познавательная статья!
Дмитрий 19.01.2014
Спасибо за статьи, Tod.
Не могли бы вы подсказать, как правильнее всего решить задачу выведения в облако тегов не вообще всех, а только тех, что соответствуют контексту (выбранным категориям).
Tod 19.01.2014
Дмитрий, боюсь, что стандартными способами этого никак не сделать — можно выводить облако тегов (исключая некоторые нежелательные теги), можно выводить все теги для одного поста, но чтобы автоматический тематический отбор — такого нет. Нужно поискать плагин, но не уверен, что такой есть, т.к. во-первых, задавать соответствие категория = теги было бы слишком хлопотно, во-вторых, даже если будут теги определяться по тексту на страницы, это вызовет нагрузку на сайт.
Михаил 16.03.2014
Полезная статья. Очень радуют шаблоны, где в виджетах есть форма для HTML текста. Можно размещать банера не копаясь в коде сайдбара.
Максим 18.10.2014
Очень хорошая и полезная статья, спасибо! Но, свой вопрос с ее помощью я так и не решил ((( А вопрос вот какой — купил очень красивый и удобный плагин Sexy polling PRO. Все замечательно, но когда вывожу на страницу в виджете, стиль, выбранный в плагине, полностью перекрывется стилем темы, причем от перемены темы проблема не решается, вместо цветного полла идет монохром (((( Посмотрел в page sources… все прописано правильно, но не работает — css сайта все перекрывает. Где искать причину и как заставить работать необходимую для полла цветовую схему?
Tod 19.10.2014
Максим, нужно «перебить» оформление темы. Тут есть 2 варианта — добавить в header вызов стилей плагина после стандартных css файлов темы (стили плагина должны идти последними). Второй вариант — скопировать стили из css файла плагина в конец файла стандартных стилей. Варианты не совсем «красивые», но по идее сработают.
Виталий 22.11.2014
сделал надписи в футере с помощью виджета,но надписи серые и блеклые как поменять цвет текста в этом случае-по примеру вашего футера например.
Tod 24.11.2014
Виталий, через CSS стили — посмотрите HTML код, для каждого виджета есть уникальный ID, для которых в стилях прописываете параметр color (цвет).
Владимир 18.03.2015
Доброго времени суток!
Я может чего-то и не понял, но при необходимости скрыть заголовок виджета не проще поставить пробел вместо плагина, в котором много лишнего для обработчика?)))) Я так заголовки скрываю при необходимости.
Tod 18.03.2015
Владимир, вариант с пробелом тоже подходит)) Может кому-то для сайтов, где более 10-ти виджетов, удобнее видеть заголовки в админке дабы не перепутать что и где выводится.
Тут еще есть, возможно, момент со стилями. Я точно не помню, удаляет ли плагин лишние DIV, когда заголовок не отображается — если да, то это полезно. В некоторых шаблонах могут быть заданы отступы для тех или иных классов DIV и если поставить в заголовке пробел, то блок будет создавать дополнительный отступ. Для новичка править CSS сложнее чем поставить данный плагин.
Сергей 03.04.2015
А как изменить вид ссылки, у меня в стандартном виджете Архивы вместо http://мойсайт/год/месяц формируется ссылка http://мойсайт/date/год/месяц Не понятно почему в url появилось слово «date». Как это исправить? Спасибо.
Tod 04.04.2015
Сергей, может установили какой-то плагин, который повлиял на ссылки.
Сергей 04.04.2015
Tod, да не думаю что плагин. Правда я мигрировал с движка DLE в WordPress, то есть БД мигрировала, остальное все WordPress. Но ведь url стандартных виджетов формируется где-то в недрах WordPress.
Алексей 18.05.2017
А как сделать, чтобы в виджете выводились ссылки на те статьи, которые я захочу. На каждой странице одинаково. Так же как у вас на сайте. и подсвечивалось чтобы с подчеркиванием))
Tod 19.05.2017
Алексей, в моем случае блок реализован через меню «Внешний вид» — «Виджеты», где я выбрал видже Текст и внутрь встравил HTML код списка

<ul><li>один</li><li>два</li></ul>

+ я сделал фиксированный блок при прокрутке (плагином Q2W3 Fixed Widget)