✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.
КодРозробникуБізнес

Підручник: створіть віджет мікроданих для свого бізнесу в WordPress

21
Зміст
Що ми створимо
Основи створення спеціального віджета
Створення віджета мікроданих LocalBusiness
Функція __construct().
Функція form().
Функція update().
Функція widget().
Підведення підсумків і остаточний код

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

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

Мікродані — це додаткові HTML-атрибути, які пояснюють, що містить конкретний HTML-тег, щоб машина могла зрозуміти, що це таке (наприклад, назва підприємства, номер телефону, адреса підприємства, адреса електронної пошти підприємства тощо). Це дає змогу пошуковим системам, таким як Google, отримувати інформацію про вашу компанію з вашого HTML.

Що ми створимо

Наш віджет виводитиме інформацію за допомогою схеми мікроданих LocalBusiness, яка ідеально підходить для організації чи бізнесу. Ви самі вирішуєте, які властивості ви бажаєте вивести, просто клацніть посилання вище, щоб переглянути всі можливі властивості в LocalBusiness (включно з успадкованими). Ваш бізнес або ваша країна можуть віддати перевагу іншим видам інформації.

Віджет цього підручника виведе таку необов’язкову інформацію:

  • Назва компанії (власність мікроданих: legalName)
  • Ідентифікаційний номер ПДВ або номер організації (власність мікроданих: vatID)
  • Поштова адреса (тег мікроданих: PostalAddressіз властивостями для streetAddress, postalCode, та addressLocality)
  • Адреса електронної пошти компанії (власність мікроданих: email)
  • Номер телефону (властивість мікроданих: telephone)

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

Основи створення спеціального віджета

Ви можете розмістити свій код у своїй темі functions.phpабо створити спеціальний плагін. Просто пам’ятайте, що якщо ви збережете його в плагіні, ви втратите віджет під час дезактивації плагіна; і так само, якщо зберегти його в темі, ви втратите віджет, якщо перейдете на іншу тему. У цьому прикладі я додам код у тему functions.php.

Створення віджета виконується за допомогою об’єктно-орієнтованого коду PHP. Ви пишете клас PHP, який розширює клас віджетів WordPress, і ініціалізуєте його, викликаючи register_widget()та вказуючи назву свого класу. У цьому посібнику я назвав свій клас віджета LocalBusiness.

Почнемо з виклику register_widget()внутрішньої функції, підключеної до дії widgets_init.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});

Давайте швидко розглянемо скелет спеціального класу віджетів:

class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() { }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) { }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) { }
}

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

Створення віджета мікроданих LocalBusiness

Найлогічніше почати з конструктора, який відповідає за налаштування вашого віджета.

Функція __construct().

Усередині конструктора вам потрібно налаштувати деякі змінні, такі як ім’я віджета, і викликати функцію батьківського конструктора (батьківський клас – це той, який ви розширюєте; WP_Widget). Детальніше про можливі варіанти в конструкторі читайте тут. Я надам базовий ідентифікатор, назву та опис, наприклад:

// Initialize your widget in the class constructor
public function __construct() {
    $widget_ops = [
        'description' => __('Outputs business information with Microdata', 'txtdomain')
    ];
    parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);
}

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

Функція form().

Наступним кроком є ​​створення всіх налаштувань і вводів, які ваш віджет приймає в адміністраторі. Для виведення налаштувань у Widget admin ми використовуємо функцію, form()яка надає вам один параметр; масив, який містить усі можливі збережені параметри віджетів. Важливо, щоб ви виводили відповідне збережене налаштування в усіх своїх введеннях, щоб дані зберігалися. (Ми розглянемо, як зберегти налаштування на наступному кроці).

У функції форми потрібно багато чого відслідковувати, тому давайте спершу додамо один вхід, для юридичної назви, і переконаємося, що ми розуміємо, що нам потрібно зробити:

// Responsible for outputting the widget settings in admin
public function form($instance) { 
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
        <input 
            type="text" 
            class="widefat" 
            id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>"
            name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>"
            value="<?php echo esc_attr($instance['legal_name']); ?>"
        />
    </p>
    <?php
}

По-перше, наведений вище код виводить деякі HTML-оболонки та класи у форму, у якій WordPress виводить свої форми віджетів – ми робимо це, щоб форма виглядала гарно.

