Propre plugin ajoutant un widget au plugin WPBakery
Dans ce tutoriel, vous apprendrez à créer un plugin qui vous permet d’ajouter un widget n’importe où sur le site en utilisant le constructeur de pages WPBakery. C’est une fonctionnalité très utile que ce constructeur de pages ne possède pas. Elle vous permet d’insérer n’importe quel code via le Page Builder, ce qui vous permet d’étendre notre site de la manière dont vous le souhaitez. Un exemple de son utilisation peut être l’ajout d’un widget affichant des entrées de type « Custom Post Type », par exemple des projets d’une certaine manière, comme une grille.
Comment créer votre propre plugin qui fonctionne avec WP Baker pour créer des widgets ?
De quoi avons-nous besoin ?
- Version active du WPBakery Page Builder – WordPress Page Builder Plugin – c’est un plugin payant, qui vous permet de créer des vues de pages en utilisant le glisser-déposer. C’est un outil qui facilite la création de sites web dans WordPress, ce qui accélère considérablement le travail sur les projets.
- Sensibilisation au PHP et à la création de code dans une approche orientée objet – notre plugin sera créé dans une approche orientée objet utilisant PHP et sans connaissance dans ces sujets, il sera difficile de comprendre le code créé dans ce tutoriel. Je vous recommande de lire les tutoriels suivants : PHP orienté objet pour débutants et Premiers pas dans la création de WordPress plugins
- Patience et concentration lors de la création du plugin 🙂
Débutons !
La première étape consistera à créer un dossier de notre plugin, que nous appellerons REDO JSComposer Additional. Le plugin doit être placé dans le dossier où se trouvent tous nos plugins, c’est-à-dire que vous devez trouver le dossier : Plugins, et y créer notre dossier où le plugin sera situé. Le nom du dossier ne peut pas contenir de majuscules et de minuscules, d’espaces et de caractères spéciaux, c’est pourquoi nous appelons le dossier redo-jscomposer-additional respectivement.
Nous devons maintenant créer la structure de notre plugin, qui ressemblera à ceci :
Dans notre dossier principal du plugin, nous créons des dossiers :
- images – le dossier où nous allons stocker nos icônes utilisées dans le plugin,
- widgets – un dossier contenant des widgets à afficher à l’aide du plugin,
et les fichiers :
- index.php – fichier définissant le plugin (nom du plugin, auteur, etc.) et initialisant notre fichier principal main.php,
- main.php – fichier principal de notre plugin.
Allons d’abord à index.php edition.
La première étape consiste à protéger le code contre l’accès direct aux fichiers avec ABSPATH, qui est une constante définie dans WordPress, sécurisant l’accès aux fichiers .php.
Ensuite, nous mettons une description de notre plugin dans le bloc de commentaires :
- Nom du plugin – ici vous devez donner le nom de notre plugin, qui sera plus tard visible dans les plugins dans le panneau WordPress,
- Description – description de notre plugin,
- Author– nom de l’auteur,
- Author URI– URL redirigeant vers le site de l’auteur,
- Version– plugin version,
- License– spécifier une licence pour rendre le plugin disponible à tous les utilisateurs dans les plugins WordPress.
Tous les champs sont facultatifs, sauf Nom du plugin, qui est un champ obligatoire.
Ensuite, en utilisant require_once() nous ajoutons le chemin d’accès au fichier principal du plugin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } /* Plugin Name: REDO JSComposer Addditional Description: REDO JSComposer Addditional gives you multi plugins all in one. It's very powerful for any theme. Plugin URI: https://redo-interactive.com Author: REDO Author URI: https://redo-interactive.com Version: 3.1 License: GPL2 */ require_once('main.php'); ?> |
Nous procédons à la création de la logique de notre plug-in en éditant le fichier main.php. Dans ce fichier, nous allons prendre en charge l’ajout d’un widget à notre plugin WPBakery using VC_REDO.
1 2 3 | <?php class VC_REDO { } ?> |
La première étape consiste à ajouter le constructeur à notre classe avec la __construct() function. Le constructeur acceptera la fonction privée $$file– c’est la variable représentant le fichier sur lequel nous allons travailler. Dans le constructeur, nous utilisons le hooks intégré au Visual Composer pour « accrocher » nos fonctions. En conséquence :
- vc_before_init– nous ajoutons notre vc_redo_widgets(), qui sera chargé de joindre le fichier avec notre widget,
- wp_ajax_vc_save_data– ici nous allons ajouter notre fonctionnalité de mise à jour vc_redo_update(),
- init – lors de l’initialisation, nous vérifierons si WPBakery est installé en utilisant check_for_install().
1 2 3 4 5 6 7 8 9 10 11 | <?php class VC_REDO { private $file; function __construct($file) { $this->file = $file; add_action( 'vc_before_init', array($this, 'vc_redo_widgets' )); add_action( 'wp_ajax_vc_save_data', array($this, 'vc_redo_update' )); add_action( 'init', array( $this, 'check_for_install' ) ); } } ?> |
Après avoir écrit la fonction de construction, on passe à redo-init(), qui nous aidera à activer notre widget. En fonction, nous ajoutons le hook WordPress intégré à WordPress pour activer le plugin – rregister_activation_hook(). Nous joignons la fonction responsable de l’activation de notre widget – redo_activation().
1 2 3 | public function redo_init () { register_activation_hook( $this->file, array( $this, 'redo_activation' ) ); } |
The vc_redo_widgets() function that is included in our constructor contains the include containing the path to our widget, which we will write later. The path will be the widgets containing our own widget, so far we’re going to take the widget’s nameWidgetu.php.
1 2 3 | function vc_redo_widgets() { include 'widgets/nazwaWidgetu.php'; } |
Une autre fonction est vc_redo_update() – elle vérifie si la variable globale $_REQUEST, qui est responsable de la définition des données dans ce cas en WPBakery. Autrement dit, en cas de modification des formulaires WPBakery (par exemple, changement de case à cocher), cette valeur sera dans le style <span= »background-color » : #f7eded ; font-family : ‘courier new’, courier, monospace ; »>$_REQUEST. En allant plus loin, si cette variable est définie ( isset() ) – mettre à jour les données du plugin avec update_option().
1 2 3 4 5 | function vc_redo_update() { if (isset($_REQUEST)) { update_option( 'vc_redo_update', $_REQUEST ); } } |
Autre fonction liée à hook – redo_init – check_for_install(). Il est chargé de vérifier que les plugins nécessaires à l’affichage de notre vue finale sont installés sur notre WordPress. Dans notre cas, il s’agit des plugins :
- WPBakery,
- CPT UI,
- Custom Field.
Il vérifie si les variables WPB_VC_VERSION, ACF_VERSION, CPT VERSION sont définies. Ce sont des variables globales de plugin et ne peuvent être référencées que si le plugin existe dans notre WordPress. Si la variable n’existe pas, nous affichons un message approprié pour installer le plugin WPBakery. Pour afficher ce message, incluez le show_redo_warning(), qui affiche le div.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | function check_for_install() { if (!defined('CPT_VERSION') || !defined('ACF_VERSION') || !defined('WPB_VC_VERSION')) { add_action('admin_notices', array( $this,'show_redo_warning')); return; } } function show_redo_warning() { if (!defined('WPB_VC_VERSION')) { $link = "https://wpbakery.com/"; $plugin = "WPBakery Page Builder"; ?> <div class="notice notice-warning is-dismissible"> <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer Additional.</p> </div> <?php } if (!defined('CPT_VERSION')) { $link = "https://pl.wordpress.org/plugins/custom-post-type-ui/"; $plugin = "Custom Post Type UI"; ?> <div class="notice notice-warning is-dismissible"> <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer Additional.</p> </div> <?php } if (!defined('ACF_VERSION')) { $link = "https://pl.wordpress.org/plugins/advanced-custom-fields/"; $plugin = "Advanced Custom Fields"; ?> <div class="notice notice-warning is-dismissible"> <p>Please install <a href="<?php echo $link; ?>"><?php echo $plugin; ?></a> to use REDO JSComposer Additional.</p> </div> <?php } } |
Passons à l’activation de notre plugin – fonction redo_activation(). La première étape est de vérifier avec WordPress get_option() s’il existe une option vc_redo_update. Cette valeur sera toujours fausse lorsqu’elle sera activée, car ce n’est que lorsqu’elle sera activée que cette option sera ajoutée au plugin WPBakery. En utilisant le tableau $vc_default_redo nous définissons une valeur pour notre widget : ‘on’. Ensuite, nous mettons à jour notre vc_redo_update en ajoutant notre widget.
1 2 3 4 5 6 7 | public function redo_activation () { if ( !get_option( 'vc_redo_update' ) ) { $vc_default_redo = array( 'nazwaWidgetu' => 'on' ); update_option( 'vc_redo_update', $vc_default_redo); } |
Voici notre code de fichier complet main.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?php class VC_REDO { private $file; function __construct($file) { $this->file = $file; add_action( 'vc_before_init', array($this, 'vc_redo_widgets' )); add_action( 'wp_ajax_vc_save_data', array($this, 'vc_redo_update' )); add_action( 'redo_init', array( $this, 'check_for_install' ) ); } public function redo_init () { register_activation_hook( $this->file, array( $this, 'redo_activation' ) ); } function vc_redo_widgets() { include 'widgets/projekty.php'; } function vc_redo_update() { if (isset($_REQUEST)) { update_option( 'redo_activation', $_REQUEST ); } } function check_for_install(){ if ( ! defined( 'WPB_VC_VERSION' ) ) { add_action('admin_notices', array( $this, 'show_redo_warning' )); return; } } public function redo_activation () { if ( !get_option( 'vc_redo_update' ) ) { $vc_default_redo = array( 'projekty' => 'on' ); update_option( 'vc_redo_update', $vc_default_redo); } } function show_redo_warning(){ ?> <div class="redo-warning-container"> <p>Please install <a href="https://wpbakery.com/">WPBakery Page Builder</a> to use REDO JSComposer Additional.</p> </div> <?php } } ?> |
Nous devons retourner au fichier index.php, où nous devons ajouter notre VC_REDO.
Nous créons le $redo_object, où nous lançons une nouvelle instance de VC_REDO contenant la __FILE__en écrivant le chemin du système de fichiers vers le fichier courant .php. Nous nous référons ensuite aux méthodes publiques of VC_REDO that is redo_init() and redo_activation().
Notre code php du fichier index.php est maintenant le suivant :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } /* Plugin Name: REDO JSComposer Addditional Description: REDO JSComposer Addditional gives you multi plugins all in one. It's very powerful for any theme. Plugin URI: https://redo-interactive.com Author: REDO Author URI: https://redo-interactive.com Version: 3.1 License: GPL2 */ require_once('main.php'); $redo_object = new VC_REDO( __FILE__ ); $redo_object->redo_init(); $redo_object->redo_activation(); ?> |
Nous avons configuré un plugin pour afficher notre widget via WPBakery. Il ne nous manque qu’un seul widget. Allons au cœur de l’article, c’est-à-dire ajouter votre propre widget à WPBakery.
Dans le dossier widgets , nous allons créer un fichier .php avec le nom de notre widget. Dans notre cas, ce sera le nom du fichier projects.php, qui sera responsable de l’affichage de tous les posts de type projects, dans une vue HTML particulière en utilisant le WPBaker.
Comme pour le fichier index.php, la première étape consiste à sécuriser l’accès externe au fichier en utilisant ABSPATH.
1 2 3 | if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } |
L’action suivante consiste à créer un héritage de classe intégré au plug-in WPBakeryShortCode – WPBakeryShortCode. Notre classe sera nommée en héritant du nom de la classe héritée, en ajoutant le nom du fichier .php, qui est : WPBakeryShortCode_projects. Avec extends nous marquons la succession des classes WPBakeryShortCode.
1 | class WPBakeryShortCode_projekty extends WPBakeryShortCode { } |
Dans notre classe WPBakeryShortCode_projects, nous devons définir le content() fonction responsable du chargement des données et de leur affichage dans la vue appropriée.
1 | fonction protégée content() { } |
Allons télécharger le tableau projets poste. Si vous ne savez pas ce que c’est que de créer votre propre type de messages et comment les exploiter en PHP, veuillez vous référer à notre article – Création d’un modèle de message personnalisé.
Les paramètres sont donnés :
- type de posture : « projets »,
- ce que les messages sont affichés : -1′ – cela affichera tous les messages,
- display by : « date » – les projets seront affichés par date de création.
Nous utiliserons le WordPress WP_Query()builder, qui enverra une requête à la base de données avec les paramètres passés dans le $args.
1 2 3 4 5 6 | $args = array( post_type' => 'projekty', posts_per_page' => -1, orderby => "date" ) ; $projekty = new WP_Query($args); |
Nous pouvons passer à la création d’une vue qui affiche les projets.
Pour afficher correctement notre code html, nous avons besoin de la fonction intégrée de WordPress – ob_start(), que nous ajouterons à notre fonction content(). Cette fonction crée un tampon dans lequel la sortie est écrite. Pour fermer ce tampon, il suffit de revenir à returnla fonction de nettoyage du tampon : ob_get_clean(). Entre ces fonctions, nous ajoutons notre bloc de code html responsable de l’affichage des projets.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ob_start(); ?> <div class="projekty-container"> <h2 class="projekty-container-tytul">PROJEKTY</h2> <?php while ($projekty->have_posts()) : $projekty->the_post(); ?> <div class="projekt"> <h1 class="projekt-tytul"> a href="<?php echo get_permalink(); ?>"> <?php echo get_the_title() ?> </a> </h1> <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?> </div> <?php endwhile; ?> </div> <?php return ob_get_clean(); |
Ensuite, nous procédons à la mise en œuvre de WPBakery vc_map(). La documentation complète de la fonction se trouve à there et vous pouvez trouver plus d’options de paramétrage pour votre widget ici, tandis que cet article décrira les paramètres de base pour afficher le widget correctement.
Nous avons défini les paramètres de notre widget en conséquence :
- name> : « Projects » – nom principal affiché dans la liste d’articles de WPBakery, « projects » – les serviteurs de notre nom.
- base : « projets » – C’est le nom utilisé plus tard dans le shortcode de WPBakery, c’est-à-dire qu’en entrant base nom projets, notre shortcode dans WPBakery ressemblera à ceci : [ projects ],
- category : « REDO JSComposer Additional » – le nom de la catégorie est arbitraire, dans notre cas nous avons appelé la catégorie le nom de notre plugin
- description : « Afficher les projets » – une brève description de ce dont notre widget est responsable,
- icon> : – ici nous ajoutons une icône qui représentera notre widget. Ajoutez l’icône dans le dossier icons et spécifiez ensuite le chemin d’accès en utilisant la fonction intégrée d’accès au répertoire du plugin : plugin_dir_url(__FILE__) et lien vers le chemin du dossier icon : ‘../images/eye-icon.png‘.
1 2 3 4 5 6 7 | vc_map( array( "name" => __( 'Projekty', 'projekty' ), "base" => "projekty", "category" => __('REDO JSComposer Additional'), "description" => __('Display projects'), "icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png' ) ); |
Całość kodu naszego pliku projekty.php wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <?php if ( ! defined( 'ABSPATH' ) ) { die( '-1' ); } class WPBakeryShortCode_projekty extends WPBakeryShortCode { protected function content() { $args = array( 'post_type' => 'projekty', 'posts_per_page' => -1, 'orderby' => 'date' ); $projekty = new WP_Query($args); ob_start(); ?> <!-- HTML DESIGN HERE --> <div class="projekty-container"> <h2 class="projekty-container-tytul">PROJEKTY</h2> <?php while ($projekty->have_posts()) : $projekty->the_post(); ?> <div class="projekt"> <h1 class="projekt-tytul"> <a href="<?php echo get_permalink(); ?>"> <?php echo get_the_title() ?> </a> </h1> <?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?> </div> <?php endwhile; ?> </div> <!-- HTML END DESIGN HERE --> <?php return ob_get_clean(); } } vc_map( array( "name" => __( 'Projekty', 'projekty' ), "base" => "projekty", "category" => __('REDO JSComposer Additional'), "description" => __('Display projects'), "icon" => plugin_dir_url( __FILE__ ).'../images/eye-icon.png' ) ); |
C’est parti ! Nous avons maintenu un plugin fonctionnel qui ajoutera nos widgets au plugin WPBakery.
Passons à l’activation du plugin et à l’ajout du widget à la page.
Allez à Plug-ins dans le panneau WordPress. Trouvez le nom de notre plugin REDO JSComposer Additional et activez-le.
Après avoir activé le plugin, sélectionnez la page à laquelle vous souhaitez ajouter le widget Projets. En utilisant le backend de WPBakery, ajoutez l’élément à la vue.
Sélectionnez votre widget dans la liste des éléments et vous êtes prêt 🙂
Nous avons reçu une vue affichant les projets ajoutés à partir du plugin WPBakery.
Sommaire
En ajoutant votre propre widget au plugin WPBakery, vous pouvez ajouter un Custom Post Type : projets à afficher n’importe où sur la page. De cette façon, nous pouvons ajouter d’autres widgets à notre plugin. Il suffit de créer un render analogique à projects.php à partir de autres fichiers affichant un autre contenu. De plus, nous pouvons étendre l’affichage avec des paramètres spécifiques, en sélectionnant le type de messages et d’autres caractéristiques.
C’est une fonctionnalité très utile, qui n’est pas présente dans la version de base du plugin WPBakery. Elle vous permet de créer une page à l’aide de modules ajoutés avec notre générateur de page, qui peuvent être ajoutés à de nombreux endroits, et s’il y a des changements, il suffit d’éditer un fichier PHP.