L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez

Maintenant que nous avons appris que les composants Web et les composants Web interactifs sont plus faciles à utiliser que vous ne le pensez, voyons comment les ajouter au système de gestion de contenu, à savoir WordPress.

Il existe trois façons principales de les ajouter. Tout d'abord, en entrant manuellement le site Web - en les mettant directement dans un gadget ou un bloc de texte, essentiellement partout où vous pouvez placer d'autres HTML. Deuxièmement, nous pouvons les ajouter en tant que sortie de thème dans le fichier de thème. Enfin, nous pouvons les ajouter comme sortie de blocs personnalisés.

Séries d'articles

<li> Les composants Web sont plus faciles que vous ne le pensez <li> Les composants Web interactifs sont plus faciles que vous ne le pensez <li> L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez (vous êtes ici) <li> Des éléments intégrés améliorés avec des composants Web sont plus faciles que vous ne le pensez <li> Les composants web du contexte sont plus faciles que vous ne le pensez <li> Les pseudo-classes et les pseudo-éléments des composants Web sont plus faciles que vous ne le pensez

Chargement des fichiers de composants Web

Quelle que soit la façon dont vous finissez par ajouter des composants Web, nous devons nous assurer ce qui suit:

<li> Lorsque nous avons besoin d'un modèle pour les éléments personnalisés, il doit être disponible; <li> Tout javascript dont nous avons besoin est correctement enregistré; <li> Tous les styles non encapsulés dont nous avons besoin sont enregistrés.

Nous ajouterons de mon article précédent sur les composants Web interactifs<zombie-profile></zombie-profile> Composants Web. Veuillez vérifier le code sur Codepen.

Regardons le premier point. Une fois que nous avons le modèle, il est facile de l'ajouter au fichier footer.php du thème WordPress, mais plutôt que de l'ajouter directement au thème, accrochez-le à wp_footer afin que le chargement du composant soit indépendant du fichier de pied.php et de l'ensemble du thème - en supposant que le thème utilise wp_footer , la plupart des thèmes le font. Si le modèle n'apparaît pas dans votre thème lorsque vous essayez, vérifiez si wp_footer est appelé dans le fichier de modèle de pied.php de votre thème.

  Php Fonction Diy_EzWebComp_footer () {?>  Php}
add_action ('wp_footer', 'diy_ezwebcomp_footer');

Ensuite, JavaScript qui enregistre les composants. Nous pouvons également ajouter JavaScript via wp_footer , mais l'enregistrement est le moyen recommandé de lier JavaScript à WordPress. Mettons donc JavaScript dans un fichier nommé ezwebcomp.js (ce nom est complètement arbitraire), placez le fichier dans le répertoire JavaScript du thème (le cas échéant) et enregistrez-le (dans le fichier functions.php).

 wp_enqueue_script ('ezwebcomp_js', get_template_directory_uri (). '/js/ezwebcomp.js', '', '1.0', true);

Nous devons nous assurer que le dernier paramètre est défini sur true , c'est-à-dire qu'il charge JavaScript avant la balise du corps de fin. Si nous le chargeons dans la tête, il ne trouvera pas notre modèle HTML et il sera très en colère (jetez un tas d'erreurs).

Si vous pouvez encapsuler complètement vos composants Web, vous pouvez ignorer l'étape suivante. Cependant, si vous (comme moi) ne pouvez pas le faire, vous devez enregistrer ces styles non encapsulés afin qu'ils soient disponibles partout où vous utilisez les composants Web. (Similaire à JavaScript, nous pouvons l'ajouter directement au pied de page, mais l'enregistrement des styles est la méthode recommandée). Nous allons donc enregistrer notre fichier CSS:

 wp_enqueue_style ('ezwebcomp_style', get_template_directory_uri (). '/Ezwebcomp.css', '', '1.0', 'écran');

Ce n'est pas trop difficile, non? Si vous ne prévoyez pas de laisser un utilisateur sauf l'administrateur l'utiliser, vous pouvez les ajouter partout où vous souhaitez les utiliser. Mais ce n'est pas toujours donc donc nous continuerons à avancer!

Ne filtrez pas vos composants Web

WordPress a plusieurs façons différentes d'aider les utilisateurs à créer un HTML valide et d'empêcher votre oncle Eddie de coller les images "drôles" obtenues à partir de Shady Al directement dans l'éditeur (y compris des scripts pour pirater tous vos visiteurs).

Ainsi, lors de l'ajout de composants Web directement aux blocs ou aux widgets, nous devons être prudents avec le filtrage de code intégré dans WordPress. Le désactiver complètement fera que l'oncle Eddie (et Shady Al) fera ce qu'il veut, mais nous pouvons le modifier pour permettre à nos composants Web de passer par la porte (heureusement, il bloque l'oncle Eddie).

