Révolutionner la typographie de WordPress avec l’édition complète du site et theme.json

Les mots constituent l’épine dorsale de l’internet, malgré la prolifération des médias. Cela signifie que les polices de caractères que vous choisissez pour votre site seront un aspect crucial de votre mise en page et de votre conception.

La typographie WordPress peut évoquer des ambiances, contribuer à l’image de marque, et bien plus encore. L’édition complète du site (Full Site Editing ou FSE) dans WordPress met la personnalisation de cette typographie entre les mains des utilisateurs – et le fichier theme.json aide les développeurs à créer des thèmes WordPress qui en tirent parti.

Cet article explore la typographie WordPress à la fois pour FSE et theme.json. Cependant, la discussion inclut également des contextes clés tels que la technologie que vous utilisez, les considérations techniques à prendre en compte, et l’évolution de la façon dont nous utilisons les polices de caractères dans le design.

La typographie sur le web : un bref historique

Si vous vous penchez sur les premières conceptions de sites web, vous constaterez que, malgré la diversité des mises en page, les polices de caractères ont toujours été présentées de la même manière. Cela s’explique en partie par la disponibilité et en partie par la nécessité. En bref, sans la technologie dont nous disposons aujourd’hui, les mots sur le web ne peuvent utiliser que les polices disponibles sur votre ordinateur.

Un « internaute » du milieu ou de la fin des années 90 ne disposait que d’une poignée de polices de caractères prévisibles : Times New Roman, Arial, Helvetica, Georgia et Verdana. Les deux dernières sont des commandes de Microsoft qui fonctionnent bien sur le web, quelle que soit l’époque.

Cette sélection primitive est cohérente et fiable, mais manque de flexibilité. Des services tels que Google Fonts et Adobe Fonts utilisent le format de fichier WOFF pour vous donner accès à une bibliothèque de milliers de polices, avec un processus d’intégration simple.

Cela vous permet d’améliorer la lisibilité, de créer des designs originaux et d’adapter l’expérience utilisateur (UX) de votre site. Parmi les inconvénients, citons les problèmes de performance potentiels (tels que la modification de la présentation du contenu), la dépendance à l’égard de services tiers pour l’affichage de l’élément le plus important de votre site, ainsi que les problèmes de confidentialité.

C’est pourquoi de nombreux concepteurs de sites web renoncent aux bibliothèques de polices et reconsidèrent l’utilisation des polices système. Le traitement plus rapide et le contrôle que vous avez sur l’application d’une « pile de polices système » qui donne la priorité aux polices de caractères natives et utilise également des options de repli est une approche solide.

WordPress et la typographie

WordPress met fortement l’accent sur la typographie pour vous aider à créer un contenu attrayant et lisible. Tout au long de son histoire, les thèmes par défaut de WordPress ont tous utilisé des paires de polices qui ont trouvé un équilibre entre l’esthétique et la fonctionnalité.

Les thèmes par défaut actuels utilisent des piles de polices pour une présentation propre, moderne et performante. Les thèmes par défaut plus anciens utilisent des combinaisons telles que Noto Sans et Noto Serif (pour Twenty Fifteen) et Montserrat et Merriweather (pour Twenty Sixteen).

Pour mettre en valeur ce « cercle de vie » typographique, Twenty Sixteen utilise Helvetica et Georgia comme options de repli. Le thème par défaut de Twenty Ten n’utilise que Helvetica, Arial et Georgia :

Si ces choix donnent le ton du design WordPress dans chaque thème, ils peuvent aussi vous inciter à prêter une attention particulière à la façon dont vous utilisez la typographie – ce que le FSE de WordPress vous aide à faire.

Une introduction rapide à l’édition complète du site et au theme.json

FSE et theme.json sont au cœur de la gestion de la typographie dans WordPress, il est donc essentiel de les comprendre. FSE s’appuie sur l’éditeur de blocs et ajoute plus de fonctionnalités pour devenir l’éditeur de site.

Cela permet d’unifier les options de conception de votre site de plusieurs façons :

• Vous utilisez l’approche d’édition des blocs pour l’ensemble du site, et pas seulement pour votre contenu.
• Une bibliothèque de modèles fait partie de l’installation, de sorte que vous pouvez les modifier à l’aide des mêmes outils que votre contenu.
• La stylisation se fait également dans l’éditeur de site et offre un schéma de paramétrage global.
• L’édition du site ne nécessite aucun code pour mettre en œuvre les options disponibles. Cela permet de combler le fossé entre le développement et la conception de l’utilisateur final.

