Как создать социальный виджет в WordPress?

Ваша WordPress-тема не умеет выводить социальные кнопки? А вы не хотите устанавливать очередной тяжеловесный плагин на свой сайт? Выход есть – создать легкий и настраиваемый плагин с красивым выводом социальных иконок в виджете.

Преимущества создания своего плагина:

нет нагрузки на сайт;
виджет с красивыми кнопками, который можно разместить в любой области виджетов;
удобное добавление/редактирование URL-ссылок социальных профилей.

Как создать социальный блок в WordPress?

Разделим задачу на несколько этапов.

Этап 1. Создадим файловую структуру плагина.
Этап 2. Разработаем виджет.

Создание файловой структуры плагина

Чтобы создать новый плагин WordPress, необходимо:

перейти в каталог /wp-content/plugins;
создать папку с названием плагина (например, wpschool-social-widget);
в новом каталоге создать файлы wpschool-social-widget.php и wpschool-social-widget.css.

Чтобы WordPress определил структуру как плагин, в файл wpschool-social-widget.php нужно включить заголовок плагина.

<?php
/*
Plugin Name: Wpschool Social Widget
Plugin URI: https://wpschool.ru
Description: Социальный виджет
Author: WPSchool
Author URI: https://wpschool.ru
*/

Значения параметров вы должны изменить на свои.

После сохранения изменений перейдите в раздел админ-панели Плагины. Если все сделано правильно, в списке должен появится плагин с названием Wpschool Social Widget.

Теперь нужно подключить файл стилей (wpschool-social-widget.css). Для этого в том же wpschool-social-widget.php добавьте следующие строки:

// Подключение CSS-стилей
function wpschool_include_css_style() {
    wp_enqueue_style( 'wpschool-social-widget', plugins_url('wpschool-social-widget.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'wpschool_include_css_style' );

Создание социального виджета

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

Основной код виджета будет расположен в файле wpschool-social-widget.php. В конце добавим стили для социальных иконок (wpschool-social-widget.css).

Этап 1. Создание класса виджета

class Wpschool_Social_Widget extends WP_Widget {}

Наш класс Wpschool_Social_Widget будет наследовать все свойства и методы основного WordPress-класса WP_Widget.

Этап 2. Добавление метода __construct()

Метод __construct() нужен для регистрации класса виджета (назначения ему идентификатора, заголовка, имени и описания).

function __construct() {
    parent::__construct(
        'Wpschool_Social_Widget',
        __( 'Социальный виджет', 'translation_domain' ),
        array( 'description' => __( 'Вывод социальных кнопок', 'translation_domain' ), )
    );
}

Тут ‘Wpschool_Social_Widget’ – уникальный идентификатор класса, ‘Социальный виджет’ – название виджета и ‘Вывод социальных кнопок’ – его описание.

Последние два параметра отображаются в админ-разделе Внешний вид -> Виджеты.

Этап 3. Добавление метода widget()

Метод widget() отображает виджет в пользовательской части сайта.

public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );
    $facebook = $instance['facebook'];
    $twitter = $instance['twitter'];
    $google = $instance['google'];
    $linkedin = $instance['linkedin'];

    // URL-ссылки социальных профилей
    $facebook_profile = '<a class="facebook" href="' . $facebook . '"><i class="fa fa-facebook"></i></a>';
    $twitter_profile = '<a class="twitter" href="' . $twitter . '"><i class="fa fa-twitter"></i></a>';
    $google_profile = '<a class="google" href="' . $google . '"><i class="fa fa-google-plus"></i></a>';
    $linkedin_profile = '<a class="linkedin" href="' . $linkedin . '"><i class="fa fa-linkedin"></i></a>';

    echo $args['before_widget'];

    if ( !empty( $title ) ) {
        echo $args['before_title'] . $title . $args['after_title'];
    }

    echo '<div class="social-icons">';
    echo ( !empty( $facebook ) ) ? $facebook_profile : null;
    echo ( !empty( $twitter ) ) ? $twitter_profile : null;
    echo ( !empty( $google ) ) ? $google_profile : null;
    echo ( !empty( $linkedin ) ) ? $linkedin_profile : null;
    echo '</div>';

    echo $args['after_widget'];
}

Мы добавили возможность настройки и вывода иконок 4-х соцсетей: Facebook*, Twitter, Google+ и Linkedin.

Этап 4. Добавление метода form()

Метод 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
}

Этап 5. Добавление метода update()

Метод update() отвечает за сохранение значений настроек виджета.

public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( !empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['facebook'] = ( !empty( $new_instance['facebook'] ) ) ? strip_tags( $new_instance['facebook'] ) : '';
    $instance['twitter'] = ( !empty( $new_instance['twitter'] ) ) ? strip_tags( $new_instance['twitter'] ) : '';
    $instance['google'] = ( !empty( $new_instance['google'] ) ) ? strip_tags( $new_instance['google'] ) : '';
    $instance['linkedin'] = ( !empty( $new_instance['linkedin'] ) ) ? strip_tags( $new_instance['linkedin'] ) : '';

    return $instance;
}

Этап 6. Регистрация и активация виджета

