WP Offload Media

Je suis un fan des champs personnalisés avancés (ACF) depuis longtemps maintenant. Il est utilisé sur presque tous les sites que j’ai construits ou sur lesquels j’ai travaillé ces dernières années.

Pour ceux qui ne le savent pas, ACF est un plugin qui vous donne plus de contrôle sur votre contenu. Il utilise les custom post meta pour enrichir votre contenu avec des données structurées. Il vous permet également de construire et de configurer les champs de données dans les boîtes méta lorsque vous mettez à jour des articles, des pages, des types de post personnalisés, et bien plus encore.

Dans le passé, j’ai utilisé le plugin dans le cadre d’un projet sur le site Delicious Brains. Cependant, cet article de blog m’a montré à quel point cette solution tierce est vitale pour le développement de WordPress. Laissez-moi vous expliquer…

Comment fonctionne ACF

Il m’a fallu un certain temps pour comprendre ce que fait ACF, alors voici un exemple rapide. Je l’ai utilisé sur un site caritatif de sauvetage de chiens, où les utilisateurs ajoutent de nouveaux chiens pour le rehoming comme un type de post personnalisé. Cependant, en plus du nom du chien, de sa description, du titre du post et du contenu, ils veulent également stocker la race et le sexe du chien, un lien vers une vidéo et quelques photos.

Pour ce faire, j’ai filé un groupe de champs pour ces données à partir des champs personnalisés > Groupes de champs > Ajouter un nouveau menu:

Vous pouvez ajouter des champs de différents types. Ici, j’ai utilisé des sélections, des zones de texte, une simple case à cocher booléenne et un champ de galerie. Ce dernier est une option d’ACF Pro, et j’en parlerai un peu plus tard.

Voici comment vous configureriez une boîte de sélection, complète avec les options de l’utilisateur :

Suivant, j’ai dit que ce groupe devrait seulement apparaître sur les écrans d’édition pour le Dog custom post type. Il y a toutes sortes de logiques que vous pouvez utiliser ici, comme les types de post, les modèles, les catégories et les rôles d’utilisateur :

Mais la vraie puissance d’ACF est lorsque vous ajoutez des données.

Ajouter des données aux champs ACF

L’écran d’édition se présente différemment lorsque vous travaillez sur un Dog post. Il montre une boîte méta personnalisée complète avec les champs définis:

Ceci facilite l’ajout de toutes les données supplémentaires pour les éditeurs de contenu. Il vous permet également de spécifier exactement où vous voulez que les données soient rendues dans le thème, en utilisant le code de la fonction get_field:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Sans le plugin, je devrais soit utiliser les boîtes de méta personnalisées par défaut de WordPress, soit coder mes propres boîtes de méta plus riches à partir de zéro, soit insérer la race et le sexe du chien dans des taxonomies personnalisées. Je pourrais même devoir utiliser la galerie native intégrée au contenu de l’article. Frissons.

ACF Elevates WordPress

ACF est exactement ce qui manquait à WordPress en tant que système de gestion de contenu (CMS) lorsqu’il s’agit d’avoir plus de contrôle sur votre contenu. Avec plus d’un million d’installations actives, il a contribué à rendre la plateforme WordPress plus puissante, et pourrait même avoir contribué à sa croissance.

De plus, les développeurs et les agences l’ont exploité pour donner aux clients le contrôle de leur contenu sans avoir besoin de shortcodes, de constructeurs de pages, ou même post_content du tout. Les développeurs ont un contrôle total sur l’endroit où les données apparaissent sur le front-end du site, évitant les inévitables modifications du client qui détruisent les visuels.

En fait, ACF est si populaire parmi nos clients que nous avons dû ajouter une intégration avec WP Offload Media. Maintenant, les images et le recadrage fonctionnent avec les médias déchargés sur Amazon S3, DigitalOcean Spaces ou Google Cloud Storage.

Ajout d’options de champs supplémentaires à ACF

La version gratuite du plugin a beaucoup de fonctionnalités. Cependant, la version premium est indispensable pour avoir accès à des champs tels que les répétiteurs, les mises en page flexibles et les galeries.

Par exemple, nous utilisons le champ Répétiteur pour permettre aux utilisateurs d’afficher des témoignages sélectionnés dans un curseur sur les pages de produits. Le répéteur contient un champ d’objet de post imbriqué :

Il apparaît ensuite lors de l’édition de la page, afin que nous puissions contrôler quels témoignages seront affichés :

Avec des actions et des filtres pimentés autour de la base de code, ACF a toujours été un outil extrêmement convivial pour les développeurs et extensible. Il donne également la priorité aux améliorations qui sont importantes pour ses utilisateurs.

Utilisation de la fonctionnalité JSON locale

Cependant, l’un des rares problèmes que j’ai trouvés dans le passé était le stockage des configurations de champ dans la base de données, spécifiquement les types de post personnalisés pour les groupes de champs et les champs.

Cela signifie que si vous modifiez la définition du champ sur un site de développement, vous ne pouvez pas repousser votre base de données en utilisant une solution telle que WP Migrate DB Pro en direct. Vous trouviez que la table des posts changeait, et vous perdiez les nouvelles données.

C’est le sempiternel problème de fusion des bases de données (ne me lancez pas…). J’avais l’habitude de contourner ce problème en effectuant d’abord des modifications de champ sur le site en direct. Ensuite, je tirais la base de données vers mon site local pour continuer le développement. Pas idéal.

Heureusement, ACF a introduit la fonctionnalité JSON local. Ce que cela fait, c’est permettre aux configurations de champs d’être enregistrées sous forme de fichiers JSON, qui peuvent se synchroniser avec la base de données.

Cette fonctionnalité géniale résout le problème de la fusion des bases de données pour les données ACF. Cela signifie également que vous pouvez garder les fichiers JSON sous contrôle de version et faire de la configuration une partie de votre processus typique de déploiement de fichiers. En travaillant avec le plugin sur notre site, j’ai ajouté quelques ajustements pour l’intégrer encore plus à notre configuration Git et multi-environnements :

• J’ai défini le répertoire JSON à notre app/data répertoire en dehors du thème (car il pourrait changer).
• L’élément de menu « Champs personnalisés » ne s’affichera que sur les environnements de développement.
• Les fichiers JSON avec une configuration de base de données périmée sur admin_init seront automatiquement synchronisés.

Même si nous avons maintenant l’éditeur de blocs WordPress (anciennement connu sous le nom de Gutenberg), je soutiendrais que l’ACF est toujours vital pour créer une excellente expérience d’édition.

Utilisation de l’éditeur de blocs aux côtés de l’ACF

L’éditeur de blocs offre une direction différente pour l’édition de contenu que l’ACF. Vous créez du contenu à l’aide de Blocs au lieu de le stocker en tant que métadonnées de post, ce qui vous donne une certaine flexibilité de conception.

Au début, l’Éditeur de blocs ne prenait pas en charge les boîtes méta. Elles ont même été supprimées de l’écran « Edit Post », ce qui a suscité beaucoup d’indignation. Maintenant, le support a été ajouté pour les boîtes méta. Elles apparaissent sous l’éditeur de blocs avec une interface utilisateur (IU) minimale et moins raffinée.

Utilisant des blocs au lieu de champs pour les données personnalisées, le nouvel éditeur a le potentiel d’avoir un impact énorme sur l’avenir d’ACF. De plus, les nouveaux sites seront beaucoup moins susceptibles d’installer un outil tiers maintenant qu’il existe une solution native.

Cependant, ce n’est pas la première fois que des propositions de modifications du noyau menacent l’avenir d’ACF. Il y a quelques années, une nouvelle équipe a été mise en place pour Post Meta. Au début, cela semblait devoir tuer les diverses solutions tierces de champs personnalisés :

Il y a eu une flopée de bibliothèques/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods), qui ont rempli ce rôle pour le moment. Nous les considérerons comme des préquelles spirituelles à un nouveau plugin digne du noyau.

À l’époque, j’ai écrit sur la façon dont cette décision d’introduire de nouvelles fonctionnalités concurrentes pourrait rendre certains plugins redondants. En fin de compte, le projet Post Meta n’est allé nulle part, le nouvel éditeur est arrivé, et ACF a traversé la tempête.

ACF n’a pas seulement rebondi, il s’est adapté. Le résultat était quelque chose qui combinait la puissance d’ACF et la flexibilité des blocs personnalisés. Parlons-en maintenant.

Comment construire des Blocs en utilisant ACF

Evidemment, les Blocs personnalisés peuvent être bénéfiques. Cependant, le processus technique pour les créer est complexe. Les Blocs ACF comblent cette lacune.

Les Blocs ACF s’intègrent à vos champs personnalisés actuels, sont dynamiques et personnalisables, et vous permettent d’accomplir deux choses :

• Vous pouvez emmener vos champs personnalisés actuels dans l’écosystème de l’éditeur de blocs.
• Vous êtes en mesure de créer des solutions personnalisées en ligne.

Ils sont rendus à l’aide d’un fichier de modèle PHP ou de la fonction callback – donc c’est exactement comme le développement d’un thème. Ils conservent également la compatibilité avec le noyau de WordPress, de sorte que vous pourriez même créer des Blocks réutilisables à travers le framework.

Bien que les Blocks ACF ne soient pas une béquille, je dirais que si vos compétences en React sont encore sommaires, vous voudrez certainement les étudier davantage. Ils vont vous permettre de tirer parti de la puissance de l’éditeur de blocs tout en restant dans le fichier familier functions.php.

Construire un bloc ACF

Démontrons comment construire un bloc ACF. La version Pro de l’outil a inclus cette fonctionnalité depuis ACF 5.8, elle est donc chez nous depuis environ deux ans maintenant. Voici le code d’enregistrement du bloc d’exemple super-simple:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

À partir d’ici, vous voudrez créer un groupe de champs et rendre le Bloc. Pour le premier, vous le ferez à partir de l’écran Groupes de champs personnalisés > dans WordPress:

Ici, ajoutez votre groupe de champs et remplissez-le comme d’habitude. Cependant, dans la boîte méta « Emplacement », vous voudrez utiliser la règle « Bloc » pour sélectionner (dans ce cas) le Bloc de témoignage.

Enfin, vous devrez effectuer le rendu du Bloc. Cela suit le même processus auquel vous êtes peut-être déjà habitué avec les champs personnalisés :

• Créer un fichier modèle pour votre thème en fonction du paramètre donné dans le paramètre render_template lors de l’enregistrement initial du Bloc.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

‘InnerBlocks’ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current « Title », « Content », and « Button » fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Pour commencer à utiliser les InnerBlocks, vous incluez 'jsx' => true dans le tableau supports :

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Vous devrez ensuite echo la balise HTML <InnerBlocks /> dans votre modèle de bloc :

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Ce n’est qu’un exemple simple, mais vous pouvez faire beaucoup plus avec les InnerBlocks.

Alternatives aux Blocs ACF

Bien sûr, ACF ne sera pas la seule solution pour créer des Blocs. En tant que tel, votre premier instinct va probablement être une construction personnalisée.

Nous avons couvert comment créer un Block ‘vanilla’ dans le passé, mais avant de commencer, vous aurez besoin de connaissances sur React.

Il existe également des plugins WordPress qui vous permettent d’assembler des Blocks à partir de divers composants, mais je dirais qu’ils ne sont pas vraiment destinés aux développeurs mais aux ‘bricoleurs d’utilisateurs finaux’. Lazy Blocks est régulièrement mis à jour, c’est donc une bonne option si vous voulez expérimenter avec ce qu’il offre.

L’avenir d’ACF

Depuis sa sortie, ACF a été un plugin complémentaire essentiel pour WordPress. Il étend, enrichit, et rend la plateforme plus utilisable. Je ne pense pas que je pourrais construire des sites Web sans lui.

Cependant, la combinaison de l’éditeur de blocs et des blocs ACF est la cerise sur le gâteau – c’est un excellent investissement dans l’avenir du CMS. Il permettra d’abaisser la barrière d’entrée pour les développeurs afin d’étendre l’éditeur de blocs sans commencer par la courbe d’apprentissage abrupte de React. À long terme, ceux qui poussent si fort pour l’évolution de l’éditeur de blocs pourraient considérer cela comme une victoire.