Что такое виджеты WordPress, как добавить и настроить виджеты по шагам.
Здравствуйте, уважаемые читатели.
Сегодня я хочу с Вами поговорить про виджеты WordPress. Это будет подробное руководство для начинающих с примерами. Вы узнаете, что такое виджеты ВордПресс, какие возможности предоставляют виджеты WordPress вебмастерам для улучшения сайта без знания кодирования, как добавить виджеты в боковую панель (сайдбар), футер (подвал), как удалить виджет.
Итак, поехали.
Важно: все примеры в статье показывают работу с классическими виджетами, которые использовались в WordPress до внедрения блоков. Для тех пользователей, кто хочет вернуть классические виджеты WordPress я рекомендую установить плагин Classic Widgets.
Что такое виджеты WordPress?
Виджеты WordPress — это специальные дополнения, которые позволяют увеличивать функциональность сайта. Виджеты WordPress помогают людям добавлять различные блоки в определенные места сайта, такие как: боковые панели, футер (подвал сайта) и другие области сайта.
Когда Вы посещали сайты и блоги, сделанные на ВордПресс, Вы могли видеть в боковых панелях рекламные блоки, формы регистрации и многое другое, это все обычно добавляется с помощью виджетов.
Каждый виджет WordPress позволяет добавить определённую функцию на сайт без необходимости писать код. С помощью виджетов мы можем добавить список популярных постов, иконки социальных сетей, фотографии, меню и многое другое.
В какие области сайта можно добавить виджеты WordPress? Это зависит от установленной темы WordPress. Многие темы имеют боковые панели, нижние колонтитулы и другие области виджетов о которых я расскажу ниже в статье.
Виджеты WordPress специально сделаны для того, чтобы предоставить пользователям простой и удобный способ добавлять новые возможности, не портить при этом дизайн сайта и без необходимости знания программирования.
В русскоязычной версии WordPress, после установки CMS, Вы увидите виджеты WordPress на русском языке, около полутора десятков штук. Там есть календарь, меню навигации, рубрики, поиск, облако меток, текст и другие виджеты.
Обратите внимание, что многие плагины после установки добавляют свои виджеты ВордПресс. И если Вы установили WordPress давно и после этого успели установить плагины WordPress, которые Вам были необходимы, то у Вас на сайте могут появиться дополнительные виджеты WordPress от этих плагинов.
Виджеты WordPress бывают очень полезны, они помогают Вам увеличить доход сайта, посетителям перемещаться по сайту и побуждают их совершать нужные Вам действия, такие как подписка на рассылку и другие.
Сразу хочу извиниться, что не смогу на каждое моё действие добавить картинку, когда буду рассказывать про виджеты. Если бы я так сделал, то даже с оптимизированными изображениями эта статья загружалась бы очень медленно, это не нравится мне, не понравится Вам и не понравится поисковым системам, а это очень плохо. Поэтому изображения я добавлю там, где это действительно необходимо. А все свои действия я распишу подробно, по шагам, чтобы Вам было легко понять. И читайте, пожалуйста, не торопясь, желательно первый раз прочитать всю статью, а читая второй сразу повторять мои действия.
Как добавить виджеты в WordPress
После того как Вы смогли сделать блог и войти в админку ВордПресс, одним из первых Ваших действия будет желание добавить виджеты WordPress на сайт.
Добавить виджеты WordPress на сайт очень просто, если несколько способов, как это сделать.
Чтобы найти все виджеты, Вам нужно в боковой панели администратора навести курсор на «Внешний вид» и в выпадающем списке нажать на «Виджеты», откроется страница виджетов и с областями для виджетов.
Пример страницы, где Вы можете добавить виджеты в WordPress.
Обратите внимание на выделенные мной места на картинке, это «Перейти к визуальной настройке» и «Включить режим специальных возможностей». О них мы поговорим ниже.
Там все просто. Как я и говорил, можно добавить виджеты несколькими способами.
Важно: после того как Вы добавите виджеты, Вы сами и Ваши посетители их могут и не увидеть. Почему? Вполне возможно, что Вам нужно будет в первую очередь включить области виджетов в Вашей теме WordPress. Об этом я расскажу ниже в разделе, где буду показывать, как добавить виджеты в визуальном режиме.
Когда Вы открыли окно виджетов Вы там увидите все доступные виджеты слева, а области виджетов справа. Как видите все виджеты на русском языке, а в будущем, после установки плагинов, там могут появиться виджеты на английском.
Давайте пойдём дальше и посмотрим, как добавить виджет в сайдбар (боковую панель).
Простой и наглядный способ добавить виджет в сайдбар (и другую область), это навести курсор мышки на нужный виджет, зажать левую кнопку и перетащить виджет в нужную область виджетов и место в ней.
Вот так:
Как Вы видите, я зажал ЛКМ и перетащил виджет HTML — код в сайдбар после виджета Поиск, где отпустил ЛКМ. После этого действия открылось окно виджета, где я могу при желании написать заголовок, он будет отображаться в сайдбаре сайта. А в поле «Содержимое» я должен вставить код HTML.
Предположим, что я хочу добавить в сайдбар рекламный баннер от сервиса Ecwid. Вы не знаете, что такое Ecwid? Если Вы хотите легко и даже бесплатно сделать свой интернет — магазин, Вам нужно познакомиться с Ecwid.
А я открываю свой партнёрский аккаунт в Ecwid, выбираю там нужный баннер, копирую код баннера и вставляю его в окно Содержимое. Не забываю нажать на кнопку Сохратить и вуаля, я открываю свой тестовый сайт и вижу там, в сайдбаре рекламный баннер от Ecwid.
Все свои действия, рассказывая о виджетах, я делаю в моем тестовом блоге, если Вам интересно Вы можете посмотреть этот блог по адресу:
http://leonik.beget.tech/Некоторое время, те виджеты, которые я добавлю в него, будут видны там, как и сам блог пока останется по этому адресу. Но, это пока, что будет позже, я не знаю, поэтому я не стану делать ссылку кликабельной.
Попробуйте сами и Вы убедитесь, как просто добавить виджет в WordPress.
А я продолжу рассказывать о способах, как добавлять виджеты.
Если Вы нажмёте левой кнопкой на любой виджет, там откроется список с местами для размещения виджета, нужно выбрать нужное место и нажать на кнопку «Добавить виджет». Виджет добавится в выбранное место, в моём случае, это «Основной сайдбар» и откроется окно виджета, где я могу написать заголовок и добавить содержимое в его поле.
Как Вы видели на примере виджета HTML — код (в видео), в поле содержимое я мог вставить только код и если нужно мог этот код самостоятельно изменить. А если я выберу виджет Текст, в поле Содержимое уже будет целый редактор, где можно добавить файл мультимедиа, текст, сделать текст жирным, вставить в него ссылку и так далее. Там есть возможность вставлять и редактировать код, для этого нужно перейти из визуального режима, в текстовый режим. Смотрите пример редактора виджета «Текст»:
Так можно добавить виджет Мета и любые другие виджеты. Лучше всего сделать блог WordPress бесплатно и на нём изучать эту CMS.
Следующий способ, как можно добавить виджеты WordPress, это Включить режим специальных возможностей. Нажмите на эту ссылку, страница виджетов обновится и у каждого виджета появится кнопка Добавить.
Нажав на кнопку «Добавить» нужного виджета в открывшемся окне появится возможность настроить этот виджет и добавить его в определённую область и определённое место виджета в этой области. После чего нам нужно будет только нажать на кнопку «Сохранить виджет» и он появится в нужном нам месте.
Вот так Вы и узнали, как добавлять виджеты WordPress на странице виджетов.
Как настроить виджет ВордПресс в визуальном режиме
Перейти к визуальной настройке, добавить области виджетов и виджеты в ВордПресс.
Вы помните о моём предупреждении, что добавив виджеты на странице виджетов, Вы можете их и не увидеть на Вашем сайте? Давайте исправим эту ситуацию.
Для этого на странице виджетов нам нужно нажать на кнопку Перейти к визуальной настройке или находясь в админке ВордПресс открыть Внешний вид – Настроить. Откроется примерно такая картина:
Визуальная настройка WordPress. Здесь нам нужно пройтись по частям темы WordPress и добавить все нужные Вам области для виджетов.
У меня на тестовом блоге была установлена бесплатная тема Astra. В ней я могу включить и настроить несколько областей для добавления виджетов.
- Сайдбар. Эта область уже была включена, но если я открою вкладку Сайдбар, там я смогу выбрать расположение сайдбара, правый или левый и могу сделать вовсе без сайдбара. Плюс другие настройки. Я оставлю как есть – правый сайдбар.
- Футер. Во вкладке Футер я могу включить области виджетов в футере сайта и в нижнем колонтитуле. Плюс другие настройки для футера и нижнего колонтитула.
После этого я увижу, что те виджеты, которые я добавил на странице виджетов в ранее не активных областях, появились на сайте. Это можно смотреть в правой части окна визуальных настроек, там «в прямом эфире» появляются все изменения на сайте, которые Вы делаете в визуальных настройках.
Обратите внимание, что эти изменения будете видеть только Вы. Для посетителей Вашего сайта будет видна только старая версия дизайна сайта.
После всех настроек мне нужно будет не забыть и нажать на кнопку Опубликовать. После этого все настройки будут сохранены. А Вы и посетители Вашего сайта увидят изменения в дизайне сайта, все добавленные виджеты и другое, что Вы настроили или изменили в теме.
Хорошо, в визуальных настройках мы подключили все нужные области для виджетов. Теперь я покажу, как добавить виджет в футер.
Как добавить виджет в футер WordPress в визуальном режиме
А добавить виджет в футер в визуальном режиме очень просто. Это мой любимый способ. Так я сразу вижу все изменения на сайте.
Чтобы подключить виджет в футер я нажимаю на вкладку «Виджеты», в открывшемся списке доступных для меня виджетов я нажимаю на Область виджетов в футере 1(в бесплатной версии темы Astra 4 области виджетов в футере или можно полностью отключить область виджетов в футере) и в открывшемся левом окне я нажимаю на кнопку «Добавить виджет».
Я хочу добавить в футер виджет Текст. Для этого я ищу этот виджет в списке из доступных виджетов (смотрю в самом низу) и нажимаю на него.
Открывается окно, где я могу редактировать виджет Текст. Пример ниже:
Теперь мне нужно подумать, а что я хочу разместить в футере сайта, используя виджет Текст.
Виджет Текст позволяет мне разместить текст в нужном для меня месте (сейчас в футере). Можно весь текст или часть текста сделать гиперссылкой. Можно добавить медиафайл и при желании добавить описание. Много чего позволяет добавлять этот виджет на сайт.
Если Вы посмотрите на боковую панель и футер моего блога, Вы увидите там блоки: «Популярные посты», блоки рекламных баннеров, часть меню (Обо мне, политика конфиденциальности и др.). Все эти блоки добавлены с помощью виджета Текст. Я мог и другими виджетами для этого воспользоваться, но по моим причинам я решил использовать именно этот виджет. Ниже я расскажу, почему предпочитаю для рекламных баннеров использовать виджет Текст, а не виджет HTML.
Хотя нет, сейчас поясню. Виджет HTML я использую, когда вставляю рекламный код от РСЯ, этот код я не должен менять, а виджет Текст я использую в других случаях, когда мне ничего не мешает вносить изменения в код.
В этом примере я буду рассказывать, как в виджет Текст добавить рекламный баннер, сделанный самостоятельно, добавлю гиперссылку, чтобы при нажатии на баннер открывалась рекламируемая страница в новой вкладке браузера. Ниже баннера я добавлю текст (призыв к действию) и добавлю в текст гиперссылку. Обычно я так не делаю, но сейчас сделаю, чтобы Вам на одном примере было понятно, как добавить в виджет картинку и текст со ссылками.
Начнём.
Я остановился на том, что я добавил в область футера 1 виджет Текст. Теперь мне нужно настроить этот виджет.
Как я уже писал выше я хочу самостоятельно сделать рекламный баннер, а не брать готовый от одной из партнёрских программ, в которой я участвую.
Я хочу добавить рекламный баннер от реферальной программы рекламной сети TeaserNet. Это очень хорошая рекламная сеть, где владельцы блогов и сайтов могут зарабатывать, даже если у них мало посетителей.
Я уже писал о том, как бесплатно создать баннер онлайн на русском в BannerFans, там не нужна регистрация и всё очень просто.
И я делал обзор сайта Canva, где показывал, как там можно сделать баннер онлайн. Здесь нужна регистрация, но она простейшая и даёт все возможности для пользования бесплатной версией. А эти возможности очень большие. Около миллиона фотографий, значков, шаблонов текстов, шаблонов разных дизайнов, элементов. Все дизайны, которые Вы сделали, остаются доступны Вам в любое время для загрузки или редактирования.
Вот я и решил сделать рекламный баннер в Canva, а что у меня получилось, Вы увидите ниже на картинке.
Теперь о том, почему я предпочитаю самостоятельно делать баннеры, когда это возможно. Дело в том, что не всегда мне нравятся те баннеры, которые предоставляют партнёрские программы, поэтому я делаю баннеры самостоятельно. А ещё я эти баннеры оптимизирую для меньшего веса, чтобы они минимально влияли на скорость загрузки страниц блога.
Хорошо, я сделал рекламный баннер и оптимизировал изображение, уменьшив его вес примерно в 2 раза.
Я добавляю картинку в медиабиблиотеку моего блога, где прописываю атрибут alt и по желанию пишу Подпись, этот текст из подписи будет виден на сайте под картинкой в том месте, где я её размещу.
Сейчас я не буду писать текст в окне Подпись, так как самостоятельно напишу текст с гиперссылкой в редакторе виджета Текст.
Так, я добавил картинку баннера в библиотеку медиафайлов моего блога, написал заголовок и альтернативный текст (alt).
Возвращаюсь в редактор виджета Текст и нажимаю кнопку Добавить медиафайл. В открывшейся библиотеке медиафайлов я нажимаю на нужную картинку и нажимаю на кнопку Вставить в запись. Картинка появляется в окне редактора виджета и сразу появляется в первом блоке футера, куда я её и хотел добавить.
Чтобы картинке в блоге стала кликабельной я должен добавить ссылку. Я открываю сайт партнёрской программы и копирую там мою реферальную ссылку в буфер обмена. Возвращаюсь в редактор виджета, нажимаю на изображение, оно выделится и появится мини редактор для изменений изображения, которым я пользоваться не стану, а я нажму в редакторе окна виджета на кнопку Вставить/изменить ссылку и вставлю свою партнёрскую ссылку в появившуюся строку. Там я ещё нажму на значок шестерёнки (настройка) и в появившемся окне поставлю галочку в строке Открывать в новой вкладке. Если у Вас установлен SEO плагин, он может добавить другие строки, такие как rel="nofollow" или rel="sponsored". Для партнёрских ссылок нужно поставить галочку в одной из этих строк (Гугл теперь рекомендует для партнёрских ссылок добавлять вторую).
Вот что советует Google по исходящим ссылкам.
В моём тестовом блоге есть SEO плагин, но он не предоставляет возможность вставить с его помощью rel="nofollow" или rel="sponsored", поэтому мне нужно будет прописать одно из этих значений атрибута rel в код самостоятельно.
После того как я вставил ссылку для изображения, я нажимаю на Текст, и редактор виджета переключается из визуального режима в текстовый, где я могу править код. Там я уже вижу в коде rel="noopener", я ставлю курсор мышки после noopener, но внутри кавычек, нажимаю Пробел и вставляю атрибут nofollow, вот что у меня получилось: rel="noopener nofollow"
А я нажимаю на кнопку Визуально и возвращаюсь в визуальный режим редактирования.
Там я хотел ещё написать текст, призыва к действию и гиперссылкой в тексте.
Я кликаю рядом или ниже изображения баннера, нажима. На кнопку Enter, и ниже картинки я пишу текст.
Монетизация сайтов с минимальным трафиком. Узнать подробней.
Потом я выделяю «Узнать подробней» и, как для картинки, для этого выделенного предложения вставляю свою партнёрскую ссылку, выбираю открыть в новой вкладке, вставляю nofollow.
Всё, что я делаю в редакторе виджета Текст, моментально отображается в окне браузера в правой его части, где я вижу мой блог. Даже написав 1 букву и подождав секунду, я увижу, как эта буква появится в блоге. Но, как я уже писал выше, все эти изменения увижу только я, а не посетители блога.
После того как я всё что хотел сделать в виджете Текст я сделал, я должен не забыть сохранить все изменения нажав на кнопку Опубликовать. И только после этого действия посетители моего блога увидят в первом блоке футера этот рекламный баннер и призыв к действию. Если их это заинтересует, они, нажав на баннер или на ссылку в тексте, перейдут на рекламируемый сайт.
Вот что у меня получилось:
Баннер и текст в виджете сделаны и ссылки работают, правда, Вы не видите ссылку в тексте, всё дело в том, что текст на тёмном фоне, но если подвести курсор к словам «Узнать подробней», то станет понятно, что там есть гиперссылка, нажав на которую можно перейти на другую страницу или сайт.
Как удалить виджет WordPress.
Если Вы находитесь в режиме визуальных настроек виджетов, то, открыв любой виджет, Вы увидите в его окне ссылку «Удалить», нажав на которую удалится этот виджет. На последней картинке я выделил Удалить.
Если Вы хотите удалить любой виджет через Внешний вид – Виджеты, то, там Вы можете нажать на кнопку «Изменить» нужного виджета и в открывшемся окне найти внизу и нажать на кнопку Удалить. А если думаете, что Вы захотите этим, уже настроенный виджет в будущем ещё воспользоваться, Вы можете его не удалять, а выше кнопки «Удалить» отметьте строку «Неактивные виджеты» и нажмите на кнопку «Сохранить виджет». Он удалится с сайта, но останется в Неактивных виджетах на странице Виджеты.
В чём отличия между виджетами и плагинами
Давайте приведём в пример браузер. Все Вы используете браузеры, чтобы прочитать эту статью и у некоторых из Вас, есть браузер с переводчиком, который встроен в браузер и поставляется с ним. Пример таких браузеров, это Яндекс браузер, Google Chrome, и новый браузер Microsoft Edge. Все они поставляются со встроенными переводчиками. А есть браузеры, в которых нет встроенного переводчика, и пользователям приходится искать подходящие дополнения в каталогах приложений, которые подходят к этому браузеру. Такие дополнения, приходится устанавливать самостоятельно.
Вот и виджеты WordPress поставляются в этой CMS «из коробки», но есть виджеты, которые добавляются при установке плагинов. Так в моём блоге позже появились такие виджеты, как рекламный виджет от плагина Advanced Ads и виджеты социальных сетей от плагина Sassy Social Share.
Вот, пожалуй, и всё, что я хотел рассказать про виджеты WordPress, Вы узнали, что такое виджеты, куда и как их можно добавлять и настроить на сайты ВордПресс и как их удалить. Это самое основное, что нужно знать о виджетах начинающим.
Если статья была полезна, пожалуйста, поделитесь ей в социальных сетях.
Появились вопросы? Спросите в комментариях.
P.S. Не забудьте подтвердить право собственности на сайт.
Всего Вам хорошего.
