Как создать виджет для сайта? 

Считается, что основная задача вебмастера – привлечение аудитории пользователей. Но это не совсем так. Можно сколь угодно много привлекать аудиторию, но если среди неё не будет лояльной – результаты конверсии опечалят. Чтобы увеличить активность пользователей при взаимодействии с сайтом, стоит сделать для него виджет.

О сколько виджетов нам разных…

Если обратиться к словарю, выяснится, что виджет (widget) – небольшое графическое приложение, встраиваемое в пользовательский интерфейс браузера или сайта, и показывающее какую-либо информацию из какого-нибудь места. Именно поэтому они могут быть очень разнообразны. Когда речь заходит о создании виджета для сайта, обычно под этим подразумевается одно из трех графических приложений:

• Обновляемый или просто визуально привлекательный элемент панели быстрых закладок;
• Лента обновлений для размещения на главной странице поисковой системы «Яндекс»;
• Модуль обновлений или комментариев, связанный с социальной сетью Facebook и отображаемый непосредственно на сайте.

Что ж, разберемся, как создать каждый из этих виджетов – и зачем он вам вообще нужен.

Создание виджета для Визуальных закладок (для движков WordPress и других)

Сервис Визуальных закладок от «Яндекс» в последнее время становится всё более популярным. Он удобен, красив и функционален. Визуальные закладки встраиваются в браузеры на движке Chromium из соответствующего магазина, а также входят в Яндекс.Браузер прямо «из коробки».

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

Чтобы сделать его более привлекательным для пользователей, стоит совсем немного потрудиться. А именно – «поколдовать» с API Табло.

Но сначала требуется создать логотип сайта. Картинка должна соответствовать следующим правилам:

• Формат .PNG;
• Размер 150х60 пикселей;
• Прозрачный фон.

Сам виджет пишется на XML. В блокноте набирается следующий код:

{

“version”: “1.0”,

“api_version”: 1.

“layout”:

{

“logo”: “http://домен_вашего_сайта/адрес_файла_с_логотипом/название_файла_с_лого.png”,

“color”: “#номер_желаемого_цвета_в_HEX”,

“show_title”: false,

}

}

Файл нужно сохранить под названием manifest.json и закинуть в корневой каталог сайта.

Следующий этап – немного поколдовать с PHP. Ну, или HTML – в зависимости от того, на каком языке написан движок сайта. Если хедер находится в header.php, то изменения вносятся в этот файл. А если в каком-нибудь другом месте – нижеследующую строчку нужно вписать, соответственно, туда.

А вот код для включения:

Этот код нужно вписать в хедер – то есть между открывающим и закрывающим HTML-тегами .

Виджет в Табло Визуальных закладок обновляется автоматически. Но не мгновенно. Любители покодить могут даже обновляемым его сделать, выводя различные уведомления.

Виджет сайта для главной страницы Яндекс

Многие знают, что главная страница поисковой системы Яндекс настраивается. И на ней можно разместить виджет своего сайта – чтобы пользователи могли узнавать обновления, не заходя собственно на веб-страницу. Это будет прекрасным преимуществом, так как снизит статистику отказов и повысит ваш проект в рейтинге поисковой системы.

Создать виджет для сайта несложно. Не нужно даже HTML изучать! Для такого виджета требуется, чтобы у сайта была RSS-лента. У движка WordPress она имеется по умолчанию и располагается по следующему адресу:

http://домен/feed

А вот для других движков потребуется создавать её самостоятельно.

Итак, виджет для Яндекса делается в два простых шага:

1. Зайти на http://wdgt.yandex.ru/widgets и ткнуть на кнопку «Создать виджет»;
2. Заполнить панели с названием виджета, описанием, картинкой и адресом RSS-ленты.

Всё! Копировав ссылку для установки на Яндекс, можно убедить пользователей добавить виджет вашего сайта на главную страницу поисковой системы.

А ещё этот виджет можно разместить на вашем сайте – на боковой панели, например, или в «вылетающем окошке» pop-up.

Виджет Facebook

Социальные сети плотно вошли в повседневную жизнь современного человека. Правда, в «наших широтах» наиболее распространены «ВК» и «Одноклассники». Однако Facebook – лучшее место для продвижения сайта, особенного предлагающего какие-либо товары или услуги.

Почему? Причина тут проста. Именно в Facebook проще всего организовать вирусное продвижение контента среди «интеллектуальной элиты». Различные профессионалы в самых разных областях предпочитают пользоваться именно этой социальной сетью, а значит – тут проще всего создать лояльную, «думающую» аудиторию, от которой даже можно подчерпнуть какую-нибудь новую информацию.

Разработчики Facebook прекрасно понимают, что владельцы информационных порталов предпочитают пользоваться именно их социальной сетью, и потому значительно упрощают процесс создания и размещения виджетов.

