Ajout de CSS de vent arrière aux thèmes WordPress nouveaux et existants

Depuis que j'ai commencé à faire des sites Web WordPress, en environ 15 ans, rien n'a eu un impact plus important (et un grand écart) sur la productif que j'étais productive et à quel point j'ai apprécié avec le développement frontal.

Lorsque j'ai commencé à utiliser Tailwind, il y avait un référentiel le plus récent sur GitHub qui décrivait comment utiliser Tailwind dans WordPress. Le référentiel n'a pas été mis à jour depuis 2019. Mais le manque de mises à jour n'illustre pas l'aspect pratique du vent arrière pour les développeurs WordPress. En faisant du travail de Tailwind comme son meilleur, tout en étant WordPress est la meilleure partie des deux plateformes et créez des sites Web modernes en moins de temps.

L'exemple de paramètres minimum dans cet article est conçu pour mettre à jour le référentiel de paramètres d'origine et modifié pour être compatible avec les dernières versions de Tailwind et WordPress. Cette approche peut être étendue à une variété de thèmes WordPress, des thèmes par défaut dérivés à ceux entièrement personnalisés.

Pourquoi les développeurs WordPress devraient suivre le vent arrière

Avant de discuter du réglage, il vaut la peine de examiner le fonctionnement du vent arrière et ce que cela signifie dans un environnement WordPress.

Tailwind vous permet de styliser des éléments HTML avec des cours de services publics préexistants, en éliminant la nécessité d'écrire vous-même la plupart ou la totalité du CSS de votre site Web. (Pensez à des classes comme hidden for display: hidden ou uppercase pour text-transform: uppercase .) Si vous avez utilisé des frameworks comme Bootstrap et Foundation dans le passé, la plus grande différence que vous trouverez dans le vent-vent CSS est sa méthode de conception en ardoise vierge et sa fonctionnalité légère de CSS uniquement, qui ne comprend que les réseaux CSS. Ces propriétés permettent des sites Web hautement optimisés sans pousser les développeurs vers l'esthétique intégrée du cadre lui-même.

De plus, contrairement à de nombreux autres cadres CSS, les builds "standard" pour charger le vent arrière CSS à partir de CDN existants ne peuvent pas être effectués. Le fichier CSS généré sera trop important en raison de toutes les classes de services publics incluses. Tailwind fournit un "Play CDN", mais il n'est pas utilisé dans les environnements de production car il réduit considérablement les avantages de performance du vent arrière. (Cependant, il est vraiment pratique si vous voulez faire un prototypage rapide ou expérimenter autrement avec le vent arrière sans l'installer ou la configuration du processus de construction.)

Cela nécessite l'utilisation du processus de construction de Tailwind pour créer un sous-ensemble de classes d'utilité de framework spécifiques à votre projet, ce qui rend très important de comprendre comment Tailwind décide quelles classes de services publics sont incluses et comment ce processus affecte l'utilisation des classes de services publics dans l'éditeur WordPress.

Enfin, Aggressive Fillight de Tailwind (sa version de réinitialisation CSS) signifie que certaines parties de WordPress ne correspondent pas exactement au framework avec ses paramètres par défaut.

Voyons d'abord quels aspects du vent arrière fonctionnent bien dans WordPress.

L'aspect du vent arrière et de WordPress travaillant ensemble

Pour que Tailwind fonctionne bien sans beaucoup de personnalisation, il doit agir comme le CSS principal pour une page donnée;

Par exemple, si vous construisez un plugin WordPress et que vous devez inclure le CSS frontal, le Fildlight de Tailwind est en conflit directement avec le thème actif. De même, si vous avez besoin de coiffer la zone d'administration WordPress (externe à l'éditeur), le style propre de la zone de gestion peut être écrasé.

Il existe plusieurs façons de résoudre ces deux problèmes: vous pouvez désactiver les classes de services d'utilité en avant et préfixer toutes les classes d'utilité, ou vous pouvez ajouter des espaces de noms pour tous les sélecteurs à l'aide de PostCSS. Quoi qu'il en soit, votre configuration et votre flux de travail deviendront plus complexes.

Cependant, si vous construisez un thème, le vent arrière peut être utilisé directement. J'ai créé avec succès des thèmes personnalisés à l'aide de rédacteurs en chef classiques et de rédacteurs en chef, et je crois que lorsque l'édition à l'échelle du site mûrit, il y aura de nombreuses fonctionnalités d'édition à l'échelle du site qui fonctionnent bien avec Tailwind.

Dans son article de blog, «Les éditeurs de Gutenberg à l'échelle du site n'ont pas à être terminés», Tammie Lister décrit les éditeurs à l'échelle du site comme un ensemble de fonctionnalités autonomes qui peut être partiellement ou entièrement adopté. Il est peu probable que les fonctionnalités de style mondial pour l'édition à l'échelle du site fonctionnent avec le vent arrière, mais de nombreuses autres fonctionnalités peuvent.

Donc: vous construisez un thème, le vent arrière est installé et configuré, et vous ajoutez une classe de services publics avec un sourire. Mais ces classes de services publics fonctionneront-elles dans WordPress Editor?

