Noter: Cette série de tutoriels s’adresse aux utilisateurs avancés. Au moins une compréhension de base du codage en PHP et JavaScript est requise.

Modules Divi Builder personnalisés

Les modules de Divi Builder sont constitués de code PHP, JavaScript, HTML et CSS. Chaque module est défini avec une classe PHP. La classe définit tous les paramètres du module et est responsable du rendu de la sortie HTML du module dans le frontend. De plus, chaque module a un ReactJS Classe de composant (en JavaScript) qui prend en charge le rendu du module dans le Divi Builder. Ce didacticiel vous montre comment créer un module d’en-tête personnalisé. Le module est entièrement fonctionnel dans le générateur à la fois dans le frontend et dans le backend.

Les modules Divi Builder personnalisés doivent être implémentés dans un thème, un sous-thème ou une extension Divi. Dans ce tutoriel, nous allons implémenter un module personnalisé dans une extension Divi. Si vous ne l’avez pas déjà fait, allez-y et Créer une extension Divi.

Définition du module

Les modules Divi Builder sont définis à l’aide d’une classe PHP. Dans le répertoire de votre extension, recherchez l’exemple de module dans includes/modules. Nous allons l’utiliser comme point de départ pour créer un module d’en-tête personnalisé. Renommons cela en premier HelloWorld Annuaire aussi SimpleHeader. Renommez-le ensuite HelloWorld.php à SimpleHeader.phpOuvrez-le et modifiez-le comme suit:

Notre module ne contient que quelques paramètres de base qui peuvent être contrôlés dans Divi Builder: titre, contenu et arrière-plan. Les paramètres du module sont définis dans le get_fields() Méthode. Faisons cela maintenant:

Vous avez probablement remarqué que le champ d’arrière-plan est manquant. Nous l’avons exclu du tableau de champs car il s’agit de l’un des nombreux champs avancés que le générateur ajoute automatiquement à tous les modules, sauf s’il est spécifiquement désactivé. Vous en apprendrez un peu plus sur les domaines avancés plus tard dans cette série de didacticiels.

La définition de notre module est presque terminée. Nous devons juste terminer la mise en œuvre du render() Méthode pour que la sortie HTML du module soit générée en fonction de celle-ci props. Prêt? Faisons cela!

Composant réagir

Pour que notre module soit disponible et pleinement fonctionnel dans Divi Builder, nous devons en créer un Composant réagir Classe qui rendra notre module en fonction de son props. Recherchez le fichier mentionné dans le répertoire de votre module HelloWorld.jsx.

Noter: JSX est une extension de syntaxe de JavaScript utilisée dans React pour décrire à quoi devrait ressembler l’interface utilisateur.

Renommons-le HelloWorld.jsx à SimpleHeader.jsxOuvrez-le et modifiez-le comme suit:

Ensuite, nous mettrons à jour les instructions d’importation et d’exportation dans includes/modules/index.js::

Maintenant, éditons ça render() Méthode et laissez-la produire la même sortie que nous avons définie dans notre PHP render() Méthode.

Il y a deux choses dans la nôtre render() Méthode pour prendre note. Tout d’abord, remarquez comment le module est content L’attitude est traitée. Paramètres du module définis avec le type de champ tiny_mce (comment content Réglage dans notre module) nécessitent l’utilisation d’un composant de réaction spécial. Le générateur configure le composant souhaité, puis le transmet au module en tant que valeur de réglage. Étant donné que la valeur n’est pas une chaîne ou un nombre et est en fait un composant de réaction, nous devons l’utiliser comme tel dans notre balisage JSX.

Notez également comment nous avons enveloppé la sortie de notre module dans un Fragment Composant. Les fragments vous permettent de renvoyer plusieurs éléments de premier niveau du vôtre render() Méthode sans ajouter d’élément supplémentaire à la page elle-même.

Styles CSS

Les styles de notre module peuvent être définis avec le style.css Fichier dans son répertoire. Notre module d’en-tête personnalisé est assez simple et ne nécessite pas beaucoup de style. Cependant, nous devrions ajouter une marge inférieure pour l’en-tête afin qu’il y ait un espace entre celui-ci et le contenu ci-dessous. Plus tard dans le nôtre Le module Divi Builder en détail Dans la série de didacticiels, vous apprendrez à configurer la marge et l’espacement du titre (ou de tout élément de la sortie de votre module) dans les paramètres du module.

Tout d’abord, mettons à jour nos modules style.css::

Test pendant le développement

Avant de pouvoir tester notre module personnalisé dans Divi Builder, nous devons compiler le code JSX en JavaScript standard. Pour ce faire, lancez simplement la commande suivante dans le répertoire de votre plugin:

yarn start

En supposant que votre code ne contient aucune erreur de syntaxe, vous verrez la sortie suivante:

Vous pouvez maintenant démarrer le Divi Builder et vérifier votre module d’en-tête simple!

Noter: Vous devez conserver la fenêtre du terminal avec yarn start s’exécute ouvertement pendant que vous développez votre module. Si vous apportez des modifications aux fichiers, JavaScript et CSS sont automatiquement recompilés.





Source link

Recent Posts