Итак, вот она, пошаговая инструкция о том, как создать виджет для сайта. Только предполагается, что у вашего сайта – или компании – уже есть соответствующая страница на Facebook, созданная человеком, у которого также есть аккаунт в Facebook:

1. Нужно зайти от имени этого человека (авторизоваться через его логин и пароль) и нажать кнопку «Редактировать профиль» на главной странице профиля;
2. Пролистать страницу до конца и открыть «Разработчикам»;
3. На открывшейся странице отыскать кнопку Sharing, сопровождающуюся знаком Like, и смело в неё ткнуть;
4. Затем требуется выбрать «Социальные плагины»;
5. Найти Like Box;
6. Откроется страница настройки виджета, где можно установить его размеры, цветовую схему, контент и визуальную составляющую;
7. Затем нажатием кнопки Get Code можно получить код, выбрав язык разметки, максимально совместимый с движком сайта.

Виджет для WordPress

Теперь осталась пара мелочей – разместить виджет на сайте. Для самого популярного движка – WordPress – для этого придется добавить код в два различных места. Первое – футер. Туда добавляется JAVA-скрипт, определяющий функциональность виджета.

Второе – место непосредственного размещения виджета, например, сайдбар. Туда требуется скопировать CSS-код с div-блоком, в котором расположена ссылка на скрипт.

Для других движках, в том числе самописных или статичных – созданных на чистом HTML и отличающихся сложнейшей процедурой добавления контента – используется несколько иная методика. Однако в этих случаях проще обратиться к создателю сайта, чем пытаться самостоятельно разобраться в хитросплетениях кода.

! Copyright © 2016 «Design ONE»

Похожие статьи:

5 приемов оптимизации страницы товара в интернет-магазине
10 приёмов для создания дружественного интерфейса сайта
Продвижение сайта с помощью видео
Раскрываем секреты: основные источники стабильного трафика на сайт
Как правильно использовать видео в процессе поискового продвижения сайта?
Онлайн конкурсы — секреты успеха
Продвижение туристического сайта
Продвижение бухгалтерского сайта
Почему на ваш сайт приходят, но не покупают?
Генерируем карту сайта и устраняем битые ссылки
Присоединяйтесь к нам

Больше результатов…

(22)

Создавать виджет WordPress – это примерно, как создавать плагин, но гораздо проще и понятнее. Все, что вам нужно, это один файл со всем PHP кодом, который писать гораздо проще, чем плагин, у которого несколько файлов. Есть три основные функции виджета: это widget, update и form.

• function widget()
• function update()
• function form()

| Скачать исходники |

Базовая структура

Базовая схема нашего виджета – очень простая, есть полезные функции, которые вам нужно знать. Костяком структуры нашего виджета будет что-то вроде этого:

add_action( 'widgets_init', 'register_my_widget' ); // function to load my widget  function register_my_widget() {}   // function to register my widget  class My_Widget extends WP_Widget () {}  // The example widget class  function My_Widget() {} // Widget Settings  function widget() {} // display the widget  function update() {} // update the widget  function form() {} // and of course the form for the widget options 

Шаг 1. widget_init

Перед тем, как мы все это сделаем, нам нужно загрузить наш виджет с помощью функции widget_init. Это зацепка к action, о которой вы можете найти больше информации в WordPress codex.

add_action( 'widgets_init', 'register_my_widget' ); 

Следующее, что мы сделаем, это зарегистрируем наш виджет в WordPress, чтобы он был доступен в разделе виджетов.

function register_my_widget() { register_widget( 'My_Widget' ); } 

Шаг 2. Класс

Мы заключим наш виджет в класс. Имя класса имеет значение! Что мы должны иметь в виду, так это что имя класса и имя функции должны быть одинаковыми.

class My_Widget extends WP_Widget {} 

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