Tout d'abord, nous pouvons utiliser le filtre wp_kses_allowed pour ajouter nos composants Web à la liste des éléments qui ne doivent pas être filtrés. C'est un peu comme si nous étions en liste blanche le composant, ce que nous faisons en l'ajoutant au tableau de balise d'autorisation transmis à la fonction de filtre.

 fonction add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Nous<zombie-profile></zombie-profile> Le composant ajoute un tableau vide car WordPress filtre les propriétés ainsi que les éléments - cela nous apporte un autre problème: les attributs slot ne sont pas autorisés par défaut. Par conséquent, nous devons le permettre explicitement sur chaque élément qui devrait l'utiliser et, en conséquence, l'utilisateur peut décider de l'ajouter à n'importe quel élément. (Attendez, même si vous l'avez révisé avec chaque utilisateur six fois, ces listes d'éléments sont également différentes ... qui sait?) Donc, ci-dessous, je définis slot sur true pour une utilisation<span></span> ,<img alt="L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez" > et<ul></ul> , J'ai mis ces trois éléments<zombie-profile></zombie-profile> Machines à sous en composante.

 fonction add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
  $ the_allowed_tags ['span'] ['slot'] = true;
  $ the_allowed_tags ['ul'] ['slot'] = true;
  $ the_allowed_tags ['img'] ['slot'] = true;
  retourner $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Nous pouvons également activer les attributs slot dans tous les éléments autorisés en utilisant une méthode similaire au code suivant:

 fonction add_diy_ezwebcomp_to_kses_allowed ($ the_allowed_tags) {
  $ the_allowed_tags ['zombie-profile'] = array ();
  foreach ($ the_allowed_tags as & $ tag) {
    $ tag ['slot'] = true;
  }
  retourner $ the_allowed_tags;
}
add_filter ('wp_kses_allowed_html', 'add_diy_ezwebcomp_to_kses_allowed');

Malheureusement, il y a un autre problème possible. Si tous les éléments de votre machine à sous sont des éléments en ligne / phrase, vous n'avez peut-être pas ce problème, mais si vous avez un élément au niveau du bloc à mettre dans votre composant Web, vous pouvez avoir des conflits avec l'analyseur de blocs dans l'éditeur de code. Vous êtes peut-être meilleur en boxe que moi, mais je perds toujours.

Pour des raisons que je ne peux pas expliquer pleinement, l'analyseur client suppose que le composant Web ne doit contenir des éléments en ligne que si vous en mettez un là-bas

ou

ou un autre élément de niveau bloc qui déplace la balise de composant Web de fin après le dernier élément en ligne / phrase. Pire, selon les notes du manuel du développeur WordPress, il est actuellement "ne peut pas remplacer l'analyseur du client".

Bien que cela soit frustrant et que vous deviez laisser votre éditeur Web l'apprendre, il y a une solution de contournement. Si nous mettons nos composants Web directement dans un bloc HTML personnalisé dans l'éditeur de blocs, l'analyseur du client ne nous laissera pas pleurer, se balançait dans le trottoir et remettons en question notre capacité à coder ... Bien sûr, cela n'est arrivé à personne ... en particulier ceux qui écrivent des articles ...