Для того чтобы виджет появился в админ-панели, его нужно зарегистрировать. За это отвечает экшен widgets_init.

function register_Wpschool_Social_Widget() {
    register_widget( 'Wpschool_Social_Widget' );
}
add_action( 'widgets_init', 'register_Wpschool_Social_Widget' );

Этот код добавляется за пределами класса Wpschool_Social_Widget.

Виджет отображается и готов к работе.

Полный текст файла wpschool-social-widget.php:

<?php
/*
Plugin Name: Wpschool Social Widget
Plugin URI: https://wpschool.ru
Description: Социальный виджет
Author: WPSchool
Author URI: https://wpschool.ru
*/

// Подключение CSS-стилей
function wpschool_include_css_style() {
    wp_enqueue_style( 'wpschool-social-widget', plugins_url( 'wpschool-social-widget.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'wpschool_include_css_style' );

/**
* Класс социального виджета.
*/
class Wpschool_Social_Widget extends WP_Widget {

    /**
    * Регистрация виджета.
    */
    function __construct() {
        parent::__construct(
            'Wpschool_Social_Widget',
            __( 'Социальный виджет', 'translation_domain' ),
            array( 'description' => __( 'Вывод социальных кнопок', 'translation_domain' ), )
        );
    }

    /**
    * Вывод виджета на сайте.
    */
    public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        $facebook = $instance['facebook'];
        $twitter = $instance['twitter'];
        $google = $instance['google'];
        $linkedin = $instance['linkedin'];

        // URL-ссылки социальных профилей
        $facebook_profile = '<a class="facebook" href="' . $facebook . '"><i class="fa fa-facebook"></i></a>';
        $twitter_profile = '<a class="twitter" href="' . $twitter . '"><i class="fa fa-twitter"></i></a>';
        $google_profile = '<a class="google" href="' . $google . '"><i class="fa fa-google-plus"></i></a>';
        $linkedin_profile = '<a class="linkedin" href="' . $linkedin . '"><i class="fa fa-linkedin"></i></a>';

        echo $args['before_widget'];

        if ( !empty( $title ) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }

        echo '<div class="social-icons">';
        echo ( !empty($facebook ) ) ? $facebook_profile : null;
        echo ( !empty($twitter ) ) ? $twitter_profile : null;
        echo ( !empty($google ) ) ? $google_profile : null;
        echo ( !empty($linkedin ) ) ? $linkedin_profile : null;
        echo '</div>';

        echo $args['after_widget'];
    }

    /**
    * Вывод и настройка виджета в админ-панели.
    */
    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
    }

    /**
    * Сохранение значений полей виджета.
    */
    public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title']) ) ? strip_tags($new_instance['title']) : '';
        $instance['facebook'] = (!empty($new_instance['facebook']) ) ? strip_tags($new_instance['facebook']) : '';
        $instance['twitter'] = (!empty($new_instance['twitter']) ) ? strip_tags($new_instance['twitter']) : '';
        $instance['google'] = (!empty($new_instance['google']) ) ? strip_tags($new_instance['google']) : '';
        $instance['linkedin'] = (!empty($new_instance['linkedin']) ) ? strip_tags($new_instance['linkedin']) : '';

        return $instance;
    }

}

// Регистрация виджета
function register_Wpschool_Social_Widget() {
    register_widget( 'Wpschool_Social_Widget' );
}
add_action( 'widgets_init', 'register_Wpschool_Social_Widget' );

Ещё читайте: Подборка лучших плагинов Гугла.

Добавление CSS-стилей для виджета

Стили должны быть добавлены в файл wpschool-social-widget.css.

@import "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

.social-icons {
    color: #FFFFFF;
    position: relative;
}

.social-icons a {
    text-align: center;
    font-size: 21px;
    padding: 8px 10px 6px;
    color: #FFFFFF;
    margin-bottom: 5px;
    display: inline-block;
    margin-right: 5px;
    width: 40px;
    height: 40px;
}

.social-icons .fa-facebook, .social-icons .facebook {
    background: #3B5998;
}

.social-icons .fa-twitter, .social-icons .twitter {
    background: #00abe3;
}

.social-icons .fa-google, .social-icons .google {
    background: #d3492c;
}

.social-icons .fa-linkedin, .social-icons .linkedin {
    background: #01669c;
}

Вы можете изменять их в зависимости от своих предпочтений и общего дизайна WordPress-темы.

Подробнее про то, что такое px (пиксели), что это за единица измерения.

Заключение

Владельцы сайтов постоянно добавляют новый функционал. И это нормально. Ведь удобство пользователей – основная задача любого веб-ресурса. Но иногда для этого приходится создавать решение самому. В случае с выводом социальных кнопок на сайте мы решили сразу несколько проблем:

плагин не создает высокую нагрузку на сайт;
плагин не зависит от темы WordPress;
дизайн каждой кнопки может быть изменен;
виджет можно показать в любой области виджетов на сайте;
удобное добавление/редактирование URL-ссылок социальных профилей.

Также читайте: Как создать форум на движке WordPress.

* Facebook — признан экстремистской организацией и запрещен на территории РФ.

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