Integrarea fragmentelor Google Rich într-o temă WordPress

Suntem cu toții familiarizați cu modul în care Google prezintă rezultatele căutării - cu un titlu de pagină și un mic fragment de text pentru fiecare rezultat. Cu ajutorul Google Rich Snippets putem adăuga informații utile în fragmentul de rezultate al căutării pe web pentru al face să se evidențieze față de alte rezultate și, în cele din urmă, să atragă mai mulți vizitatori. În timp ce există deja pluginuri care oferă acest tip de funcționalitate în WordPress, există situații în care releu pe un plugin de la o terță parte nu este recomandat. În acest tutorial, vom integra formatul microdatelor în marcaje tematice WordPress pentru a afișa o rețetă culinară și a le face compatibile cu cerințele Google Rich Snippets.


Introducere în fragmentele Google Rich

Să aruncăm o privire la un exemplu de fragment îmbogățit:

Am evidențiat pentru dvs. fragmentele de informații suplimentare pe care le "citește" Google de pe pagină. După cum puteți vedea, fragmentele îmbogățite adaugă câteva informații foarte utile rezultatelor motorului de căutare. În cazul rețetelor, informația include o fotografie, o rețetă de rating, calorii și timpul total necesar pentru pregătirea vasului. Toate aceste informații suplimentare oferă utilizatorilor un sentiment mult mai bun pentru conținutul paginii și face mai probabil ca utilizatorii să facă clic pe link și să viziteze site-ul dvs..

Fragmentele pentru fiecare tip de conținut arată ușor diferit și furnizează informații relevante pentru tipul de conținut specific.

Modul de activare a fragmentelor îmbogățite?

Secretul din spatele fragmentelor bogate este structurat, marcajul semantic, care permite Google să înțeleagă conținutul paginii. Deci, practic, tot ce trebuie să faceți este să marcați în mod corespunzător conținutul dvs. pentru a descrie tipul particular de informații de pe site-ul dvs. web. În acest tutorial ne vom concentra pe o rețetă culinară, dar Google acceptă fragmente îmbogățite pentru un număr de alte tipuri de conținut, și anume:

  • opinii
  • oameni
  • Produse
  • Întreprinderi și organizații
  • Evenimente
  • Muzică

Pentru mai multe informații despre fragmente și tipuri de conținut îmbogățite, accesați Centrul de ajutor Google.

Când vine vorba de marcarea conținutului dvs., există trei formate de marcare pentru a alege:

  • microdate
  • Microformatele
  • RDFa

În acest tutorial, vom integra integrarea mărcilor microdate cu proprietățile schema.org, așa cum se recomandă în documentația cu fragmente Google. Merită menționat faptul că vocabularul schema.org este recunoscut nu numai de Google, ci și de alți furnizori de căutare majoră - Yahoo! și Microsoft.

Vizitați Schema.org pentru mai multe informații și exemple cu privire la implementarea acestuia în codul dvs..


Pasul 1 Crearea tipului de mesaj personalizat pentru rețete

Deoarece vom scrie o mulțime de coduri, vom crea un fișier separat numit reteta-config.php, să țineți toate fragmentele noastre și să le includeți utilizând funcția PHP include. Pentru a face acest lucru, deschideți functions.php fișier în directorul curent temă și lipiți următoarea bucată de cod în final:

 includ ( 'rețetă-config.php');

Acum creați un nou fișier numit reteta-config.php. Toate codurile care urmează urmează să fie adăugate la acel fișier.

Să începem prin crearea unui nou tip de post particularizat numit Rețetă.

 add_action ('init', 'register_my_culinary_recipe'); ('Recipes', 'culinary_recipes'), 'singular_name' => _x ('Rețetă', 'culinary_recipes'), 'add_new' => Adăugați noi "," culinary_recipes "), 'add_new_item' => _x ('Adăugați o nouă rețetă', 'culinary_recipes'), 'edit_item' => _x ('Rețete de căutare', 'culinary_recipes'), 'view_item' => _x ('View Recipe', 'culinary_recipes' _x ('Nici o reteta nu a fost gasita', 'culinary_recipes'), 'not_found_in_trash' => _x , 'culinary_recipes')); $ args = array ('etichete' => etichete $, 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 ister_post_type ('my_culinary_recipe', $ args); 

Acum, dacă mergeți la zona de administrare, ar trebui să existe o nouă opțiune în meniul numit "Rețete". Nu adăugați încă nicio rețetă, deoarece trebuie să adăugăm mai întâi câteva cutii meta personalizate.


Pasul 2 Adăugarea de metale personalizate

Pregatirea

Pentru că vom avea nevoie de câteva cutii meta personalizate de diferite tipuri pentru a stoca toate datele specifice rețetelor, voi utiliza gratuit librările personalizate și câmpurile pentru biblioteca WordPress pentru a le crea. Desigur, ați putea folosi orice alt script sau creați casete meta din nou, dacă preferați.

Wptuts + are un tutorial excelent pe tema Meta Boxe personalizabile reutilizabile

În primul rând, trebuie să descărcăm biblioteca de la GitHub. După cum sugerează autorul, vom stoca toate fișierele de script în 'lib / METABOX"dosar. Deci, începeți cu crearea "lib"din tema tematică sau copil, apoi adăugați"METABOX"dosarul din interiorul"lib“. Despachetați și încărcați toate fișierele descărcate în "/ Wp-content / teme / mea tema / lib / METABOX'.

În cele din urmă, trebuie să includeți fișierul init.php. În mod normal, îl includeți în dvs. functions.php fișier, dar o vom face în cadrul nostru reteta-config.php, deoarece aici stăm toate funcțiile specifice rețetelor.

 funcția 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);

După ce se termină, putem începe să definim căsuțe meta.

Definirea metalelor

Pentru a vă califica pentru Google Rich Snippets, nu este necesar să furnizați toate proprietățile incluse în specificație, deși fiecare tip de conținut are un minim necesar. În acest tutorial, vom include următoarele proprietăți:

  • Nume
  • recipeCategory
  • imagine
  • Descriere
  • ingrediente
  • instrucțiuni
  • recipeYield
  • Timp de pregatire
  • cookTime
  • timpul total
  • datePublished
  • autor

Rețineți că nu va trebui să creați casete meta personalizate pentru toate proprietățile. De exemplu, timpul total va fi calculat pe baza Timp de pregatire și cookTime.

Să adăugăm câteva cutii de meta personalizate, putem?

 $ prefix = 'mcr_'; // Prefix pentru toate câmpurile funcția mcr_create_metaboxes ($ meta_boxes) prefix global $; $ meta_boxes [] = array ('id' => 'recipe-data', 'title' => 'Rețete culinare', 'pages' => array ('my_culinary_recipe' ('TITLE - TEXT array (' name '=> __ (' Rețetă Titlu ',' culinary_recipes '),' id '= =' high ',' show_names '=> true,' fields ' > prefixul "$ name", "type" => "text",), // TIPUL RECEPȚIEI - TEXT ('name' => __ ('Rețetă Tip', 'culinary_recipes'), 'desc' => __ ("Tipul de fel de mâncare: de exemplu, aperitiv, entree, desert, etc.", "culinary_recipes"), 'id' => prefix "$", 'type' => 'text_medium' IMAGE UPLOAD array ('name' => 'Rețetă imagine', 'desc' => 'Imagine a antenei pregătite.', 'Id' => $ prefix. 'save_id' => false, // salvați ID-ul folosind true 'allow' => array ('url', 'attachment') // limita doar la atașamentele cu array ('attachment')), // SUMMARY - 'name' => __ ('Sumar', 'culinary_recipes'), 'desc' => __ (' X . "sum", "tip" => "text",), // INGREDIENTE - TEXTAREA array ('name' => __ ('Ingrediente', 'culinary_recipes' "DIRECTIONS - TEXTAREA array (" nume "=> __ (" Instrucțiuni ")," , 'culinary_recipes'), 'desc' => __ ('Puneți fiecare instrucțiune în linia de seapare', 'culinary_recipes'), 'id' => $ prefix. , "YIELD - TEXT matrix" ('Denumire' => __ ('Randament', 'culinary_recipes'), 'desc' id = 'prefix', 'tip' => 'text_medium'), // PREP TIME - TITLE array (' => __ ('Cât timp durează pregătirea', 'culinary_recipes'), 'type' => 'title', 'id' => prefixul prefixului 'prep_title'), // PREP TIME HOURS - ('name' => __ ('Hours', 'culinary_recipes'), 'id' => prefix "prep_time_hours" , 'tip' => 'număr', 'std' => '0'), // PREP TIMP MINUTES- număr de serie ('nume' => > prefixul $. 'prep_time_minutes', 'type' => 'număr', 'std' => '0',), // COOK TIME - TITLE array (' descris '=> __ (' Timp total de gătit, coacere etc. ',' culinary_recipes '),' type '=>' title ',' id '=> $ prefix. array ('nume' => __ ('Ore', 'culinary_recipes'), 'id' => prefix "cook_time_hours", 'type' => // cook_time_minutes ',' type '=>' numarul ',' std '=>' '' ' '0',))); returnați $ meta_boxes;  add_filter ('cmb_meta_boxes', 'mcr_create_metaboxes');

Cu această bucată de cod am creat o casetă meta numită "Reteta culinară", care se va afișa numai pe ecranul de editare a tipului de post Rețete.

Definițiile de câmp reale sunt stocate ca o matrice în secțiunea "câmpuri"proprietate. Să aruncăm o privire mai atentă:

 array ('nume' => __ ('Rezumat', 'culinary_recipes'), 'desc' => ',' type '=>' text ',),

Adăugarea unui câmp nou este la fel de simplă ca și copierea unuia dintre elementele matrice (prezentate mai sus) și modificarea valorilor pentru "Nume","id","desc' și 'tip“. Biblioteca metaboxelor și câmpurilor personalizate oferă o serie de tipuri de câmpuri predefinite și o metodă convenabilă pentru a vă defini propriile.

Pentru a facilita intrarea separată a orelor și minutelor pentru pregătirea și prepararea timpului, am definit propriul tip de câmp numit "număr“. Am folosit unul dintre noile tipuri de intrări ale HTML5 - numărul și am creat o funcție de validare simplă, exprimând tipul întreg pe valoarea furnizată de utilizator.

 add_action ('cmb_render_number', 'rrh_cmb_render_number', 10, 2); funcția rrh_cmb_render_number ($ field, $ meta) echo '''

', câmpul $ [' desc '],'

„; add_filter ('cmb_validate_number', 'rrh_cmb_validate_number'); funcția rrh_cmb_validate_number ($ new) return (int) $ new;

Pasul 3 Afișarea Rețetă

Acum suntem gata să scriem niște marcări. Am putea crea un fișier șablon separat pentru tipul de post personalizat și plasăm marcajul direct în șablonul respectiv. În schimb, vom pune toate marcajele în interiorul unei funcții și vom adăuga la conținutul mesajului continutul() filtru. Acest lucru este important, deoarece există multe pluginuri care adaugă un fel de conținut, de ex. butoanele social media, până la sfârșitul postării. În acest fel, ne asigurăm că toate ieșirile pluginului sunt afișate sub rețetă.

 funcția mcr_display_recipe ($ content) global $ post; $ recipe = "; dacă (is_singular ('my_culinary_recipe')) $ rețetă = = '
„; $ rețetă = '
„; $ rețetă = '

“. get_post_meta ($ post-> ID, 'mcr_name', true). '

„; $ rețetă = '“. get_post_meta ($ post-> ID, 'mcr_type', true). '„; $ rețetă = 'Randament: “. get_post_meta ($ post-> ID, 'mcr_yield', true). '„; $ rețetă = 'Timp de pregatire: „; $ rețetă = 'Durata gătitului: „; $ rețetă = 'Timpul total: „; $ rețetă = '
„; $ rețetă = '
„; $ rețetă = '“. get_post_meta ($ post-> ID, 'mcr_summary', true). '
„; $ rețetă = '

ingrediente:

“. mcr_list_items ( 'ingrediente'); $ rețetă = '

Directii:

“. mcr_list_items ( 'instrucțiuni'); $ rețetă = 'publicat pe „; $ rețetă = 'de „; $ rețetă = '
„; $ rețetă = '
„; returnează conținutul $. reteta $; add_filter ('the_content', 'mcr_display_recipe', 1);

Să trecem peste cod. În primul rând, tragem global $ postare obiect, care ne oferă acces la diferite informații utile despre afișarea postului.

Apoi folosim eticheta condiționată is_singular () pentru a verifica dacă un singur post de tip "my_culinary_recipe"se afișează în prezent. Acest lucru se datorează faptului că nu am creat un șablon separat pentru tipul nostru de post personalizat și astfel WordPress folosește cele mai generale single.php șablon (sau index.php dacă nu există single.php) pentru a afișa rețeta. Utilizarea dacă declarație ne asigurăm că marcajul rețetelor nu va fi afișat pe posturile obișnuite.

În cele din urmă, vom prelua datele de rețetă folosind get_post_meta () funcția și plasați-o în interiorul marcajului structurat în conformitate cu formatul microdatelor.

Funcțiile Helper

S-ar putea să observați că am folosit câteva funcții suplimentare - mcr_time (), mcr__total_time () și mcr_list_items () pentru a prelua și a pregăti datele pentru afișare. Hai să aruncăm o privire!

Proprietăți legate de timp (Timp de pregatire, cookTime și timpul total) se așteaptă valori în formatul de durată ISO 8601. Pentru a ține cont, ambele funcții legate de timp vor avea un format ca parametru și vor pregăti rezultatele în consecință.

 funcția mcr_time ($ type = 'prep', $ format = null) global $ post; $ ore = get_post_meta ($ post-> ID, 'mcr _'. $ tip.'_ time_hours ', true); $ minute = get_post_meta ($ post-> ID, 'mcr _'. $ tip.'_ time_minutes ', true); $ time = "; dacă ($ format == 'iso') if ($ ore> 0) $ time = 'PT' ($ ore = 0) if ($ ore == 1) $ time = $ $ $ time = 'PT'. $ minutes.'M '; h.“ ora '; altceva $ time = $ hours.' hrs '; dacă ($ minute> 0) $ timp. = $ minute. " mins '; altceva $ time = $ minutes.' mins '; returnați $ time;

mcr_time () funcția pregătește ieșirea pentru timpul de preparare și preparare, acceptă doi parametri:

  • tip $ (necesar) este tipul de timp pe care dorim să îl afișăm. Acceptă două valori -Prep' (Mod implicit) sau "bucătar'
  • format $ (Opțional) - indică faptul că ieșirea trebuie formatată în conformitate cu formatul de durată ISO 8601. Acceptă o singură valoare -izo'.
 funcția 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', adevărat); $ cook_minutes = get_post_meta ($ post-> ID, 'mcr_cook_time_minutes', true); $ total_minutes = ($ prep_hours + $ cook_hours) * 60 + $ prep_minute + $ cook_minute; $ ore = 0; $ minute = 0; dacă ($ total_minutes> = 60) $ ore = etaj ($ total_minutes / 60); $ minute = $ total_minutes - ($ ore * 60);  altceva $ minutes = $ total_minutes;  $ total_time = "; dacă ($ format == 'iso') if ($ ore> 0) $ total_time = 'PT'. = $ minute.'M '; altceva $ total_time =' PT '. $ minutes.'M'; altceva if ($ ore> 0) if ($ hours == 1) $ total_time = ore de $.“ oră "; altceva $ total_time = $ ore." hrs '; dacă ($ minute> 0) $ total_time. = $ minute. " mins '; altceva $ total_time = $ minute.' mins '; return $ total_time;

mcr_total_time () funcția calculează și pregătește ieșirea pentru timpul total de rețetă. Acceptă un singur parametru - format $, analogic cu format $ parametru în mcr_time () funcţie.

Ultima funcție helper afișează liste de articole - ingrediente sau instrucțiuni, în conformitate cu tip $ parametru.

 funcția mcr_list_items ($ type = 'ingrediente') global $ post; dacă get_post_meta ($ post-> ID, 'mcr_'. $ type, true)) $ get_items = get_post_meta ($ post-> ID, 'mcr_'. $ type, true); $ items = explode ("\ r", $ get_items); $ list = "; altceva return; dacă ($ type == 'ingredients') $ list. = '
    „; foreach (articolele $ ca element $) $ list. = '
  • ". decupare (element $). '
  • „; $ list. = '
„; elseif ($ type == 'instrucțiuni') $ list. = '
    „; foreach (articolele $ ca element $) $ list. = '
  1. ". decupare (element $). '
  2. „; $ list. = '
„; altceva $ list. = 'Tip de listă nevalid.'; a reveni lista de $;

Acum este momentul să adăugați conținut. Navigați la secțiunea Rețete din zona de administrare și adăugați o rețetă. Este posibil ca ieșirea să aibă nevoie de ceva stil, dar dacă vedeți postul, ar trebui să vedeți rețeta de mai jos conținut obișnuit.

Asta e! Singurul lucru rămas este de a verifica dacă marcajul nostru este corect cu ajutorul instrumentului de testare a fragmentelor bogate de la Google.

Aceasta este previzualizarea fragmentului bogat generat de marcajele noastre HTML:

Puteți testa marcajul dvs. furnizând fie un URL, fie un fragment de cod la instrumentul de testare.

Odată ce ați adăugat marcajul fragmentelor bogate, așteptați ca crawlerul Google să o descopere. Când Google observă noul marcaj, acesta ar trebui să înceapă să afișeze fragmente îmbogățite pentru site-ul dvs. web în rezultatele căutării. De asemenea, puteți să trimiteți un formular de solicitare, pentru a comunica Google despre fragmente îmbogățite pe site-ul dvs. Web, dar trebuie să le acordați mai mult timp.


Concluzie

În acest tutorial v-am arătat cum să integrați un format de microdate cu un vocabular schema.org pentru a afișa rețete culinare. Acest exemplu ar trebui să vă servească ca un plan pe care îl puteți utiliza pentru a permite fragmente îmbogățite pentru alte tipuri de conținut. Ați folosit Google Rich Snippets pentru orice în proiectele dvs.? Spuneți-ne în comentariile de mai jos.

Cod