Ajouter des composants au thème

Tant qu'il n'est pas mis à jour en dehors des blocs HTML, il est très facile de produire nos magnifiques composants Web dans le fichier de thème. Nous l'ajoutons la façon dont nous l'ajoutons dans n'importe quel autre contexte et, en supposant que nous avons installé les modèles, scripts et styles, les choses fonctionneront.

Mais, supposons que nous souhaitions la sortie du contenu pour les articles WordPress ou les types de publication personnalisés dans un composant Web. Vous savez, écrivez un article et ce post est le contenu du composant. Cela nous permet d'utiliser l'éditeur WordPress pour sortir<zombie-profile></zombie-profile> Archive d'éléments. C'est génial parce que l'éditeur WordPress nous fait déjà taper l'un d'eux<zombie-profile></zombie-profile> La plupart de l'interface utilisateur requise pour le contenu des composants:

<li> Le titre de poste peut être utilisé comme nom du zombie. <li> Les blocs de paragraphe réguliers dans le contenu du post peuvent être utilisés pour les instructions zombies. <li> Les images en vedette peuvent être utilisées pour des photos de profil de zombies.

C'est la plupart du contenu! Mais nous avons encore besoin de champs de l'âge, de la date et de l'intérêt des zombies. Nous créerons ces champs à l'aide de la fonction de champ personnalisée intégrée de WordPress.

Nous utiliserons la partie modèle du processus d'impression de chaque message (par exemple, contenu.php) pour sortir le composant Web. Tout d'abord, nous allons imprimer le Open One<zombie-profile></zombie-profile> Tags, puis publiez des miniatures (si elles sont présentes).

<zombie-profile>  Php // s'il y a des photos post-traits ...
    if (has_post_thumbnail ()) {
      $ src = wp_get_attachment_image_url (get_post_thumbnail_id ()); ??> ??> <img  slot="profile-image" src="<?php%20echo%20%24src;%20?>" alt="L'utilisation de composants Web dans WordPress est plus facile que vous ne le pensez" >  Php}
  ??></zombie-profile>

Ensuite, nous imprimerons le titre utilisé pour le nom

  Php // Si le champ de titre de poste existe ...
  if (get_the_title ()) {??>  php echo get_the_title (); ??>
   Php}
?>

Dans mon code, j'ai testé si ces champs existent avant de les imprimer pour deux raisons:

<li> Dans la plupart des cas, la cachette d'étiquettes et d'éléments autour des champs vides est une bonne pratique de programmation. <li> Si nous finissons par produire un nom vide<span></span> (Par exemple, `），那么该字段将在最终的个人资料中显示为空，而不是使用我们Web组件内置的默认文本、图像等。（例如，如果你希望文本字段在没有内容时为空，你可以在自定义字段中输入空格，或者跳过代码中的).

Ensuite, nous prendrons les champs personnalisés et les placerons dans la fente à laquelle ils appartiendront. Encore une fois, cela ira au modèle de sujet pour la sortie du contenu du message.

  php // zombie Âge $ temp = get_post_meta (the_id (), 'age', true);
  if ($ temp) {??>  php echo $ temp; ??>
     Php}
  // Zombie Infection Date $ temp = get_post_meta (the_id (), «date d'infection», true);
  if ($ temp) {??>  php echo $ temp; ??>
     Php}
  // Zombie Interest $ temp = get_post_meta (the_id (), «intérêts», true);
  if ($ temp) {??

php echo $ temp;???

php}?>

L'un des inconvénients de l'utilisation de champs personnalisés WordPress est que vous ne pouvez pas faire de formatage spécial. Un éditeur Web non technique qui remplit ce contenu doit être écrit pour chaque élément d'intérêt dans la liste<li> Tags (par exemple, 20. ). (Vous pourrez peut-être résoudre cette limitation d'interface en utilisant des plugins de champ personnalisés plus puissants tels que des champs personnalisés avancés, des pods ou des plugins similaires.) Enfin, nous ajoutons la déclaration zombie et la fin<zombie-profile></zombie-profile> Étiquette.

  php $ temp = get_the_content ();
      if ($ temp) {??>  php echo $ temp; ??>
       Php}
    ?>

Étant donné que nous utilisons le corps du message comme notre déclaration, nous obtenons du code supplémentaire, tels que des balises de paragraphe entourant le contenu. Mettre des instructions de profil dans des champs personnalisés peut atténuer cela, mais en fonction de votre objectif, il peut également s'agir du comportement attendu / souhaité.

Ensuite, vous publiez simplement chaque message en tant qu'un et vous pouvez ajouter autant de messages / profils de zombies que vous le souhaitez!

Block Party: composants Web dans les blocs personnalisés

La création de blocs personnalisés est un excellent moyen d'ajouter des composants Web. Vos utilisateurs pourront remplir les champs que vous souhaitez et obtenir la magie des composants Web sans aucun code ni connaissance technique. De plus, le bloc est complètement indépendant du thème, nous pouvons donc utiliser ce bloc sur un site Web, puis l'installer sur d'autres sites WordPress - c'est un peu comme la façon dont nous nous attendons à ce que les composants Web fonctionnent!

Il y a deux parties principales du bloc personnalisé: PHP et JavaScript. Nous ajouterons également des CSS pour améliorer l'expérience d'édition.

Le premier est PHP:

 fonction ez_webcomp_register_block () {
  // Enregistrer le javascript requis pour créer des blocs personnalisés
  wp_register_script (
    'ez-webcomp ",
    plugins_url ('block.js', __file__),
    Array («WP-Blocks», «WP-Element», «WP-Editor»),
    filemtime (plugin_dir_path (__ file__). 'block.js')
  ));

  // enregistrer le fichier CSS du composant WP_register_style (
    'ez-webcomp ",
    Plugins_url ('ezwebcomp-syle.css', __file__),
    tableau(),
    filemtime (plugin_dir_path (__ file__). 'ezwebcomp-style.css')
  ));

  // Enregistrer le bloc personnalisé Register_Block_Type ('EZ-WebComp / Zombie-Profile', Array (
    // Nous avons déjà des styles externes; ceux-ci ne sont utilisés que «Editor_Style» lorsque nous utilisons l'éditeur WordPress => 'EZ-WebCompe',
    'editor_script' => 'ez-webcompt',
  ));
}
add_action ('init', 'ez_webcomp_register_block');

CSS n'est pas nécessaire, il aide à empêcher les images de profil de Zombies de se chevaucher avec ce qui est dans l'éditeur WordPress.

 / * Définit la largeur et la hauteur de l'image.
 * Votre kilométrage peut varier, veuillez donc ajuster au besoin.
 * "pic" est la classe que nous ajoutons à l'éditeur dans Block.js * /
#Editor .Pic img {
  Largeur: 300px;
  hauteur: 300px;
}
/ * Ce CSS garantit que l'espace correct est alloué à l'image,
 * Et empêche également le bouton de redimensionner avant de sélectionner l'image.
* /
#Editor .Pic Button.Components-Button {
  débordement: visible;
  Hauteur: Auto;
}

Le javascript dont nous avons besoin est un peu plus compliqué. J'ai essayé de le simplifier autant que possible et de le rendre aussi accessible que possible, donc je l'ai écrit en utilisant ES5 pour éliminer le besoin de compilation.

Afficher le code

 (fonction (blocs, éditeur, élément, composants) {
  // la fonction pour créer un élément var el = element.CreateElement;
  // Processus Entrée de texte des champs de bloc var richText = editor.richText;
  // Processus Télécharger Image / Media var mediaUpload = editor.MediApload;

  // Retournez à registre_block_type en php
  Blocks.RegisterBlockType ('ez-webcomp / zombie-profile', {
    Titre: «Profil zombie», // nom convivial affiché dans l'icône de sélecteur de blocs: «id-alt», // icônes utilisées dans la catégorie du sélecteur de blocs: «mise en page»,
    // Les propriétés sont tous les différents champs que nous utiliserons.
    // Nous définissons ce qu'ils sont et comment l'éditeur de blocs obtient les données.
    attributs: {
      nom: {
        // Type de contenu: 'String',
        // l'emplacement qui peut être utilisé pour obtenir une source d'information: «Texte»,
        // Le sélecteur est la façon dont l'éditeur de bloc sélectionne et obtient du contenu.
        // Ceux-ci devraient être uniques dans un cas du bloc.
        // si vous n'avez qu'un seul IMG ou un<p> etc, vous pouvez utiliser le sélecteur d'éléments.
        sélecteur: '.zname',
      },
      MediaId: {Type: 'Number',},
      mediaUrl: {type: 'string', source: 'attribut', sélecteur: 'img', attribut: 'src',},
      Âge: {Type: 'String', Source: 'Text', sélecteur: '.age',},
      infectedate: {type: 'date', source: 'text', sélecteur: '.infection-date'},
      Intérêts: {Type: 'Array', Source: 'Children', sélecteur: 'ul',},
      déclaration: {type: 'array', source: 'enfants', sélecteur: '.statement',},
    },
    // La fonction d'édition gère comment afficher le contenu dans l'éditeur de blocs.
    edit: fonction (accessoires) {
      var attributes = props.Attributes;
      var onselectImage = fonction (média) {
        return props.setAttributes ({mediaUrl: media.url, mediaId: media.id,});
      };
      // L'instruction RETOUR est ce qui s'affiche dans l'éditeur.
      // el () crée un élément et définit ses différentes propriétés.
      Retour El (
        // Utilisez DIV au lieu des composants Web de profil zombie ici pour la simplicité.
        'div',
        {className: props.classname},
        // le nom du zombie el (RichText, {{
          Tagname: «H2»,
          en ligne: vrai,
          ClassName: «Zname»,
          Payholder: «Nom de zombie…»
          valeur: attributs.name,
          onChange: fonction (valeur) {
            Prophes.SetAtTributes ({name: valeur});
          },
        }),
        El (
          // image de profil zombie 'div',
          {classname: 'pic'},
          el (MediaUpload, {
            onselect: onselectImage,
            ALLESTYPES: «Image»,
            Valeur: attributs.mediaid,
            rendu: fonction (obj) {
              Retour El (
                Composants.Button,
                {
                  ClassName: Attributes.MediaId?
                  onclick: obj.open,
                },
                ! attributes.mediaId?
              ));
            },
          })
        ),
        // Nous inclurons le titre el ('h3', {}, 'âge') de l'âge de zombies dans l'éditeur de blocs,
        // Field d'âge El (RichText, {
          Tagname: «div»,
          ClassName: «Age»,
          Placeholder: «l'âge du zombie…»,
          Valeur: attributs.age,
          onChange: fonction (valeur) {
            props.setAtTributes ({Âge: valeur});
          },
        }),
        // Titre de la date d'infection El ('H3', {}, 'Date d'infection'),
        // Infection Date Field El (RichText, {
          Tagname: «div»,
          ClassName: «Date d'infection»,
          Placeholder: «Date d'infection des zombies…»,
          Valeur: attributs.infectDate,
          onChange: fonction (valeur) {
            Prophes.SetAttributes ({infectionDate: valeur});
          },
        }),
        // Titre de passe-temps el ('H3', {}, 'Intérêts'),
        // Hobby Field El (RichText, {
          Tagname: 'ul',
          // Chaque fois que vous appuyez sur la touche `Entrée ', une nouvelle sera créée</p>

<li> Multiline: «Li», Placeholder: «Écrivez une liste d'intérêts…», Valeur: attributs.interests, onChange: fonction (valeur) { props.setAttributes ({intérêts: valeur}); }, ClassName: «Intérêts», }), // Titre de déclaration zombie el ('h3', {}, 'instruction'), // Field de déclaration zombie el (RichText, {{ Tagname: «div», ClassName: "déclaration", Placeholder: «Écriture de la déclaration…», Valeur: attributs.statement, onChange: fonction (valeur) { props.setAttributes ({instruction: valeur}); }, }) )); }, // Stockez le contenu dans la base de données et affichez-le à l'avant. // Ici, nous devons nous assurer que les composants Web sont utilisés. SAVE: fonction (accessoires) { var attributes = props.Attributes; Retour El ( // Étant donné que l'utilisation d'éléments personnalisés dans WordPress nécessite quelques étapes supplémentaires, nous utilisons un div normal. 'div', {classname: 'zombie-profile', ... attributs}, // Assurez-vous de vérifier que tous les champs existent avant d'imprimer. attributs.name && el ('h2', {classname: 'zname'}, attributs.name), attributs.mediaurl && el ('img', {src: attributs.mediaurl, slot: 'Profil-image'}), attributs.age && el ('div', {className: 'Age'}, attributs.age), attributs.infectDate && el ('div', {className: 'Infection-Date'}, attributes.infectDate), attributs.interests && el ('ul', {}, attributes.interests), attributes.statement && el ('div', {className: 'instruction'}, attributs.statement) )); }, }); } (window.wp.blocks, window.wp.blockEditor, window.wp.element, window.wp.components));

Connectez-vous aux composants Web

Maintenant, ne serait-ce pas génial si une personne de gentillesse, un écrivain d'article et une personne totalement géniale créent un modèle sur lequel vous pouvez brancher vos composants Web et utiliser pour votre site Web? Eh bien, ce gars n'était pas disponible (il est allé aider des organismes de bienfaisance ou quelque chose), alors je l'ai fait. C'est sur github:

Faites-le vous-même - composants Web simples de WordPress

Le plugin est un modèle de codage qui enregistre vos composants Web personnalisés, enregistre les scripts et les styles requis par le composant, fournit des exemples de champs de bloc personnalisés dont vous pourriez avoir besoin et garantit qu'il est magnifiquement stylé dans l'éditeur. Tout comme l'installation manuelle de n'importe quel autre plugin WordPress, placez-le dans un nouveau dossier dans /wp-content/plugins , assurez-vous de le mettre à jour avec votre composant Web spécifique, puis activez-le dans WordPress sur l'écran des plugins installés.

Pas mal, non?

Même s'il semble qu'il y a beaucoup de code, nous faisons simplement des opérations WordPress assez standard pour enregistrer et rendre les composants Web personnalisés. Et, puisque nous l'emballons comme un plugin, nous pouvons le mettre sur n'importe quel site WordPress et commencer à publier des profils de zombies jusqu'à ce que nous soyons satisfaits.

Je pense que le point d'équilibre essaie de faire fonctionner les composants dans l'éditeur de blocs WordPress comme frontal. Sans cette considération, nous pouvons faire le travail avec moins de code.

Néanmoins, nous avons réussi exactement les mêmes composants que nous avons faits dans notre article précédent dans le CMS, ce qui nous permet de placer un certain nombre de profils de zombies sur le site Web. Nous combinons la connaissance des composants Web avec des blocs WordPress pour développer un bloc réutilisable pour les composants Web réutilisables.

Quel type de composants construiriez-vous pour votre site Web WordPress? Je pense qu'il y a beaucoup de possibilités ici et j'aimerais savoir ce que vous ferez à la fin.

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!