Где редактировать виджеты wordpress

Обновление WordPress 5.8 — как работать с новыми виджетами и как вернуть классические виджеты

20 июля 2021 года вышло обновление WordPress до версии 5.8. Каждый, кто привык стабильно обновлять свой движок, смело нажали на кнопку, думая, что этот апдейт, как и многие предыдущие, коснётся только того, что «под капотом» и никак не скажется на работе сайта. Но оказалось, что версия 5.8 даёт новую страницу управления виджетами. Некоторых вебмастеров это повергло в шок — как теперь настраивать тут всё. Других обрадовало — появились много новых функции и возможностей.

В этой статье мы разберём вопрос работы с новыми виджетами в WordPress 5.8. Узнаем чего в них больше — недостатков или достоинств. И, конечно же, рассмотрим возможность возврата к классической версии и рентабельность этого поступка.

Как работать с виджетами в обновлении WordPress 5.8

Помните, в конце 2018 года вышло обновление WordPress, которое принесло новый редактор записей и страниц Guttenberg. Он представлял собой блочный визуальный редактор. Тогда многие вебмастера спешили возвращать всё на старое место и устанавливали плагин Classic Editor, который включал старый редактор. Даже сейчас есть те, кто до сих пор пользуются классическим редактором.

Так вот те, кто тогда в 2018-м освоился на Guttenberg, смогут легко перейти на новый редактор виджетов в обновлении WordPress 5.8. А те, кто остался тогда на классическом редакторе и до сих пор им пользуется, захотят вернуть виджеты к классике. Однако первые получают больше функций и возможностей, нежели вторые, которые предпочитают старый интерфейс. И классика, если честно, тут громко сказано, поэтому это на самом деле не классика, а уже не актуальные технологии.

Поэтому рекомендуется осваивать новый интерфейс и не возвращаться к старому. Давайте рассмотрим, как пользоваться новыми виджетами в WordPress 5.8. Здесь всё очень просто.

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

Некоторые виджеты здесь, в редакторе, могут отображаться не корректно. А также может появляться сообщение о том, что используется тот или иной устаревший виджет. Но на сайте, на фрондэнде, проблем из-за этого не наблюдается. Однако устаревшие виджеты, всё-таки, лучше заменить на новые.

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

Есть два способа добавить виджет в область виджетов.

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

Второй способ — нажмите на кнопку в виде плюса вверху слева и выберите нужный блок. Его можно найти с помощью поиска по названию, либо самому пройтись по списку и просмотреть все. Все блоки разделены на категории. Найденный виджет просто перетащите мышкой в нужную область.

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

Как и ранее, каждый виджет можно индивидуально настраивать и опции у каждого свои. Для настройки нужно кликнуть на виджет, установленный в область виджетов.

Пока ещё не все плагины перешли на новый редактор виджетов. Поэтому, если вы используете на сайте виджеты, создаваемые сторонними плагинами, они могут перестать работать.

Как переместить виджеты

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

Чтобы переместить виджеты между областями виджетов, нажмите на фигурную стрелку и выберите нужную область.

Как удалить виджет

Удалить виджет можно так же, как удаляется блок в редакторе записей и страниц. Нажмите мышкой на виджет, появится небольшое контекстное меню, в нём нажмите на три точки, а затем «Удалить».

После всех работ на странице виджетов, не забывайте нажимать вверху справа кнопку «Обновить», чтобы изменения применились.

Какие достоинства и недостатки у виджетов в обновлённой WordPress 5.8

Достоинств больше, чем недостатков и недостатки все временные. Начнём с минусов:

• Ещё не все плагины поддерживают новый редактор виджетов. Но это проблема разработчиков плагинов. В ближайший месяц каждый актуальный плагин сделает эту поддержку.
• Ещё не все вебмастера привыкли. Но надо привыкать к новому.

Достоинства нового редактора виджетов такие:

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

Как вернуть старые виджеты в новой WordPress 5.8

Когда разработчики WordPress выпустили редактор Gutenberg, они позаботились о тех, кому трудно резко перейти на что-то новое и предоставили плагин Classik editor, который возвращает старый редактор. Он работает и по сей день. В случае с виджетами также разработчиками был предоставлен плагин, который возвращает классический редактор виджетов. Называется Classic Widgets.

Если несмотря на все достоинства, вы хотите вернуться к классическому редактору виджетов, просто установите этот плагин и активируйте. Даже без настройки он будет работать и вернёт всё назад, не откатывая при этом версию обновления, и сохранив другие апдейты CMS.

На странице плагина сказано, что он будет поддерживаться до 2022 года. Но скорее всего поддержка будет продолжительная, как и в случае с Classic Editor. Однако поддержка старых версий, как редактора записей и страниц, так и редактора виджетов, не будет вечной. Пора осваиваться на новом — это актуально, профессионально, функционально и эффективно.

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

От автора: приветствую вас, друзья. Данная статья написана в первую очередь для начинающих пользователей, которые только-только начинают знакомиться с WordPress. В статье мы рассмотрим такой вопрос, как настройка и редактирование виджетов на WordPress.

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

Если опуститься от общего определения к частности, то виджет в WordPress это, в общем-то, тот же элемент интерфейса, который выполняет конкретный функционал и располагается он чаще всего в боковой колонке сайта (сайдбаре).

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

Кстати, давайте пройдемся по списку виджетов, которые нам предлагает WordPress. В актуальной на момент написания статьи версии 4.4.2 WordPress можно найти следующие:

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

RSS — записи из ленты RSS или Atom;

Архивы — архивы статей сайта по месяцам;

Календарь — календарь с возможностью выбора статей за выбранную дату;

Мета — список ссылок (вход/выход, лента RSS, сайт WordPress);

Облако меток — облако тегов (меток);

Поиск — форма поиска для сайта;

Произвольное меню — меню с возможностью добавления любых ссылок;

Рубрики — список категорий сайта;

Свежие записи — список последних статей на сайте;

Свежие комментарии — список последних комментариев;

Страницы — список постоянных страниц сайта;

Текст — текстовое поле для вставки произвольного кода.

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

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

Итак, перетаскиваем в область для виджетов виджет Страницы.

Часто виджеты имеют целый ряд настроек. Выбранный нами — не исключение. Виджет Страницы предлагает три настройки: название (оно может отображаться над списком страниц), порядок сортировки списка и возможность исключить некоторые страницы из списка, перечислив их ID через запятую. Настройте виджет по своему вкусу.

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

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Как видим, настроить виджеты на WordPress очень легко. Ну а если вы хотите научиться создавать собственные виджеты и плагины, тогда обязательно познакомьтесь с нашим курсом по изучению API WordPress. На этом у меня все. Удачи!

Виджеты WordPress для начинающих с примерами

Что такое виджеты WordPress, как добавить и настроить виджеты по шагам.

Здравствуйте, уважаемые читатели.

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

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

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

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

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

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

В какие области сайта можно добавить виджеты WordPress? Это зависит от установленной темы WordPress. Многие темы имеют боковые панели, нижние колонтитулы и другие области виджетов о которых я расскажу ниже в статье.

Что такое виджеты WordPress: учебник

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

Международная школа программирования и математики для детей от 7 до 17 лет. Более миллиона выпускников в 90 странах мира. Собственная методика и игровой формат обучения, упор на развитие навыков будущего. Реклама.

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

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

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

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

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

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

Добавить виджеты WordPress на сайт очень просто, если несколько способов, как это сделать.

Чтобы найти все виджеты, Вам нужно в боковой панели администратора навести курсор на «Внешний вид» и в выпадающем списке нажать на «Виджеты», откроется страница виджетов и с областями для виджетов.

Страница виджетов ВордПресс, где с левой стороны виджеты, а с правой области виджетов. Про выделенные элементы читайте ниже.

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

Там все просто. Как я и говорил, можно добавить виджеты несколькими способами.

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

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

Давайте пойдём дальше и посмотрим, как добавить виджет в сайдбар (боковую панель).

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

Пример, как добавить виджет HTML — код в область виджетов сайдбар

Как Вы видите, я зажал ЛКМ и перетащил виджет HTML — код в сайдбар после виджета Поиск, где отпустил ЛКМ. После этого действия открылось окно виджета, где я могу при желании написать заголовок, он будет отображаться в сайдбаре сайта. А в поле «Содержимое» я должен вставить код HTML.

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

А я открываю свой партнёрский аккаунт в Ecwid, выбираю там нужный баннер, копирую код баннера и вставляю его в окно Содержимое. Не забываю нажать на кнопку Сохратить и вуаля, я открываю свой тестовый сайт и вижу там, в сайдбаре рекламный баннер от Ecwid.

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

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

