Что такое виджеты WordPress и как их использовать

Приветствую, дорогие друзья!

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

Что такое виджет в WordPress?

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

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

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

Вы можете легко управлять местоположением ваших виджетов и добавлять их в боковые панели и футер, разрешенные в вашей теме WordPress, в любом порядке. Готовые к виджетам темы WordPress включают шапку (хэдер) и футер, а также другие элементы дизайна и структуры WordPress. Вы можете установить дополнительные виджеты из плагинов и тем, их доступно множество различных типов.

Виджеты против плагинов и против блоков

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

Блоки Гутенберга были представлены с появлением WordPress 5.0. Они позволяют вставлять контент в страницы и посты, а затем редактировать их по мере необходимости. Плагины — это части программного обеспечения, которые вы можете использовать на своем сайте WordPress. Используйте их для добавления функциональности на веб-сайт, которая не включена в стандартную установку WordPress. Плагины поставляются в комплекте с виджетами и могут быть найдены в каталоге плагинов WordPress. Виджеты просто предоставляют способ упорядочить содержимое боковой панели без необходимости изменения кода вашего сайта.

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

Управление виджетами

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

По умолчанию WordPress поставляется с множеством полезных виджетов. Чтобы просмотреть их, войдите в вашу админ-панель и перейдите во «Внешний вид — Виджеты». Эта страница содержит доступные виджеты с левой стороны.

Чтобы начать использовать виджеты, первое, что вам нужно сделать, это активировать виджет на вашем сайте, я бы рекомендовал заранее ознакомиться с разделами на странице виджетов, которые отображаются следующим образом:

• В разделе «Доступные виджеты» отображаются виджеты, поддерживаемые вашей темой. Эти виджеты еще не добавлены на ваш сайт, но они доступны для использования. Под названием каждого виджета есть краткое описание содержимого, которое он отображает. Нажмите на виджет, чтобы отобразить боковые панели, к которым вы можете добавить этот виджет, и перетащите их в область виджетов, чтобы использовать их.
• Область виджетов — это список виджетов, которые в данный момент отображаются на вашем сайте.
• Справа от страницы отображаются обозначенные области на вашем сайте WordPress, где вы можете разместить эти виджеты.
• Нажмите на неактивные виджеты в правом нижнем углу страницы. Этот раздел содержит виджеты, которые вы удалили из разделов боковой панели, но сохраняет выбранные вами настройки, если вы решите использовать их снова. Если вы изменили тему и, по-видимому, отсутствуют некоторые виджеты, откройте область «Неактивные виджеты», чтобы найти отсутствующие виджеты вместе с сохраненными настройками.
• Ваша основная боковая панель — это главная боковая панель, которая появляется в левой части шаблона вашего сайта. Нажмите на боковую панель, чтобы отобразить виджеты, уже добавленные на эту боковую панель в области администратора. Самый простой способ понять, как работают виджеты — это сопоставить виджеты, отображаемые на боковой панели вашего сайта, и виджеты, добавленные на той же боковой панели в области администратора.
• На вкладке боковой панели содержимого отображается дополнительная боковая панель, расположенная в правой части или рядом с содержимым, отображаемым на ваших страницах. Тут пусто по умолчанию. Вы можете добавить различные виджеты, такие как календарь, чтобы отобразить его на своих страницах.
• Теперь выберите область виджета футера. Этот раздел предназначен для виджетов, появляющихся в подвале вашего сайта. Опять же, эта область будет пустой по умолчанию. Вы можете добавить в него такие функции, как виджеты «Архив» и «Мета», которые появятся в футере вашего сайта.

Области виджетов в WordPress

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

Как добавить виджет в WordPress

Установка виджета

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

Чтобы установить плагин, зайдите в административную зону WordPress, вкладка «Плагины — Добавить новый». Найдите плагин, а затем активируйте. Теперь ваш плагин установлен, и вы можете пользоваться им.

Добавление виджет

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

Выберите виджет в разделе «Внешний вид — Виджеты», перетащите его в область боковой панели и поместите в футер или боковую панель в области «Доступные виджеты». Виджет будет автоматически сохранен. Теперь, когда вы добавили виджет, WordPress автоматически обновит вашу тему.

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

Настройка виджета с вашим контентом

Вам необходимо добавить настройки и контент для правильной настройки и отображения виджета. Чтобы настроить функцию виджетов, щелкните стрелку в верхнем правом углу виджета, чтобы развернуть его интерфейс. Заполните некоторые детали и нажмите «Сохранить». Теперь просмотрите ваш сайт, чтобы увидеть содержимое, отображаемое в виджете.

Пользовательские виджеты в WordPress

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

Удаление виджета

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

Теперь, когда вы можете управлять виджетами на своем веб-сайте, давайте перейдем к типам виджетов, которые принесут пользу вашему сайту.

Основные виджеты WordPress

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

Виджет страниц

WordPress поставляется с виджетом страниц, который адекватно отображает ваши страницы на боковой панели, облегчая навигацию ваших читателей. Кроме того, виджет «WP Page Widget» может быть легко изменен. С «WP Page» вы можете выбрать виджеты, которые вы хотите показать. Вы можете включать или исключать страницы и сообщения или пользовательские типы сообщений.

Виджет категорий

WordPress поставляется с виджетом основных категорий, который показывает все последние сообщения из выбранной категории. Для расширенных функций я рекомендую виджет «Category Posts Widget». Он отображает категории элегантно, он бесплатный и очень популярен среди пользователей WordPress. Премиум-версия включает в себя привлекательные дополнения от вертикальных и горизонтальных слайдеров, категорий, пользовательских типов записей, таксономий, событий, продуктов, адаптивных макетов сетки и многого другого.

Календарь

