Elementor – comment créer votre propre plugin de courrier personnalisé
Dans le guide précédent : Propre plugin ajoutant un widget au plugin Elementor nous avons créé un plugin qui ajoute ses propres widgets au plugin Elementor. Nous aimerions maintenant créer un widget pour notre plugin qui ajouterait des messages de son propre type, spécifiés dans le widget, et un champ que nous choisirions également dans Elementor. Ce sera la même solution que dans REDO JSComposer Additional – plugin ajoutant un widget à WPBakery seulement au lieu de WPBakery le plugin cible sera Elementor.
Commençons à travailler sur le widget.
Nous créons un autre widget dans le dossier widgets et l’appelons customPostRedo.php, qui stockera le CustomPostRedo.
.
Nous devons retourner à la racine de notre plugin et éditer le fichier main.php. Nous devons indiquer le chemin vers notre widget et sa classe dans la principale E_REDO. Pour ce faire, nous ajoutons la même manière que dans le widget projekty. php – path in require_once() et ajouter un chemin vers CustomPostRedo dans register_widgets().
1 2 3 4 5 6 7 8 9 10 11 12 | private function include_widgets_files() { require_once(__DIR__ . '/widgets/projekty.php'); require_once(__DIR__ . '/widgets/customPostRedo.php'); } public function register_widgets() { $this->include_widgets_files(); \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\Projekty()); \Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Widgets\CustomPostRedo()); } |
Tout est prêt. Nous allons éditer notre fichier customPostRedo.php. Donnez un nom propre à namespace et ajoutez des chemins vers les classes appropriées à utiliser dans notre code. Ajoutez une vérification pour le ABSPATH et définissez ensuite le nom de notre classe CustomPostRedo hérite d’une classe Widget_Base – Classe de plugin Elementor.
1 2 3 4 5 6 7 | namespace REDO\Widgets; use Elementor\Widget_Base; use Elementor\Controls_Manager; use REDO\E_REDO; if (!defined('ABSPATH')) exit; class CustomPostRedo extends Widget_Base { } |
Nous allons créer une classe qui prend en charge notre widget – CustomPostRedo. Nous définissons plusieurs fonctions intégrées d’Elementor, appelé notre widget.
1 2 3 4 5 6 7 8 9 10 11 12 | public function get_name(){ return 'customPostRedo'; } public function get_title(){ return __('Custom Post REDO'); } public function get_icon() { return 'fa fa-eye'; } public function get_categories(){ return ['general']; } |
Allez à la fonction principale _register_controls(), qui récupérera le type de message personnalisé que vous souhaitez afficher et les champs de message que vous souhaitez obtenir dans la vue. Pour cela, nous devons télécharger la liste des messages personnalisés et leurs champs et champs personnalisés dans le widget Elementor. Nous nous baserons sur le get_option(‘cptui_post_types’) et créé dans le fichier main.php function prepareCustomFields(). Le téléchargement d’une liste de types de messages est analogue à la façon dont nous l’avons créée dans l’article : REDO JSComposer Additional – plugin ajoutant un widget à WPBakery – c’est ici que sont expliquées les fonctions et les listes sur lesquelles nous allons travailler.
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 | protected function _register_controls() { $customPostList = get_option('cptui_post_types'); $_custom_posts = array(); $_custom_posts_params = array(); if ($customPostList) { foreach ($customPostList as $postList) { $_custom_posts_params[$postList["name"]] = $postList["label"]; $_custom_posts[$postList["name"]]["type"] = $postList["name"]; $_custom_posts[$postList["name"]]["label"] = $postList["label"]; $supportsArray = array_flip($postList["supports"]); foreach ($supportsArray as $key => $value) { $supportsArray[$key] = $key; } $_custom_posts[$postList["name"]]["supports"] = $supportsArray; } } $fields = E_REDO::prepareCustomFields(); $customFieldsList = array(); if ($fields) { foreach ($fields as $field) { $customFieldsList[$field["type"]]["customFields"] = $field["fields"]; } } } |
Nous avons déjà préparé une liste avec les types de postes et leurs domaines. Nous créons une section dans notre widget et donnons le label approprié pour indiquer qu’il s’agira d’une section pour choisir le type de message.
1 2 3 4 5 6 | $this->start_controls_section( 'custom-post', [ 'label' => 'Custom Post Type', 'Choose Post Type which you want to display', ] ); |
Nous pouvons maintenant afficher les types de postes possibles parmi lesquels choisir. Il est important de se rappeler que chaque nom de paramètre est individuel et unique. Si les noms des paramètres sont répétés – notre widget ne fonctionnera pas. Il est important de bien nommer nos paramètres afin de pouvoir les exploiter par la suite (il doit être cohérent d’identifier chaque paramètre pour que nous sachions de quoi il est responsable). Pour afficher les types de messages, nous utilisons le $_custom_posts_params pour lequel nous ajoutons un radio-button, using elementor add_control(). Nous définissons le nom du paramètre – ‘post-type’. $key – au tableau il nous passera – ‘post-type post personnalisé ‘ – qui sera toujours le nom individuel de chaque type de message. Le type de message utilise le type CHOOSE hérité de Controls_Manager – ce type est synonyme de radio-button. Dans le tableau des options, ajoutez la valeur $key de notre liste.
1 2 3 4 5 6 7 8 9 10 11 12 13 | foreach ($_custom_posts_params as $key => $value) { $this->add_control( 'post_type-'.$key, [ 'label' => $value, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $key => __($key), ], ] ); } |
Fermez maintenant la section des postes douaniers.
1 | $this->end_controls_section(); |
Les sections suivantes de notre widget seront créées dans une boucle foreach pour la valeur du $_custom_posts en stockant le type de message et pour chaque type de message les types de champs qui peuvent être affichés. A l’intérieur de la boucle, nous définissons une section pour chaque type de poste qui stocke les types de champs. Les types de champs seront stockés dans une liste $custom_params pour laquelle la boucle foreach où nous assignons les boutons radio appropriés dans la section créée.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | $this->start_controls_section( $key .'-fields', [ 'label' => $value["label"] . ' Fields', 'Chose additional fields', ] ); $custom_params = $value["supports"]; foreach ($custom_params as $pkey => $pvalue) { $this->add_control( 'post_field-'.$key .'-' . $pvalue, [ 'label' => $pvalue, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $pkey => __($pvalue), ], ] ); } $this->end_controls_section(); |
Dans la même boucle pour lists $_custom_posts, nous créons les sections suivantes pour les champs personnalisés – individuellement pour chaque type de message.
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 | foreach ($customFieldsList as $fkey => $fvalue) { if ($fkey == $value["type"]) { $customList = $fvalue["customFields"]; foreach ($customList as $ck => $cv) { $customList[$ck] = $ck; } $this->start_controls_section( $key . 'custom-fields', [ 'label' => $value["label"] . ' Custom Fields', 'Chose additional fields', ] ); foreach ($customList as $ckey) { $this->add_control( 'customfield-'. $key . '-' . $ckey, [ 'label' => $ckey, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $ckey => __($ckey), ], ] ); } $this->end_controls_section(); } } |
Le code de fonction complet _register_controls() :
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 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | protected function _register_controls() { $customPostList = get_option('cptui_post_types'); $_custom_posts = array(); $_custom_posts_params = array(); if ($customPostList) { foreach ($customPostList as $postList) { $_custom_posts_params[$postList["name"]] = $postList["label"]; $_custom_posts[$postList["name"]]["type"] = $postList["name"]; $_custom_posts[$postList["name"]]["label"] = $postList["label"]; $supportsArray = array_flip($postList["supports"]); foreach ($supportsArray as $key => $value) { $supportsArray[$key] = $key; } $_custom_posts[$postList["name"]]["supports"] = $supportsArray; } } $fields = E_REDO::prepareCustomFields(); $customFieldsList = array(); if ($fields) { foreach ($fields as $field) { $customFieldsList[$field["type"]]["customFields"] = $field["fields"]; } } $this->start_controls_section( 'custom-post', [ 'label' => 'Custom Post Type', 'Choose Post Type which you want to display', ] ); foreach ($_custom_posts_params as $key => $value) { $this->add_control( 'post_type-'.$key, [ 'label' => $value, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $key => __($key), ], ] ); } $this->end_controls_section(); foreach ($_custom_posts as $key => $value) { $this->start_controls_section( $key .'-fields', [ 'label' => $value["label"] . ' Fields', 'Chose additional fields', ] ); $custom_params = $value["supports"]; foreach ($custom_params as $pkey => $pvalue) { $this->add_control( 'post_field-'.$key .'-' . $pvalue, [ 'label' => $pvalue, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $pkey => __($pvalue), ], ] ); } $this->end_controls_section(); foreach ($customFieldsList as $fkey => $fvalue) { if ($fkey == $value["type"]) { $customList = $fvalue["customFields"]; foreach ($customList as $ck => $cv) { $customList[$ck] = $ck; } $this->start_controls_section( $key . 'custom-fields', [ 'label' => $value["label"] . ' Custom Fields', 'Chose additional fields', ] ); foreach ($customList as $ckey) { $this->add_control( 'customfield-'. $key . '-' . $ckey, [ 'label' => $ckey, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $ckey => __($ckey), ], ] ); } $this->end_controls_section(); } } } } |
Nous avons reçu une vue dans l’élémentaire contenant toutes les sections qui stockent les valeurs pertinentes :
Nous souhaitons maintenant que les valeurs sélectionnées dans le widget soient affichées dans la vue. L’affichage sera très similaire à celui de widget pour WPBakery. La différence sera que ce n’est pas dans le tableau $atts comme dans WPBakery, mais dans le tableau $settings, qui est complété par la fonction get_settings_for_display(), qui renvoie les paramètres du widget et leurs valeurs. La vue sera transmise dans la fonction render().
1 2 3 | protected function render() { $settings = $this->get_settings_for_display(); } |
Nous téléchargeons une liste des types de postes sélectionnés dans le widget. Créez un $postTypes vide auquel nous ferons suivre les types de courrier. En utilisant la boucle foreach, nous recherchons le $settings. Si la clé du tableau contient ‘post_type-‘ et que la valeur de la clé n’est pas vide, nous passons la valeur à $postTypes.
1 2 3 4 5 6 7 | foreach($settings as $key => $value) { if (strpos($key, 'post_type-') !== false) { if(!empty($value)) { $postTypes[$value] = $value; } } } |
Nous avons déjà téléchargé la liste des types de messages téléchargés à partir du widget. Nous passons maintenant à l’affichage d’une vue pour eux. La première étape consiste à vérifier si le $postTypes contient les types de courrier. S’il n’est pas vide pour chaque type de poste, un tableau affiche le conteneur et le nom du type de poste.
1 2 3 4 5 6 | <?php if (!empty($postTypes)) : ?> <?php foreach ($postTypes as $postType) : ?> <div class="post-type-container <?php echo $postType ?>"> <h2><?php echo $postType ?></h2> </div> <?php endforeach; endif; ?> |
Pour chaque type de poste, nous téléchargeons une liste de postes. Dans le tableau $args, nous précisons pour quel type de message nous voulons télécharger la liste et le nombre de messages. Dans le $query nous faisons un WP_Query on the board $args. La liste des messages contenus dans $query est transmise à la table $postList, qui stockera les messages téléchargés.
1 2 3 4 5 6 7 | $args = array( 'post_type' => $postType, 'posts_per_page' => -1, 'orderby' => 'date' ); $query = new \WP_Query($args); $postList = ($query->posts); |
Maintenant, nous vérifions que la liste $postList n’est pas vide. Sinon, nous afficherons un conteneur pour chaque personnage et son titre.
1 2 3 4 5 | if (!empty($postList)) : ?> <?php foreach ($postList as $myPost) : ?> <div class="post-container <?php echo $postType ?>"> <h2><?php echo $myPost->post_title; ?></h2> </div><?php endforeach; endif; |
Cherchez maintenant dans le tableau des paramètres $ et affichez les champs sélectionnés. Comme pour les types de message utilisant strpos() nous vérifions si la clé contient ‘post-field‘ ou ‘customfield‘ et affichons ces champs en conséquence. L’affichage est similaire à celui de WPBakery – je me réfère à cet article – lien si vous ne comprenez pas le code ci-dessous.
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 | foreach($settings as $key => $value) { if (strpos($key, 'post_field-'.$postType) !== false) { if(!empty($value)) { ?> <div class="'post-field '<?php echo $postType . ' ' . $value ?>"> <?php if($value=="thumbnail") { echo get_the_post_thumbnail($myPost->ID, 'medium'); } else { echo get_post_field("post_".$value, $myPost->ID); }?> </div> <?php } } if (strpos($key, 'customfield-'.$postType) !== false) { ?> <div class="'post-field '<?php echo $postType . ' ' . $value ?>"> <?php $customField = get_field($value,$myPost->ID); if(is_array($customField)) { $size = 'thumbnail'; echo '<img src="' . esc_url( $customField['sizes'][$size] ) . '"/>'; } else { echo $customField; } ?> </div> <?php } |
Le code de fichier complet customPostRedo.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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 | <?php namespace REDO\Widgets; use Elementor\Widget_Base; use Elementor\Controls_Manager; use REDO\E_REDO; if (!defined('ABSPATH')) exit; class CustomPostRedo extends Widget_Base { public function get_name() { return 'customPostRedo'; } public function get_title() { return __('Custom Post REDO'); } public function get_icon() { return 'fa fa-eye'; } public function get_categories() { return ['general']; } protected function _register_controls() { $customPostList = get_option('cptui_post_types'); $_custom_posts = array(); $_custom_posts_params = array(); if ($customPostList) { foreach ($customPostList as $postList) { $_custom_posts_params[$postList["name"]] = $postList["label"]; $_custom_posts[$postList["name"]]["type"] = $postList["name"]; $_custom_posts[$postList["name"]]["label"] = $postList["label"]; $supportsArray = array_flip($postList["supports"]); foreach ($supportsArray as $key => $value) { $supportsArray[$key] = $key; } $_custom_posts[$postList["name"]]["supports"] = $supportsArray; } } $fields = E_REDO::prepareCustomFields(); $customFieldsList = array(); if ($fields) { foreach ($fields as $field) { $customFieldsList[$field["type"]]["customFields"] = $field["fields"]; } } $this->start_controls_section( 'custom-post', [ 'label' => 'Custom Post Type', 'Choose Post Type which you want to display', ] ); foreach ($_custom_posts_params as $key => $value) { $this->add_control( 'post_type-'.$key, [ 'label' => $value, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $key => __($key), ], ] ); } $this->end_controls_section(); foreach ($_custom_posts as $key => $value) { $this->start_controls_section( $key .'-fields', [ 'label' => $value["label"] . ' Fields', 'Chose additional fields', ] ); $custom_params = $value["supports"]; foreach ($custom_params as $pkey => $pvalue) { $this->add_control( 'post_field-'.$key .'-' . $pvalue, [ 'label' => $pvalue, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $pkey => __($pvalue), ], ] ); } $this->end_controls_section(); foreach ($customFieldsList as $fkey => $fvalue) { if ($fkey == $value["type"]) { $customList = $fvalue["customFields"]; foreach ($customList as $ck => $cv) { $customList[$ck] = $ck; } $this->start_controls_section( $key . 'custom-fields', [ 'label' => $value["label"] . ' Custom Fields', 'Chose additional fields', ] ); foreach ($customList as $ckey) { $this->add_control( 'customfield-'. $key . '-' . $ckey, [ 'label' => $ckey, 'type' => \Elementor\Controls_Manager::CHOOSE, 'default' => '', 'options' => [ $ckey => __($ckey), ], ] ); } $this->end_controls_section(); } } } } protected function render() { $settings = $this->get_settings_for_display(); $postTypes = array(); foreach($settings as $key => $value) { if (strpos($key, 'post_type-') !== false) { if(!empty($value)) { $postTypes[$value] = $value; } } } ?> <!-- HTML DESIGN HERE --> <?php if (!empty($postTypes)) : ?> <?php foreach ($postTypes as $postType) : ?> <div class="post-type-container <?php echo $postType ?>"> <h2><?php echo $postType ?></h2> <?php $args = array( 'post_type' => $postType, 'posts_per_page' => -1, 'orderby' => 'date' ); $query = new \WP_Query($args); $postList = ($query->posts); if (!empty($postList)) : ?> <?php foreach ($postList as $myPost) : ?> <div class="post-container <?php echo $postType ?>"> <h2><?php echo $myPost->post_title; ?></h2> <?php foreach($settings as $key => $value) { if (strpos($key, 'post_field-'.$postType) !== false) { if(!empty($value)) { ?> <div class="'post-field '<?php echo $postType . ' ' . $value ?>"> <?php if($value=="thumbnail") { echo get_the_post_thumbnail($myPost->ID, 'medium'); } else { echo get_post_field("post_".$value, $myPost->ID); }?> </div> <?php } } if (strpos($key, 'customfield-'.$postType) !== false) { ?> <div class="'post-field '<?php echo $postType . ' ' . $value ?>"> <?php $customField = get_field($value,$myPost->ID); if(is_array($customField)) { $size = 'thumbnail'; echo '<img src="' . esc_url( $customField['sizes'][$size] ) . '"/>'; } else { echo $customField; } ?> </div> <?php } } ?> </div> <?php endforeach; ?> <?php endif; ?> </div> <?php endforeach; ?> <?php endif; ?> <!-- HTML END DESIGN HERE --> <?php } } |
Summing
Nous avons reçu une vue qui affiche les messages du type de message personnalisé sélectionné et leurs champs, que nous sélectionnons également dans le widget. Cette vue peut être facilement convertie à l’aide du CSS, car chaque div d’un champ est individuellement nommé avec le nom du type de poste et le nom du type de champ.
Il est important de se rappeler, lors de la création de widgets similaires pour Elementor, que les noms de paramètres doivent avoir des noms uniques – si un nom de paramètre est répété, le widget ne fonctionnera pas correctement. Il est également utile d’utiliser le débogage variable pour vérifier le contenu de nos listes sur lesquelles nous opérons.