Magazine Gadgets

Conception de thèmes enfants WordPress basés sur des blocs avec un seul fichier JSON – WP Tavern

Publié le 01 décembre 2021 par Mycamer

Depuis le moment où j’ai ouvert ma première boutique de thèmes en 2008 jusqu’à nos jours en tant que simple bricoleur, mon plan a toujours été de créer un thème unique dans le moule de Jardin Zen CSS. Il s’agissait d’un projet que Dave Shea a lancé au début des années 2000 pour montrer comment les concepteurs pouvaient manipuler un site via CSS uniquement. Le HTML resterait le même, mais le design pourrait être n’importe quoi.

J’ai atteint cet objectif plusieurs fois avec plusieurs projets. Techniquement, tout ce dont j’avais besoin était un balisage architecturalement solide dans un thème WordPress et un CSS personnalisé dans un thème enfant.

Le concept était simple, mais avec le temps, ma vision a changé. Je voulais créer quelque chose qui rende la conception de ces types de thèmes enfants encore plus facile. Par conséquent, j’ai construit des systèmes personnalisés pour contourner le manque d’outils de WordPress dans le domaine de la conception de thèmes. Ne pas trop me vanter, mais j’avais l’impression d’avoir créé des méthodes pratiques. Ils ont permis aux concepteurs de thèmes enfants d’insérer des valeurs dans des fichiers de configuration, tels que des noms de famille de polices et des codes de couleur. La plupart d’entre eux pourraient également être écrasés par les utilisateurs finaux via le personnalisateur.

En 2018, j’étais déjà au travail sur ce qui serait mon opus magnum, le meilleur thème WordPress que j’aie jamais construit. J’avais aussi prévu que ce soit mon dernier. J’envisageais de quitter le jeu depuis un moment. Mais c’était un projet que je devais mener à terme.

Ensuite, le nouvel éditeur de blocs a tout fait exploser. J’avais travaillé avec lui pendant des mois avant son lancement, mais je savais que le développement de thèmes ne serait plus jamais le même. Le projet Gutenberg continuerait à mûrir et à remodeler l’avenir de WordPress.

J’ai finalement lancé mon thème. C’était l’un des premiers produits commerciaux à prendre en charge le nouveau système de blocs. Cependant, j’étais aussi dégonflé.

C’était les premiers jours de l’éditeur de blocs. Personne ne savait vraiment ce que nous verrions dans trois ans ou plus, mais si vous y prêtiez ne serait-ce qu’un minimum d’attention, vous pourriez voir que la thématique évoluerait vers quelque chose de bien différent de ce qu’elle était à l’époque. J’ai passé plus d’un an à créer un système de thèmes qui deviendrait rapidement inutile. Certes, je pensais que nous serions arrivés à cette destination beaucoup plus tôt.

WordPress 5.9 sera expédié les sous-composants finaux de l’édition complète du site. Cela inclura la prise en charge des thèmes de bloc sous le capot. Les utilisateurs qui les installent peuvent les personnaliser via l’éditeur de site et l’interface des styles globaux.

Ce qui m’excite le plus, c’est encore ce qui me réveillait tous les matins il y a 13 ans : les thèmes enfants.

Les thèmes enfants de bloc ont partiellement fonctionné dans le plugin Gutenberg pendant des mois. Cependant, la fonctionnalité que j’attendais le plus n’était prête qu’il y a une semaine. Une nouvelle pièce permet à un thème enfant d’écraser valeurs uniques de son parent theme.json déposer. Essentiellement, les deux fichiers sont fusionnés, l’enfant étant prioritaire.

Pourquoi étais-je si enthousiasmé par cette fonctionnalité ? Parce que c’était le même système que j’avais construit dans les années passées – mais en mieux.

Après avoir vu ce terrain dans la version de développement de Gutenberg, la première chose que j’ai faite a été de charger un thème personnalisé avec lequel j’ai barboté. C’est un projet que j’ai construit pour le plaisir et ma propre édification.

Poste de démonstration unique présentant du texte noir sur fond blanc.
<img data-attachment-id="124780" data-permalink="https://wptavern.com/designing-block-based-wordpress-child-themes-with-a-single-json-file/parent-theme-single-post" data-orig-file="https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post.jpg" data-orig-size="2400,1978" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="parent-theme-single-post" data-image-description="" data-image-caption="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-300x247.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-500x412.jpg" loading="lazy" width="2400" height="1978" src="https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post.jpg" alt="Poste de démonstration unique présentant du texte noir sur fond blanc." class="wp-image-124780" srcset="https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post.jpg 2400w, https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-300x247.jpg 300w, https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-500x412.jpg 500w, https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-768x633.jpg 768w, https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-1536x1266.jpg 1536w, https://wptavern.com/wp-content/uploads/2021/10/parent-theme-single-post-2048x1688.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />Vue de poste unique du thème parent.

Ensuite, j’ai créé un nouveau projet dans mon éditeur de code. j’ai ajouté le requis style.css fichier et branché dans les champs d’en-tête appropriés. Je n’en aurais pas besoin au-delà de ça. La conception de mon thème enfant reposerait sur une autre fonctionnalité.

j’ai ajouté un theme.json au niveau racine du thème enfant et j’ai commencé à m’amuser plus que je n’en ai eu avec le thème depuis longtemps.

J’ai choisi quelques couleurs d’automne et une police de titre amusante. En quelques minutes, j’ai eu une nouvelle couche de peinture éclaboussée sur mon installation de test. Le design n’était pas révolutionnaire ou quoi que ce soit du genre. J’étais juste étonné de voir à quel point il était facile de transformer ma conception en insérant quelques valeurs.

Thème enfant de style automne de bruns et d'oranges affichant un seul poste.
<img data-attachment-id="124781" data-permalink="https://wptavern.com/designing-block-based-wordpress-child-themes-with-a-single-json-file/child-theme-single-post" data-orig-file="https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post.jpg" data-orig-size="2400,2033" data-comments-opened="0" data-image-meta="{" aperture="" data-image-title="child-theme-single-post" data-image-description="" data-image-caption="" data-medium-file="https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-300x254.jpg" data-large-file="https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-500x424.jpg" loading="lazy" width="2400" height="2033" src="https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post.jpg" alt="Thème enfant de style automne de bruns et d'oranges affichant un seul poste." class="wp-image-124781" srcset="https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post.jpg 2400w, https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-300x254.jpg 300w, https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-500x424.jpg 500w, https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-768x651.jpg 768w, https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-1536x1301.jpg 1536w, https://wptavern.com/wp-content/uploads/2021/10/child-theme-single-post-2048x1735.jpg 2048w" sizes="(max-width: 2400px) 100vw, 2400px" />Vue de poste unique du thème enfant.

C’est le type de thème enfant dont j’ai toujours rêvé. Je veux avoir le pouvoir de changer les éléments de conception de mon thème pour différentes saisons et vacances. Et je veux pouvoir partager ces thèmes d’enfants avec d’autres.

Comme je l’ai dit, j’avais déjà construit de telles méthodes de thème enfant (j’ai utilisé PHP au lieu de JSON). Cependant, c’est beaucoup plus puissant car il repose sur le système de blocs standard et non sur quelque chose de personnalisé que seule une poignée de personnes utiliserait jamais.

Certains d’entre vous se demanderont peut-être pourquoi je n’ai pas fait ces modifications via l’éditeur du site au lieu de créer un thème enfant. Rich Tabor a posé, pour l’essentiel, la même question sur Twitter plus tôt aujourd’hui. « Si un thème se compose de JSON et de modèles de blocs qui peuvent tous deux être modifiés via les styles globaux, à quoi servent les thèmes enfants ? »

Disons que j’ai installé un thème de bloc et fait quelques ajustements de couleur. Maintenant, prétendez que je veux mélanger cela quand Noël arrive – ajoutez quelques couleurs et trouvez une police de vacances festive. Lorsque j’apporterai ces modifications, mon ancien design ne sera plus là à la fin de la saison car les personnalisations des utilisateurs sont stockées en fonction du thème actif. Je pourrais, bien sûr, prendre note de tous mes anciens paramètres et les modifier tous plus tard. Cependant, le faire via un thème enfant signifie que je peux simplement changer de thème à tout moment. Mes anciens paramètres resteraient intacts.

C’est peut-être vraiment un cas limite. Qui apporte des changements saisonniers à leur conception ces jours-ci, n’est-ce pas ?

La partie intéressante est que je peux partager des thèmes enfants construits avec un seul fichier JSON avec d’autres.

Le thème des enfants est une de mes passions depuis que la fonctionnalité a atterri dans WordPress. À certains égards, cela n’a pas beaucoup changé. Les themers peuvent toujours écraser les modèles du parent. Ils peuvent continuer à ajouter du CSS personnalisé s’ils le souhaitent. Mais maintenant, ils peuvent configurer n’importe quelle partie de la conception à partir d’un seul fichier standardisé. C’est quelque chose qui vaut la peine de remettre ma casquette de développeur et de créer un thème de plus.

Je vois aussi un avenir sans thème pour les enfants qui a toujours les mêmes avantages de partager des éléments de conception.

Le répertoire des modèles de blocs fournit déjà des mises en page qui devraient fonctionner avec n’importe quel thème WordPress bien construit. Cependant, il existe d’autres composants de la conception que nous pourrions séparer à l’avenir.

J’imagine un avenir où WordPress pourrait avoir des palettes de couleurs installables comme quoi Amoureux des couleurs des offres. Parcourez simplement un répertoire, installez et modifiez votre palette de couleurs sans trouver de nouveau thème. Quelque chose de similaire à la récente Plugin Adrien pourrait servir le même but pour les polices. Ce sont des choses que la communauté voudra peut-être considérer plus tard. Aucune idée ne doit être écartée à ce stade.

Pour l’instant, je suis heureux d’avoir à ma disposition toute la puissance de la thématique enfant. Le changement devrait atterrir dans Gutenberg 11.8 cette semaine et WordPress 5.9 plus tard cette année.

Comme ça:

Comme Chargement…



— to wptavern.com


Retour à La Une de Logo Paperblog

A propos de l’auteur


Mycamer Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazines