Как создать динамический виджет в WordPress

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

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

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

 

Как создать динамический виджет в WordPress

В этом посте мы рассмотрим эту тему в трех основных частях.

 

ЧАСТЬ 1. Прежде чем начать, разберитесь в нескольких вещах

Прежде чем вы узнаете, как создать динамический виджет WordPress, вы должны знать несколько вещей.

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

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

 

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

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

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

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

 

Статический виджет

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

 

Динамический виджет

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

 

Сочетание

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

 

Вещи, которые вы должны знать

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

 

Базовое кодирование

Вы должны быть знакомы с основами ООП (объектно-ориентированного программирования) в PHP. 

 

Резервное копирование исходного кода

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

 

Размещение кода

Виджеты WordPress будут разрабатываться с кодами, но где эти коды будут размещены? Вы можете разместить код виджета в папке темы WordPress. functions.php файл. Эти виджеты будут активны, когда у вас активна тема.

 

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

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

• Конструкторская функция.
• Для отображения содержимого виджета мы создаем  Виджет функции.
• Чтобы обновить настройки виджета, мы используем  Обновление ПО функции.
• Для сбора информации от пользователей мы используем  форма для заполнения функции.

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

 

ЧАСТЬ 2: Давайте создадим динамический виджет для WordPress

Создание динамического виджета для WordPress - долгий процесс. Может показаться, что это сложно, если вы делаете это впервые, но мы сделали это простым для вас.

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

 

ШАГ 1. Создайте пустой плагин

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

Мы создаем плагин, потому что мы добавим виджет в этот плагин, а затем добавим этот плагин на наш сайт WordPress.

Для этого вам нужно перейти в  / wp-content / plugins /. При создании этого плагина для вашего сайта WordPress вам нужно будет добавить новый каталог и присвоить ему соответствующее имя.

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

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

 

ШАГ 2. Создайте образец кода виджета

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

class Example_Widget extends WP_Widget {public function __construct () {} public function widget ($ args, $ instance) {// Создаем образец виджета}} // Зарегистрируем функцию виджета register_sample_widget () {register_widget ('My_Custom_Widget'); } add_action ('widgets_init', 'register_sample_widget');

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

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

BONUS TIP: Чтобы добавить детали стиля, вы можете использовать CSS  Класс.   Его можно добавить в HTML DOM, и он стилизует отображение всего виджета. 

 

ШАГ 3. Добавьте виджет на страницу

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

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

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

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

 

ШАГ 4. Добавьте динамические данные в виджет

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

Например, если вы создаете виджет для отображения случаев COVID-19 в мире в реальном времени, вам придется получать данные с веб-сайта, такого как ВОЗ, или с сайта СМИ.

Получите URL-адрес информации и добавьте  Ключ API к нему. Теперь используя Виджет вместе с инструкцией «ПОЛУЧИТЬ» вы можете получить живую информацию о COVID-19 (в соответствии с примером).  

Ключ API вместе с запросом «GET» захватит и отобразит данные или информацию в вашем виджете. Получите помощь со строками и переменными JSON, чтобы обновить данные в вашем виджете.

 

ШАГ 5: Загрузка плагина

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

Теперь последний шаг - загрузить плагин в админ-панель WordPress. Для этого вам нужно упаковать плагин в zip-файл. Теперь перейдите к Плагины> Добавить> Загрузить плагин и загрузите свой плагин.

 

ЧАСТЬ 3: Получите элементы, плагины, виджеты в одном месте

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

Здесь очень много Темы WordPress, плагины и виджеты доступны. Большинство ваших требований могут быть выполнены с помощью этих готовых и настраиваемых виджетов. Ниже приведен лучший доступный вариант.

 

Deep WordPress Theme

Ассоциация Deep Тема WordPress предоставляемый The Webnus, является одним из лучших вариантов для получения премиальных тем WordPress, элементов, плагинов и т. д. Вы можете использовать все это для размещения любого динамического виджета на своем веб-сайте WordPress. Ниже приведены некоторые из лучших функций, которые вы получите только с deep Тема WordPress от Webnus.

 

Ускоритель

Дополнительные коды на ваших страницах влияют на скорость загрузки вашей страницы. Но в этой теме нет дополнительных кодов для загрузки. Благодаря этому ваши страницы загружаются быстрее. Элементы CSS и JS загружаются в исходный код страницы. Это делает загрузку более плавной с меньшим количеством кода.

 

Суперответ

Вы получите улучшенный пользовательский интерфейс на своих веб-страницах. Enhanced UX поможет вам обеспечить быстрый отклик посетителям вашего сайта.

 

Легко использовать

Deep Импортер тем очень прост и быстр в использовании. Это помогает вам работать очень комфортно и удобно при импорте тем на ваш сайт WordPress.

 

Подлинная цена

Вы сэкономите много при использовании deep Тема WordPress от Webnus. Все темы, плагины доступны по реальной цене.

 

Подведем итоги!

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

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

Также мы узнали, что вы можете получить готовые плагины, виджеты, элементы и т. Д. С помощью Webnus. Вы сэкономите свое время и деньги, используя deep Тема WordPress от Webnus.