Предустановленный виджет «WordPress Calendar» — это простой календарь, который отображает ссылки на ваши сообщения по дате. Это довольно просто. Например, вы не можете создавать или отображать события календаря или что-либо подобное. Существует много календарей с большим количеством функций, таких как «Simple Calendar», виджет «Google Calendar» и плагины, которые отображают более сложные, например системы бронирования и оформления билетов, такие как «Booking Calendar».

Виджет социальных сетей

Виджеты социальных сетей позволяют вашим посетителям связываться с вами через ваши любимые сети, включая Twitter, Facebook и Google. Используйте виджет «Social Icons Plus» для отображения кнопок, связанных с вашими учетными записями в социальных сетях, в любой области виджетов вашей темы.

Виджет RSS

Виджеты RSS обеспечивают идеальный способ интеграции внешнего контента на ваш сайт. Виджет «WP RSS Aggregator» позволяет интегрировать внешний канал для недавно опубликованного контента из любого источника в область виджетов вашего сайта. Добавьте из любого канала RSS, например, из вашей учетной записи Twitter, постов Facebook, постов Google+ или других блогов. Эта функция особенно полезна, если вы хотите привлечь внимание к этим источникам на боковой панели. Этот виджет может отображать заголовок сообщения, ограниченные символы твита или ссылку на первоисточник.

Виджет футера (подвала)

Область подвала является ключевым компонентом сайта, который обычно не считается важным. Напротив, хорошая область футера включает полезные данные о сайте. Вы можете указать условия предоставления услуг, стоимость доставки, карту сайта, контактные данные и даже рекламные баннеры, добавив ценные данные для связи с вашими посетителями. Виджеты подвала используются для настройки присутствия сайта или для его дополнительной полезности. Использование гаджетов футера, таких как «Add Inserter Plugin», экономит ваше время на выполнение дополнительных компонентов.

Лучшие виджеты WordPress

Теперь, когда мы рассмотрели основы, вы можете улучшить свой сайт. Что лучше для вашего сайта, зависит от ваших потребностей и требований. Независимо от того, какая ниша вашего сайта, скорее всего, есть виджет, который поддержит вас. Мой список «лучший из» охватывает широкий спектр плагинов. Единственное, что их объединяет — это полезность и простота, и они должны улучшить ваш сайт со всеми UX-дизайном и эстетикой, необходимыми для современного сайта.

• «YouTube Channel Gallery» позволяет отображать видео с вашего канала Youtube в удобной сетке, увеличивая пространство. Вы даже можете транслировать в прямом эфире, добавлять плейлисты, функцию просмотра и многое другое.
• «WordPress Ad Widget» — это один из самых простых способов показа рекламы на вашем сайте WordPress.
• Продемонстрируйте довольных клиентов с помощью виджета «Testimonals» и поместите их в футер для достижения максимального эффекта.
• Есть много виджетов, включенных в плагин генерации лидов WordPress. Если вы хотите создать список для своего веб-сайта или блога и увеличить количество конверсий, обратите внимание на «OptinMonster», который поставляется с формами подписки высокой конверсии для вашего сайта.
• «Feature a page widget» — этот плагин добавляет страницу в качестве избранной страницы на боковой панели WordPress. Вы можете добавить заголовок страницы, избранные изображения и выдержки на сайт.
• Добавьте доверия и тепла с помощью «Authors widget». Он отображает список авторов с небольшой биографией и аватаром.
• Если вы хотите интегрировать информацию о погоде на свой сайт, не ищите ничего, кроме виджетов погоды. Я рекомендую «WP-forecast» для точных сводок погоды от Accuweather.
• Добавление карты может быть полезно для навигации пользователей в вашей компании или просто для отображения вашего местоположения на вашем сайте. «Google Maps Widget» является самым простым способом добавить карту на боковой панели вашего сайта. Пользователь просто нажимает на карту, чтобы открыть ее.

Виджеты для блогов

Боковые панели одинаково важны в блогах WordPress. Вы можете извлечь выгоду из определенных виджетов, направленных на улучшение вашего пользовательского интерфейса, СЕО и конверсий.

• WordPress поставляется с простым виджетом последних сообщений, отображающим список ваших последних опубликованных сообщений. Добавьте некоторый интерес, отображая последние сообщения с миниатюрами изображений с этим плагином однофамильцем — «Recent Posts Widget With Thumbnails».
• Добавьте простой виджет облака тегов с «Cool Tag Cloud». Он смотрит на ваши теги и отображает их в виджете. Каждый тег ссылается на страницу тега, которая помогает в СЕО. Более того, он отслеживает ваши самые распространенные ярлыки, теги и классы в блоге и позволяет отображать их на соответствующих страницах.
• Используйте виджеты для отображения страниц вашего блога на боковой панели, чтобы читателям было проще перемещаться по вашему блогу и улучшить СЕО. Стандартный виджет WordPress позаботится об этом с изяществом и поставляется уже предустановленным. Вы также можете отображать самые популярные сообщения на своем сайте в виде легкого виджета, такого как «WordPress Popular Posts».
• WordPress включает в себя виджет архива, который отлично подходит для новых блогов, но как только вы его создадите, вам может понадобиться что-то более продвинутое. Я рекомендую «Compact Archives». Он отображает архив ваших сообщений в блоге в компактном месячном календаре вместо более распространенного формата списка.

Быстрый совет по виджетам

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

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

Не знаете, как кодировать HTML? Угадайте что: нет проблем!

Вот краткий совет по созданию фрагмента HTML в WordPress, даже если вы не знаете, что с этим делать:

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

Пять простых шагов, и вы создали что-то дополнительное для области виджетов на своем сайте!

Завершение

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

Сообщите мне об этом в разделе комментариев ниже!

А я буду закругляться — до скорых встреч и берегите себя!