Попробуйте сами и Вы убедитесь, как просто добавить виджет в WordPress.

А я продолжу рассказывать о способах, как добавлять виджеты.

Если Вы нажмёте левой кнопкой на любой виджет, там откроется список с местами для размещения виджета, нужно выбрать нужное место и нажать на кнопку «Добавить виджет». Виджет добавится в выбранное место, в моём случае, это «Основной сайдбар» и откроется окно виджета, где я могу написать заголовок и добавить содержимое в его поле.

Как Вы видели на примере виджета HTML — код (в видео), в поле содержимое я мог вставить только код и если нужно мог этот код самостоятельно изменить. А если я выберу виджет Текст, в поле Содержимое уже будет целый редактор, где можно добавить файл мультимедиа, текст, сделать текст жирным, вставить в него ссылку и так далее. Там есть возможность вставлять и редактировать код, для этого нужно перейти из визуального режима, в текстовый режим. Смотрите пример редактора виджета «Текст»:

Визуально и Текст — это два режима в которых удобно редактировать контент и код виджета

Так можно добавить виджет Мета и любые другие виджеты. Лучше всего сделать блог WordPress бесплатно и на нём изучать эту CMS.

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

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

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

Как настроить виджет ВордПресс в визуальном режиме

Перейти к визуальной настройке, добавить области виджетов и виджеты в ВордПресс.

Вы помните о моём предупреждении, что добавив виджеты на странице виджетов, Вы можете их и не увидеть на Вашем сайте? Давайте исправим эту ситуацию.

Для этого на странице виджетов нам нужно нажать на кнопку Перейти к визуальной настройке или находясь в админке ВордПресс открыть Внешний вид – Настроить. Откроется примерно такая картина:

Визуальная настройка WordPress — нужно добавить области виджетов в теме

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

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

• Сайдбар. Эта область уже была включена, но если я открою вкладку Сайдбар, там я смогу выбрать расположение сайдбара, правый или левый и могу сделать вовсе без сайдбара. Плюс другие настройки. Я оставлю как есть – правый сайдбар.
• Футер. Во вкладке Футер я могу включить области виджетов в футере сайта и в нижнем колонтитуле. Плюс другие настройки для футера и нижнего колонтитула.

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

Обратите внимание, что эти изменения будете видеть только Вы. Для посетителей Вашего сайта будет видна только старая версия дизайна сайта.

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

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

Как добавить виджет в футер WordPress в визуальном режиме

А добавить виджет в футер в визуальном режиме очень просто. Это мой любимый способ. Так я сразу вижу все изменения на сайте.

Чтобы подключить виджет в футер я нажимаю на вкладку «Виджеты», в открывшемся списке доступных для меня виджетов я нажимаю на Область виджетов в футере 1(в бесплатной версии темы Astra 4 области виджетов в футере или можно полностью отключить область виджетов в футере) и в открывшемся левом окне я нажимаю на кнопку «Добавить виджет».

Нажать на кнопку «Добавить виджет» и выбрать нужный

Я хочу добавить в футер виджет Текст. Для этого я ищу этот виджет в списке из доступных виджетов (смотрю в самом низу) и нажимаю на него.

Открывается окно, где я могу редактировать виджет Текст. Пример ниже:

В левом окне редактировать, а в правом смотреть результат редактирования

Теперь мне нужно подумать, а что я хочу разместить в футере сайта, используя виджет Текст.

Виджет Текст позволяет мне разместить текст в нужном для меня месте (сейчас в футере). Можно весь текст или часть текста сделать гиперссылкой. Можно добавить медиафайл и при желании добавить описание. Много чего позволяет добавлять этот виджет на сайт.

Если Вы посмотрите на боковую панель и футер моего блога, Вы увидите там блоки: «Популярные посты», блоки рекламных баннеров, часть меню (Обо мне, политика конфиденциальности и др.). Все эти блоки добавлены с помощью виджета Текст. Я мог и другими виджетами для этого воспользоваться, но по моим причинам я решил использовать именно этот виджет. Ниже я расскажу, почему предпочитаю для рекламных баннеров использовать виджет Текст, а не виджет HTML.

Хотя нет, сейчас поясню. Виджет HTML я использую, когда вставляю рекламный код от РСЯ, этот код я не должен менять, а виджет Текст я использую в других случаях, когда мне ничего не мешает вносить изменения в код.

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

Я остановился на том, что я добавил в область футера 1 виджет Текст. Теперь мне нужно настроить этот виджет.

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

Я хочу добавить рекламный баннер от реферальной программы рекламной сети TeaserNet. Это очень хорошая рекламная сеть, где владельцы блогов и сайтов могут зарабатывать, даже если у них мало посетителей.

Как и где я делаю рекламные баннеры для моего блога.

Я уже писал о том, как бесплатно создать баннер онлайн на русском в BannerFans, там не нужна регистрация и всё очень просто.

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

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

Теперь о том, почему я предпочитаю самостоятельно делать баннеры, когда это возможно. Дело в том, что не всегда мне нравятся те баннеры, которые предоставляют партнёрские программы, поэтому я делаю баннеры самостоятельно. А ещё я эти баннеры оптимизирую для меньшего веса, чтобы они минимально влияли на скорость загрузки страниц блога.

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

Я добавляю картинку в медиабиблиотеку моего блога, где прописываю атрибут alt и по желанию пишу Подпись, этот текст из подписи будет виден на сайте под картинкой в том месте, где я её размещу.
Сейчас я не буду писать текст в окне Подпись, так как самостоятельно напишу текст с гиперссылкой в редакторе виджета Текст.

Так, я добавил картинку баннера в библиотеку медиафайлов моего блога, написал заголовок и альтернативный текст (alt).

Возвращаюсь в редактор виджета Текст и нажимаю кнопку Добавить медиафайл. В открывшейся библиотеке медиафайлов я нажимаю на нужную картинку и нажимаю на кнопку Вставить в запись. Картинка появляется в окне редактора виджета и сразу появляется в первом блоке футера, куда я её и хотел добавить.

Чтобы картинке в блоге стала кликабельной я должен добавить ссылку. Я открываю сайт партнёрской программы и копирую там мою реферальную ссылку в буфер обмена. Возвращаюсь в редактор виджета, нажимаю на изображение, оно выделится и появится мини редактор для изменений изображения, которым я пользоваться не стану, а я нажму в редакторе окна виджета на кнопку Вставить/изменить ссылку и вставлю свою партнёрскую ссылку в появившуюся строку. Там я ещё нажму на значок шестерёнки (настройка) и в появившемся окне поставлю галочку в строке Открывать в новой вкладке. Если у Вас установлен SEO плагин, он может добавить другие строки, такие как rel=»nofollow» или rel=»sponsored» . Для партнёрских ссылок нужно поставить галочку в одной из этих строк (Гугл теперь рекомендует для партнёрских ссылок добавлять вторую).

В моём тестовом блоге есть 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, Вы узнали, что такое виджеты, куда и как их можно добавлять и настроить на сайты ВордПресс и как их удалить. Это самое основное, что нужно знать о виджетах начинающим.

How to Create WordPress Custom Widgets: What They Are and How They Work?

Did you know that you can create your own WordPress custom widget? While there are tons of additional widgets that come alongside themes and plugins, WordPress offers its users the option to code custom widgets manually.

It’s not a complicated process as you only need basic knowledge of WordPress and PHP. So, without further ado, let’s get started!

What Are WordPress Widgets?

WordPress widgets make it easy for you to add additional functions to your website through a simple drag-and-drop interface. By default, WordPress ships with several widgets. They provide you with basic utility features and are compatible with every WordPress theme.

However, sometimes, those standard widgets can’t perform the tasks you want. Your best option is to look for plugins offering you the desired function. Unfortunately, you might find that even third-party plugins can’t fulfill your requirements.

Thankfully, you have the power to create a WordPress custom widget. Just keep in mind that it has to be built from the ground-up so you can personally fine-tune your custom widget based on your needs.

Where to Begin When Creating a Custom Widget?

First, you need to choose whether you want to create the widget using a plugin or via editing the functions.php file. A plugin will enable the custom widget to work on any site while adding code to functions.php. This way, it makes the widget work alongside a specific theme.

Secondly, you have the option to add the widget on a live site or in a local environment. However, we highly recommend you to implement the widget in a local environment first, to test it out. You can easily do this by following our guide on how to run WordPress on Docker.

Once the tool is working correctly, it is time to move it to your website.

How Do WordPress Custom Widgets Work?

In WordPress, you have to create a custom widget using the standard WP Widget class from the Widgets API. There are around 20 functions that you can play around with. Out of these, four is the minimum requirement for any widget to work:

• __construct() – constructor function where you can define your widget’s parameters.
• widget() – contains the output of the widget.
• form() – determines widget settings in the WordPress dashboard.
• update() – updates widget settings.

Of course, you’ve got plenty of other options that provide additional functions. For more on the WP_Widget class, take a look at the WordPress developer page.

Creating a WordPress Custom Widget

Important! It’s strongly recommended to create a full website backup before proceeding further. In addition, you should also use a WordPress child theme to prevent any issues from affecting your main theme.

For this tutorial, we’ll be creating a simple “Greetings from Hostinger.com!” custom widget so you can learn the basics of widget creation in WordPress. Once that is done, you can move on to creating more complex widgets on your own.

One more thing to note is that we’re writing this code in the functions.php file for the currently loaded theme. That being said, you can use the same code for any custom plugin.

1. Extending the WP_Widget class

The first thing you need to do is to open any text editor on your computer and create a new class that extends the base WP_Widget class, like this:

2. Adding __construct()

Next, we start implementing the four standard functions one by one. The first one is the constructor method, which will determine the custom widget’s ID, name, and description.

3. Adding widget()

Now, let’s focus on the widget() function. It defines the look of your WordPress custom widget on the front-end.

With this, we have configured the output of our widget so that it displays the phrase “Greetings from Hostinger.com!” and widget’s title as specified by the user.

4. Adding form()

Now, we have to program the back-end of the widget using the form() method. You can see the result when you want to add the widget from the WordPress Dashboard.

Here you can see how a custom widget has been set up. If a user applies a title, then that title will be inserted in the HTML form we created. In this example, we will set the name of the title to Default Title.

5. Adding update()

Once that’s done, we have to implement update(), which will refresh the widget every time you change the settings.

We’re taking the current title of the newly created instance, removing any HTML/PHP tags. Then, we’re passing the title to the instance and returning it.

6. Registering WordPress Custom Widget

Finally, we have to register the new custom widget using add_action() function. Keep in mind that you should place the following code at the top, before extending the WP_Widget class.

Adding the Code to functions.php File

So, we’ve defined a new function called hstngr_register_widget(). It registers our widget using the widget ID, which is specified in the __construct() function.

Then, we have tied this function using widgets_init, which loads the widget into WordPress through the built-in add_action() method. Your final WordPress custom widget code should look like this:

Finally, it is time to insert the code to your functions.php file.

1. Log in to your WordPress admin area. Then, navigate to Appearance -> Theme Editor -> Theme Functions.
2. Paste the code from your text editor to the bottom of functions.php file. Click Update File to save the changes.

Using WordPress Custom Widget

You can finally use your newly-installed widget.

1. Go to the Appearance menu, and select Widgets. You should see a widget named Hostinger Sample Widget in the Available Widgets list.
2. Next, drag the widget and drop it in the Sidebar section on the right side of the page.
3. Save your changes and visit your website. You will be welcomed with a custom widget with the words “Greetings from Hostinger.com” inside.

Congratulations, you have successfully created your first custom WordPress widget!

Conclusion

WordPress custom widget allows you to add a specific function to your website based on your needs. It’s a great solution whenever you can’t find anything in particular that would meet your specific requirements. or when you’re becoming a WordPress developer and want to develop your website.

To summarize, let’s take a look at the steps once again on how to create your own custom WordPress widget:

1. Create a new class that extends WP_Widget.
2. Begin with __construct() to determine widget’s parameters.
3. Use widget() to define the appearance of the widget on the front-end.
4. Add form() to configure how the widget will look.
5. Don’t forget to add update() to refresh the widget every time you modify it.
6. Register the new WordPress custom widget using add_action() function.
7. Copy and paste the entire code to the bottom of functions.php file and click Update File.
8. Go to the Widgets menu and move the widget to the desired place.

Discover More Expert WordPress Techniques

Domantas leads the content and SEO teams forward with fresh ideas and out of the box approaches. Armed with extensive SEO and marketing knowledge, he aims to spread the word of Hostinger to every corner of the world. During his free time, Domantas likes to hone his web development skills and travel to exotic places.