function My_Widget() { function My_Widget() { $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') ); $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops ); } 

Теперь, когда мы закончили с основными требованиями к нашему виджету, мы обратим наше внимание на три функции, о которых мы говорили ранее, и которые являются важными функциями или основными блоками для построения нашего виджета!

Шаг 3. function widget()

Первая функция относится к отображению нашего виджета. Мы передадим несколько аргументов в нашу функцию. Мы будем передавать аргументы из темы, это могут быть заголовок или какие-то другие параметры. Теперь мы передаем переменную instance, которая связана с классом нашей функции.

function widget( $args, $instance ) 

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

extract( $args ); 

Дальше мы установим заголовок и другие параметры для нашего виджета, которые могут быть изменены пользователем в меню видежета. Мы также добавляем специальные переменные типа $before_widget, $after_widget. Эти параметры обрабатываются темой.

$title = apply_filters('widget_title', $instance['title'] ); $name = $instance['name']; $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;  echo $before_widget;  // Display the widget title if ( $title ) echo $before_title . $title . $after_title;  //Display the name if ( $name ) printf( '
' . __('Hey their Sailor! My name is %1$s.', 'example') . '
', $name );  if ( $show_info ) printf( $name );  echo $after_widget; 

Шаг 4. function update()

Дальше функция update. Эта функция примет настройки пользователя и сохранит их. Она просто обновит настройки в соответствии с желанием пользователя.

function update( $new_instance, $old_instance ) { $instance = $old_instance;  //Strip tags from title and name to remove HTML $instance['title'] = strip_tags( $new_instance['title'] ); $instance['name'] = strip_tags( $new_instance['name'] ); $instance['show_info'] = $new_instance['show_info'];  return $instance; } 

Одна вещь, на которую нужно обратить внимание: здесь мы используем strip_tags, чтобы удалить из текста весь XHTML, который может нарушить работу нашего виджета.

Шаг 5. function form()

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

Перед тем, как мы создадим эти поля для ввода, нам нужно определиться, что показывать, когда пользователь не выбирает ничего из виджета. Чтобы сделать это, мы передадим значения по умолчанию для параметров, например, заголовок, описание и т.д.

//Set up some default widget settings. $defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true ); $instance = wp_parse_args( (array) $instance, $defaults );  

Теперь мы создадим текстовое поле ввода. Мы заключим эти значения в тег абзаца.

// Widget Title: Text Input 
get_field_id( 'title' ); "> _e('Title:', 'example'); 
  //Text Input 
get_field_id( 'name' ); "> _e('Your Name:', 'example'); 
  // Checkbox 
get_field_id( 'show_info' ); "> _e('Display info publicly?', 'example'); 

Заключение

Ну вот и все. Вы только что сделали самостоятельно симпатичный и простой виджет, который показывает имя автора блога. Более того, он дает возможность пользователю выбирать, показывать информацию аудитории или нет. Сохраните код в PHP файл и загрузите в папку своей темы. Вызовите его в вашем functions.php. После этого, перейдите в консоли в Внешний вид → Виджеты и вы увидите ваш виджет.

Весь этот код включен в прикрепленный к статье файл, так что скопировать и вставить можно еще проще. Наслаждайтесь!

Источник: WP.tutsplus.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: / 5. Количество голосов: 22

Смотрите также:

Создаем список популярных тегов с изображениями в стиле Mashable Плагины и сервисы для чата и поддержки клиентов на WordPress Как показывать виджеты WordPress только авторизованным пользователям

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

Чисто технически, виджет WordPress – это, так же как и плагин, набор файлов, которые копируются в определённую папку на сайте. В этих файлах задаются специальные инструкции для “движка”, благодаря которым система распознает сам факт виджета и позволяет его разместить в той или панели виджетов (число панелей и места их расположения зависят от конкретной WordPress-темы).

Система виджетов WordPress

В WordPress присутствуют мощные инструменты, позволяющие гибко управлять виджетами (добавлять на сайт, удалять, изменять их расположение). Для этого существует отдельный админ-раздел – Внешний вид -> Виджеты.

В левой части окна располагаются доступные к отображению виджеты, а в правой – панели виджетов. Добавить виджет на панель довольно просто. Для этого его следует просто перетащить в нужное место.

Как создать виджет в WordPress

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

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

В системе WordPress создать виджет можно двумя способами. Первый заключается в создании отдельного плагина, после активации которого будет доступен виджет для использования. Мы же воспользуемся более легким способом – добавим код виджета непосредственно в основной конфигурационный файл темы – functions.php.

Если Вы не знаете, как редактировать functions.php, то в этом случае Вам поможет плагин ProFunctions.

Разработка виджета

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

Для создания виджетов в WordPress применяется объектная модель программирования языка PHP. В “движке” имеются все необходимые инструменты для этого. Так, для виджетов существует специальный класс WP_Widget, использование которого и позволит успешно создать необходимый виджет для сайта WordPress. Он включает около 20 различных методов. Однако нам потребуются лишь четыре из них:

• __construct() – регистрация базовой информации о виджете;
• widget() – вывод виджета в области виджетов на сайте;
• form() – параметры виджета, отображаемые в области администрирования WordPress;
• update() – обновление настроек виджета в админ-панели.

В дополнение к этим четырем методам используется функция add_action(), необходимая для привязки пользовательской функции виджетов к специальному хуку widgets_init.

Рассмотрим поэтапно создание нашего виджета.

Во-первых, необходимо создать свой класс, который будет наследовать вышеуказанные методы основного класса WP_Widget.

class wpschool_example_widget extends WP_Widget {    }

В этом коде наш класс имеет название wpschool_example_widget. Директивой extends мы даем понять системе, что он будет наследовать все методы основного класса WP_Widget.

На следующем этапе добавим первый метод – __construct(). Он используется для назначения идентификатора, заголовка, имени класса и описания для виджета.

public function __construct() {      $widget_options = array(          'classname' => 'wpschool_widget',          'description' => 'Это наш первый виджет',      );      parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options );  }

Чтобы понять эту функцию, следует начать с строки, начинающейся с parent::__ construct(). Эта строка создает новый виджет с идентификатором wpschool_widget, именем WPSchool Widget и двумя параметрами виджетов: имя класса (wpschool_widget) и краткое описание (Это наш первый виджет).

Весь этот код входит в wpschool_example_widget и используется для регистрации виджета в WordPress, а затем отображает заголовок и описание виджета в области администратора.

Следующий метод, который мы добавим, будет widget(). Он позволит вывести виджет в области виджетов на сайте.

public function widget( $args, $instance ) {      $title = apply_filters( 'widget_title', $instance[ 'title' ] );      $blog_title = get_bloginfo( 'name' );      $tagline = get_bloginfo( 'description' );        echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title'];       
Site Name:  echo $blog_title 
Tagline:  echo $tagline 
       echo $args['after_widget'];  }

Метод widget() содержит код, который генерирует фактический контент, отображаемый виджетом на сайте. В нашем примере мы предоставим пользователям возможность отображать, кроме названия и описания сайта, еще и заголовок самого виджета. Поэтому для этого нужно будет захватить этот заголовок, а затем использовать get_bloginfo(), чтобы отобразить название и описание блога.

Также следует понять еще кое-какие моменты.

Переменная $args[] содержит массив аргументов, которые могут использоваться при построении вывода виджета. Значения, содержащиеся в $args, задаются активной темой при регистрации области боковой панели.

$instance[] – это переменная, в которую загружаются значения, связанные с текущим экземпляром виджета. Если Вы добавили виджет на боковую панель дважды, каждый экземпляр $instance будет содержать значения, специфичные для каждого экземпляра виджета.

Фильтр widget_title возвращает заголовок текущего экземпляра виджета.

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

После определения нескольких переменных, используя информацию из приведенного выше списка, код в примере продолжает формировать фактический вывод контента, который состоит из информации из переменной $args, заголовка, названия и описания сайта.

Обратите внимание, что практически каждый виджет должен включать аргументы before_widget, after_widget, before_title и after_title. Они необходимы для обеспечения того, чтобы каждый виджет был вложен в специфичные для темы теги HTML.

На следующем этапе добавим метод form(), позволяющий сохранять параметры виджета, отображаемые в админ-панели WordPress.

public function form( $instance ) {      $title = ! empty( $instance['title'] ) ? $instance['title'] : '';       
get_field_id( 'title' ); ">Title:
  }

Для виджетов, имеющих множество разнообразных настроек, этот метод будет содержать довольного много сложного кода. Тем не менее, в нашем примере нужно лишь позволить пользователям задавать имя виджета, которое будет отображаться на сайте.

В методе form() возвращаются текущие значения конкретного экземпляра виджета, вызывая параметр $instance. Затем происходит проверка текущей информации об экземпляре, чтобы узнать, является ли заголовок пустым. Если это не так, будет выведено текущее название.

Следующий на очереди – метод update(), отвечающий за обновление настроек виджета в админ-панели.

public function update( $new_instance, $old_instance ) {      $instance = $old_instance;      $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );      return $instance;  }

Видно, что метод принимает два параметра: $new_instance и $old_instance. Первый содержит значения, добавленные в форму настроек виджетов. Второй содержит существующие настройки (если таковые существуют).

Метод update() должен соответствующим образом проверять новые параметры, а затем назначать их переменной $instance и возвращать эту обновленную переменную.

Заключительным этапом создания нового виджета будут его регистрация и активация.

function wpschool_register_widget() {      register_widget( 'wpschool_example_widget' );  }  add_action( 'widgets_init', 'wpschool_register_widget' );

Тут, во-первых, создается функция для регистрации виджета, используя имя объекта виджета для его идентификации. Затем идет привязка функции регистрации к WordPress, используя хук widgets_init.

Отметим, что эта часть кода добавляется за пределы класса wpschool_example_widget. Когда он будет вызван, он подтянет виджет с соответствующим именем и запустит весь код, содержащийся в методах класса.

После добавления всего кода в файл functions.php в админ-разделе Внешний вид -> Виджеты должен появится виджет с названием WPSchool Widget, который теперь доступен для добавления на панель виджетов Вашей темы.

Полный текст нашего виджета:

/* Виджет WPSchool Widget */  class wpschool_example_widget extends WP_Widget {        // Установка идентификатора, заголовка, имени класса и описания для виджета.      public function __construct() {          $widget_options = array(              'classname' => 'wpschool_widget',              'description' => 'Это наш первый виджет',          );          parent::__construct( 'wpschool_widget', 'WPSchool Widget', $widget_options );      }        // Вывод виджета в области виджетов на сайте.      public function widget( $args, $instance ) {          $title = apply_filters( 'widget_title', $instance[ 'title' ] );          $blog_title = get_bloginfo( 'name' );          $tagline = get_bloginfo( 'description' );            echo $args['before_widget'] . $args['before_title'] . $title . $args['after_title'];           
Site Name:  echo $blog_title 
Tagline:  echo $tagline 
           echo $args['after_widget'];      }        // Параметры виджета, отображаемые в области администрирования WordPress.      public function form( $instance ) {          $title = ! empty( $instance['title'] ) ? $instance['title'] : '';           
get_field_id( 'title' ); ">Title:
      }        // Обновление настроек виджета в админ-панели.      public function update( $new_instance, $old_instance ) {          $instance = $old_instance;          $instance[ 'title' ] = strip_tags( $new_instance[ 'title' ] );          return $instance;      }    }    // Регистрация и активация виджета.  function wpschool_register_widget() {      register_widget( 'wpschool_example_widget' );  }  add_action( 'widgets_init', 'wpschool_register_widget' );

Самое читаемое: —>—>

Доброго здравия, уважаемые посетители моего маленького блога!

Долго думал что написать, и вот придумал – как создать свой собственный виджет WordPress с нуля. Не все знают как это сделать, но многие уже знают что такое виджет и пользовались ими для своих нужд.

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

Виджеты WordPress – это блоки статического или динамического содержимого HTML, которые можно добавлять в определенные области интерфейсных страниц (области виджетов или боковые панели). WordPress предоставляет большое количество встроенных виджетов, таких как Архивы, Категории, Облако тегов, Поиск, Последние сообщения, Календарь и другие. Более того, я собираюсь объяснить в этом посте, как разработчики плагинов могут легко создавать виджеты WordPress с нуля, добавлять пользовательские функции и конкретный контент в любую тему, поддерживающую эту удивительную функцию.

Экран виджетов в Twenty Seventeen

Вы можете найти тонны виджетов WordPress в каталоге плагинов (в настоящее время их более 50 000), на рынках WordPress и на сайтах поставщиков, и вы, вероятно, найдете любой виджет, который вам может понадобиться. В любом случае, иногда вы не найдете искомого виджета, и вам нужно будет создать свой собственный.

Как создать виджет WordPress

Хорошей новостью является то, что вы можете создать виджет WordPress, даже если вы не профессиональный разработчик. Вам просто необходимы базовые знания ООП в PHP и общее понимание разработки плагинов для WordPress. Этот пост проведет вас через разработку виджетов WordPress, объяснив, как создать виджет, который позволяет администраторам сайта выбирать список сообщений для отображения на боковой панели.

Мы будем следовать этим шагам:

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

Основная структура виджетов WordPress

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

            /*      Plugin Name: My Widget      Plugin URI: http://wordpress.org/extend/plugins/#      Description: This is an example plugin      Author: Юрич      Version: 1.0      Author URI: https://zacompom.ru/      */  

Это простой заголовок плагина, но этого достаточно для наших целей (дополнительную информацию о требованиях к заголовку вы найдете в Кодексе). Сохраните скрипт как my-widget.php, перейдите на экран плагинов и активируйте плагин. Теперь нам нужно расширить класс “WP_Widget” и некоторые его функции в точный момент выполнения WordPress. Давайте добавим следующий код в наш плагин:

      // регистрируем My_Widget      add_action( 'widgets_init', function(){          register_widget( 'My_Widget' );      });  

Функция “add_action” перехватывает пользовательский обратный вызов для ловушки действия “widgets_init”, которая срабатывает после регистрации всех виджетов по умолчанию.

Примечание: ловушка действия обеспечивает способ запуска функции в определенный момент выполнения WordPress и его расширений (смотрите Кодекс WordPress для получения дополнительной информации)

Функция “register_widget” регистрирует указанный виджет, который является расширением класса “WP_Widget”:

      class My_Widget extends WP_Widget {      // class constructor      public function __construct() {}        // output the widget content on the front-end      public function widget( $args, $instance ) {}        // output the option form field in admin Widgets screen      public function form( $instance ) {}        // save options      public function update( $new_instance, $old_instance ) {}  }  

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

• __construct – является конструктором класса и позволяет устанавливать пользовательские параметры виджета.
• widget() – отображает содержимое виджета на внешнем интерфейсе.
• form() – выводит элементы формы администратора виджета.
• update() – обновляет текущий объект виджета.

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

Настройка виджета: конструктор классов

Конструктор класса регистрирует widget ID, title и дополнительные параметры, такие как classname, description, base_id и высота. В нашем примере виджета мы назначаем идентификатор, имя и две опции виджета:

      public function __construct() {      $widget_ops = array(          'classname' => 'my_widget',          'description' => 'Плагин для читателей моего блога',      );      parent::__construct( 'my_widget', 'My Widget', $widget_ops );  }  

• my_widget – это базовый идентификатор для виджета.
• “My Widget” – это заголовок виджета
• $widget_ops – это массив опций

Смотрите Code Reference для полного списка доступных опций.

Создание формы администратора

Затем мы должны создать форму администратора, позволяющую пользователям устанавливать пользовательские параметры для виджета. Для выполнения этой задачи мы определим метод form() следующим образом:

      public function form( $instance ) {          $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'Title', 'text_domain' );                    
get_field_id( 'title' ) ); ">           esc_attr_e( 'Title:', 'text_domain' );           
                }  

Функция form() сохраняет в качестве аргумента массив текущих параметров виджета. Элемент title в $instance предоставляет опцию title, а get_field_id и get_field_name устанавливают значения идентификатора и имени в текстовое поле.

В этом простом примере показано, как получить значения параметров из базы данных и использовать их для создания формы администратора для настройки поведения виджета. Очевидно, мы не ограничены текстовыми полями. Следующий код предоставляет контрольный список самых последних сообщений:

      public function form( $instance ) {          $posts = get_posts( array(                  'posts_per_page' => 20,                  'offset' => 0              ) );          $selected_posts = !empty( $instance['selected_posts'] ) ? $instance['selected_posts'] : array();                     
           foreach ( $posts as $post ) {                 
                   echo get_the_title( $post->ID ); 
             }           
                 }  

Функция get_posts() предоставляет массив сообщений на основе указанных параметров. В нашем примере мы просто получаем последние двадцать сообщений в хронологическом порядке, но мы можем создавать более сложные запросы, задавая любую комбинацию доступных переменных запроса (полный список вариантов запросов смотрите в Кодексе).

Затем троичный оператор проверяет, существует ли допустимое значение $instance [‘selected_posts’]. Если нет, значение $selected_posts устанавливается в пустой массив. Цикл foreach перебирает элементы $posts и печатает флажок для каждого из них. Проверяется функция сравнивает два аргумента и печатает проверили атрибут если они идентичны.

Изображение ниже показывает текущую форму администратора виджета.

Обновление настроек виджета

Метод update() обновляет экземпляр виджета. Мы определяем функцию следующим образом:

      public function update( $new_instance, $old_instance ) {          $instance = array();          $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';            $selected_posts = ( ! empty ( $new_instance['selected_posts'] ) ) ? (array) $new_instance['selected_posts'] : array();          $instance['selected_posts'] = array_map( 'sanitize_text_field', $selected_posts );            return $instance;      }  

Функция содержит два аргумента:

• $new_instance – это массив настроек, представленных пользователем
• $old_instance – это массив настроек, хранящихся в базе данных

Вот что происходит:

• $instance [‘title’] хранит новое значение заголовка виджета или пустую строку, если она недоступна
• $selected_posts хранит идентификаторы выбранных пользователем сообщений или пустой массив
• $instance [‘selected_posts’] хранит очищенную версию $selected_posts
• функция возвращает $instance

Теперь форма виджета в действии, и пользовательские настройки могут быть сохранены в базе данных WordPress. Наша последняя задача – вывод результатов на сайт.

Вывод виджета

Метод widget() выводит содержимое виджета на сайт. Функция получает выбранные сообщения и запускает цикл foreach, который создает элемент списка для каждого сообщения. Функция виджета определяется следующим образом:

      public function widget( $args, $instance ) {          echo $args['before_widget'];          if ( ! empty( $instance['title'] ) ) {              echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];          }            if( ! empty( $instance['selected_posts'] ) && is_array( $instance['selected_posts'] ) ){                $selected_posts = get_posts( array( 'post__in' => $instance['selected_posts'] ) );                            
               foreach ( $selected_posts as $post ) {                   
ID ); ">                   echo $post->post_title;                   
               }               
            }else{              echo esc_html__( 'No posts selected!', 'text_domain' );          }            echo $args['after_widget'];      }  

Функция widget() содержит два аргумента:

• $args – это массив аргументов, включая «before_title», «after_title», «before_widget» и «after_widget»
• $instance – это массив настроек виджета

Если найден допустимый заголовок, он очищается с помощью фильтра widget_title. Затем, если хотя бы одна запись была выбрана, get_posts возвращает массив объектов post. Наконец, цикл foreach создает элемент списка для каждой выбранной записи. Полный код этого плагина доступен на Gist (ссылка выше)

Простой виджет, отображающий список сообщений, выбранных администратором сайта

Завершение

