Share
Nous connaissons tous la manière dont Google présente les résultats de recherche: un titre de page et un extrait de texte pour chaque résultat. Avec Google Rich Snippets, nous pouvons ajouter des informations utiles à l’extrait de résultat de recherche Web afin de le distinguer des autres résultats et d’attirer davantage de visiteurs. Bien que certains plugins fournissent déjà ce type de fonctionnalité dans WordPress, il est parfois déconseillé de faire appel à un plugin tiers. Dans ce didacticiel, nous allons intégrer le format de microdonnées dans le balisage de thème WordPress pour afficher une recette culinaire et la rendre compatible avec les exigences de Google Rich Snippets..
Jetons un coup d'oeil à l'exemple d'un extrait riche:
J'ai mis en évidence pour vous les extraits d'informations supplémentaires que Google "lit" sur la page. Comme vous pouvez le constater, les extraits enrichis ajoutent des informations très utiles aux résultats des moteurs de recherche. Dans le cas de recettes, ces informations incluent une photo, le classement de la recette, les calories et le temps total nécessaire pour préparer le plat. Toutes ces informations supplémentaires donnent aux utilisateurs une meilleure idée du contenu de la page et les incitent davantage à cliquer sur le lien et à visiter votre site Web..
Les extraits de code pour chaque type de contenu sont légèrement différents et fournissent des informations pertinentes pour le type de contenu spécifique..
Le secret derrière les extraits enrichis est un balisage sémantique structuré qui permet à Google de comprendre le contenu de la page. Donc, en gros, tout ce que vous avez à faire est de baliser correctement votre contenu pour décrire le type particulier d’informations sur votre site Web. Dans ce didacticiel, nous allons nous concentrer sur une recette culinaire, mais Google prend en charge les extraits enrichis pour un certain nombre d'autres types de contenu, à savoir:
Pour plus d'informations sur les extraits enrichis et les types de contenu, consultez le centre d'aide Google..
Pour baliser votre contenu, vous avez le choix entre trois formats de balisage:
Dans ce didacticiel, nous allons intégrer le balisage de microdonnées aux propriétés schema.org, comme recommandé dans la documentation de Google Rich Snippets. Il est à noter que le vocabulaire schema.org est reconnu non seulement par Google, mais également par les principaux fournisseurs de recherche - Yahoo! et Microsoft.
Visitez Schema.org pour plus d'informations et des exemples sur la façon de l'implémenter dans votre code..
Comme nous allons écrire beaucoup de code, nous allons créer un fichier séparé appelé recipe-config.php, pour contenir tous nos extraits et les inclure à l'aide de la fonction PHP comprendre. Pour ce faire, ouvrez le functions.php fichier dans votre répertoire de thème actuel et collez le code suivant à la fin:
Accentsconagua
include ('recipe-config.php'); Maintenant, créez un nouveau fichier appelé recipe-config.php. Tout le code qui suit devrait être ajouté à ce fichier.
Commençons par créer un nouveau type de message personnalisé appelé recette.
add_action ('init', 'register_my_culinary_recipe'); function register_my_culinary_recipe () $ labels = array ('name' => _x ('Recipes', 'recettes_cuisine' '),' nom_s singulier '=> _x (' Recette ',' recettes_ culinaires '),' add_new '=> _x (' Add New ',' culinary_recipes '),' add_new_item '=> _x (' Ajouter une recette ',' culinary_recipes '),' edit_item '=> _x (' Edit Recipe ',' culinary_recipes '),' new_item '=> _x ('New Recipe', 'culinary_recipes'), 'view_item' => _x ('Voir la recette', 'culinary_recipes'), 'search_items' => _x ('Recherche de recettes', 'culinary_recipes'), 'not_found' => _x ('Aucune recette trouvée', 'culinary_recipes'), 'not_found_in_trash' => _x ('Aucune recette trouvée dans la corbeille', 'culinary_recipes'), 'parent_item_colon' => ", 'menu_name' => _x ('Recipes' , 'culinary_recipes')); $ args = array ('labels' => $ labels, 'public' => true, 'public_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus '=> true,' exclude_from_search '=> false,' hierarchical '=> false,' has_archive '=> true,' rewrite '=> array (' slug '=>' recette ')); reg ister_post_type ('my_culinary_recipe', $ args); Maintenant, si vous allez dans la zone d'administration, il devrait y avoir une nouvelle option dans le menu appelée "Recettes". N'ajoutez pas de recettes pour l'instant, car nous devons d'abord ajouter des méta-boîtes personnalisées..
Parce que nous aurons besoin de plusieurs boîtes à méta personnalisées de différents types pour stocker toutes les données spécifiques à une recette, je vais utiliser la bibliothèque gratuite de boîtes à méta et de champs personnalisés pour WordPress pour les créer. Bien sûr, vous pouvez utiliser n’importe quel autre script ou créer des méta-boîtes à partir de rien, si vous préférez..
Wptuts + propose un excellent didacticiel sur les boîtes méta personnalisées réutilisables.
Premièrement, nous devons télécharger la bibliothèque à partir de GitHub. Comme l'auteur le suggère, nous allons stocker tous les fichiers de script dans 'lib / metabox'dossier. Alors commencez par créer le 'lib'dossier dans votre thème ou thème enfant, puis ajoutez le'metabox'dossier à l'intérieur'lib'. Décompressez et téléchargez tous les fichiers téléchargés dans '/ wp-content / themes / mon-thème / lib / metabox'.
Enfin, nous devons inclure le fichier init.php. Normalement, vous l'incluez dans votre functions.php déposer mais nous le ferons dans notre recipe-config.php, puisque c'est là que nous stockons toutes les fonctions spécifiques de la recette.
fonction be_initialize_cmb_meta_boxes () if (! class_exists ('cmb_Meta_Box')) require_once ('lib / metabox / init.php'); add_action ('init', 'be_initialize_cmb_meta_boxes', 9999); Une fois que c'est fait, nous pouvons commencer à définir des boîtes à méta.
Pour pouvoir bénéficier de Google Rich Snippets, nous n'avons pas besoin de fournir toutes les propriétés incluses dans la spécification, bien que chaque type de contenu ait un minimum requis. Dans ce tutoriel, nous allons incorporer les propriétés suivantes:
prénomrecetteCatégorieimagela descriptionIngrédientsinstructionsrecipeYieldtemps de préparationtemps de cuissontemps totalDate publiéeauteurNotez qu'il ne sera pas nécessaire de créer des boîtes à méta personnalisées pour toutes les propriétés. Par exemple, temps total sera calculé sur la base temps de préparation et temps de cuisson.
Ajoutons des méta-boîtes personnalisées, devons-nous?
$ prefix = 'mcr_'; // Préfixe pour tous les champs function mcr_create_metaboxes ($ meta_boxes) global $ prefix; $ meta_boxes [] = array ('id' => 'recipe-data', 'title' => 'Recette culinaire', 'pages' => array ('my_culinary_recipe'), 'context' => 'normal', ' priority '=>' high ',' show_names '=> true,' fields '=> array (// TITLE - TEXT array (' name '=> __ (' Titre de recette ',' recette_cuellette '),' id '= > $ prefix. 'name', 'type' => 'text',), // TYPE DE RECETTE - TEXTE tableau ('name' => __ ('Type de recette', 'recettes_cuallaires'), 'desc' => __ ('Le type de plat: par exemple, apéritif, entrée, dessert, etc.', 'recettes-culinaires'), 'id' => $ préfixe. 'Type', 'type' => 'text_medium',), // Tableau IMAGE UPLOAD ('name' => 'Image de recette', 'desc' => 'Image du plat en cours de préparation.', 'Id' => $ prefix. 'Image', 'type' => 'fichier', 'save_id' => false, // save ID utilisant true 'allow' => array ('url', 'attachment') // limite uniquement les pièces jointes avec array ('attachment')), // SUMMARY - TEXT array ( 'name' => __ ('Summary', 'culinary_recipes'), 'desc' => __ ('Un bref résumé décrivant le plat.', 'culinary_recipes'), 'id' => $ prefi X . 'summary', 'type' => 'text',), // INGRÉDIENTS - Tableau TEXTAREA ('nom' => __ ('Ingrédients', 'recettes culinaires'), 'desc' => __ ('Mettez chaque ingrédient dans lignes seaprate. ',' culinary_recipes '),' id '=> $ préfixe.' ingredients ',' type '=>' textarea ',), // DIRECTIONS - TEXTAREA array (' name '=> __ (' Instructions ' , 'culinary_recipes'), 'desc' => __ ('Mettez chaque instruction dans la ligne seaprate.', 'culinary_recipes'), 'id' => $ prefix. 'instructions', 'type' => 'textarea',) , // YIELD - TEXT array ('name' => __ ('Rendement', 'recettes_cuisine'), 'desc' => __ ('Entrez le nombre de portions ou le nombre de personnes servies', 'recettes_cuisine'), ' id '=> $ préfixe.' rendement ',' type '=>' text_medium ',), // tableau PREP TIME - TITLE (' name '=> __ (' temps préparatoire ',' recettes culinaires '),' desc ' => __ ('Combien de temps faut-il pour préparer?', 'Recettes_cuiques'), 'type' => 'titre', 'id' => $ préfixe. 'Titre_prépare'), // Tableau PREPER TIME HOURS - NUMBER ('name' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'prep_time_hours' , 'type' => 'numéro', 'std' => '0',) // Tableau PREP TIME MINUTES- NUMBER ('name' => __ ('Minutes', 'culinary_recipes'), 'id' = > préfixe $. 'prep_time_minutes', 'type' => 'numéro', 'std' => '0',), // TEMPS DE CUISSON - Tableau TITLE ('nom' => __ ('Temps de cuisson', 'recettes_cuallaires'), ' desc '=> __ (' Temps total de cuisson, cuisson au four, etc. ',' recettes_cu-culinaires '),' type '=>' titre ',' id '=> $ préfixe.' coking_title '), // TEMPS DE CUISSON - TEXTE array ('name' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'cook_time_hours', 'type' => 'number', 'std' => '0',), // TEMPS DE CUISSON - tableau TEXT ('name' => __ ('Minutes', 'recettes_cuallaires'), 'id' => préfixe $. 'Cook_time_minutes', 'type' => 'nombre', 'std' => "0",))); return $ meta_boxes; add_filter ('cmb_meta_boxes', 'mcr_create_metaboxes'); Avec ce morceau de code, nous avons créé une méta-boîte appelée "Recette culinaire" qui apparaît uniquement sur l'écran d'édition de type de recette.
Les définitions de champ réelles sont stockées sous forme de tableau dans le 'des champs' propriété. Regardons de plus près:
array ('name' => __ ('Summary', 'culinary_recipes'), 'desc' => __ ('Un court résumé décrivant le plat.', 'culinary_recipes'), 'id' => $ prefix .'summary ',' type '=>' text ',), L'ajout d'un nouveau champ est aussi simple que de copier l'un des éléments du tableau (voir ci-dessus) et de modifier les valeurs pour 'prénom','identifiant','desc' et 'type'. La bibliothèque Custom Metaboxes and Fields propose plusieurs types de champs prédéfinis et une méthode pratique pour définir vos propres.
Pour faciliter la saisie séparée des heures et des minutes pour le temps de cuisson et de préparation, j'ai défini notre propre type de champ appelé 'nombre'. J'ai utilisé l'un des nouveaux types d'entrée HTML5 - nombre, et créé une fonction de validation simple, transmettant un type entier sur la valeur fournie par l'utilisateur..
add_action ('cmb_render_number', 'rrh_cmb_render_number', 10, 2); fonction rrh_cmb_render_number ($ field, $ meta) echo '','', $ field [' desc '],'
'; add_filter ('cmb_validate_number', 'rrh_cmb_validate_number'); fonction rrh_cmb_validate_number ($ new) return (int) $ new; Nous sommes enfin prêts à écrire du balisage. Nous pourrions créer un fichier de modèle séparé pour notre type d'article personnalisé et placer le balisage directement dans ce modèle. Au lieu de cela, nous allons mettre tout le balisage dans une fonction et l'ajouter au contenu de l'article avec le contenu() filtre. Ceci est important, car de nombreux plugins ajoutent un contenu, par exemple. boutons de médias sociaux, à la fin du post. De cette façon, nous nous assurons que toutes les sorties du plug-in sont affichées sous la recette..
function mcr_display_recipe ($ content) global $ post; $ recipe = "; if (is_singular ('my_culinary_recipe')) $ recipe. = ''; $ recette. = ''; $ recette. = ''. get_post_meta ($ post-> ID, 'nom_cré', true). '
'; $ recette. = '. ')
'; $ Recipe. = 'Type de recette: '; $ recette. = 'Rendement: '. get_post_meta ($ post-> ID, 'mcr_yield', true). ''; $ recette. = 'Temps de préparation: '; $ recette. = 'Temps de cuisson: '; $ recette. = 'Temps total: '; $ recette. = ''; $ recette. = '
'; $ recette. = ''. get_post_meta ($ post-> ID, 'mcr_summary', true). '
'; $ recette. = 'Ingrédients:
'. mcr_list_items ('ingrédients'); $ recette. = 'Instructions:
'. mcr_list_items ('instructions'); $ recette. = 'Publié le '; $ recette. = 'par '. get_the_author (). ''; $ recette. = ''; $ recette. = ''; retourne $ contenu. $ recette; add_filter ('the_content', 'mcr_display_recipe', 1); Passons sur le code. Tout d'abord, nous tirons le global $ post objet, qui nous donne accès à diverses informations utiles sur le message affiché.
Ensuite, nous utilisons la balise conditionnelle is_singular () vérifier si un seul post du type 'my_recinary_recipe'est actuellement affiché. C’est parce que nous n’avons pas créé de modèle séparé pour notre type de message personnalisé. WordPress utilise donc le modèle plus général. single.php modèle (ou index.php s'il n'y a pas single.php) pour afficher la recette. En utilisant le si déclaration, nous nous assurons que le balisage de recette ne sera pas affiché sur les messages réguliers.
Enfin, nous récupérons les données de la recette en utilisant le get_post_meta () fonction et placez-le à l'intérieur du balisage structuré selon le format de microdonnées.
Vous remarquerez peut-être que j'ai utilisé des fonctions supplémentaires - mcr_time (), mcr__total_time () et mcr_list_items () pour récupérer et préparer les données pour l'affichage. Nous allons jeter un coup d'oeil!
Propriétés temporelles (temps de préparation, temps de cuisson et temps total) attendent des valeurs au format de durée ISO 8601. Pour tenir compte de cela, nos deux fonctions liées au temps prendront un format en tant que paramètre et prépareront la sortie en conséquence..
function mcr_time ($ type = 'prep', $ format = null) global $ post; $ hours = get_post_meta ($ post-> ID, 'mcr _'. $ type .'_ time_hours ', true); $ minutes = get_post_meta ($ post-> ID, 'mcr _'. $ type .'_ time_minutes ', true); $ time = "; if ($ format == 'iso') if ($ heures> 0) $ time = 'PT'. $ hours.'H '; if ($ minutes> 0) $ time. = $ minutes.'M '; else $ time =' PT '. $ minutes.'M'; else if ($ hours> 0) if ($ hours == 1) $ time = $ heures.' hour '; else $ time = $ hours.' hrs '; if ($ minutes> 0) $ time. = $ minutes.' mins '; else $ time = $ minutes.' minutes '; return $ time;
le mcr_time () La fonction prépare la sortie pour les temps de cuisson et de préparation, elle accepte deux paramètres:
$ type (Champs obligatoires) est le type de temps que nous voulons afficher. Accepte deux valeurs - 'préparation' (défaut) ou 'cuisinier'$ format (optionnel) - indique que la sortie doit être formatée selon le format de durée ISO 8601. Accepte une seule valeur - 'iso'.function mcr_total_time ($ format = null) global $ post; $ prep_hours = get_post_meta ($ post-> ID, 'mcr_prep_time_hours', true); $ prep_minutes = get_post_meta ($ post-> ID, 'mcr_prep_time_minutes', true); $ cook_hours = get_post_meta ($ post-> ID, 'mcr_cook_time_hours', true); $ cook_minutes = get_post_meta ($ post-> ID, 'mcr_cook_time_minutes', true); $ total_minutes = ($ prep_hours + $ cook_hours) * 60 + $ prep_minutes + $ cook_minutes; $ heures = 0; $ minutes = 0; if ($ total_minutes> = 60) $ hours = sol ($ total_minutes / 60); $ minutes = $ total_minutes - ($ heures * 60); else $ minutes = $ total_minutes; $ total_time = "; si ($ format == 'iso') si ($ hours> 0) $ total_time = 'PT'. $ hours.'H '; si ($ minutes> 0) $ total_time. = $ minutes.'M '; else $ total_time =' PT '. $ minutes.'M'; autrement if ($ hours> 0) if ($ hours == 1) $ total_time = $ heures. hour '; else $ total_time = $ hours.' hrs '; if ($ minutes> 0) $ total_time. = $ minutes.' mins '; else $ total_time = $ minutes.' minutes '; return $ total_time;
le mcr_total_time () La fonction calcule et prépare la sortie pour le temps total de la recette. Accepte un seul paramètre - $ format, analogue à la $ format paramètre dans le mcr_time () une fonction.
La dernière fonction d’aide affiche des listes d’articles - ingrédients ou instructions, en fonction des $ type paramètre.
function mcr_list_items ($ type = 'ingredients') global $ post; if (get_post_meta ($ post-> ID, 'mcr_'. $ type, true)) $ get_items = get_post_meta ($ post-> ID, 'mcr_'. $ type, true); $ items = explode ("\ r", $ get_items); $ list = "; else return; if ($ type == 'ingredients') $ list. = 'Il est maintenant temps d'ajouter du contenu. Naviguez jusqu'à la section Recettes dans la zone d'administration et ajoutez une recette. La sortie peut nécessiter un certain style, mais si vous affichez le message, vous devriez voir la recette ci-dessous contenu normal.
C'est tout! Il ne reste plus qu'à vérifier si notre balisage est correct avec l'outil de test des extraits enrichis de Google..
Voici l'aperçu des extraits enrichis généré à partir de notre balise HTML:
Vous pouvez tester votre balisage en fournissant une adresse URL ou un extrait de code à l'outil de test..
Une fois que vous avez ajouté le balisage des extraits enrichis, attendez que le robot d'exploration Google le découvre. Lorsque Google remarque le nouveau balisage, il devrait commencer à afficher des extraits enrichis pour votre site Web dans les résultats de recherche. Vous pouvez également envoyer un formulaire de demande pour informer Google des extraits enrichis de votre site Web, mais vous devez d'abord lui donner du temps..
Dans ce tutoriel, je vous ai montré comment intégrer un format de microdonnées à un vocabulaire schema.org pour afficher des recettes culinaires. Cet exemple devrait vous servir de modèle que vous pouvez utiliser pour activer les extraits enrichis pour d'autres types de contenu. Avez-vous utilisé Google Rich Snippets pour quelque chose dans vos projets? Faites-nous savoir dans les commentaires ci-dessous.