Є дві функції, з якими вам потрібно ознайомитися; get_field_id()і get_field_name()обидві вони є функціями всередині WP_Widget(саме тому ви викликаєте «$this->" спереду – тоді як $thisпосилається на екземпляр класу). Функції повертають ідентифікатор і назву наданого поля, відповідно, для використання у ваших введеннях idі nameатрибутах. Це дуже важливо щоб не забути додати nameатрибут до свого введення, інакше ви ніколи не отримаєте його значення під час збереження.

І, нарешті, ми виводимо поточне збережене значення як valueнаш вхід, посилаючись на переданий аргумент $instance. Якщо це не зробити для вашого значення, вхідні дані ніколи не будуть заповнені тим, що збережено в базі даних, і щоразу відображатимуться порожніми, що може заплутати користувачів.

Якщо вам потрібні різні введення форм, наприклад прапорці або розкривні списки, ви зможете легко додати їх, дотримуючись правил, згаданих вище. Давайте додамо решту параметрів наших віджетів. Усі вони є текстовими введеннями, тому це той самий код, який повторюється вище, за винятком їхніх ідентифікаторів полів. Наш form()метод виглядає так:

// Responsible for outputting the widget settings in admin
public function form($instance) { 
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>" name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>" value="<?php echo esc_attr($instance['legal_name']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('vat_id'); ?>"><?php _e('Vat ID/Organization number:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('vat_id')); ?>" name="<?php echo esc_attr($this->get_field_name('vat_id')); ?>" value="<?php echo esc_attr($instance['vat_id']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('street_address'); ?>"><?php _e('Street address:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('street_address')); ?>" name="<?php echo esc_attr($this->get_field_name('street_address')); ?>" value="<?php echo esc_attr($instance['street_address']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('postal_code'); ?>"><?php _e('Postal code:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_code')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_code')); ?>" value="<?php echo esc_attr($instance['postal_code']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('postal_city'); ?>"><?php _e('City:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_city')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_city')); ?>" value="<?php echo esc_attr($instance['postal_city']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('email_address'); ?>"><?php _e('E-mail address:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('email_address')); ?>" name="<?php echo esc_attr($this->get_field_name('email_address')); ?>" value="<?php echo esc_attr($instance['email_address']); ?>" />
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('phone_number'); ?>"><?php _e('Phone number:', 'txtdomain'); ?></label>
        <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('phone_number')); ?>" name="<?php echo esc_attr($this->get_field_name('phone_number')); ?>" value="<?php echo esc_attr($instance['phone_number']); ?>" />
    </p>
    <?php
}

Якщо ви додаєте свій віджет у доступну область віджетів, він має виглядати так:

Підручник: створіть віджет мікроданих для свого бізнесу в WordPress

Функція update().

Ця update()функція відповідає за фактичне збереження введених вами значень в admin. На жаль, WordPress не робить це автоматично за вас. У цій функції передбачено два параметри; зазвичай називають $new_instanceі $old_instance. У першому параметрі, $new_instanceви знайдете всі надіслані значення, а в другому, $old_instanceви знайдете значення, які наразі зберігаються в базі даних. Це дає вам змогу робити розумні порівняння, якщо потрібно.

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

// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
    return $instance;
}

Тепер ви можете протестувати свій віджет, якщо хочете, і перевірити, чи зберігаються введені значення. І якщо ви пам’ятаєте правильно встановити valueатрибут у form(), коли ви збережете та натиснете кнопку «Оновити», значення мають зберегтися. Чудово! Тепер перейдемо до останнього і, за загальним визнанням, найцікавішого кроку – виведення біта інтерфейсу.

Функція widget().

Функція widget()відповідає за виведення вашого віджета у інтерфейс. Ми отримаємо два аргументи функції; по-перше, масив із деякою корисною інформацією, такою як обгортки визначеної області віджетів теми, а по-друге, збережені значення параметрів віджетів.

Вихід вашого віджета має завжди починатися з echoing $args['before_widget']і завжди закінчуватися echoing $args['after_widget']. Це гарантує, що ваш віджет буде загорнуто в ту саму правильну оболонку HTML віджета, як визначено темою. Уздовж тих самих доріжок, ви можете повторити $args['before_title']і $args['after_title']для виведення правильних HTML-огорток навколо назви віджета. У нас немає фактичної назви віджета як такої, але ми загорнемо юридичну назву компанії як назву віджета.

В іншому випадку ви отримаєте свої збережені значення, посилаючись на другий аргумент, $instance, за вашими назвами ключів, встановленими в form()і update(). Рекомендується виводити лише встановлені налаштування та ігнорувати порожні.

Оскільки ми також виводимо мікродані, нам потрібно додати відповідні властивості відповідно до правил schema.org.

Ви самі вирішуєте, як ви хочете вивести свій віджет; можливо, ви можете додати більше HTML-оболонок для полегшення стилю.

// Responsible for outputting the widget in frontend
public function widget($args, $instance) {
    echo $args['before_widget'];
 
    ?><div itemscope itemtype="https://schema.org/LocalBusiness"><?php
 
    if (!empty($instance['legal_name'])) {
        echo $args['before_title'];
        ?><span itemprop="legalName"><?php echo $instance['legal_name']; ?></span><?php
 
        echo $args['after_title'];
    }
 
    if (!empty($instance['vat_id'])) {
        ?><span itemprop="vatID" class="business-vatid"><?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?></span><?php
    }
 
    if (!empty($instance['street_address'])) {
        ?><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="business-address"><?php
 
            ?><span itemprop="streetAddress"><?php echo $instance['street_address']; ?></span><?php
 
            if (!empty($instance['postal_code'])) {
                ?><span itemprop="postalCode"><?php echo $instance['postal_code']; ?></span><?php
            }
            if (!empty($instance['postal_city'])) {
                ?><span itemprop="addressLocality"><?php echo $instance['postal_city']; ?></span><?php
            }               
 
        ?></div><?php
    }
 
    if (!empty($instance['email_address'])) {
        ?><a href="mailto:<?php echo $instance['email_address']; ?>" title="<?php _e('Send email', 'txtdomain'); ?>" class="business-email">
            <span itemprop="email"><?php echo $instance['email_address']; ?></span>
        </a><?php
    }
 
    if (!empty($instance['phone_number'])) {
        ?><a href="tel:<?php echo $instance['phone_number']; ?>" title="<?php _e('Call us', 'txtdomain'); ?>" class="business-phone">
            <span itemprop="telephone"><?php echo $instance['phone_number']; ?></span>
        </a><?php
    }
 
    ?></div><?php
 
    echo $args['after_widget'];
}

