Share
We kennen allemaal de manier waarop Google zoekresultaten presenteert - met een paginatitel en een klein tekstfragment voor elk resultaat. Met Google Rich Snippets kunnen we nuttige informatie toevoegen aan het fragment van het webzoekresultaat om het te onderscheiden van andere resultaten en uiteindelijk meer bezoekers te trekken. Hoewel er al plug-ins zijn die dit soort functionaliteit bieden in WordPress, zijn er situaties waarin het doorgeven van een externe plug-in niet aan te raden is. In deze zelfstudie gaan we het microdata-formaat integreren in WordPress-themaopmaak om een culinair recept weer te geven en compatibel te maken met de vereisten van Google Rich Snippets.
Laten we een voorbeeld van een rich snippet bekijken:
Ik heb voor u de fragmenten met aanvullende informatie gemarkeerd die Google "leest" vanaf de pagina. Zoals u ziet, voegen rich snippets een aantal echt nuttige informatie toe aan de resultaten van zoekmachines. In het geval van recepten bevat deze informatie een foto, receptclassificatie, calorieën en de totale tijd die nodig is om het gerecht te bereiden. Al deze aanvullende informatie geeft gebruikers veel meer inzicht in de inhoud van de pagina en maakt het waarschijnlijker dat gebruikers op de link klikken en uw website bezoeken.
De fragmenten voor elk inhoudstype zien er enigszins anders uit en bieden informatie die relevant is voor het specifieke inhoudstype.
Het geheim achter rich snippets is gestructureerde, semantische opmaak, waarmee Google de inhoud van de pagina kan begrijpen. Dus eigenlijk hoeft u alleen maar uw inhoud correct op te maken om het specifieke type informatie op uw website te beschrijven. In deze zelfstudie concentreren we ons op een culinair recept, maar Google ondersteunt rich snippets voor een aantal andere inhoudstypen, namelijk:
Ga naar het Helpcentrum van Google voor meer informatie over rich snippets en contenttypes.
Als het gaat om het markeren van uw inhoud, zijn er drie opmaakindelingen waaruit u kunt kiezen:
In deze zelfstudie integreren we de opmaak van microdata met de eigenschappen van schema.org, zoals aanbevolen in de documentatie van de rich snippets van Google. Het is vermeldenswaard dat het vocabulaire van schema.org niet alleen wordt herkend door Google, maar ook door andere grote zoekmachines - Yahoo! en Microsoft.
Ga naar Schema.org voor meer informatie en voorbeelden over hoe u het in uw code kunt implementeren.
Omdat we behoorlijk veel code gaan schrijven, zullen we een apart bestand maken met de naam recept-config.php, om al onze fragmenten op te slaan en deze op te nemen met behulp van de PHP-functie omvatten. Open hiervoor de functions.php bestand in uw huidige themamap en plak het volgende stukje code aan het einde:
include ( 'recept-config.php');
Maak nu een nieuw bestand met de naam recept-config.php. Alle code die volgt, moet aan dat bestand worden toegevoegd.
Laten we beginnen met het maken van een nieuw aangepast berichttype met de naam Recept.
Accentsconagua
add_action ('init', 'register_my_culinary_recipe'); function register_my_culinary_recipe () $ labels = array ('name' => _x ('Recepten', 'culinary_recipes'), 'singular_name' => _x ('Recept', 'culinary_recipes'), 'add_new' => _x (' Add New ',' culinary_recipes '),' add_new_item '=> _x (' Voeg nieuw recept toe ',' culinary_recipes '),' edit_item '=> _x (' Bewerk recept ',' culinary_recipes '),' new_item '=> _x ('New Recipe', 'culinary_recipes'), 'view_item' => _x ('View Recipe', 'culinary_recipes'), 'search_items' => _x ('Search Recipes', 'culinary_recipes'), 'not_found' => _x ('No Recepten gevonden', 'culinary_recipes'), 'not_found_in_trash' => _x ('Geen recepten gevonden in Trash', 'culinary_recipes'), 'parent_item_colon' => ", 'menu_name' => _x ('Recepten' , 'culinary_recipes')); $ args = array ('labels' => $ labels, 'public' => true, 'publicly_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 '=>' recipe ')); reg ister_post_type ('mijn_culinaire_recipe', $ args); Als u nu naar het admin-gedeelte gaat, zou er een nieuwe optie moeten zijn in het menu met de naam "Recepten". Voeg nog geen recepten toe, omdat we eerst een aantal aangepaste metaboxen moeten toevoegen.
Omdat we nogal wat aangepaste metaboxen van verschillende typen nodig hebben om alle receptspecifieke gegevens op te slaan, ga ik de gratis aangepaste metaboxen en velden voor de WordPress-bibliotheek gebruiken om ze te maken. Natuurlijk kunt u elk ander script gebruiken of meta-dozen helemaal zelf maken, als u dat wilt.
Wptuts + heeft een geweldige tutorial over het onderwerp Herbruikbare aangepaste metaboxen
Eerst moeten we de bibliotheek downloaden van GitHub. Zoals de auteur suggereert, slaan we alle scriptbestanden op in 'lib / Metabox'map. Dus begin met het maken van de 'lib'map in uw thema of kindthema, voeg dan de'Metabox'map binnen'lib'. Pak alle gedownloade bestanden uit en upload ze naar '/ Wp-content / themes / my-theme / lib / Metabox'.
Ten slotte moeten we het bestand opnemen init.php. Normaal zou je het opnemen in je functions.php bestand, maar we doen het in onze recept-config.php, want daar bewaren we alle receptspecifieke functies.
function 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); Als het klaar is, kunnen we beginnen met het definiëren van metaboxen.
Om in aanmerking te komen voor Google Rich Snippets hoeven we niet alle eigenschappen in de specificatie op te geven, hoewel elk inhoudstype een vereist minimum vereist. In deze zelfstudie gaan we de volgende eigenschappen opnemen:
naamrecipeCategorybeeldOmschrijvingingrediënteninstructiesrecipeYieldvoorbereidingstijdkooktijdtotale tijddatum gepubliceerdschrijverMerk op dat we geen aangepaste metadozen hoeven te maken voor alle eigenschappen. Bijvoorbeeld, totale tijd zal worden berekend op basis van voorbereidingstijd en kooktijd.
Laten we wat aangepaste metaboxen toevoegen, zullen wij?
$ prefix = 'mcr_'; // Voorvoegsel voor alle velden function mcr_create_metaboxes ($ meta_boxes) global $ prefix; $ meta_boxes [] = array ('id' => 'recept-data', 'title' => 'Culinair recept', 'pages' => array ('my_culinary_recipe'), 'context' => 'normaal', ' priority '=>' high ',' show_names '=> true,' fields '=> array (// TITLE - TEXT-array (' naam '=> __ (' Recept Title ',' culinary_recipes '),' id '= > $ voorvoegsel. 'naam', 'type' => 'tekst',), // RECEPTTYPE - TEXT-matrix ('naam' => __ ('Recepttype', 'culinaire_recipes'), 'desc' => __ ('Het type gerecht: bijvoorbeeld voorgerecht, voorgerecht, dessert, enz.', 'Culinaire_recipes'), 'id' => $ voorvoegsel. 'Type', 'type' => 'text_medium',), // IMAGE UPLOAD array ('naam' => 'Receptafbeelding', 'desc' => 'Afbeelding van het gerecht dat wordt voorbereid.', 'Id' => $ prefix. 'Image', 'type' => 'bestand', 'save_id' => false, // sla ID op met true 'allow' => array ('url', 'attachment') // beperk je tot alleen bijlagen met array ('attachment')) // SAMENVATTING - TEXT array ( 'naam' => __ ('Samenvatting', 'culinaire_recipes'), 'desc' => __ ('Een korte samenvatting die de schotel beschrijft.', 'culinaire_recipes'), 'id' => $ prefi x. 'summary', 'type' => 'text',), // INGREDIENTS - TEXTAREA array ('name' => __ ('Ingredients', 'culinary_recipes'), 'desc' => __ ('Zet elk ingrediënt in seaprate line. ',' culinary_recipes '),' id '=> $ voorvoegsel.' ingredients ',' type '=>' textarea ',), // ROUTEBESCHRIJVING - TEXTAREA array (' name '=> __ (' Instructions ' , 'culinaire_recipes'), 'desc' => __ ('Zet elke instructie in de regel seaprate.', 'culinary_recipes'), 'id' => $ prefix. 'instructions', 'type' => 'textarea',) , // YIELD - TEXT-array ('naam' => __ ('Opbrengst', 'culinaire_recipes'), 'desc' => __ ('Voer het aantal porties of aantal personen in dat wordt geserveerd', 'culinaire_recipes'), ' id '=> $ prefix.' yield ',' type '=>' text_medium ',), // PREP TIME - TITLE array (' naam '=> __ (' Prep tijd ',' culinary_recipes '),' desc ' => __ ('Hoelang duurt het voordat het klaar is?', 'Culinaire_recipes'), 'type' => 'titel', 'id' => $ prefix. 'Prep_title'), // PREP TIME HOURS - NUMBER array ('naam' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'prep_time_hours' , 'type' => 'nummer', 'std' => '0',), // PREP TIME MINUTES-NUMBER array ('naam' => __ ('Minutes', 'culinary_recipes'), 'id' = > $ voorvoegsel. 'prep_time_minutes', 'type' => 'number', 'std' => '0',), // COOK TIME - TITLE array ('naam' => __ ('Kooktijd', 'culinaire_recipes'), ' desc '=> __ (' Totale kooktijd, bakken etc. ',' culinaire_recipes '),' type '=>' title ',' id '=> $ prefix.' coking_title '), // KOOKTIJD - TEKST array ('naam' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'cook_time_hours', 'type' => 'number', 'std' => '0',), // KOOKTIJD - TEXT-array ('naam' => __ ('Minutes', 'culinary_recipes'), 'id' => $ prefix. 'Cook_time_minutes', 'type' => 'number', 'std' => '0',))); return $ meta_boxes; add_filter ('cmb_meta_boxes', 'mcr_create_metaboxes'); Met dit stuk code hebben we een metabox gemaakt met de naam 'Culinair recept' die alleen op het bewerkingsscherm van het berichttype Recepten wordt weergegeven.
De eigenlijke velddefinities worden opgeslagen als een array in de 'velden' eigendom. Laten we dat van dichterbij bekijken:
array ('naam' => __ ('Summary', 'culinary_recipes'), 'desc' => __ ('Een korte samenvatting die de schotel beschrijft.', 'culinary_recipes'), 'id' => $ prefix. ',' type '=>' tekst ',), Het toevoegen van een nieuw veld is net zo eenvoudig als het kopiëren van een van de array-elementen (hierboven weergegeven) en het wijzigen van waarden voor 'naam','ID kaart','desc'en'type'. De bibliotheek Custom Metaboxes and Fields biedt een aantal voorgedefinieerde veldtypen en een handige methode om uw eigen veldtypen te definiëren.
Om afzonderlijke invoer van uren en minuten voor koken en voorbereidingstijd mogelijk te maken, heb ik ons eigen veldtype ''aantal'. Ik heb een van HTML5's nieuwe invoertypen gebruikt - nummer, en een eenvoudige validatiefunctie gemaakt, waarbij integer type op de door de gebruiker geleverde waarde is gegoten.
add_action ('cmb_render_number', 'rrh_cmb_render_number', 10, 2); functie rrh_cmb_render_number ($ field, $ meta) echo '''', $ field [' desc '],'
'; add_filter ('cmb_validate_number', 'rrh_cmb_validate_number'); function rrh_cmb_validate_number ($ new) return (int) $ new; Nu zijn we eindelijk klaar om wat opmaak te schrijven. We zouden een apart sjabloonbestand kunnen maken voor ons aangepaste berichttype en de opmaak direct in die sjabloon plaatsen. In plaats daarvan plaatsen we alle markeringen in een functie en voegen we deze toe aan de inhoud van de post de inhoud() filter. Dit is belangrijk, omdat er veel plug-ins zijn die een soort inhoud toevoegen, b.v. knoppen voor sociale media, tot het einde van het bericht. Op deze manier zorgen we ervoor dat alle plug-in-uitvoer onder het recept wordt weergegeven.
functie mcr_display_recipe ($ content) global $ post; $ recipe = "; if (is_singular ('my_culinary_recipe')) $ recipe. = ''; $ recipe. = ''; $ recipe. = ''. get_post_meta ($ post-> ID, 'mcr_name', true). '
'; $ recipe. = '. ')
'; $ Recipe. = 'Recept type: '; $ recipe. = 'Opbrengst: '. get_post_meta ($ post-> ID, 'mcr_yield', true). ''; $ recipe. = 'Voorbereidingstijd: '; $ recipe. = 'Kooktijd: '; $ recipe. = 'Totale tijd: '; $ recipe. = ''; $ recipe. = '
'; $ recipe. = ''. get_post_meta ($ post-> ID, 'mcr_summary', true). '
'; $ recipe. = 'ingrediënten:
'. mcr_list_items ( 'ingrediënten'); $ recipe. = 'Routebeschrijving:
'. mcr_list_items ( 'instructies'); $ recipe. = 'gepubliceerd op '; $ recipe. = 'door '. get_the_author (). ''; $ recipe. = ''; $ recipe. = ''; retourneer $ inhoud. $ Recept; add_filter ('the_content', 'mcr_display_recipe', 1); Laten we de code doornemen. Eerst trekken we aan de wereld $ bericht object, dat ons toegang geeft tot verschillende nuttige informatie over het bericht dat wordt weergegeven.
Vervolgens gebruiken we de voorwaardelijke tag is_singular () om te controleren of een enkele post van het type 'my_culinary_recipe'wordt momenteel weergegeven. Dit komt omdat we geen afzonderlijke sjabloon voor ons aangepaste berichttype hebben gemaakt en dus WordPress het meer algemene gebruikt single.php sjabloon (of index.php als er geen is single.php) om het recept weer te geven. De ... gebruiken als verklaring we zorgen ervoor dat recept markup niet zal worden weergegeven op reguliere berichten.
Ten slotte halen we de receptgegevens op met behulp van de get_post_meta () functie en plaats deze in de opmaak gestructureerd volgens het microdata-formaat.
U merkt misschien dat ik een aantal extra functies heb gebruikt - mcr_time (), mcr__total_time () en mcr_list_items () om de gegevens op te halen en voor te bereiden voor weergave. Laten we kijken!
Tijd gerelateerde eigenschappen (voorbereidingstijd, kooktijd en totale tijd) verwacht waarden in ISO 8601-duurindeling. Om daar rekening mee te houden, zullen beide tijdgerelateerde functies een parameterformaat hebben en de uitvoer dienovereenkomstig voorbereiden.
functie mcr_time ($ type = 'prep', $ format = null) global $ post; $ hours = get_post_meta ($ post-> ID, 'mcr _'. $ type .'_ time_hours ', true); $ notulen = get_post_meta ($ post-> ID, 'mcr _'. $ type .'_ time_minutes ', waar); $ time = "; if ($ format == 'iso') if ($ hours> 0) $ time = 'PT'. $ hours.'H '; if ($ minutes> 0) $ time. = $ minutes.'M '; else $ time =' PT '. $ minutes.'M'; else if ($ hours> 0) if ($ hours == 1) $ time = $ uur.' uur '; else $ time = $ hours.' hrs '; if ($ minutes> 0) $ time. = $ minutes.' mins '; else $ time = $ minutes.' mins '; return $ time;
De mcr_time () functie bereidt de uitvoer voor op kook- en voorbereidingstijden, hij accepteert twee parameters:
Type $ (verplicht) is het type tijd dat we willen weergeven. Accepteert twee waarden - 'prep' (standaard) of 'koken'$ formaat (Optioneel) - geeft aan dat de uitvoer moet worden geformatteerd volgens het ISO 8601-duurformaat. Accepteert slechts één waarde - 'iso'.functie 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; $ uren = 0; $ minuten = 0; if ($ total_minutes> = 60) $ hours = floor ($ total_minutes / 60); $ minutes = $ total_minutes - ($ hours * 60); else $ minutes = $ total_minutes; $ total_time = "; if ($ format == 'iso') if ($ hours> 0) $ total_time = 'PT'. $ hours.'H '; if ($ minutes> 0) $ total_time. = $ minutes.'M '; else $ total_time =' PT '. $ minutes.'M'; else if ($ hours> 0) if ($ hours == 1) $ total_time = $ uur.' uur '; else $ total_time = $ hours.' hrs '; if ($ minutes> 0) $ total_time. = $ minutes.' mins '; else $ total_time = $ minutes.' mins '; return $ total_time;
De mcr_total_time () functie berekent en bereidt de uitvoer voor voor de totale receptuur. Accepteert slechts één parameter - $ formaat, analoog aan de $ formaat parameter in de mcr_time () functie.
De laatste hulpfunctie geeft een lijst met items weer - ingrediënten of instructies, volgens de Type $ parameter.
functie 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 = ontploffen ("\ r", $ get_items); $ list = "; else return; if ($ type == 'ingredients') $ list. = 'Nu is het tijd om wat inhoud toe te voegen. Navigeer naar het gedeelte Recepten in het beheergebied en voeg een recept toe. De uitvoer heeft misschien een beetje stijl nodig, maar als je de post bekijkt, zou je het recept moeten zien onder de reguliere inhoud.
Dat is het! Het enige dat overblijft, is controleren of onze markeringen correct zijn met de rich snippet testing tool van Google.
Dit is het rich snippet-voorbeeld dat is gegenereerd met onze HTML-markup:
U kunt uw markup testen door een URL of een codefragment in de testtool in te voeren.
Zodra u markeringen voor rich snippets heeft toegevoegd, wacht u tot de Google-crawler deze ontdekt. Wanneer Google de nieuwe markup opmerkt, moet deze in de zoekresultaten beginnen met het weergeven van rich snippets voor uw website. U kunt ook een aanvraagformulier indienen om Google over rich snippets op uw website te vertellen, maar u moet het eerst wat tijd geven.
In deze tutorial heb ik je laten zien hoe je een microdata-formaat kunt integreren met een schema.org vocabulaire om culinaire recepten weer te geven. Dit voorbeeld dient u als een blauwdruk die u kunt gebruiken om rich snippets in te schakelen voor andere inhoudstypen. Heeft u Google Rich Snippets gebruikt voor alles in uw projecten? Laat het ons weten in de comments hieronder.