Любой, кто обладает базовыми знаниями в области разработки PHP и WordPress, может быстро научиться создавать собственные виджеты WordPress. Даже если вы еще не являетесь разработчиком WordPress, создание виджета может дать вам первый подход к разработке плагинов. А вы готовы создать собственный виджет WordPress?

И на этой счастливой ноте я буду заканчивать эту статью. Встретимся через три дня.

Вам понравилась статья? Лучшие PHP-фреймворки для веб-разработки в 2019-2020 годах Начало работы с Redux Framework. Часть вторая. Начало работы с Redux Framework. Часть первая. Создание пользовательских типов сообщений в WordPress 10 Адаптивных плагинов JQuery слайдеров. Как в HTML применить эффекты, используя JQuery —> На чем вы зарабатываете в интернете?

• Веб-разработка (100%, 1 Голосов)
• Написание текстов (0%, 0 Голосов)
• Криптовалюты (0%, 0 Голосов)
• Форекс (0%, 0 Голосов)
• Арбитраж трафика (0%, 0 Голосов)
• Свои сайты/блоги (0%, 0 Голосов)
• Раскрутка сайтов (0%, 0 Голосов)
• Веб-дизайн (0%, 0 Голосов)
• Лайки, комментарии и т.д. (0%, 0 Голосов)
• Другое (0%, 0 Голосов)

Всего проголосовало: 1

 Загрузка … ДомойSMMБлог о ВКонтактеВиджеты в ВК для группы — как добавить и настроить

Практически все мелкие и крупные сообщества используют виджеты в ВК для группы. Они значительно упрощают работу администратора, помогают связать сайт с социальной сетью, продавать свои товары, общаться с подписчиками, собирать и обрабатывать заявки на услуги. Разработчики постоянно добавляют новые приложения. Мы решили составить список 10 самых лучших, полезных и интересных расширений, которые помогут повысить эффективность продвижения группы в ВК.

Дочитав статья до конца вы не только определитесь какие виджеты будут полезны для группы посвящённой вашему бизнесу, но и сможете добавить и настроить нужный виджет.

Топ-10 лучших и полезных виджетов в ВК для группы

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

Магазин товаров

Для кого: людям, которые занимаются продажей товаров.

Цель: продажа продукции прямо в группе без переходов на другие сайты и интернет-магазины.

В 2015 году был запущен сервис для поддержки внутри социальной сети розничной торговли. Это больше напоминает витрину, нежели полноценный интернет-магазин, но осуществлять продажу и получать денежные средства можно без проблем.

Для подключения необходимо зайти в меню «Управление сообществом/страницей». Выбираем раздел «Приложения» и добавляем соответствующий виджет. Перед вами автоматически откроется окно, в котором необходимо настроить все параметры. Пример заполнения полей вы можете посмотреть на скриншоте выше.

Обязательно необходимо настроить основные пункты:

• Регион доставки.
• Валюта. Можно выбрать российский рубль, украинскую гривну, казахстанскую валюту – тенге, доллар или евро.
• Контакт. Обязательно настройте этот раздел, чтобы могли принимать заказы. Можете указать руководителя группы или организовать прием заказов через сообщения.

Все эти пункты будут на одной странице. Как только вы заполните карточки с товарами, выполните базовую настройку, блок с продукцией появится на главной странице группы.

Статья в тему: Как открыть интернет-магазин в ВК

Пожертвования

Для кого: сообществ, которые бесплатно делятся полезной информацией.

Цель: поддержать владельцев групп.

Большинство сообществ выкладывают полезные материалы бесплатно. При этом есть подписчики, которые готовы поддержать администратора деньгами.

Для подключения виджета необходимо зайти в раздел «Управление сообществом». Перейти во вкладку «Приложения» и добавить «Пожертвования».

Все уже работает, необходимо только настроить основные параметры:

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

После этого обязательно сохраните изменения. Введите информацию в текстовый блок, настройте электронный кошелек.

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

Spycat: конструктор лид-виджетов в ВК

Для кого: владельцев сообществ.

Цель: улучшения поведенческих факторов, привлечения клиентов.

Каждый человек может настроить прямое обращение к посетителю по имени. Можно прописать собственное торговое предложение для повышения узнаваемости бренда.

Для добавления приложения необходимо зайти в группу. Нажимаете на три точки под главной фотографией. Из списка выбираете «Управление сообществом». В правой колонке нажимаете на «Приложения». Выбираете и добавляете соответствующий виджет.

Заполняете основные поля:

• название кнопки;
• кто может её видеть;
• сниппет;
• название приложения.

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

Выберите текстовый или персональный тип.

Переходим к редактированию, заполняем основные пункты. Далее сохраняем и сразу его включаем. Перед вами откроется небольшое окно, если все нравится, нажимаете «Обновить виджет в группе».