Налаштуйте результат, додайте стиль і все!

Для вашої інформації: ваш віджет отримає назву класу упаковки «widget_<base ID>» (базовий ідентифікатор — це те, що ви вказали в конструкторі). У нашому випадку наш віджет отримає клас " widget_local_business“. Це може допомогти вам додати цілеспрямований стиль.

Підведення підсумків і остаточний код

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

Для довідки, ось повний код разом.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});
 
class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() {
        $widget_ops = [
            'description' => __('Outputs business information with Microdata', 'txtdomain')
        ];
        parent::__construct('local_business', __('Local Business Information', 'txtdomain'), $widget_ops);
    }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) {
        echo $args['before_widget'];
 
        ?><div itemscope itemtype="https://schema.org/LocalBusiness"><?php
 
        if (!empty($instance['legal_name'])) {
            echo $args['before_title'];
            ?><span itemprop="legalName"><?php echo $instance['legal_name']; ?></span><?php
 
            echo $args['after_title'];
        }
 
        if (!empty($instance['vat_id'])) {
            ?><span itemprop="vatID" class="business-vatid"><?php printf(__('Vat: %s', 'txtdomain'), $instance['vat_id']); ?></span><?php
        }
 
        if (!empty($instance['street_address'])) {
            ?><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress" class="business-address"><?php
 
                ?><span itemprop="streetAddress"><?php echo $instance['street_address']; ?></span><?php
 
                if (!empty($instance['postal_code'])) {
                    ?><span itemprop="postalCode"><?php echo $instance['postal_code']; ?></span><?php
                }
                if (!empty($instance['postal_city'])) {
                    ?><span itemprop="addressLocality"><?php echo $instance['postal_city']; ?></span><?php
                }               
 
            ?></div><?php
        }
 
        if (!empty($instance['email_address'])) {
            ?><a href="mailto:<?php echo $instance['email_address']; ?>" title="<?php _e('Send email', 'txtdomain'); ?>" class="business-email">
                <span itemprop="email"><?php echo $instance['email_address']; ?></span>
            </a><?php
        }
 
        if (!empty($instance['phone_number'])) {
            ?><a href="tel:<?php echo $instance['phone_number']; ?>" title="<?php _e('Call us', 'txtdomain'); ?>" class="business-phone">
                <span itemprop="telephone"><?php echo $instance['phone_number']; ?></span>
            </a><?php
        }
        ?></div><?php
 
        echo $args['after_widget'];
    }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { 
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('legal_name'); ?>"><?php _e('Legal name:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('legal_name')); ?>" name="<?php echo esc_attr($this->get_field_name('legal_name')); ?>" value="<?php echo esc_attr($instance['legal_name']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('vat_id'); ?>"><?php _e('Vat ID/Organization number:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('vat_id')); ?>" name="<?php echo esc_attr($this->get_field_name('vat_id')); ?>" value="<?php echo esc_attr($instance['vat_id']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('street_address'); ?>"><?php _e('Street address:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('street_address')); ?>" name="<?php echo esc_attr($this->get_field_name('street_address')); ?>" value="<?php echo esc_attr($instance['street_address']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('postal_code'); ?>"><?php _e('Postal code:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_code')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_code')); ?>" value="<?php echo esc_attr($instance['postal_code']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('postal_city'); ?>"><?php _e('City:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('postal_city')); ?>" name="<?php echo esc_attr($this->get_field_name('postal_city')); ?>" value="<?php echo esc_attr($instance['postal_city']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('email_address'); ?>"><?php _e('E-mail address:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('email_address')); ?>" name="<?php echo esc_attr($this->get_field_name('email_address')); ?>" value="<?php echo esc_attr($instance['email_address']); ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('phone_number'); ?>"><?php _e('Phone number:', 'txtdomain'); ?></label>
            <input type="text" class="widefat" id="<?php echo esc_attr($this->get_field_id('phone_number')); ?>" name="<?php echo esc_attr($this->get_field_name('phone_number')); ?>" value="<?php echo esc_attr($instance['phone_number']); ?>" />
        </p>
        <?php
    }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) {
        $instance = [];
        $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
        $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
        $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
        $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
        $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
        $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
        $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
        return $instance;
    }
}

Джерело запису: awhitepixel.com
Вам також може сподобатися Більше від автора

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі