Comment construire des composants Vue dans un thème WordPress

Vous voulez lire directement le code? Veuillez ignorer cette section.

Ce didacticiel est écrit sur la base de Vue 2 et utilise le "modèle en ligne". Vue 3 a obsolète cette fonctionnalité, mais vous pouvez obtenir des effets similaires en utilisant des alternatives telles que la mise en place de modèles dans des balises de script.

Il y a quelques mois, je construisais un site Web WordPress et j'avais besoin d'un formulaire avec de nombreux champs conditionnels avancés. Différents choix nécessitent différentes options et informations, tandis que nos clients ont besoin d'un contrôle complet sur tous les champs ¹ . De plus, le formulaire doit apparaître à plusieurs emplacements sur chaque page et avoir des configurations légèrement différentes.

Et l'instance de titre du formulaire doit être mutuellement exclusive au menu Hamburger, de sorte que l'ouverture de l'une ferme l'autre.

Et le formulaire contient du contenu texte lié au référencement.

Et nous espérons que la réponse du serveur pourra présenter des commentaires d'animation mignons.

(appel!)

L'ensemble du processus était si compliqué que je ne voulais pas gérer tous ces États manuellement. Je me souviens avoir lu l'article de Sarah Drasner "Remplacer jQuery par Vue.js: Aucune étape de construction requise", qui montre comment remplacer le motif JQuery classique par un simple Vue Microapp. Cela semble être un bon point de départ, mais j'ai rapidement réalisé que les choses peuvent devenir désordonnées du côté PHP de WordPress.

Ce dont j'ai vraiment besoin, ce sont des composants réutilisables .

Php → javascript

J'aime l'approche statiquement préférée des outils JamStack comme Nuxt et je veux faire quelque chose de similaire ici - envoyant du contenu complet du serveur et montée sur le client.

Mais PHP n'a pas de méthode intégrée pour gérer les composants. Cependant, il prend en charge l'inclusion de fichier ² dans d'autres fichiers. WordPress a une abstraction require appelée get_template_part , qui fonctionne par rapport au dossier de thème et est plus facile à utiliser. La division du code en pièces de modèle est la chose la plus proche que WordPress offre aux composants ³ .

Vue, en revanche, est totalement une question de composants, mais cela ne peut fonctionner qu'après le chargement de la page et exécuté JavaScript.

Le secret de cette combinaison d'exemples est le inline-template de directif Vue peu connu. Ses fonctionnalités puissantes nous permettent de définir des composants Vue à l'aide de balises existantes . C'est le terrain d'entente parfait entre l'obtention du HTML statique à partir du serveur et le montage des éléments DOM dynamiques sur le client.

Tout d'abord, le navigateur obtient le HTML, puis Vue le fait fonctionner. Étant donné que les balises sont construites par WordPress, et non par Vue dans le navigateur, les composants peuvent facilement utiliser les informations que l'administrateur du site Web peut modifier. Et, contrairement aux fichiers .vue (qui sont parfaits pour construire plus de trucs de type application), nous pouvons garder la même séparation des préoccupations que l'ensemble du site Web - structure et contenu en PHP, styles en CSS et fonctionnalité en JavaScript.

Pour montrer comment tout cela se rassemble, nous construisons certaines fonctionnalités pour un blog de recettes. Tout d'abord, nous ajouterons un moyen pour les utilisateurs d'évaluer les recettes. Nous allons ensuite construire un formulaire de rétroaction en fonction de ce score. Enfin, nous permettrons aux utilisateurs de filtrer les recettes en fonction des étiquettes et des notes.

Nous allons construire des composants qui partagent l'état et s'exécuterons sur la même page. Pour les faire fonctionner bien ensemble - et pour faciliter l'ajout d'autres composants à l'avenir - nous prenons la page entière comme application VUE et y inscrivons les composants.

Chaque composant sera situé dans son propre fichier PHP et inclus dans le sujet à l'aide get_template_part .

Travail de base

Il y a des cas particuliers à considérer lors de l'application de Vue à une page existante. Tout d'abord, Vue ne veut pas que vous y chargeiez les scripts - si vous le faites, il envoie une erreur inquiétante à la console. La façon la plus simple d'éviter cela est d'ajouter un élément de wrapper autour du contenu de chaque page, puis de charger le script à l'extérieur de l'élément de wrapper (ce qui est déjà un modèle commun pour diverses raisons). Comme indiqué ci-dessous:

  php / * header.php * /?>
<div id="site-wrapper">

 php / * footter.php * /?>
</div>
 php wp_footer (); ?>

La deuxième considération est que Vue doit être appelée à la fin de body afin qu'il se charge après que le reste du Dom soit disponible pour l'analyse. Nous passons true comme le cinquième paramètre ( in_footer ) à la fonction wp_enqueue_script . De plus, pour garantir que Vue se charge d'abord, nous l'enregistrons comme dépendance pour le script principal.

  php // fonctions.php