Vous pouvez considérer le fichier theme.json comme une version de développement de FSE. Vous devez avoir des connaissances en JavaScript Object Notation (JSON) pour travailler avec le fichier, mais cela est à la portée de la plupart des propriétaires de sites. Il s’agit d’un fichier de configuration central pour la gestion de vos styles et réglages globaux.

Chaque réglage utilise une paire clé/valeur de option:value, et vous pouvez l’implémenter de plusieurs manières :

• Définir des palettes de couleurs globales.
• Configurer les familles et les tailles de polices.
• Configurer des styles spécifiques aux blocs.
• Gestion des préférences en matière d’espacement et de mise en page.

L’utilisation de theme.json vous permet de créer des thèmes plus cohérents et personnalisables sans avoir recours à des feuilles de style CSS personnalisées (bien que cela soit également possible). L’adaptabilité et la flexibilité de theme.json en font un élément clé du développement de thèmes pour WordPress. L’approche optimale consiste à utiliser ces deux éléments de différentes manières pour la conception de votre thème, et la typographie ne fait pas exception à la règle.

Configurer la typographie dans l’éditeur de site WordPress

Si vous savez comment utiliser l’éditeur de blocs, vous pouvez également utiliser l’éditeur de site. Dans WordPress, accédez à l’écran Apparence > Éditeur. L’écran d’accueil de l’éditeur de site s’affiche :

L’écran Styles, dans la partie gauche de la navigation, vous offre des options de conception globales qui incluent des changements de typographie :

Pour la plupart des cas d’utilisation, les réglages individuels pour les différents aspects de la typographie vous apporteront plus de valeur. Il y a deux petites icônes en haut de l’écran Styles qui ouvrent d’autres options : le Livre des styles et l’icône crayon Modifier les styles.

En outre, vous pouvez définir des options de typographie au niveau des éléments et pour chaque bloc.

La bibliothèque de polices

L’écran Modifier les styles > Typographie affiche la bibliothèque de polices, bien qu’elle ne porte pas ce nom explicite dans l’éditeur de site. Elle vous permet de gérer les polices et les caractères de plusieurs façons :

• Vous pouvez téléverser et gérer des polices de caractères personnalisées.
• Vous pouvez utiliser les polices Google Fonts directement dans WordPress.
• Créez des collections de polices en utilisant PHP.

Pour accéder à la bibliothèque de polices à partir de la section Typographie dans la colonne latérale de l’éditeur de site, cliquez sur l’icône Gérer les polices:

Ici, l’onglet Bibliothèque vous montre les polices de caractères enregistrées pour votre thème et indique celles qui sont actives :

En cliquant sur l’une d’entre elles, vous pouvez activer ou désactiver des polices individuelles :

Dans l’onglet Téléverser, vous utilisez une boîte de dialogue de téléversement par glisser-déposer pour installer vos propres polices aux formats TTF, WOFF, WOFF2 et OTF.

L’onglet Installer les polices se connecte à Google Fonts, ce qui vous permet d’exploiter cette bibliothèque dans votre thème. Notez que cette approche permet de télécharger et d’afficher les polices à partir de votre site, et non d’un CDN de Google:

Sélectionnez ici les polices que vous souhaitez installer dans la liste complète, puis cliquez sur le bouton Installer. Une fois que la notification de réussite s’affiche, ces polices apparaissent dans l’onglet Bibliothèque :

Cela vous permet d’utiliser les polices comme n’importe quelle autre sur votre site. Il ne vous reste plus qu’à les personnaliser en fonction de vos besoins.

Le cahier de style

L’un des dangers du choix et de la configuration des polices de caractères est que vous ne savez pas à quoi elles ressembleront en combinaison avec les schémas de couleurs, les mises en page et les formats. Le cahier de style est inestimable, car il vous permet de prévisualiser vos réglages de typographie dans différents éléments.

En cliquant sur l’icône de l’œil, vous ouvrirez le cahier de style, qui comporte cinq onglets :

• Texte : Cet onglet vous permet de travailler avec des paragraphes, des titres, des listes et d’autres éléments axés sur le texte.
• Médias : Ici, vous pouvez ajuster les images, les vidéos et les présentations audio.
• Conception : Cette section regroupe les facettes structurelles de la conception, telles que les colonnes, les séparateurs et les boutons.
• Widgets : Cet écran comporte deux éléments : les générations dynamiques, telles que les listes d’archives et de commentaires. Vous pouvez également travailler avec la barre de recherche, les icônes de réseaux sociaux et les nuages d’étiquettes.
• Thème : Cet écran se concentre sur les éléments de l’en-tête de votre site, tels que le titre, le slogan, la navigation et le logo.

Si vous cliquez sur un élément dans le cahier de style, vous disposez de plusieurs options dans la colonne latérale. Vous travaillez ici avec les réglages de typographie de chaque bloc plutôt qu’avec des éléments spécifiques :

Vous pouvez accéder aux mêmes écrans via la section Styles > Blocs de la page d’accueil de l’Éditeur de site. Quoi qu’il en soit, les options que vous voyez vous permettent de personnaliser la typographie (et d’autres éléments) de chaque bloc dans les moindres détails.

Réglage des options de typographie dans l’éditeur de site

Pour tous les blocs et éléments, vous disposez des mêmes options de base. Voici un aperçu de chaque option dans le panneau.

Type et taille de la police

Le menu déroulant Police est simple : choisissez la police que vous souhaitez appliquer à l’élément ou au bloc spécifique :

Les pré-réglages de taille sont les moins personnalisables dans l’Éditeur de site. Vous choisissez une taille dans une fourchette allant de Petit à Très Grand :

Si vous éditez theme.json, vous pouvez changer ces valeurs prédéfinies – mais pas à partir de l’éditeur du site. Le bouton Définir une taille personnalisée vous permet de définir une taille personnalisée à l’aide d’un ensemble d’unités de dimensionnement :

Il existe d’autres moyens de régler la typographie dans l’éditeur de site, y compris des méthodes pour lesquelles vous utilisez généralement les feuilles de style CSS.

Apparence, hauteur de ligne et espacement des lettres

Le menu déroulant Apparence semble simple : choisissez un poids de police dans une longue liste et il s’appliquera à votre texte. Cependant, vous ne disposerez pas toujours de toutes les polices disponibles pour chaque poids.

Nos tests montrent que WordPress ne filtre pas cette liste pour n’afficher que les polices disponibles. De plus, il appliquera une « correspondance la plus proche » si vous sélectionnez un poids sans police correspondante. Par exemple, nous utilisons Cardo Normal, Cardo Bold et Cardo Bold Italic pour notre site d’exemple. En choisissant Semi Bold, Bold, Extra Bold ou Black, vous n’utilisez que Cardo Bold :

La hauteur de ligne n’utilise pas de pré-réglages et équilibre votre choix de police, l’apparence et la taille. Cette valeur met plus d’espace entre chaque ligne et c’est souvent une implémentation pratique lorsque le texte semble agglutiné :

L’espacement des lettres est similaire et suit la coutume CSS qui consiste à s’ajouter à l’espacement naturel existant :

Comme pour le dimensionnement personnalisé des polices, vous pouvez sélectionner différentes unités de mesure. Le choix d’une valeur relative est souvent préférable. WordPress définit l’espacement des lettres avec une valeur CSS par défaut de « normal » Cela laisse le navigateur choisir la valeur et, d’après notre expérience, c’est l’idéal.

Il est courant d’utiliser de petites valeurs positives d’espacement des lettres – souvent pas plus de 0,12rem/em – et pratiquement pas d’espacement négatif.

La dernière série de choix – la casse des lettres – vous permet de choisir de mettre le texte en majuscules, en minuscules ou en majuscules de phrase. Vous pouvez également supprimer la casse. Cette option est très utile pour la cohérence des caractères, car vous n’avez pas besoin d’utiliser une casse spécifique lorsque vous créez du contenu.

Comment utiliser theme.json pour définir la typographie de votre thème WordPress ?

L’éditeur de site est idéal pour les utilisateurs du site qui n’ont pas de connaissances techniques. Le fichier theme.json vous permet de vous assurer que l’éditeur de site donne aux utilisateurs ce dont ils ont besoin pour personnaliser leurs sites. C’est le fichier de configuration qui est la base de développement de votre thème.

Nous n’entrerons pas dans la structure et le formatage de l’ensemble du fichier theme.json , mais nous verrons comment définir, paramétrer et appliquer la typographie à l’intérieur.

Comprendre la structure du fichier theme.json et définir les réglages globaux

Vous utilisez JSON pour définir tous les éléments de theme.json, y compris la typographie. L’élément typography s’imbrique dans l’objet settings de ce fichier. À partir de là, vous imbriquez d’autres éléments, propriétés et objets pour construire la typographie de votre site :

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
          "slug": "system-font",
          "name": "System Font"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "20px",
          "name": "Medium"
        }
      ]
    }
  }
}

Tous ces éléments suivent un schéma similaire. Les réglages par défaut – et les plus faciles à comprendre – sont les paramètres globaux. Ceux-ci s’imbriquent de manière simple, mais vous pouvez également définir des réglages de typographie pour des blocs individuels :

"styles": {
  "blocks": {
    "core/paragraph": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--primary)",
        "fontSize": "var(--wp--preset--font-size--medium)",
        "lineHeight": "1.5"
      }
    },
    "core/heading": {
      "typography": {
        "fontFamily": "var(--wp--preset--font-family--secondary)",
        "fontWeight": "700"
      }
    }
  }
}

Pour cela, vous utilisez la propriété blocks et un espace de noms spécifique pour chaque bloc que vous souhaitez cibler. Bien que cela ajoute deux niveaux d’imbrication supplémentaires, il n’y a pas d’alternative à cette approche. Quoi qu’il en soit, vous disposez d’un grand nombre de propriétés avec lesquelles vous pouvez jouer.

Enregistrement des polices

Vous disposez du même niveau de personnalisation de la typographie que dans l’interface de l’éditeur de site, voire plus dans certains cas. Au niveau de base, vous imbriquez votre pile de polices dans la propriété fontFamilies, puis vous lui donnez un nom et un slug :

• fontFamily correspond à la valeur CSS font-family et sera la pile de polices de caractères que vous souhaitez utiliser dans votre thème.
• name est ce que vous voyez dans l’éditeur de site lorsque vous sélectionnez une police, de sorte qu’elle sera lisible par l’homme.
• slug ajoute à une propriété CSS personnalisée en vue d’une utilisation ultérieure.

Pour les polices système, c’est très simple :

…
  "typography": {
    "fontFamilies": [
    {
      "name": "Primary",
      "slug": "primary",
      "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
    },
    {
      "name": "Secondary",
      "slug": "secondary",
      "fontFamily": "system-ui, sans-serif"
      }

Pour enregistrer des polices web personnalisées, vous devez utiliser la propriété fontFace et définir certains attributs :

…
"name": "Secondary",
"slug": "secondary",
"fontFamily": "'Open Sans', sans-serif",
  "fontFace": [
    {
      "fontFamily": "Open Sans",
      "fontWeight": "300 800", // This is a range of font weight values.
      "fontStyle": "normal", // This has to be a valid CSS font-style value.
      "fontStretch": "normal", // This also needs to be a valid CSS font-stretch value.
      "src": [ "file:./assets/fonts/open-sans.woff2" ] // This is an array of URLs for custom fonts, and can support multiple formats.
    },
…

Une fois les polices enregistrées, vous pouvez les sélectionner dans les différents menus déroulants de l’éditeur de site.

Notez qu’il existe plusieurs façons d’enregistrer des polices de caractères pour votre thème. Vous disposez de la bibliothèque de polices dans l’interface de l’éditeur de site, de la mise en file d’attente PHP typique et de l’extension Create Block Theme :

Il s’agit d’un modèle de base pour la construction d’un thème, mais il vous permet également d’enregistrer et de définir la typographie. Une fois que vous avez enregistré les polices de la manière qui vous convient le mieux (nous recommandons la bibliothèque de polices), vous pouvez commencer à vous intéresser au dimensionnement.

Définition de la taille des polices et des pré-réglages dans theme.json

Une autre tâche essentielle de la typographie consiste à définir la taille des polices. Cette fonction utilise la propriété fontSizes et vous permet de définir des pré-réglages pour l’éditeur de site :

"settings": {
  "typography": {
    "fontSizes": [
      {
        "slug": "small",
        "size": "12px",
        "name": "Small"
      },
      {
        "slug": "x-large",
        "size": "32px",
        "name": "Extra Large"
      }
    ]
  }
}

Comme pour les autres réglages de typographie, WordPress génère une propriété CSS personnalisée pour chaque préréglage en utilisant l’extension que vous avez fournie :

body {
--wp--preset--font-size--small: 12px;
--wp--preset--font-size--x-large: 32px;
}

WordPress désactive la typographie fluide par défaut, mais vous pouvez l’activer en utilisant des valeurs booléennes. C’est une option que vous pouvez définir à un niveau global..

{
  "version": 2,
    "settings": {
      "typography": {
        "fluid": true
      }
    }
}

…ou pour chaque pré-réglage et taille que vous définissez :

{
  "name": "Medium",
  "size": "1.25rem",
  "slug": "md",
  "fluid": {
    "min": "1rem",
    "max": "1.5rem"
  }
},

Les valeurs min et max vous permettent de déterminer la plage d’extensibilité pour chaque taille de police fluide que vous définissez.

Mise en œuvre de fonctions typographiques avancées

Le site theme.json offre une gamme complète d’options, à l’instar de ce que vous pouvez trouver dans l’Éditeur de site. Cela vous permet de personnaliser la typographie de votre site en fonction d’un ensemble de valeurs par défaut adaptées à votre thème :

"styles": {
  "typography": {
    "letterSpacing": "0.02em",
    "textTransform": "uppercase",
    "textDecoration": "underline",
    "lineHeight": "1.55rem",
    "fontStyle": "normal"
  }
}

Vous pouvez choisir d’activer ou de désactiver ces options. Chaque option prend une valeur booléenne, ce qui signifie que vous disposez également d’options de personnalisation pour l’éditeur de site. Vous pouvez effectuer quelques personnalisations qui vont au-delà des possibilités offertes par l’éditeur de site :

• customFontSize est activé par défaut et permet aux utilisateurs de saisir des tailles de police personnalisées – mais vous pouvez le désactiver si vous souhaitez contrôler étroitement les options disponibles.
• dropCap est activé par défaut, mais si vous l’activez, l’utilisateur a la possibilité d’activer les majuscules pour la lettre initiale de tous les blocs du paragraphe.
• textColumns active l’option « colonnes » pour tout texte à l’intérieur d’un bloc ; cette option est désactivée par défaut.
• writingMode permet de modifier l’orientation du texte dans l’éditeur de site. Vous pouvez donner aux utilisateurs le choix entre un texte horizontal et un texte vertical.

La portée de theme.json signifie que vous devriez y travailler en premier, en particulier lors de la création d’un thème. Les options de l’éditeur de site vous permettront, à vous ou à vos utilisateurs, d’affiner la typographie de WordPress.

Comment implémenter la typographie à l’aide de theme.json : un exemple pratique

FSE rend la conception et le développement avec WordPress plus facile que jamais. De plus, le processus général de sélection et d’implémentation de ces polices de caractères est en partie plus simple. Cela est dû en partie aux tendances en matière de design, mais les outils existent pour combler les lacunes lorsque vous n’avez pas de graphiste disponible pour vous aider.

Nous pouvons commencer par vos sélections de polices de caractères principales.

1. Associez des polices de caractères complémentaires

Ce n’est pas pour rien que le choix des polices et des caractères fait l’objet d’une étude approfondie. C’est parce qu’il s’agit d’une tâche délicate. Par exemple, vous devez tenir compte de l’image de marque du site, de son objectif et de ce que vous voulez transmettre.

Toutefois, grâce aux tendances actuelles en matière de conception, le travail est beaucoup plus simple. En effet, votre corps de texte peut utiliser des polices système, en particulier la police de caractères principale du système d’exploitation (OS). La seule tâche qui vous incombe est de choisir une police complémentaire.

Il ne s’agit pas d’un tutoriel sur l’association de polices de caractères, mais nous avons quelques conseils à vous donner :

• Les caractères OS pour le corps du texte sont généralement sans empattement. Vous devez donc rechercher une police avec empattement ou une autre police sans empattement qui soit différente, unique et qui se démarque.
• Restez simple et envisagez peut-être de n’utiliser la police OS que si elle s’intègre dans la conception.
• Testez différentes combinaisons afin de déterminer les polices qui s’accordent le mieux (et celles qui ne s’accordent pas).

Playfair Display, une police Google avec empattement, est un bon exemple de combinaison de polices pour un système :

Avec une paire de polices, vous devez tenir compte de leur taille, non seulement sur la page, mais aussi l’une par rapport à l’autre.

2. Trouvez la bonne taille absolue et relative

Le choix de la taille des polices est également crucial, car une mauvaise taille absolue peut ruiner votre UX/UI. C’est aussi un domaine dans lequel vous voudrez peut-être vous en tenir aux valeurs par défaut. Cependant, nous vous encourageons à expérimenter, car chaque paire aura son propre « espace » pour les polices de caractères.

Typescale est un excellent outil qui peut vous aider à créer la bonne typographie WordPress, quels que soient vos besoins :

L’un des meilleurs aspects de l’outil est le choix de l’échelle. Il fait essentiellement le travail pour vous en choisissant des tailles de police complémentaires. Nous choisissons ici l’échelle Major Third, avec un facteur de 1,2 et une taille de base de 16 px :

Dans le panneau du milieu, vous verrez les tailles obtenues pour chaque titre et chaque paragraphe et vous pourrez choisir parmi un certain nombre d’unités de mesure. Notez que Typescale vous permet également de modifier l’espacement des lettres, la hauteur de ligne, le poids de la police, etc. : tous ces éléments sont personnalisables à l’adresse theme.json.

3. Application des valeurs par défaut dans theme.json

Une fois que vous avez les bonnes polices de caractères et les bonnes tailles, vous pouvez les appliquer dans votre fichier theme.json. Voici un exemple de ce à quoi ressemble un fichier theme.json typique :

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif",
          "slug": "ubuntu-sans",
          "name": "Ubuntu Sans"
        },
        {
          "fontFamily": ""Playfair Display", serif",
          "slug": "playfair",
          "name": "Playfair Display"
        }
      ],
      "fontSizes": [
        {
          "slug": "small",
          "size": "13px",
          "name": "Small"
        },
        {
          "slug": "medium",
          "size": "16px",
          "name": "Medium"
        },
        {
          "slug": "large",
          "size": "20px",
          "name": "Large"
        },
        {
          "slug": "x-large",
          "size": "25px",
          "name": "Extra Large"
        },
        {
          "slug": "huge",
          "size": "31px",
          "name": "Huge"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--system)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.8"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        }
      },
      "core/heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--playfair)",
          "fontWeight": "700"
        }
      },
      "core/post-title": {
        "typography": {
          "fontSize": "var(--wp--preset--font-size--huge)"
        }
      }
    }
  }
}

Vous pouvez également appliquer ces polices de caractères à n’importe quel bloc, et même penser à styliser chaque titre d’une manière unique. Cherchez à créer un système de typographie WordPress cohérent et hiérarchique qui constituera la base du design de votre thème. Cela garantira un aspect cohérent sur l’ensemble de votre site, tandis que l’éditeur de site vous offrira une plus grande flexibilité et une meilleure personnalisation.

Le rôle de Kinsta dans le processus de développement de votre thème WordPress

L’hébergement haute performance de Kinsta offre de nombreuses possibilités pour vous aider à gérer un site web efficace et rapide. Cependant, il offre également des outils de développement robustes, y compris DevKinsta, un environnement de développement local qui fonctionne sur des conteneurs Docker.

Il est important de s’assurer que la typographie de votre site WordPress fonctionne avant de le mettre en ligne. C’est là que les environnements de staging de Kinsta seront essentiels. En particulier, vous utiliserez souvent la fonction de poussée sélective. Cela vous permet de pousser des fichiers et des dossiers spécifiques – n’importe quelle ressource que vous souhaitez – plutôt que de tout pousser en même temps.

De cette façon, vous pouvez apporter des modifications discrètes à la conception en poussant des fichiers particuliers (tels que theme.json). En outre, vous pouvez minimiser le risque d’endommager les parties du design de votre site dont vous êtes satisfait, et vous pouvez effectuer des mises à jour incrémentielles plus fréquentes de la typographie de votre site.

Résumé

FSE est en train de mûrir, et theme.json est au cœur de l’approche globale de l’édition WordPress. La typographie est un facteur essentiel, et WordPress fournit des outils de niveau développeur et un accès à des éléments qui nécessitaient auparavant des connaissances de base en CSS et en PHP.

Grâce à l’interface intuitive de l’éditeur de site et à l’adaptabilité de theme.json, vous pouvez créer une typographie qui améliore l’esthétique de votre site, résonne avec votre image de marque et donne un coup de pouce à l’expérience globale de l’utilisateur.

Nous aimerions connaître votre expérience de la typographie WordPress et savoir si FSE est pour vous la clé du succès. Faites-nous part de vos réflexions dans les commentaires ci-dessous.