REDO JSComposer Additional – plugin ajoutant un widget à WPBakery

Dans cet article, nous allons créer un nouveau widget pour le plugin créé précédemment, que vous découvrirez dans l’article précédent : Propre plugin ajoutant un widget au plugin WPBakery.

Supposons que nous voulions spécifier une vue qui s’affichera d’une certaine manière, n’importe où sur la page pour un type de message particulier et avec les champs sélectionnés. De plus, le tout doit être compatible avec le plugin WPBakery Page Puilder. Pour ce faire, nous utiliserons le plugin REDO JSComposer Additional créé dans l’entrée précédente.

Comment créer un plugin ajoutant un widget à WPBakery qui affiche les messages personnalisés sélectionnés ?

Passons aux choses sérieuses.

Allez dans le dossier avec notre plugin – redo-jscomposer-additional – puis allez dans le dossier – widgets – et créez un nouveau fichier .php, que nous appellerons custom-post-widget.php..

Maintenant, comme dans le post précédent, nous sommes en train de créer le cadre de base de notre widget. À cette fin, nous utiliserons le widget projets créé précédemment et copierons ce dont nous avons besoin.

Nous laissons un chemin pour accéder aux fichiers ABSPATH, renommez la classe héritée en WPBakeryShortCode_customPostWidget. Laissez le tableau et la requête $args WP_Query et query vc_map(). Tout doit être configuré correctement.

Vous trouverez ci-dessous un squelette vide de notre widget configuré pour écrire notre nouveau plugin.

Nous pouvons maintenant procéder à l’édition du widget pour télécharger les valeurs appropriées et les afficher sous la forme d’une vue appropriée.

Commençons par préparer notre widget pour télécharger une liste de postes et de champs personnalisés que nous aimerions afficher. Nous utiliserons l’option WPBakery, qui vous permet de télécharger la liste des messages à partir de CPT UI plugin. La liste sera transmise à la $customPostList.

Nous aimerions vérifier ce que contient notre variable afin de pouvoir filtrer correctement les données et les transmettre à notre vc_map. Pour cela, nous avons besoin d’une fonction qui permet de déboguer la variable. Nous allons créer cette fonction dans main.php, nous devons donc retourner au dossier racine de notre plugin et aller éditer le fichier.

On crée la fonction debug(), on lui donne les paramètres public static afin qu’il puisse être référencé dans le fichier customPostRedo. php. Nous allons passer le $var– contenant notre variable « check » et la variable $die – responsable de la fonction, nous passerons une valeur de true ou false selon que nous voulons que la debug fonctionne.

Pour afficher correctement les valeurs des variables, nous devons utiliser tagu html – ‘<pre></pre>‘ et une fonction print_r, qui imprimera la valeur de la variable déboguée.

Si la fonction $die est fausse, nous utilisons la fonction die(), ce qui supprimera le debug().

Nous savons déjà comment vérifier ce qui se trouve dans notre variable, appliquons-y notre fonction.

Nous avons reçu un tableau contenant une liste de messages personnalisés que nous utilisons sur notre WordPress et leurs valeurs fixées dans le plugin CPT UI. Dans notre cas, nous aimerions extraire les champs suivants :

• nom du type de message – il se trouve à la fois sous forme de tableau nom [‘partners’] et comme valeur de champ [name],
• champs que notre message utilise – champs de base tels que le titre du message, la description, etc. qui sont sous la valeur du champ [supports],
• >strong>custom fields – les champs personnalisés que nous aimerions afficher dans la vue – malheureusement ils ne sont pas dans le tableau que nous avons reçu.

Après un travail correct sur un tableau obtenu en utilisant get_option(‘cptui_post_types’) nous sommes capables de faire les deux premiers points de la liste ci-dessus. Pour extraire les champs personnalisés, nous devons créer une fonction appropriée dans main.php. Passons au montage.

Créer le prepareCustomFields(), nous donnons le statut public static afin que nous puissions accéder à d’autres fichiers. La première étape de la fonction consiste à télécharger les groupes de nos champs que nous avons dans le plugin Custom Fields. Nous utiliserons la fonction intégrée : acf_get_raw_field_groups(). Appelez-le jusqu’à la $groups. La liste des groupes téléchargés doit être correctement triée et transmise au comité de course, que nous renverrons au fichier customPostRedo.php, named $$fields.

Créons une fonction qui attribuera correctement les noms de champs à la table $$fields. La fonction sera appelée parseCustomFields(), qui récupérera les valeurs :

• $fieldList– une liste de champs personnalisés que vous pouvez télécharger grâce à la fonction intégrée : acf_get_fields(), pour un groupe de champs,
• $$fields– la carte de sortie de notre fonction,
• $group– field group ID.

Dans le foreach() nous attribuons des champs personnalisés à notre table en conséquence.

Nous utilisons maintenant notre fonction pour attribuer des champs personnalisés à la table. En utilisant la boucle foreach(), attribuez des champs appropriés à chaque groupe. Définissez le titre du groupe stocké dans $group[« title »] et téléchargez la liste des champs en utilisant acf_get_fields(). Ensuite, nous appelons notre parseCustomFields() où nous passons les paramètres en conséquence. Utilisez return pour retourner notre tableau de champs personnalisés.

Retournez au fichier customPostRedo.php et modifiez les données avant de les envoyer à vc_map. Nous avons déjà notre liste de courrier personnalisée avec des champs de base, qui est située dans la famille de polices $customPostList. Créons deux nouveaux tableaux qui stockeront le type de message personnalisé et les paramètres (champs de message personnalisés) en conséquence :

• $_custom_posts – un tableau qui stocke les champs de caractères de base ainsi que leur type et leur nom,
• $_custom_posts_params– an array of post type names,

Nous vérifions si notre liste $customPostList contient des messages personnalisés. Nous attribuons ensuite des valeurs pour chaque message à notre $_custom_posts and $_custom_posts_params.

• • $_custom_posts_params [$postList[« label »]] = $postList[« nom »] – ici, nous attribuons un nom de type de message, par exemple projets, au tableau $_custom_posts,
  • $_custom_posts[$postList[« name »]][« type »] = $postList[« name »] – – Ici nous passons le type au tableau avec les champs de nom de type de poste,
  • $_custom_posts[$postList[« name »]][« label »] = $postList[« label »] – a post label

• • $supportsArray– ici nous inversons les valeurs du tableau $postList[« supports »], pour faire du nom du champ le nom clé, puis en utilisant la boucle foreach() rapporter la valeur clé à la valeur pour rendre le nom du champ, plus facile à extraire ultérieurement.
  • $_custom_posts[$postList[« name »]][« supports »] = $supportsArray– on passe le cap $supportsArray.

La prochaine étape consistera à préparer une liste de champs personnalisés pour les types d’entrées appropriés.

Nous téléchargeons la liste des messages en utilisant le fichier main que vous avez créé précédemment. php function prepareCustomFields(), que nous héritons de notre classe VC_REDO avec l’opérateur d’héritage ‘ : : ‘.

.
Nous créons un tableau vide auquel nous transmettons les noms des champs personnalisés en conséquence. Vérifiez que la variable $fields n’est pas vide, puis utilisez foreach(). Chaque champ du forum $fields sont assignés à notre forum $customFieldsList.

Nous passons à la création d’un tableau, que nous transmettrons à vc_map. Le tableau contiendra les tableaux précédemment créés, qui seront passés à vc_map (la documentation complète se trouve dans la documentation : https://kb.wpbakery.com/docs/inner-api/vc_map/ ).

Nous créons un tableau, qui sera passé plus tard comme paramètre dans vc_map et nous l’appellerons $paramsArray[]. Nous passons le premier tableau avec les noms de nos types de messages – $_custom_posts_params in value. Le nom du champ qui sera utilisé ultérieurement pour faire ressortir le type de caractère sélectionné est redo_post, que nous passons en param_name.

Nous aimerions maintenant ajouter à notre plugin la possibilité de sélectionner les champs à afficher. Pour ce faire, nous passerons les tableaux précédemment créés au $paramsArray[], en utilisant le foreach(). Pour chaque clé $key from $_custom_posts assigner une valeur à $cp.

La première étape de la boucle sera de créer un tableau qui exclut custom-fields du tableau avec les champs de base (custom-fields sera passé dans un tableau séparé), nous l’appellerons $custom_params. Utilisez la commande unset() pour supprimer la commande custom-fields de la liste. Ensuite, en utilisant value montrer le $custom_params, and in nom_param on donne le nom du type de poste nom $key et ajouter le suffixe _post_support.

Nous passons maintenant à l’ajout de custom fields à notre widget. Nous continuons dans le même foreach(). Nous vérifions s’il y a un custom-fields dans le type de message en vérifiant le $cp[« supports »][« custom-fields »]. Si une valeur existe, nous créons une autre boucle foreach() à laquelle nous passons $customFieldList, où nous passons la clé comme une variable $fka value as variable $fv. Dans une boucle, nous créons une $$customList en conservant une liste de champs personnalisés que nous récupérons de $fv[« customFields »]. Attribuez ensuite des valeurs clés aux valeurs de notre liste $customList en utilisant le foreach(). La forme finale du forum $customList est envoyée au forum $paramsArray[] tout comme le $custom_params.

En bas, l’ensemble du code constituant la $paramsArray[].

Nous passons le $paramsArray à vc_map et nous appelons notre widget par défaut. Si vous ne savez pas de quoi il s’agit, je vous renvoie au guide précédent.

Notre widget récupère déjà la liste des types de messages personnalisés, et leurs champs, ainsi que les champs personnalisés du plugin Custom Fields. Vous pouvez maintenant choisir les types de postes que vous souhaitez afficher et les champs à remplir.

Nous avons réussi à créer un widget, mais nous n’avons pas encore réussi à afficher les paramètres sélectionnés. Nous allons modifier la vue affichée par notre widget.

Tout d’abord, en utilisant extract() nous récupérons les attributs passés à notre widget dans WPBakery. Toutes les valeurs seront dans le $atts.

Les types de messages sélectionnés dans le widget se trouvent sous la clé $atts[‘redo_post’]. Nous avons d’abord nommé le nom du paramètre pour la $_custom_post_params – redo_post, les valeurs sont donc sous cette clé.

Nous procédons maintenant à la division des types de message à l’aide de la fonction explode(), qui permet de diviser la chaîne de caractères par la valeur sélectionnée. Notre plugin transfère des valeurs sous la forme d’une chaîne de caractères, dans laquelle les valeurs sont séparées par des virgules. Nos types de courrier sont transmis à la famille de polices $postTypes.

.
Vérifiez ensuite si notre $postTypes n’est pas vide. Si ce n’est pas le cas, nous passons à la création d’une vue pour chaque type de poste dans le tableau. Nous utilisons pour cela le style <span= »font-family : ‘courier new’, courier, monospace ; background-color : #f0ebeb ; »>foreach(). Un seul message sera sous la variable $postType.

Pour un seul caractère, nous créons div named post-type-container, contenant le nom du type de message dans la classe (en utilisant le CSS, nous pouvons alors modifier l’affichage pour chaque type de message séparément). Nous afficherons en indiquant le type de message.

Wewtnąrz pętli foreach() pobieramy listę postów dla danego typu posta (zmienna $postType) i przekazujemy ją do tablicy $postList.

Nous organisons ensuite les valeurs $atts et les attribuons aux variables appropriées. Le $postFields– contiendra le message par défaut s’il est sélectionné, tandis que le $customFields contiendra des champs personnalisés. Nous effectuons des opérations d’extraction à partir de $atts analogiquement à $postTypes.

Maintenant, nous vérifions si les messages sont dans la $postList. Si le tableau n’est pas vide pour chaque message, nous définissons la variable foreach() variable $myPost en écrivant l’entrée.

Pour chaque message, nous créons div avec la classe post-container et le nom du type de message.

Ensuite, dans une boucle pour un seul message, nous vérifions que la variable $postFields n’est pas vide et nous affichons ensuite pour chaque champ div with class post-field-container et nom du champ. Nous vérifions si $postFields pour trouver la valeur de thumbnail qui stocke l’image. Si oui, nous utilisons la get_the_post_thumbnail(), si non – get_post_field(). Grâce à ces fonctions, nous pouvons afficher des champs sélectionnés dans la vue.

Allez à Champs personnalisés affichage. Vérifiez si notre $customFields n’est pas vide. Si elles sont dans le tableau, nous affichons div o class custom-field-container et le nom du champ. Ensuite, récupérez le champ personnalisé en utilisant get_field(). Nous vérifions ensuite si notre champ téléchargé est un tableau en utilisant is_array(). S’il s’agit d’un tableau, nous l’affichons sous forme d’image. Cette règle ne fonctionnera pas toujours – selon les champs personnalisés que nous utilisons. Dans notre cas, cette règle fonctionnera car le seul tableau que nous utilisons dans les champs personnalisés sont les images. Si ce n’est pas un tableau, nous affichons le champ par défaut.

L’affichage des types de poste et des champs sélectionnés est prêt. Nous avons reçu une vue qui affiche les champs marqués dans le widget.

Summing

Le plugin REDO JSComposer Additional vous permet de créer des vues pour vos propres types de messages et champs, que vous sélectionnez dans le plugin WPBakery. La vue que nous avons reçue peut être facilement personnalisée à l’aide du CSS, car les classes diffèrent selon le type de message et le nom du champ.

La création d’un plugin présente de nombreuses difficultés. Tout d’abord, vous devez vous familiariser avec les tableaux d’association afin de pouvoir opérer facilement sur les ensembles de données contenus dans ce plugin. Vous devez également vous familiariser avec les variables debugging. Vous devez souvent vérifier ce qui est dans le tableau pour comprendre le code ci-dessus.

Le plugin, qui a été présenté dans ce tutoriel, rend le travail avec les plugins WPBakery et CPT UI et Custom Fields beaucoup plus rapide.