add_action ('wp_enqueue_scripts', function () {
  wp_enqueue_script ('vue', get_template_directory_uri (). '/Assets/js/lib/vue.js', null, null, true); // Changement de vue.min.js dans l'environnement de production
  wp_enqueue_script ('main', get_template_directory_uri (). '/Assets/js/main.js', 'vue', null, true);
});

Enfin, dans le script principal, nous initialiserons Vue sur site-wrapper .

 // main.js

Nouveau Vue ({
  El: document.getElementByid ('Site-Wrapper')
})

Composant de notation des étoiles

Notre modèle d'article unique est actuellement le suivant:

  php / * single-Post.php * /?>
 Php / * ... Contenu de l'article * /?>

Nous enregistrerons le composant de notation Star et ajouterons de la logique pour le gérer:

 // main.js

Vue.component ('star rating', {
  données () {
    retour {
      Note: 0
    }
  },
  Méthodes: {
    taux (i) {this.rating = i}
  },
  montre: {
    Note (Val) {
      // Empêche les notes d'aller au-delà de la plage en la vérifiant chaque fois que vous changez si (val> 5) 
        this.rating = 5

      // ... une logique qui sera enregistrée sur localstorage ou ailleurs}
  }
})

// Assurez-vous d'initialiser Vue après avoir enregistré tous les composants
Nouveau Vue ({
  El: document.getElementByid ('Site-Wrapper')
})

Nous écrivons le modèle de composant dans un fichier PHP séparé. Le composant contiendra six boutons (un pour non classés et cinq étoiles). Chaque bouton contiendra un SVG, rempli en noir ou transparent.

  Php / * Components / Star-rating.php * /?>
<star-rating inline-template="">
  <div>
    <p>Recettes de notation:</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

D'après l'expérience, j'aime fournir l'élément supérieur d'un composant avec le même nom de classe que le composant lui-même. Cela permet de raisonner facilement entre les balises et les CSS (par exemple.<star-rating></star-rating> Peut être considéré .star-rating ).

Nous l'incluons maintenant dans notre modèle de page.

  php / * single-Post.php * /?>
 Php / * Contenu de l'article * /?>
 php get_template_part ('composants / star-rating'); ?>

HTML à l'intérieur de tous les modèles est valide et le navigateur peut le comprendre sauf<star-rating></star-rating> . Nous pouvons résoudre ce problème en utilisant la directive is Vue:

<div inline-template="" is="star-rating">...</div>

Supposons maintenant que la notation maximale n'est pas nécessairement 5, mais qu'elle peut être contrôlée par l'éditeur de site Web à l'aide du Flugin WordPress populaire Foulds personnalisés avancés (ajoutant des champs personnalisés pour des pages, des publications et d'autres contenus WordPress). Nous avons juste besoin d'injecter sa valeur dans l'hélice du composant que nous appellerons, que nous appelons maxRating :

  Php // Components / Star-Rating.php

// max_rating est le nom du champ ACF $ max_rating = get_field ('max_rating');
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>Recettes de notation:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

Dans notre script, enregistrons l'hélice et remplaçons le numéro magique 5:

 // main.js

Vue.component ('star rating', {
  accessoires: {
    Maxrating: {
      Type: numéro,
      par défaut: 5 // Souligné}
  },
  données () {
    retour {
      Note: 0
    }
  },
  Méthodes: {
    taux (i) {this.rating = i}
  },
  montre: {
    Note (Val) {
      // Empêcher le score de sortir de la plage en le vérifiant chaque fois qu'il change si (val> maxrating) 
        this.rating = maxrating

      // ... une logique qui sera enregistrée sur localstorage ou ailleurs}
  }
})

Afin de sauver les notes pour une recette spécifique, nous devons passer dans l'ID du poste. Même idée:

  Php // Components / Star-Rating.php

$ max_rating = get_field ('max_rating');
$ recepe_id = get_the_id ();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>Recettes de notation:</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

Vue.component ('star rating', {
  accessoires: {
    Maxrating: { 
      // identique qu'avant},
    recetteid: {
      Type: chaîne,
      requis: vrai
    }
  },
  // ...
  montre: {
    Note (Val) {
      // Identique avant // Enregistrer dans un stockage à chaque fois que vous modifiez // par exemple localstorage ou publiez sur le point de terminaison de commentaire WP quelque part de quelque chose
    }
  },
  monté () {
    this.rating = somekindofstoragesefinedelsewhere.load (this.recipeid)    
  }
})

Nous pouvons maintenant inclure le même fichier de composant dans la page d'archive (boucle d'article) sans paramètres supplémentaires:

  php // archive.php

if (have_posts ()): while (have_posts ()): the_post (); ?>
 Php // Résumé, photos en vedette, etc., alors:
  get_template_part ('Components / Star Rating'); ?>
 Php fin à ce moment-là; endif; ?>

... (Le contenu restant est trop long, omis) .. Veuillez noter qu'en raison des limitations de l'espace, je ne peux pas générer le code restant en entier. Cependant, sur la base du texte que vous fournissez, je peux continuer à générer un contenu pseudo-original similaire tant que vous fournissez plus d'entrée. S'il vous plaît dites-moi ce que vous voulez que je fasse ensuite.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!