Comment ajouter un balisage de schéma à WordPress par programmation

Publié: 2022-04-21

Voulez-vous ajouter du balisage de schéma à WordPress par programmation ? Si tel est le cas, vous pouvez utiliser un certain nombre d'extraits de code de différentes manières pour votre site Web WordPress.

Mais avant de voir comment les ajouter, regardons brièvement ce que vous entendez par balisage de schéma.

Qu'est-ce que le Schema Markup ?

Le balisage de schéma est une structure de données standardisée fournie par schema.org. Fondamentalement, il fournira des informations sur la page en cours aux moteurs de recherche . Ainsi, leurs robots d'exploration peuvent comprendre en quoi consiste le contenu et créer des extraits enrichis sur les résultats de recherche.

Les données contenues dans le schéma sont présentées sur une paire clé-valeur comme ["téléphone": "152234029"]. Il peut également avoir plusieurs niveaux d'héritage. Ils sont très importants pour augmenter le taux de clics (CTR) de votre site Web et sont également considérés comme l'une des meilleures pratiques de référencement.

De nombreux types de propriétés de clé peuvent être utilisés avec le schéma. Ils varient selon les données et les types de données basés sur des hiérarchies ouvertes et fermées. Visitez le site Web shcema.org pour découvrir que tous les types disponibles peuvent être utilisés actuellement.

Comment ajouter un balisage de schéma à WordPress par programmation ?

Nous avons parlé de la façon d'ajouter un schéma à WordPress à l'aide d'un plugin dans un article précédent. De même, nous avons déjà discuté d'autres façons d'ajouter un balisage de schéma à WordPress via le tableau de bord et les thèmes également.

Mais maintenant, nous allons apprendre comment obtenir le même résultat par programmation. En procédant de cette façon, votre site Web n'aura pas besoin de charger tout le code supplémentaire fourni par un plugin. Et vous n'ajouterez que le code dont votre site Web a besoin.

Afin d'inclure le schéma dans un élément de contenu, nous devons ajouter les balises de schéma à la sortie HTML de notre site Web. Nous pouvons modifier le code HTML de nos sites Web de plusieurs manières. Le meilleur moyen consiste à écraser les fichiers de modèle de thème sur le thème enfant.

Vous aurez besoin d'un thème enfant pour inclure les balisages de schéma par programmation. Donc, si vous n'en avez pas encore installé, allez-y et créez et installez un thème enfant. Vous pouvez même utiliser l'un des plugins de thèmes enfants pour le créer.

Vous pouvez ajouter du balisage de schéma à WordPress par programmation de deux manières principales :

  1. Ajouter un fichier JSON-LD sur head
  2. Ajouter un balisage de microdonnées à la sortie HTML

Les deux sont des méthodes valables, et vous pouvez librement utiliser celle qui s'adapte le mieux à vos besoins.

1. Ajouter le fichier JSON-LD

Un fichier JSON-LD est un type de format spécifique, basé sur JSON, et utilisé pour encoder les données liées. Comme cela se produit sur les fichiers JSON, il contient une liste de paires clé-valeur :

 {
    "téléphone": "152234029",
    "name": "Le nom",
    "adresse": "Johann Street N 433",
    "url": "https://QuadLayers.com",
    "priceRange": "19 - 90",
    "legalName": "QuadLayers",
    "@context": "http://schema.org",
    "@type": "Entreprise locale"
}

Comme vous pouvez le voir, même la syntaxe est très similaire à un fichier JSON.

Il existe plusieurs générateurs JSON-LD que vous pouvez utiliser afin d'obtenir le fichier qui s'adapte le mieux à vos besoins.

La prochaine étape consiste donc à imprimer ce code dans la section HTML <head> du site Web.

Nous pouvons utiliser la fonction suivante sur le fichier functions.php du thème enfant pour y parvenir.

Remarque : Avant de continuer, assurez-vous de sauvegarder également votre site Web. Nous modifierons les fichiers de base de votre site Web et toute modification non souhaitée de celui-ci pourrait entraîner d'autres problèmes.

 add_action('wp_head','QuadLayers_add_schema');
fonction QuadLayers_add_schema(){
echo '<script type="application/ld+json">
{
"téléphone": "152234029",
"name": "Le nom",
"adresse": "Johann Street N 433",
"url": "https://QuadLayers.com",
"priceRange": "19 - 90",
"legalName": "QuadLayers",
"@context": "http://schema.org",
"@type": "Entreprise locale"
}' ;
}

Vous pouvez voir comment le fichier JSON-LD est inclus dans les balises <script> . N'oubliez pas de mettre à jour le fichier .

Pour comprendre le fonctionnement du schéma, notez que l'exemple de code précédent ajoutera le JSON à toutes les pages d'un site Web. Ainsi, lorsqu'un moteur de recherche ou tout autre type de bot le lit, il sera défini comme un schéma valide pour toutes les pages où le script est présent. Dans ce cas, c'est tout le site Web.

Nous pouvons appliquer le code JSON à des pages spécifiques en appliquant une logique conditionnelle à notre fonction PHP. Mais le balisage de schéma peut également être inclus dans le code HTML interne de notre contenu, ce qui nous permet d'inclure des balisages complexes à un contenu très spécifique.

2. Ajouter un balisage de microdonnées au HTML

Suivant les tendances modernes, la méthode précédente est celle recommandée. Mais l'utilisation du balisage des microdonnées nous permettra d' intégrer le balisage du schéma directement sur les fichiers modèles .

Coller nos scripts sur le fichier functions.php du thème enfant fonctionne également très bien. Afin d'appliquer le bon schéma à chaque élément de contenu, nous finirions par avoir un morceau de code volumineux et complexe.

Donc, pour ajouter un balisage de microdonnées dans HTML, nous devons écraser les fichiers de modèle de votre site Web WordPress.

2.1. Ajouter un balisage de schéma aux publications WP

Dans cet exemple, notre thème enfant hérite du thème Twenty Twenty-One, donc le fichier que nous devons écraser est content-single.php . C'est le fichier dans lequel nous pouvons ajouter notre schéma directement sur la sortie HTML.

Ce fichier peut se trouver sous un nom ou un dossier différent sur certains thèmes.

Créez les dossiers nécessaires sur votre thème enfant (parties de modèle et contenu) et un nouveau fichier content-single.php dans le dossier de contenu.

 Thème enfant
/__template-parts
__/__teneur
__/__/__content-single.php

Copiez/collez tout le code du fichier content-single.php du thème parent.

Remplacer le fichier de modèle de publication

Le code que nous allons éditer est le suivant :

 <article <?php post_class(); ?>>

Ajout de la portée et du type de schéma comme l'extrait de code suivant.

 <article itemscope itemtype ="http://schema.org/Article" <?php post_class(); ?>>

Cela indique aux moteurs de recherche que le contenu de la balise HTML <article> est un type d'article.
Après avoir déclaré le type et la portée, nous pouvons utiliser certaines propriétés standard. Par exemple, en déclarant le titre du message comme nom de l'élément :

Code source:

 <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

Ajouter une propriété de nom :

 <?php the_title( '<h1 itemprop="name" class="entry-title">', '</h1>' ); ?>

De plus, nous pouvons utiliser la propriété clé articleBody pour marquer le contenu de nos messages.

Code source:

 <div class="entry-content">
<?php 

le contenu();

Ajout de la propriété articleBody :

 <div itemprop="articleBody" class="entry-content">
<?php
le contenu();

2.2. Ajout de balisage de schéma aux produits WooCommerce

De la même manière, nous pouvons écraser le fichier de modèle de produits WooCommerce afin d'inclure notre schéma.

Le fichier que nous devons écraser est le fichier content-single-product.php . Ce fichier doit se trouver dans un dossier WooCommerce dans le thème enfant. Si vous rencontrez des difficultés pour le trouver, assurez-vous également d'avoir correctement configuré WooCommerce.

 Thème enfant
__/woocommerce
__/__content-single-product.php

Effectuez le même processus que ci-dessus en créant un nouveau fichier à sa place.

Définissez la portée et le type de schéma sur le wrapper div principal :

 <div itemscope itemtype ="http://schema.org/Product" <?php wc_product_class( '', $product ); ?>>

Nous pouvons également utiliser la propriété "description" sur ce fichier :

 <div itemprop="description" class="summary entry-summary">

Cependant, afin d'ajouter plus de balises à nos produits, nous devrons écraser différents fichiers.

Par exemple, pour ajouter le prix des produits au schéma, créez un nouveau chemin sur les fichiers du thème enfant :

woocommerce/templates/single-product/price.php

 Thème enfant
__/woocommerce
__/__/mono-produit
__/__/__/prix.php

écraser les fichiers de modèle woocommerce

Après avoir copié le fichier price.php à sa place, modifiez-le comme suit :

Code source:

 <p class="<?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

Ajout d'un balisage :

 <p itemscope itemtype="https://schema.org/Offer" itemprop="price" class=" <?php echo esc_attr( apply_filters( 'woocommerce_product_price_class', 'price' ) ); ?>"><?php echo $product->get_price_html(); ?></p>

Notez que nous avons créé un nouvel article de type "Offre" pour définir le prix. C'est un indice pour comprendre comment nous pouvons imbriquer différents types d'éléments les uns dans les autres, en suivant la structure HTML d'origine.

Il existe d'autres fichiers que vous pouvez écraser afin d'inclure plus de balisage.

  • title.php
  • stock.php
  • review.php
  • rating.php
  • product-image.php

Conclusion

Cela nous amène à la fin de notre didacticiel sur la façon d'ajouter un balisage de schéma à WordPress par programme. Pour ce faire, vous avez besoin d'une compréhension de base du fonctionnement d'un schéma ainsi que de quelques connaissances en programmation.

Il est également très important de comprendre que toutes les propriétés et tous les types doivent correspondre à ceux définis sur le site Web schema.org. Cela inclut également les propriétés avec plusieurs niveaux d'héritage.

Pour résumer, vous pouvez ajouter un schéma à votre site Web de deux manières principales :

  • Ajouter un fichier JSON-LD sur head
  • Ajouter un balisage de microdonnées à la sortie HTML

L'ajout du fichier JSON-LD est une approche très simple et est considérée par la plupart des utilisateurs. Tout ce que vous avez à faire est d'imprimer le code JSON-LD dans la section <head> de votre site Web.

Cependant, l'utilisation de l'approche de balisage de microdonnées pour intégrer le balisage de schéma directement dans les fichiers modèles peut également s'avérer très utile pour vous. Le remplacement des fichiers de modèle peut vous aider à personnaliser le site Web avec encore plus de flexibilité si vous disposez des ressources nécessaires. Vous pouvez même ajouter le balisage de schéma à des éléments spécifiques de votre site Web, tels que des publications et des produits WooCommerce.

Alors pouvez-vous ajouter un balisage de schéma à votre site Web en utilisant ces extraits de code maintenant ? S'il vous plaît laissez-nous savoir si ce tutoriel a été utile ou non dans les commentaires.

En attendant, voici quelques autres articles qui pourraient vous intéresser et vous aider à améliorer votre site WordPress :

  • Comment créer un plugin WordPress personnalisé
  • Ajouter Telegram à WordPress (Guide complet)
  • Comment modifier le HTML dans WordPress