Создаем виджет для соц.сетей в WordPress самостоятельно. Эпизод 1

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

Многие из современных сайтов содержат иконки социальных сетей со ссылками на свои профили. Этого же можно достичь и в WordPress с помощью виджетов. В сегодняшней статье мы создадим виджет WordPress, который будет ссылаться на профили социальных сетей. Для ясности: виджет будет поддерживать профили Facebook, Twitter, LinkedIn и Google+ с помощью иконок социальных сетей от Font Awesome.

Пишем свой Social Network Profile Widget

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

<?php
/*
  Plugin Name: Social Profile Widget
  Plugin URI: 
  Description: Links to Author social media profile
  Author: Agbonghama Collins
  Author URI: 
*/

Для того, чтобы создать виджет в WordPress, вам необходимо расширить стандартный класс WP_Widget и включить необходимые методы (также известные как функции в процедурном программировании PHP) и зарегистрировать виджет.

Создаем класс, расширяющий WP_Widget.

class Designmodo_Social_Profile extends WP_Widget { ... }

Задаем виджету имя и описание, используя метод __construct().

    function __construct() {
    parent::__construct(
            'Designmodo_Social_Profile',
            __('Social Networks Profiles', 'translation_domain'), // Name
            array('description' => __('Links to Author social media profile', 'translation_domain'),)
    );
}

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

Код в методе form() или функции создаст форму настроек для виджета.

public function form($instance) {
        isset($instance['title']) ? $title = $instance['title'] : null;
        empty($instance['title']) ? $title = 'Мои социальные профили' : null;
 
        isset($instance['facebook']) ? $facebook = $instance['facebook'] : null;
        isset($instance['twitter']) ? $twitter = $instance['twitter'] : null;
        isset($instance['google']) ? $google = $instance['google'] : null;
        isset($instance['linkedin']) ? $linkedin = $instance['linkedin'] : null;
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr($facebook); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr($twitter); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('google'); ?>" name="<?php echo $this->get_field_name('google'); ?>" type="text" value="<?php echo esc_attr($google); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('linkedin'); ?>"><?php _e('Linkedin:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('linkedin'); ?>" name="<?php echo $this->get_field_name('linkedin'); ?>" type="text" value="<?php echo esc_attr($linkedin); ?>">
        </p>
 
        <?php
    }

Продолжение статьи читайте по ссылке Создаем виджет для соц.сетей в WordPress самостоятельно. Эпизод 2