Плюс данного виджета в том, что он не выглядит, как призыв к покупке, скорее это, как приветствие, улучшающее внешний вид и настраивающий пользователя на более позитивный лад. Чтобы ещё более детально углубиться в тему визуальной составляющей, изучите рекомендации по оформлению группы во ВКонтакте.

Рассылки сообщений

Для кого: желающих отправлять сообщения с любыми материалами, автоматизировать рассылку.

Цель: собрать базу активных подписчиков, которым можно сообщать о новых акциях или конкурсах.

Если вы хотите подключить такую возможность, перейдите на страницу – https://vk.com/app5748831. Нажмите «Подключить приложение».

Далее необходимо выбрать группу. Кликните на серый круг и нажмите «Добавить».

Если все было сделано правильно, перед вами появится окно об успешном выполнении операции.

Заявки

Для кого: идеально подходит для бизнеса или групп, желающих собрать базу клиентам для продажи товаров, услуг или приглашения на мероприятия.

Цель: превратить пользователей в социальной сети в клиентов.

Зайдите в раздел «Приложения» на странице своей группы. Выберите соответствующее приложение и нажмите «Добавить».

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

Тесты

Для кого: всех сообществ, идеально подходит интернет-магазинам и компаниям.

Цель: узнать мнения подписчиков без перенаправления их на другие сайты.

Преимущество в нескольких типах тестов. Администратор сам решает, когда аудитория узнает об ответах или она может их вовсе не узнать. Можно каждому вопросу назначить баллы.

Процесс подключения не отличается от других. Пример заполнения основных полей вы можете посмотреть выше. Сохраняете изменения и ждете результатов прохождения пользователями вашего теста.

Анкеты

Для кого: подходит владельцем любых групп.

Цель: провести полное анкетирование или опрос подписчиков и посетителей сообщества.

Можно создавать различные типы анкет с вопросами и многошаговые голосования. Используйте это для изучения аудитории или в качестве брифа для клиентов. Есть детальная статистика, которая позволяет изучить аудиторию. Создана настройка оповещений, позволяющая сделать работу администратора и пользователей комфортнее.

Для добавления переходим в «Управление страницей» – «Приложения». Выбираем «Анкеты» и нажимаем «Добавить».

Заполняем основные настройки и переходим к созданию анкет. Нажимаем на кнопку «Перейти в управление приложением».

Давайте рассмотрим пример создания анкеты:

1. Вводим название.
2. Нажимаем на первый пункт (смотрите пример на скриншоте выше).
3. Задаем вопрос и добавляем варианты ответов.
4. Нажимаем «Сохранить».

Вы можете значительно расширить анкету, добавив больше пунктов, фотографий, различных видов вопросов.

Личный кабинет для СП

Для кого: владельцам интернет-магазинов.

Цель: дает возможность легко участвовать в совместных покупках.

Сразу после установки вы получите такие возможности:

• отображение общего счета по покупкам;
• приходят уведомления, если происходят изменения в закупках;
• история заказов сохраняется;

Добавление ничем не отличается от остальных. После запуска необходимо нажать на кнопку «Подписаться».

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

Расписание мероприятия

Для кого: администраторов, которые нацелены на проведение концертов, выставок или других мероприятий.

Цель: привлечение внимания к определенному событию, оповещение о нем подписчиков.

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

Нажимаете на кнопку «Создать мероприятие».

Заполняете все необходимые поля и сохраняете изменения. После этого пользователям будут доступны уведомление о мероприятиях.

Статус заказа

Для кого: интернет-магазинам в социальной сети ВК.

Цель: покупатели могут видеть состояние заказа.

Если вы продаете товары в ВКонтакте, обязательно установите это приложение. Благодаря нему пользователи смогут видеть статус своей покупки. Всего есть 3 статуса: на утверждении, отправка и доставка. Способен интегрироваться с виртуальным магазином, который мы рассматривали перед этим. Это позволяет автоматически подгружать статусы, под которые заранее настраиваются шаблоны.

Переходим в «Управление сообществом», выбираем раздел «Приложения». Виджет находится практически в конце страницы, поэтому рекомендуем воспользоваться поиском. Нажимаем «Добавить».

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

У вас ещё нет интеграцией, поэтому система предложит выбрать CRM. Далее необходимо следовать подсказкам системы, ведь от выбранного пункта зависят дальнейшие настройки и работа с заказами.

Заключение

Виджеты в ВК для группы позволяют сделать работу намного проще. Вы можете не просто делиться с подписчиками и посетителями информацией, но и дать им возможность покупать товары, посещать ваши мероприятия, собирать базу для дальнейших рассылок. Благодаря приложениям обычную группу в социальной сети можно превратить в инструмент, которые по функциональности способен заменить сайт!

Больше статей по теме: