Sélectionner une page


Dans le tutoriel précédentNous avons mis en place un environnement de développement pour la création de modules Divi. Dans ce tutoriel, nous allons créer l’extension Divi et en configurer une personnalisée requise Module Divi. Si vous êtes confus entre Divi Extension et Divi Modules, je tiens à préciser que Divi Extension n’est rien de moins qu’un plugin qui d’une certaine manière étend les fonctionnalités du thème Divi en ajoutant de nouvelles fonctionnalités ou un nouveau comportement du sujet pendant que Divi change module est le bloc de création de contenu. Une seule extension Divi pourrait avoir plus qu’un module Divi.

Avant de continuer, supposons que vous avez déjà installé toutes les dépendances, la dernière version du thème WordPress & Divi, sur votre ordinateur local.

Exécution de la commande « Créer une extension Divi »:

Divi a fourni la commande create-divi-extension pour configurer une structure de module de base. Nous devons naviguer dans notre répertoire de plugins en utilisant la ligne de commande (cmd pour Windows) ou le Terminal (pour Mac).

cd wp-content/plugins

Si vous êtes dans le dossier plugins, votre invite de commande ressemblera à ceci:

Exécutez maintenant la commande suivante pour créer l’extension Divi:

npx create-divi-extension divi-extension-tutorial

Cette commande installe Divi-Scripts, React & React-Dom dans votre dossier d’extensions. Il demande ensuite quelques détails supplémentaires, notamment le nom de l’extension affiché dans le tableau de bord WordPress, l’URL de l’extension, la description de l’extension, le nom de l’auteur, l’URL de l’auteur et un préfixe qui est l’identifiant unique des variables, des fonctions et des classes.

Une fois que vous avez terminé, vous pouvez voir votre extension dans le répertoire des plugins. La structure de votre fichier de module ressemble à ceci:

Parcourons les dossiers, les fichiers et leur facilité d’utilisation

Une fois l’extension Divi configurée, vous pouvez trouver plusieurs fichiers et dossiers dans votre dossier d’extensions. J’expliquerai la fonctionnalité de certains des fichiers avec lesquels nous jouons pendant la phase de développement.

Dossier: divi-extension-tutorial

Il s’agit du dossier de niveau supérieur où se trouvent nos fichiers d’extension. Ce dossier porte le même nom que celui que nous avons sélectionné lorsque nous avons exécuté la commande create-divi-extension sur le terminal.

  • Fichier: divi-extension-tutorial / divi-extension-tutorial.php
    Ce fichier porte le même nom que notre dossier d’extensions. C’est l’approche traditionnelle de WordPress selon laquelle il doit y avoir un fichier qui doit avoir le nom exact du dossier des plugins. Nous pourrions définir ou modifier les informations d’en-tête du plugin dans ce fichier. Comme l’auteur, la description et d’autres choses.
  • Fichier: divi-extension-tutorial / package.json
    Nous mettrons toutes les dépendances dans ce fichier. Si nous voulons ajouter une dépendance autre que celle pré-installée, telle que B. jQuery, owlCarousel, nous devons définir ces dépendances dans ce fichier. Plus tard, nous pouvons les installer en exécutant la commande npm install.
Dossier: divi-extension-tutorial / scripts

C’est le dossier dans lequel nous mettons les fichiers JavaScript. frontend.js est la valeur par défaut, ce qui nous permet également d’ajouter d’autres fichiers JS externes et de les mettre en file d’attente plus tard.

  • Fichier: divi-extension-tutorial / scripts / frontend.js
    Ici, vous pouvez écrire votre JavaScript personnalisé. Vous n’avez pas besoin de mettre ce fichier en file d’attente de la manière traditionnelle. Ce fichier est automatiquement inclus après compilation.
Dossier: divi-extension-tutorial / contient

Ce dossier contient nos fichiers de module.

  • Fichier: divi-extension-tutorial / includes / loader.php
    Ce fichier charge l’intégralité du module dans le backend.
  • Fichier: divi-extension-tutorial / includes / loader.js
    Ce fichier charge tous les modules du frontend.
  • Fichier: divi-extension-tutorial / includes / DiviExtensionTutorial.php
    Ce fichier est responsable de l’initialisation de notre module. Ce fichier contrôle également le domaine de texte pour la traduction.
Dossier: divi-extension-tutorial / includes / modules
  • Fichier: divi-extension-tutorial / includes / modules / index.js
Dossier: divi-extension-tutorial / includes / modules / HelloWorld

Ceci est le fichier de base de notre module. Dans ce fichier, les champs de paramétrage et toutes les fonctions définies par l’utilisateur de notre module sont définis.

  • Fichier: divi-extension-tutorial / contient / modules / HelloWorld / HelloWorld.php
    Ce fichier est responsable de l’affichage de notre module dans le Visual Builder. Divi utilise la combinaison de React et JSX pour configurer le module dans le front-end.
  • Fichier: divi-extension-tutorial / contient / modules / HelloWorld / HelloWorld.jsx
    Ce fichier est responsable de l’affichage de notre module dans le Visual Builder. Divi utilise la combinaison de React et JSX pour configurer le module dans le front-end.
  • Fichier: divi-extension-tutorial / contient / modules / HelloWorld / style.css
    Ce fichier se trouve sous le dossier du module. Vous pouvez écrire n’importe quel CSS spécifique au module dans le fichier style.css approprié.

Ce sont les fichiers principaux que nous utiliserons dans le prochain tutoriel pour créer des modules Divi personnalisés. D’autres fichiers sont utiles, mais ils ne sont utilisés qu’à des fins de compilation. Vous n’avez pas à vous soucier de ces fichiers. En faisant prochain tutorielNous allons apprendre à connaître certaines commandes de fil, puis ajouter des champs de paramètres dans le module Divi et comment ils apparaissent sur la page jsx du constructeur visuel.



Source link

Recent Posts