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

Visual Composer — это плагин визуального конструктора страниц в wordpress. Это плагин премиум-класса, и теперь почти каждая тема премиум-класса использует его для разработки привлекательных, адаптивных и анимированных страниц. Это сводит к минимуму время разработки и проектирования в WordPress, и мы можем с его помощью создать любой вид страницы. Отзывчивый пользовательский макет, анимированные блоки и css для конкретной страницы — вот некоторые из его функций. он поставляется со многими встроенными надстройками, или вы можете сказать, что доступны визуальные элементы и множество бесплатных и платных плагинов, которые добавляют дополнительные визуальные элементы. Одним из моих любимых является Ultimate addons for visual composer. Аддоны или элементы визуального композитора в основном представляют собой шорткод WordPress, и в этой статье мы создадим простой аддон для наших практик.

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

<?php
/*
* Plugin Name: Visual Composer Simple Addon
* Plugin URI: http://emericov2
* Description: Simple visual composer addon
* Version: 0.1.1
* Author: Udit Rawat
* Author URI: http://emericov2
* License: GPLv2 or later
*/
/**
 * Class Vc_Simple_Addon
 */
class Vc_Simple_Addon extends WPBakeryShortCode
{
    function __construct($settings)
    {
        // parent constructor call with default parameters
        parent::__construct( $settings );
// Implement wordpress hooks for our addon
        add_action('init', [$this, 'vc_simple_addon_init']);
        add_shortcode('vc_infobox', [$this, 'vc_simple_addon_html']);
    }
/**
     * Init and element mapping function
     */
    public function vc_simple_addon_init()
    {
// Return nothing if visual composer is not defined.
        if (!defined('WPB_VC_VERSION')) {
            return;
        }
// map block and field with vc_map function
        vc_map(
            [
                'name' => __('VC Simple Addon', 'emerico'),
                'base' => 'vc_simple_addon',
                'description' => __('Simple addon for vc', 'emerico'),
                'category' => __('Content', 'emerico'),
                "class" => "",
                "controls" => "full",
                'icon' => plugins_url('assets/asterisk_yellow.png', __FILE__),
                //'admin_enqueue_js' => array(plugins_url('assets/vc_simple_addon_admin.js', __FILE__)), // This will load js file in the VC backend editor
                //'admin_enqueue_css' => array(plugins_url('assets/vc_simple_addon_admin.css', __FILE__)), // This will load css file in the VC backend editor
                'params' => [
                    [
                        'type' => 'textfield',
                        'holder' => 'h3',
                        'class' => 'title-class',
                        'heading' => __('Title', 'emerico'),
                        'param_name' => 'title',
                        'value' => __('Default value', 'emerico'),
                        'description' => __('Box Title', 'emerico'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ],
                    [
                        'type' => 'textarea',
                        'holder' => 'div',
                        'class' => 'text-class',
                        'heading' => __('Text', 'emerico'),
                        'param_name' => 'text',
                        'value' => __('Default value', 'emerico'),
                        'description' => __('Box Text', 'emerico'),
                        'admin_label' => false,
                        'weight' => 0,
                        'group' => 'Custom Group',
                    ],
                ],
            ]
        );
    }
// ShortCode html function
    public function vc_simple_addon_html($atts)
    {
        // Params extraction
        extract(
            shortcode_atts(
                array(
                    'title' => '',
                    'text' => '',
                ),
                $atts
            )
        );
// build shorcode html
        $html = '
        <div class="vc-simple-addon-wrap">
            <h2 class="vc-simple-addon-title">' . $title . '</h2>
            <div class="vc-simple-addon-text">' . $text . '</div>
        </div>';
return $html;
}
}
new Vc_Simple_Addon(['title'=>'Demo title','text'=>'Demo Text']);