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

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

Главная страница сайта

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

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

Чтобы создать свой собственный плагин, выполните следующие шаги:

Создание структуры плагина: В каталоге wp-content/plugins создайте новую папку для вашего плагина. Назовите ее, например, my-social-widget.
Файл плагина: В папке создайте файл my-social-widget.php. В этом файле добавьте заголовок плагина, например:

<?php
/**
* Plugin Name: Мой Социальный Виджет
* Description: Легковесный виджет для отображения иконок социальных сетей.
* Version: 1.0
* Author: Ваше Имя
*/
?>

Регистрация виджета: Используйте функцию register_widget внутри действия widgets_init для регистрации вашего виджета. Это можно сделать с помощью класса, который будет наследовать WP_Widget.
Создание формы настройки: В классе вашего виджета создайте метод form, где вы сможете добавить поля для ввода URL-адресов социальных сетей.
Вывод виджета: Реализуйте метод widget для отображения готового HTML-кода с вашими кнопками социальных сетей.
Активируйте плагин: Перейдите в панель управления WordPress, выберите раздел «Плагины» и активируйте ваш плагин.
Добавьте виджет на сайт: Перейдите в раздел «Внешний вид» → «Виджеты» и добавьте ваш новый виджет в желаемую область.

Теперь у вас есть собственный виджет социальных сетей, который можно легко настраивать под свои нужды!

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

Разделим процесс на несколько шагов.

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

Структура файлов плагина

Для создания нового плагина WordPress нужно выполнить следующие шаги:

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

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

Не забудьте изменить значения параметров на ваши собственные.

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

Админ-раздел Плагины

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

// Подключение CSS-стилей
function site_include_css_style()
< wp_enqueue_style( 'site-social-widget', plugins_url('site-social-widget.css', __FILE__ ) ); >add_action( 'wp_enqueue_scripts', 'site_include_css_style' );

Разработка социального виджета

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

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

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

class site_Social_Widget extends WP_Widget <>

Класс site_Social_Widget наследует характеристики и методы базового класса WP_Widget.

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

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

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

Здесь ‘site_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 = ' ';
$twitter_profile = ' ';
$google_profile = ' ';
$linkedin_profile = ' ';
echo $args['before_widget'];
if ( !empty( $title ) )
< echo $args['before_title'] . $title . $args['after_title']; >
echo '';
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 '';
echo $args['after_widget']; >

Данный код позволяет настраивать и выводить иконки четырех социальных сетей: 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;
?>
get_field_id( 'title' ); ?>"> get_field_name( 'title' ); ?>" type="text" value="">
get_field_id( 'facebook' ); ?>"> get_field_name( 'facebook' ); ?>" type="text" value="">
get_field_id( 'twitter' ); ?>"> get_field_name( 'twitter' ); ?>" type="text" value="">
get_field_id( 'google' ); ?>"> get_field_name( 'google' ); ?>" type="text" value="">
get_field_id( 'linkedin' ); ?>"> get_field_name( 'linkedin' ); ?>" type="text" value="">

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

Этот метод update() будет использоваться для сохранения значений настроек виджета.

public function update( $new_instance, $old_instance )

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

Чтобы виджет появился в административном интерфейсе, необходимо его зарегистрировать. Это выполняется через экшен widgets_init.

function register_site_Social_Widget()
< register_widget( 'site_Social_Widget' ); >add_action( 'widgets_init', 'register_site_Social_Widget' );

Этот код добавляется вне класса site_Social_Widget.

Теперь виджет успешно отображается и готов к использованию.

Полный код файла site-social-widget.php:

add_action( 'wp_enqueue_scripts', 'site_include_css_style' );
/**
* Класс социального виджета.
*/
class site_Social_Widget extends WP_Widget
< /**
* Регистрация виджета.
*/
function __construct()
< parent::__construct( 'site_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 = ' ';
$twitter_profile = ' ';
$google_profile = ' ';
$linkedin_profile = ' ';
echo $args['before_widget'];
if ( !empty( $title ) )
< echo $args['before_title'] . $title . $args['after_title']; >
echo '';
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 '';
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; ?>
get_field_id('title'); ?>">
get_field_name('title'); ?>" type="text" value="">
get_field_id('facebook'); ?>">
get_field_name('facebook'); ?>" type="text" value="">
get_field_id('twitter'); ?>">
get_field_name('twitter'); ?>" type="text" value="">
get_field_id('google'); ?>">
get_field_name('google'); ?>" type="text" value="">
get_field_id('linkedin'); ?>">
get_field_name('linkedin'); ?>" type="text" value="">
/**
* Сохранение значений полей виджета.
*/
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_site_Social_Widget()
< register_widget( 'site_Social_Widget' ); >add_action( 'widgets_init', 'register_site_Social_Widget' );

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

Стили необходимо добавить в файл site-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 {}

Вы можете настраивать их в соответствии со своими пожеланиями и общим стилем темы WordPress.

Здесь подробнее о понятии px (пиксели) и его роли в качестве единицы измерения.

Заключение

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

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

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