Создание простого виджета для WpBakery

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

И так, что же это за зверь  Visual Composer или альтернативное название WPBakery Page Builder? Это такой плагин к сожалению за который придётся отстегнуть немного денег, позволяющий создавать сайты или страницы на сайте с помощью визуальной оболочки.

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

 

Если посмотреть на изображение, то мы видим иконки с виджетами при нажатие на которую в текстовый редактор будет добавлен новый блок с настройками. Предположим мы хотим разместить на странице два блока, и в каждом блоке разная форма Contact Form 7.  При этом плагин может разделить ряд на 2,3,4 части.

Так вот сейчас мы поговорим о том как создать такой виджет со своими настройками.

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

add_action('vc_before_init', 'add_new_vidget_vc' );

Внутри функции «add_new_vidget_vc» мы будем создавать форму с настройками, поехали.

function add_new_vidget_vc(){

  vc_map( 
    array(
      "name" => __("Мой первый виджет", "my_first_vidget"),		
      "base" => "my_first_vidget",			
      "description" => __("Мой первый виджет для VC", "my_first_vidget"),			
      "category" =>'__("Мои виджеты", "my_first_vidget")		
      "params"=>array()
      
    )

  );
  
}

Этого кода вполне достаточно, чтобы создать новую вкладку «Мои виджеты», и разместить  внутри новый элемент.

Как видно в массиве переданы разные ключи:

name — Название виджета

base — шорткод который будет добавлен в редактор

description — описание

category — название вкладки, либо новой, либо существующей

params — создание полей с настройками для виджета (Пока пустой)

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

Ничего интересного на ум не пришло, поэтому мы сделаем настройки для публикации видео с канала youtube.

Создадим следующие поля:

  • Заголовок блока
  • Название видеоролика
  • Ссылка на ролик с youtube
  • Ширина видео
  • Высота видео
function add_new_vidget_vc(){
      vc_map( 
        array(
          "name" => __("Мой первый виджет", "my_first_vidget"),    
          "base" => "my_first_vidget",      
          "description" => __("Мой первый виджет для VC", "my_first_vidget"),      
          "category" =>__("Мои виджеты", "my_first_vidget"),   
          "params"=>array(
        
          array(
            "type" => "textfield",
            "holder" => "div",
            "heading" => esc_html__("Заголовок блока", 'my_first_vidget'),
            "param_name" => "title",
            "value" => "",
            "description" => esc_html__("Укажите заголовок блока", 'my_first_vidget')
          ), 
          array(
            "type" => "textfield",
            "holder" => "div",
            "heading" => esc_html__("Название ролика", 'my_first_vidget'),
            "param_name" => "name",
            "value" => "",
            "description" => esc_html__("Укажите название вашего ролика", 'my_first_vidget')
          ), 
          array(
            "type" => "textfield",
            "holder" => "div",
            "heading" => esc_html__("Код ролика с youtube", 'my_first_vidget'),
            "param_name" => "video",
            "value" => "",
            "description" => esc_html__("Код ролика ролик с youtube без HTML (например H63cVdHkCvY)", 'my_first_vidget')
          ), 
          array(
            "type" => "textfield",
            "holder" => "div",
            "heading" => esc_html__("Ширина видео", 'my_first_vidget'),
            "param_name" => "width",
            "value" => "",
            "description" => esc_html__("", 'my_first_vidget')
          ), 
          array(
            "type" => "textfield",
            "holder" => "div",
            "heading" => esc_html__("Высота видео", 'my_first_vidget'),
            "param_name" => "height",
            "value" => "",
            "description" => esc_html__("", 'my_first_vidget')
          ), 
        
        )
          
        )
      );
      
}

Давайте разберём как создаются поля в VC

type — тип поля

  • textfield (Текстовое поля)
  • textarea (Большое текстовое поле)
  • checkbox (птичка)
  • drpodown (Список)
  • attach_image (Изображение)
  • autocomplete (Поиск)

holder — HTML элемент

heading — заголовок над полем

param_name — имя и id созданного поля

value — Значение по умолчанию

description — описание под текстовым полем

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

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

За создание нового шорткода отвечает функция add_shortcode, в нашем случае название шорткода «my_first_vidget», а за его обработку будет отвечать функция «my_first_vidget_add».

add_shortcode('my_first_vidget','my_first_vidget_add');

Создаём функцию с шаблоном.

function my_first_vidget_add($atts){
  
  
  if(isset($atts['title']))$title=esc_html(trim($atts['title'])); else $title='';
  if(isset($atts['name']))$name=esc_html($atts['name']); else $name='';
  if(isset($atts['video']))$video=esc_html($atts['video']); else $video='';
  if(isset($atts['width']))$width=esc_html($atts['width']); else $width='100%';
  if(isset($atts['height']))$height=esc_html($atts['height']); else $height='500px';
  if($video !=''){
?>
<div id="my_first_vidget">
<?php if($title !=''){?><h1><?php echo $title;?></h1><?php }?>
<?php if($name !=''){?><div class="name"><?php echo $name;?></div><?php }?>
<?php if($video !=''){?>
<iframe src="https://www/youtube.com/embed/<?php echo $video;?>" width="<?php echo $width;?>" height="<?php echo $height;?>"></iframe>
<?php }?>
</div>
<?php
}

}

Что делает функция?

В созданной функции я передаю переменную $atts, которая состоит из массива с переменными виджета (title,name,video,width,height). Вытаскиваем эти переменные из массива и заменяем все HTML элементы с помощью esc_html().

Если не указана высота и ширина, я поставил значения по умолчанию. Ширина — 100%,Высота — 500px.

Дальше создаём div шаблон, но отображаться он будет при условие если заполнено поле — Видео

Вот в принципе и всё, теперь при добавление элемента в редактор WordPress, на сайте отобразится видео с youtube.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*