Share
Vi är alla bekanta med hur Google presenterar sökresultat - med en sidtitel och en liten textbit för varje resultat. Med Google Rich Snippets kan vi lägga till användbar information i webbsökresultatet snippet för att få det att sticka ut från andra resultat och till slut locka till fler besökare. Även om det redan finns plugins som tillhandahåller denna typ av funktionalitet i WordPress, finns det situationer när det är inte tillrådligt att vidarebefordra på en tredjeparts plugin. I denna handledning kommer vi att integrera microdata-formatet i WordPress-tematypen för att visa ett kulinariskt recept och göra det förenligt med Googles riktiga krav.
Låt oss ta en titt på ett exempel på ett rikt utdrag:
Jag har markerat för dig de utdrag av ytterligare information som Google "läser" från sidan. Som du kan se, lägger rika snippets några väldigt användbar information till sökmotorns resultat. Vid recept ska informationen innehålla ett foto, receptens betyg, kalorier och den totala tiden som krävs för att laga maträtten. All denna extra information ger användarna mycket bättre känsla av innehållet på sidan och gör det mer troligt att användarna kommer att klicka på länken och besöka din webbplats.
Snippen för varje innehållstyp ser lite annorlunda ut och ger information som är relevant för den specifika innehållstypen.
Hemligheten bakom rika utdrag är strukturerad, semantisk markering, som gör det möjligt för Google att förstå sidans innehåll. Så i grund och botten är allt du behöver göra korrekt markera ditt innehåll för att beskriva den specifika typen av information på din webbplats. I denna handledning kommer vi att fokusera på ett kulinariskt recept, men Google stöder rika utdrag för ett antal andra innehållstyper, nämligen:
Mer information om riktiga utdrag och innehållstyper finns i hjälpcentret för Google.
När det gäller att markera ditt innehåll finns det tre markupformat att välja mellan:
I den här handledningen integrerar vi mikrodata-markup med schema.org-egenskaper, vilket rekommenderas i dokumentationen från Google Rich Snippets. Det är värt att notera att schema.org-ordförrådet är erkänt inte bara av Google utan även av andra stora sökleverantörer - Yahoo! och Microsoft.
Besök Schema.org för mer information och exempel på hur du implementerar det i din kod.
Eftersom vi kommer att skriva ganska mycket kod skapar vi en separat fil som heter recept-config.php, att hålla alla våra utdrag och inkludera det med hjälp av PHP-funktionen inkludera. För att göra det, öppna functions.php filen i din nuvarande temakatalog och klistra in följande kodstycke i slutet:
innefattar ( 'recept-config.php');
Skapa nu en ny fil som heter recept-config.php. All kod som följer ska läggas till den filen.
Låt oss börja med att skapa en ny anpassad posttyp som heter Recept.
Accentsconagua
add_action ('init', 'register_my_culinary_recipe'); funktionen register_my_culinary_recipe () $ labels = array ('name' => _x ('Recept', 'culinary_recipes'), 'singular_name' => _x ('Recept', 'culinary_recipes'), 'add_new' => _x Lägg till ny ',' culinary_recipes '),' add_new_item '=> _x (' Lägg till nytt recept ',' culinary_recipes '),' edit_item '=> _x (' Rediger recept ',' culinary_recipes '),' new_item '=> _x ('Nytt recept', 'culinary_recipes'), 'view_item' => _x ('Visa recept', 'culinary_recipes'), 'search_items' => _x ('Sökrecept', 'culinary_recipes'), 'not_found' => _x ('Inga recept hittades', 'culinary_recipes'), 'not_found_in_trash' => _x ('Inga recept hittades i papperskorgen', 'culinary_recipes'), 'parent_item_colon' => ", 'menu_name' => _x , 'culinary_recipes')); $ args = array ('etiketter' => $ etiketter, '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 '=> sant,' rewrite '=> array (' slug '=>' recept ')) ister_post_type ('my_culinary_recipe', $ args); Nu om du går till adminområdet bör det finnas ett nytt alternativ i menyn som heter "Recept". Lägg inte till några recept ännu, eftersom vi måste lägga till några anpassade meta-rutor först.
Eftersom vi behöver en hel del anpassade metakasser av olika typer för att lagra alla receptspecifika data, kommer jag att använda de fria anpassade metakassorna och fälten för WordPress-biblioteket för att skapa dem. Naturligtvis kan du använda något annat skript eller skapa metakassor från början, om du föredrar det.
Wptuts + har en bra handledning om ämnet Reusable Custom Meta Boxes
Först måste vi ladda ner biblioteket från GitHub. Som författaren föreslår lagrar vi alla skriptfiler i "lib / Metabox' mapp. Så börja med att skapa "lib'mapp i ditt tema eller barn tema, lägg sedan till'Metabox"mapp inuti"lib'. Packa upp och ladda upp alla nedladdade filer till "/ Wp-content / themes / my-tema / lib / Metabox'.
Slutligen måste vi inkludera filen init.php. Normalt skulle du inkludera det i din functions.php fil men vi gör det i vår recept-config.php, eftersom det är där vi lagrar alla receptspecifika funktioner.
funktion 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); När det är klart kan vi börja definiera metakasser.
För att kvalificera oss för Google Rich Snippets behöver vi inte tillhandahålla alla egenskaper som ingår i specifikationen, även om varje innehållstyp har ett obligatoriskt minimum. I denna handledning kommer vi att införliva följande egenskaper:
namnrecipeCategorybildbeskrivningIngredienserinstruktionerrecipeYieldförberedelsedagstillagningstidtotal tiddatePublishedförfattareObservera att vi inte behöver skapa egna metakassor för alla egenskaper. Till exempel, total tid kommer att beräknas baserat på förberedelsedags och tillagningstid.
Låt oss lägga till några anpassade metakasser, ska vi?
$ prefix = 'mcr_'; // Prefix för alla fält funktion mcr_create_metaboxes ($ meta_boxes) global $ prefix; $ meta_boxes [] = array ('my_culinary_recipe'), 'context' => 'normal', '' recept '', 'title' => 'Culinary Recept' prioritet '=>' high ',' show_names '=> true,' fields '=> array (// TITLE - TEXT array (' namn '=> __ (' Recept Titel ',' Culinary_recipes '),' id ' > $ prefix. 'namn', 'typ' => 'text'), // RECIPE TYPE - TEXT array ('namn' => __ ('Recept Type', 'Culinary_recipes'), 'desc' => __ ('Typ av maträtt: till exempel aptitretare, entree, dessert etc.', 'culinary_recipes'), 'id' => $ prefix. 'Typ', 'typ' => 'text_medium' IMAGE UPLOAD array ('namn' => 'Recept Image', 'desc' => 'Bild av maträtten som är förberedd.', 'Id' => $ prefix. 'Bild', 'typ' => 'fil' 'save_id' => false, // spara ID med true 'allow' => array ('url', 'attachment') // gräns för bara bilagor med array ('attachment')), // SUMMARY - TEXT array 'name' => __ ('Summary', 'Culinary_recipes'), 'desc' => __ ('En kort sammanfattning som beskriver skålen', 'culinary_recipes'), 'id' => $ prefi x. 'summary', 'type' => 'text'), // INGREDIENTER - TEXTAREA array ('name' => __ ('Ingredienser', 'Culinary_recipes'), 'desc' => __ ('Sätt varje ingrediens i ingrediens ',' typ '=>' textarea '), // DIRECTIONS - TEXTAREA array (' name '=> __ (' Instruktioner ' , 'culinary_recipes'), 'desc' => __ ('Sätt varje instruktion i sjökortet.', 'culinary_recipes'), 'id' => $ prefix. 'instruktioner', 'typ' => 'textarea' , // YIELD - TEXT array ('name' => __ ('Yield', 'Culinary_recipes'), 'desc' => __ ('Ange antal portioner eller antal personer som serveras', 'Culinary_recipes' id '=> $ prefix.' yield ',' type '=>' text_medium '), // PREP TIME - TITLE array (' namn '=> __ (' Prep time ',' culinary_recipes '),' desc ' => __ ('Hur lång tid tar det att förbereda?', 'Culinary_recipes'), 'typ' => 'titel', 'id' => $ prefix. 'Prep_title'), // PREP TIME HOURS - NUMBER array ('name' => __ ('Hours', 'Culinary_recipes'), 'id' => $ prefix. 'prep_time_hours' , 'typ' => 'nummer', 'std' => '0'), // PREP TIME MINUTES- NUMBER array ('namn' => __ ('Minuter', 'Culinary_recipes'), 'id' > $ prefix. 'prep_time_minutes', 'typ' => 'nummer', 'std' => '0'), // COOK TIME - TITLE array ('namn' => __ ('Cooking time', 'culinary_recipes') ' desc '=> __ (' Total tid för matlagning, bakning etc. ',' culinary_recipes '),' typ '=>' titel ',' id '=> $ prefix.' coking_title '), // KOKTID - TEXT array ('name' => __ ('Hours', 'Culinary_recipes'), 'id' => $ prefix. 'cook_time_hours', 'type' => 'nummer', 'std' => '0' // COOKING TIME - TEXT array ('name' => __ ('Minutes', 'Culinary_recipes'), 'id' => $ prefix. 'Cook_time_minutes', 'typ' => 'nummer', 'std' => '0',)))); returnera $ meta_boxes; add_filter ('cmb_meta_boxes', 'mcr_create_metaboxes'); Med denna kod har vi skapat en metabox som heter "Culinary Recipe" som bara kommer att visas på skärmen Uppdatera posttyp.
De faktiska fältdefinitionerna lagras som en array i "fält' fast egendom. Låt oss ta en närmare titt:
array ('name' => __ ('Sammanfattning', 'culinary_recipes'), 'desc' => __ ('En kort sammanfattning som beskriver skålen.', 'culinary_recipes'), 'id' => $ prefix. ',' typ '=>' text ',), Att lägga till ett nytt fält är lika enkelt som att kopiera ett av matriselementen (visas ovan) och ändra värden för "namn','id','desc"och"typ'. Biblioteket Custom Metaboxes and Fields erbjuder ett antal fördefinierade fälttyper och en bekväm metod för att definiera din egen.
För att underlätta separat inmatning av timmar och minuter för kock och förberedelsetid definierade jag vår egen fälttyp som heter "siffra'. Jag använde en av HTML5: s nya ingångstyper - nummer, och skapade en enkel valideringsfunktion, kasta heltals typ på värdet som användaren levererade.
add_action ('cmb_render_number', 'rrh_cmb_render_number', 10, 2); funktion rrh_cmb_render_number ($ fält, $ meta) echo '''', $ fält [' desc '],'
'; add_filter ('cmb_validate_number', 'rrh_cmb_validate_number'); funktion rrh_cmb_validate_number ($ new) return (int) $ new; Nu är vi äntligen redo att skriva några markeringar. Vi kan skapa en separat mallfil för vår anpassade posttyp och placera markeringen direkt i den mallen. I stället lägger vi all markering inuti en funktion och lägger till den i postinnehållet med innehållet() filtrera. Detta är viktigt, eftersom det finns många plugins som lägger till något slags innehåll, t.ex. sociala medier knappar, till slutet av posten. På detta sätt ser vi till att alla pluginutgångar visas under receptet.
funktion mcr_display_recipe ($ content) global $ post; $ recept = "; om (is_singular ('my_culinary_recipe')) $ recept = = ''; $ recept. = ''; $ recept. = ''. get_post_meta ($ post-> ID, 'mcr_name', true). '
'; $ recept. = '. ')
'; $ Recept. = 'Recept typ: '; $ recept. = 'Avkastning: '. get_post_meta ($ post-> ID, 'mcr_yield', true). ''; $ recept. = 'Förberedelsedags: '; $ recept. = 'Tillagningstid: '; $ recept. = 'Total tid: '; $ recept. = ''; $ recept. = '
'; $ recept. = ''. get_post_meta ($ post-> ID, 'mcr_summary', true). '
'; $ recept. = 'Ingredienser:
'. mcr_list_items ( 'ingredienser'); $ recept. = 'Vägbeskrivning:
'. mcr_list_items ( 'instruktioner'); $ recept. = 'publicerad på '; $ recept. = 'av '. get_the_author (). ''; $ recept. = ''; $ recept. = ''; returnera $ innehåll. $ Recept; add_filter ('the_content', 'mcr_display_recipe', 1); Låt oss komma över koden. För det första drar vi den globala $ post objekt, vilket ger oss tillgång till olika användbara uppgifter om posten som visas.
Då använder vi den villkorliga taggen is_singular () för att kontrollera om ett enda inlägg av typen 'my_culinary_recipe'visas för närvarande. Detta beror på att vi inte skapade en separat mall för vår anpassade posttyp och sålunda använder WordPress den mer generella single.php mall (eller index.php om det inte finns något single.php) för att visa receptet. Använda om uttalande vi ser till att receptmarkeringen inte kommer att visas på vanliga inlägg.
Slutligen hämtar vi receptdata med hjälp av get_post_meta () funktionen och placera den inuti uppställningen strukturerad enligt mikrodataformatet.
Du kanske märker att jag använde några ytterligare funktioner - mcr_time (), mcr__total_time () och mcr_list_items () att hämta och förbereda data för visning. Låt oss ta en titt!
Tidsrelaterade egenskaper (förberedelsedags, tillagningstid och total tid) förväntar sig värden i ISO 8601-varaktighetsformat. För att ta hänsyn till det, kommer båda våra tidsrelaterade funktioner att ta ett format som en parameter och förbereda utmatningen i enlighet därmed.
funktion mcr_time ($ type = 'prep', $ format = null) global $ post; $ hours = get_post_meta ($ post-> ID, 'mcr _'. $ typ.'_ time_hours ', true); $ minutes = get_post_meta ($ post-> ID, 'mcr _'. $ typ.'_ time_minutes ', true); $ time = '; if ($ format ==' iso ') om ($ timmar> 0) $ time =' PT '. $ hours.'H' $ minuter.'M '; annat $ time =' PT '. $ minutes.'M'; annat om ($ timmar> 0) om ($ timmar == 1) $ time = $ timmarna.' timme '; annars $ time = $ hours.' timmar '; om ($ minuter> 0) $ time. = $ minutes.' min; ' else $ time = $ minutes.' minuter '; returnera $ time;
De mcr_time () funktionen förbereder utgång för kock och förberedelsestider, accepterar den två parametrar:
$ typ (nödvändig) är den typ av tid vi vill visa. Accepterar två värden - 'prep' (standard) eller "kock'$ format (valfri) - indikerar att utgången ska formateras enligt ISO 8601-varaktighetsformat. Accepterar bara ett värde - 'iso'.funktion 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; $ timmar = 0; $ minuter = 0; om ($ total_minutes> = 60) $ hours = floor ($ total_minutes / 60); $ minuter = $ total_minutes - ($ timmar * 60); annat $ minutes = $ total_minutes; $ total_time = "; om ($ format == 'iso') om ($ timmar> 0) $ total_time = 'PT'. $ hours.'H '; om ($ minutes> 0) $ total_time. = $ minutes.'M '; else $ total_time =' PT '. $ minutes.'M'; annat om ($ timmar> 0) om ($ timmar == 1) $ total_time = $ timmar.' timme '; annat $ total_time = $ timmar.' timmar '; om ($ minuter> 0) $ total_time. = $ minutes.' minuter '; annat $ total_time = $ minuter.' minuter '; returnera $ total_time;
De mcr_total_time () funktionen beräknar och förbereder utgången för receptets totala tid. Accepterar endast en parameter - $ format, analog med $ format parameter i mcr_time () fungera.
Den sista hjälpenfunktionen visar listor över objekt - ingredienser eller instruktioner, enligt $ typ parameter.
funktion mcr_list_items ($ type = 'ingredienser') global $ post; om (get_post_meta ($ post-> ID, 'mcr_'. $ typ, true)) $ get_items = get_post_meta ($ post-> ID, 'mcr_'. $ typ, true); $ items = explodera ("\ r", $ get_items); $ list = "; else return; om ($ type == 'ingredienser') $ list. = 'Nu är det dags att lägga till lite innehåll. Navigera till avsnittet Recept i administrationsområdet och lägg till ett recept. Utgången kan behöva någon styling, men om du tittar på inlägget bör du se receptet under vanligt innehåll.
Det är allt! Det enda kvar som är att kontrollera om vår markering är korrekt med det rika testverktyget från Google.
Det här är den förhandsgranska förhandsgranskningen som genereras från vår HTML-markering:
Du kan testa din markering genom att leverera antingen en URL eller en kodbit till testverktyget.
När du har lagt till rik snippets-markup vänta du på Google sökroboten för att upptäcka den. När Google märker den nya markeringen bör den börja visa riktiga utdrag för din webbplats i sökresultaten. Du kan också skicka in ett formulär, för att berätta för Google om rika utdrag på din webbplats, men du borde ge det lite tid först.
I denna handledning visade jag dig hur man integrerar ett mikrodataformat med en schema.org-ordförråd för att visa kulinariska recept. Detta exempel ska tjäna dig som en ritning som du kan använda för att aktivera rika utdrag för andra innehållstyper. Har du använt Google Rich Snippets för något i dina projekt? Låt oss veta i kommentarerna nedan.
