Як створити динамічний віджет у 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 Функції.php файл. Ці віджети будуть активними, коли у вас активна тема.

 

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

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

• Функція-конструктор.
• Для відображення вмісту віджета ми створюємо  Віджет функції.
• Щоб оновити налаштування віджета, ми використовуємо  Оновити функції.
• Для збору інформації від користувачів ми використовуємо  Форма функції.

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

 

ЧАСТИНА 2: Давайте створимо динамічний віджет для WordPress

Створення динамічного віджета для WordPress – тривалий процес. Можливо, це здасться складним, якщо ви робите це вперше, але ми зробили це для вас простим.

Ми розділили весь процес на чотири прості кроки. Виконайте ці чотири прості кроки, щоб створити динамічний віджет для WordPress.

 

КРОК 1. Створіть порожній плагін

Першим кроком є ​​створення порожнього плагіна для нашого віджета WordPress. Цей крок простий і легкий. Можливо, ви бачили це раніше, якщо ви коли-небудь створювали плагіни або віджети.

Ми створюємо плагін, оскільки ми додамо віджет у цей плагін, а потім додамо цей плагін на наш сайт WordPress.

Для цього вам потрібно зайти в  /wp-content/plugins/. Створюючи цей плагін для свого сайту WordPress, вам доведеться додати новий каталог і назвати його відповідно.

Ви можете назвати його як завгодно. У вашому каталозі вам доведеться створити   index.php.   Цей індексний файл матиме наступний приклад коду.

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

 

КРОК 2. Створіть зразок коду віджета

Другим кроком є ​​створення зразка коду віджета. Ми будемо використовувати чотири основні функції, щоб розширити зручність використання  WP_Widget  клас.

class Example_Widget extends WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Створення зразка віджета } } // Реєстрація віджета function register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget');

У наведеному вище розділі коду ви можете це побачити  WP_Widget розширюється за допомогою функції конструкції. А в останній частині блоку ви можете побачити, як ми зареєстрували наш зразок віджета  register_widget. 

Після створення та реєстрації зразка віджета ми повинні додати до нього динамічні функції. Ми можемо використовувати  Віджет,  Форма, та  Оновити функціонує відповідно до наших вимог.

ПІДЛОГА ПІДГОТОВКИ: Щоб додати деталі стилю, ви можете використовувати CSS  Клас.   Його можна додати до HTML DOM, і він стилізує відображення всього віджета. 

 

КРОК 3: Додайте віджет на сторінку

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

Щоб зробити його динамічним, ми повинні додати динамічне джерело інформації. Ми зробимо це на наступному кроці. Наразі ми додамо цей щойно створений налаштований віджет на сторінку сайту WordPress.

Щоб додати його на сторінку, вам потрібно повернутися до панелі адміністратора WordPress. Там вам доведеться йти до Зовнішній вигляд на бічній панелі. Йти до Зовнішній вигляд> Віджети.

Тут ви можете додати свій віджет будь-де на сторінці, як-от верхній колонтитул, нижній колонтитул, бічна панель тощо.

 

КРОК 4. Додайте динамічні дані до віджета

Зараз виконано більше половини процесу. Настав час додати динамічні дані до вашого віджету. Ви можете отримати динамічні дані з будь-якого джерела.

Наприклад, якщо ви створюєте віджет для показу реальних випадків COVID-19 у світі, вам доведеться отримати дані з такого веб-сайту, як ВООЗ, або медіа-сайту.

Отримайте URL-адресу інформації та додайте  ключ API до нього. Тепер за допомогою Віджет разом із інструкцією «ОТРИМАТИ» ви можете отримати подробиці про COVID-19 в реальному часі (згідно з прикладом).  

ключ API разом із запитом «GET» захопить і відобразить дані або інформацію у вашому віджеті. Отримайте допомогу щодо рядків і змінних JSON, щоб оновити дані у вашому віджеті.

 

КРОК 5: Завантаження плагіна

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

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

 

ЧАСТИНА 3: Отримайте елементи, плагіни, віджети в одному місці

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

Є багато Теми WordPressдоступні плагіни та віджети. Більшість ваших вимог можна виконати за допомогою цих готових віджетів із можливістю налаштування. Нижче наведено найкращий доступний варіант.

 

Deep WordPress тема

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

 

Бустер швидкості

Додаткові коди на ваших сторінках впливають на швидкість завантаження сторінки. Але з цією темою не потрібно завантажувати додаткові коди. Завдяки чому ваші сторінки завантажуються швидше. Елементи CSS і JS завантажуються у вихідний код сторінки. Тож це робить завантаження плавнішим із меншою кількістю коду.

 

Супер відповідь

Ви отримаєте покращений досвід роботи на своїх веб-сторінках. Покращений UX допоможе вам надати функцію супервідповіді відвідувачам вашого сайту.

 

Простий у використанні

Deep Імпортер тем дуже простий і швидкий у використанні. Це допомагає вам працювати дуже комфортно та зручно під час імпорту тем на ваш веб-сайт WordPress.

 

Справжні ціни

Ви значно заощадите, використовуючи deep Тема WordPress від Webnus. Усі теми, плагіни доступні за реальною ціною.

 

Підведемо підсумки!

У цій публікації ми дізналися, що таке динамічний віджет WordPress і як його створити.

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

Крім того, ми дізналися, що ви можете отримати готові плагіни, віджети, елементи тощо через Webnus. Ви заощадите свій час і гроші під час використання deep Тема WordPress від Webnus.