Усовершенствуем стандартные виджеты в 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 виджет будет иметь куда больше настроек.
Фактически все опции базовых функций вордпресс разработчик вынес в качестве полей виджета дабы любой юзер смог поменять нужные настройки. Как по мне, — очень удобно, доступно и наглядно. То же самое можно сказать и о предыдущих плагинах. Разработчикам изменить определенные нюансы отображения виджетов не проблема, но обычным пользователям подобные виджеты будут крайне полезны.
комментарий 21 к статье “Усовершенствуем стандартные виджеты в WordPress”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Як сховати відсутні товари в Woocommerce шорткодах та схожих товарах
- Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
- Плагіни для створення стрічки новин з біжучим рядком в WordPress
- Як змінити розміщення кнопки оформлення замовлення в WooCommerce
- Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
- Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
- Онлайн генератор ссылок на мессенджеры для WordPress и не только
- WooCommerce (46)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (246)
- Сервисы (87)
- Хаки и секреты (87)
- Шаблоны (45)
- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Найбільш очікувані новинки MMORPG ігор в 2025 році
- Советы по выбору холодильника LG с технологией No Frost
- Зачем нужны Wi-Fi ретрансляторы и как выбрать подходящую модель
- Введение в онлайн-казино Slotor777: многообразие игр и привлекательные бонусы
- Необходимость использования облачного хранилища в наше время, что важно и как выгодно?
- Спрощення процесу звітності за допомогою програми BAS Бухгалтерія
- Технологія підключення інтернету GPON та її переваги
- За що гравці найбільше цінують Lineage 2
И снова здравствуйте! Решусь спросить у Вас еще раз.
Подскажите, пожалуйста, как сделать маркированный список в сайдбаре? Мне надо в Свежих записях визуально отделить друг от друга ссылки на статьи с помощью вот таких «булек»:
•
Плагинами не хочется пользоваться. Хочу сделать с помощью изменения кода шаблона, но ничего путного пока не получается.
В коде шаблона никаких уникальных классов у пунктов не вижу, как прописать стили для этих классов – не знаю. Поможете? Может, статью на своем сайте напишете на эту тему?
А как Вы вставили стрелки на своем сайте в разделе Категории и Последние посты?
Mars, это все делается через css стили в файле style.css — нужно по html коду глянуть какой используется class или id для списка пунктов (li). Вот статья по оформлению списка, там же можно добавлять и картинку. Кстати, можно подсмотреть html код на моем блоге и какой стиль определен для списка.
Множество перепробованных мною вариантов ни к чему положительному не привели, к сожалению (((
Максимум, что получалось, это сделать маркированный список с квадратными «бульками», даже не смотря на то, что все значения «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%;
}
Mars, тут нужно продолжать экспериментировать:) все шаблоны разные и у всех свои стили. Есть может быть такое, что стиль «перекрывается» каким-то другим css файлом из темы. В таком случае допишите что-то вроде:
dist-style: disc !important;
Спасибо, буду продолжать :)
Хотя, времени совсем нет на эксперименты. После основной работы, в свободное время, я довольно успешно пишу на Textsale. Правда, работа там почти остановилась, так как мои новые сайты настоятельно требуют внимания к себе )))
Постарайтесь, пожалуйста, это сообщение не публиковать. Не для всех оно :)
Tod, Вы Гений! Получилось! Всего-то одно слово надо было добавить :) Похоже, к одному элементу обращались два взаимоисключающих селектора, и действительно, как Вы и сказали, надо было добавить дополнительный атрибут !important.
Отличная и познавательная статья!
Спасибо за статьи, Tod.
Не могли бы вы подсказать, как правильнее всего решить задачу выведения в облако тегов не вообще всех, а только тех, что соответствуют контексту (выбранным категориям).
Дмитрий, боюсь, что стандартными способами этого никак не сделать — можно выводить облако тегов (исключая некоторые нежелательные теги), можно выводить все теги для одного поста, но чтобы автоматический тематический отбор — такого нет. Нужно поискать плагин, но не уверен, что такой есть, т.к. во-первых, задавать соответствие категория = теги было бы слишком хлопотно, во-вторых, даже если будут теги определяться по тексту на страницы, это вызовет нагрузку на сайт.
Полезная статья. Очень радуют шаблоны, где в виджетах есть форма для HTML текста. Можно размещать банера не копаясь в коде сайдбара.
Очень хорошая и полезная статья, спасибо! Но, свой вопрос с ее помощью я так и не решил ((( А вопрос вот какой — купил очень красивый и удобный плагин Sexy polling PRO. Все замечательно, но когда вывожу на страницу в виджете, стиль, выбранный в плагине, полностью перекрывется стилем темы, причем от перемены темы проблема не решается, вместо цветного полла идет монохром (((( Посмотрел в page sources… все прописано правильно, но не работает — css сайта все перекрывает. Где искать причину и как заставить работать необходимую для полла цветовую схему?
Максим, нужно «перебить» оформление темы. Тут есть 2 варианта — добавить в header вызов стилей плагина после стандартных css файлов темы (стили плагина должны идти последними). Второй вариант — скопировать стили из css файла плагина в конец файла стандартных стилей. Варианты не совсем «красивые», но по идее сработают.
сделал надписи в футере с помощью виджета,но надписи серые и блеклые как поменять цвет текста в этом случае-по примеру вашего футера например.
Виталий, через CSS стили — посмотрите HTML код, для каждого виджета есть уникальный ID, для которых в стилях прописываете параметр color (цвет).
Доброго времени суток!
Я может чего-то и не понял, но при необходимости скрыть заголовок виджета не проще поставить пробел вместо плагина, в котором много лишнего для обработчика?)))) Я так заголовки скрываю при необходимости.
Владимир, вариант с пробелом тоже подходит)) Может кому-то для сайтов, где более 10-ти виджетов, удобнее видеть заголовки в админке дабы не перепутать что и где выводится.
Тут еще есть, возможно, момент со стилями. Я точно не помню, удаляет ли плагин лишние DIV, когда заголовок не отображается — если да, то это полезно. В некоторых шаблонах могут быть заданы отступы для тех или иных классов DIV и если поставить в заголовке пробел, то блок будет создавать дополнительный отступ. Для новичка править CSS сложнее чем поставить данный плагин.
А как изменить вид ссылки, у меня в стандартном виджете Архивы вместо http://мойсайт/год/месяц формируется ссылка http://мойсайт/date/год/месяц Не понятно почему в url появилось слово «date». Как это исправить? Спасибо.
Сергей, может установили какой-то плагин, который повлиял на ссылки.
Tod, да не думаю что плагин. Правда я мигрировал с движка DLE в WordPress, то есть БД мигрировала, остальное все WordPress. Но ведь url стандартных виджетов формируется где-то в недрах WordPress.
А как сделать, чтобы в виджете выводились ссылки на те статьи, которые я захочу. На каждой странице одинаково. Так же как у вас на сайте. и подсвечивалось чтобы с подчеркиванием))
Алексей, в моем случае блок реализован через меню «Внешний вид» — «Виджеты», где я выбрал видже Текст и внутрь встравил HTML код списка
<ul><li>один</li><li>два</li></ul>
+ я сделал фиксированный блок при прокрутке (плагином Q2W3 Fixed Widget)