Grâce à la planification, vous pouvez! Les classes de services publics sont disponibles dans l'éditeur tant que vous décidez à l'avance quelles classes de services publics utiliser. Vous ne pouvez pas ouvrir l'éditeur et utiliser toutes les classes d'utilité de Tailwind;

Il existe de nombreuses façons de le faire: vous pouvez créer une liste de sécurité dans le fichier de configuration de Tailwind;

Déterminer à l'avance, la classe des éditeurs n'a jamais été un obstacle à travailler pour moi, mais c'est toujours le plus qui m'a été interrogé sur la relation entre le vent arrière et WordPress.

Thème WordPress minimum avec intégration CSS minimale

Commençons par le thème WordPress de base possible. Il n'y a que deux fichiers requis:

• style.css
• index.php

Nous utiliserons le vent arrière pour générer du style.css. Pour index.php, commençons par quelque chose de simple:

  Php
/ **
 * Le fichier de modèle principal.
 *
 * Il s'agit du fichier de modèle le plus générique dans un thème WordPress
 * Et l'un des deux fichiers requis pour un thème (l'autre étant style.css).
 * Il est utilisé pour afficher une page lorsque rien de plus spécifique correspond à une requête.
 * Par exemple, il rassemble la page d'accueil quand aucun fichier home.php n'existe.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package wordpress
 * @subpackage vingt_twenty_one
 * @Since vingt-et un 1.0
 * /

get_header ();
?>

<main id="site-content" role="main">

     Php
    if (have_posts ()) {

        while (have_posts ()) {
            the_post ();

            get_template_part ('template-partits / contenu', get_post_type ());

        }

    } autre {

        get_template_part ('template-partits / contenu', 'Aucun');

    }
    ?>

</main>

 php get_footer ();??

Il y a beaucoup de choses que les thèmes WordPress devraient faire, et le code ci-dessus ne le fait pas - comme la pagination, le post-vignettes, l'utilisation d'éléments de liaison au lieu de faire la queue de styles, etc. - mais cela suffit pour montrer un message et tester si le vent arrière fonctionne comme prévu.

En termes de vent arrière, nous avons besoin de trois fichiers:

• package.json
• tailwind.config.js
• Fichier d'entrée de Tailwind

Vous avez besoin de NPM avant de continuer. Si vous n'êtes pas habitué à l'utiliser, nous avons un guide pour commencer avec le NPM, ce qui est un excellent point de départ!

Puisqu'il n'y a pas encore de fichier package.json, nous créerons un fichier JSON vide dans le même dossier que index.php en exécutant la commande suivante dans le terminal:

 echo {}> ./package.json

Avec ce fichier, nous pouvons installer Tailwind:

 NPM Installer TailwindCSS - Save-DEV

Et générer notre fichier de configuration de vent arrière:

 npx tailwindcss init

Dans notre fichier tailwind.config.js, nous devons juste dire à Tailwind pour rechercher des classes d'utilité dans notre fichier PHP:

 module.exports = {
  Contenu: ["./**/*.php"],
  thème: {
    étendre: {},
  },
  Plugins: [],
}

Si notre thème utilise Composer, nous voulons ignorer le répertoire du fournisseur, ce qui peut être fait en ajoutant quelque chose comme "! ** / vendeur / **" à la matrice de contenu. Cependant, si tous les fichiers PHP font partie du thème, ce qui précède fonctionnera!

Nous pouvons nommer le fichier d'entrée quel que soit le nom que nous voulons. Créons un fichier appelé tailwind.css et ajoutons ce qui suit:

 / *!
Nom du thème: WordPress Tailwind
* /

@tailwind base;
@tailwind composants;
@tailwind utilitaires;

L'annotation en haut est nécessaire pour que WordPress reconnaisse le thème;

C'est ça! Nous pouvons maintenant exécuter la commande suivante:

 npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Cela indique au Tailwind CLI d'utiliser tailwind.css comme fichier d'entrée pour générer notre fichier style.css. L'indicateur --watch reconstruira continuellement le fichier style.css lors de l'ajout ou de la suppression des classes d'utilité de n'importe quel fichier PHP dans le référentiel de projet.

C'est aussi simple qu'un thème WordPress à vent arrière, mais il est peu probable que ce soit quelque chose que vous souhaitez déployer dans un environnement de production. Discutons donc de certaines voies vers le sujet prêt pour la production.

Ajouter TailwindCSS à un thème existant

Il y a deux raisons pour lesquelles vous voudrez peut-être ajouter CSS à vent arrière à un thème existant qui a déjà son propre CSS natif:

• Expérience en ajoutant le composant de vent arrière à un thème stylé
• Convertir le thème de CSS natif en vent arrière

Nous allons le démontrer en installant le vent arrière dans vingt-et-un (le thème par défaut pour WordPress). (Pourquoi pas vingt-deux-deux? Le dernier thème par défaut WordPress est conçu pour afficher l'édition complète et ne convient pas à l'intégration du vent arrière.)

Tout d'abord, si le thème n'est pas installé dans votre environnement de développement, vous devez le télécharger et l'installer. Après cela, nous n'avons qu'à suivre les étapes suivantes:

• Accédez au dossier thème du terminal.
• Parce que vingt-et-uns ont déjà son propre fichier package.json, vous pouvez installer le vent arrière sans créer un nouveau fichier:

 NPM Installer TailwindCSS - Save-DEV

• Ajoutez votre fichier tailwind.config.json:

 npx tailwindcss init

• Mettez à jour votre fichier tailwind.config.json dans le même fichier que dans la section précédente.
• Copiez le fichier vingt et un fichier de style.css existant sur tailwind.css.

Nous devons maintenant ajouter trois directives @tailwind au fichier tailwind.css. Je vous suggère de construire le fichier tailwind.css comme suit:

 / * L'en-tête de fichier de thème WordPress est là. * /

@tailwind base;

/ * Tous les CSS existants sont là. * /

@tailwind composants;
@tailwind utilitaires;

Mettre la base immédiatement après le titre du sujet garantit que WordPress continue de détecter votre sujet, tout en veillant à ce que la réinitialisation de la réinitialisation CSS du vent arrière apparaisse dans le fichier le plus tôt possible.

Tous les CSS existants sont situés derrière la couche de base, en s'assurant que ces styles ont priorité sur les réinitialisations.

Enfin, les couches de composante et d'utilité sont immédiatement suivies, afin qu'ils puissent prendre priorité sur n'importe quelle déclaration CSS avec la même spécificité.

Maintenant, comme notre sujet minimal, nous exécuterons la commande suivante:

 npx tailwindcss -i ./tailwind.css -o ./style.css --watch

Maintenant que votre nouveau fichier style.css est généré chaque fois que vous modifiez le fichier PHP, vous devez vérifier les différences de rendu subtiles entre le thème modifié et le thème d'origine. Celles-ci sont causées par la réinitialisation CSS de Tailwind, qui est un peu plus approfondie que certains thèmes ne peuvent s'attendre. Pour vingt et vingt et un, la seule modification que j'ai faite est d'ajouter la ligne de décoration texte: souligner à l'élément A.

Après avoir résolu le problème de rendu, ajoutons le composant de bannière d'en-tête de l'interface utilisateur de Tailwind (bibliothèque de composants premiers de Tailwind). Copiez le code à partir du site Web de l'interface utilisateur de Tailwind et collez-le après le lien "Sauter vers le contenu" dans header.php:

très bien! Étant donné que nous allons maintenant utiliser des classes d'utilité pour écraser certaines classes de spécificité supérieure existantes intégrées au sujet, nous ajouterons une ligne au fichier tailwind.config.js:

 module.exports = {
  Important: vrai,
  Contenu: ["./**/*.php"],
  thème: {
    étendre: {},
  },
  Plugins: [],
}

Cela marque tous les utilitaires CSS de vent arrière comme! Important afin qu'ils puissent remplacer les classes existantes avec une spécificité plus élevée. (Je n'ai jamais défini important à vrai dans l'environnement de production, mais si je convertit un site Web de CSS natif en vent arrière, je le fais presque certainement.)

En ajoutant une classe rapide sans sous-ligne au lien Le savoir plus et en ajoutant BG-Transparent et Border-0 au bouton Fermer, nous avons terminé:

Il semble un peu dur de voir les composants de l'interface utilisateur de vent arrière fusionner dans le thème par défaut WordPress, mais c'est une belle démonstration des composants de vent arrière et de leur portabilité inhérente.

Commencer à zéro

Si vous utilisez Tailwind pour créer un nouveau sujet, votre processus sera très similaire à l'exemple minimum ci-dessus. Au lieu d'exécuter la CLI du vent arrière directement à partir de la ligne de commande, vous voudrez peut-être créer des scripts NPM séparés pour les builds de développement et de production et de surveiller les modifications. Vous pouvez également créer une version distincte pour l'éditeur WordPress.

Si vous recherchez un point de départ au-delà du plus petit exemple ci-dessus - mais pas au-delà de la mesure où il a lui-même son style de théâtre auto-droit - j'ai créé un générateur de thèmes WordPress optimisé par le vent arrière inspiré par des soulignements (_s), une fois un thème de lancement canonique WordPress. Nommé _TW, c'est un début rapide que j'espère avoir lorsque j'ai utilisé le vent arrière pour la première fois avec WordPress. C'est toujours la première étape de tous mes projets clients.

Si vous êtes prêt à s'écarter davantage de la structure d'un thème WordPress typique et à ajouter des modèles de lame Laravel à votre boîte à outils, Sage est une excellente option et ils ont un guide de configuration pour Tailwind pour vous aider à démarrer.

Quelle que soit la façon dont vous choisissez de commencer, je vous encourage à prendre un peu de temps à vous adapter à CSS de vent arrière et à utiliser des cours de services publics pour styliser des documents HTML: cela peut sembler inhabituel au début, mais vous vous retrouverez bientôt à prendre plus de travail client que vous le faisiez parce que vous construisez votre site Web plus rapidement que vous l'aviez fait - et espérons-le, comme moi, plus de plaisir à le faire.

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!