Share
Conosciamo tutti il modo in cui Google presenta i risultati di ricerca, con un titolo di pagina e un piccolo frammento di testo per ogni risultato. Con i rich snippet di Google possiamo aggiungere informazioni utili allo snippet dei risultati di ricerca web per farlo risaltare rispetto agli altri risultati e in definitiva attirare più visitatori. Sebbene esistano già plug-in che offrono questo tipo di funzionalità in WordPress, ci sono situazioni in cui l'inoltro su un plug-in di terze parti non è consigliabile. In questo tutorial, integreremo il formato dei microdati nel markup del tema WordPress per visualizzare una ricetta culinaria e renderla compatibile con i requisiti di Google Rich Snippets.
Diamo un'occhiata a un esempio di un rich snippet:
Ho evidenziato per te i frammenti di informazioni aggiuntive che Google "legge" dalla pagina. Come puoi vedere, i rich snippet aggiungono alcune informazioni davvero utili ai risultati dei motori di ricerca. In caso di ricette, le informazioni includono una foto, la valutazione della ricetta, le calorie e il tempo totale necessario per preparare il piatto. Tutte queste informazioni aggiuntive danno agli utenti un senso molto migliore del contenuto della pagina e rendono più probabile che gli utenti facciano clic sul link e visitino il tuo sito Web.
I frammenti di ogni tipo di contenuto sembrano leggermente diversi e forniscono informazioni pertinenti al tipo di contenuto specifico.
Il segreto dietro i rich snippet è strutturato, markup semantico, che consente a Google di comprendere il contenuto della pagina. Quindi, in pratica, tutto ciò che devi fare è contrassegnare correttamente i tuoi contenuti per descrivere il particolare tipo di informazioni sul tuo sito web. In questo tutorial ci concentreremo su una ricetta culinaria, ma Google supporta i rich snippet per una serie di altri tipi di contenuti, vale a dire:
Per ulteriori informazioni su rich snippet e tipi di contenuti, visita il Centro assistenza di Google.
Quando si tratta di contrassegnare i tuoi contenuti, ci sono tre formati di markup tra cui scegliere:
In questa esercitazione, integreremo il markup dei microdati con le proprietà schema.org, come consigliato nella documentazione dei rich snippet di Google. Vale la pena notare che il vocabolario di schema.org è riconosciuto non solo da Google, ma anche da altri principali provider di ricerca - Yahoo! e Microsoft.
Visita Schema.org per ulteriori informazioni ed esempi su come implementarlo nel tuo codice.
Dato che scriveremo un bel po 'di codice, creeremo un file separato chiamato ricetta-config.php, per contenere tutti i frammenti e includerlo usando la funzione PHP includere. Per farlo, apri il functions.php file nella directory del tema corrente e incollare il seguente pezzo di codice alla fine:
include ( 'ricetta-config.php');
Ora crea un nuovo file chiamato ricetta-config.php. Tutto il codice che segue dovrebbe essere aggiunto a quel file.
Iniziamo creando un nuovo tipo di messaggio personalizzato chiamato Ricetta.
Accentsconagua
add_action ('init', 'register_my_culinary_recipe'); function register_my_culinary_recipe () $ labels = array ('name' => _x ('Recipes', 'culinary_recipes'), 'singular_name' => _x ('Recipe', 'culinary_recipes'), 'add_new' => _x (' Aggiungi nuovo ',' culinary_recipes '),' add_new_item '=> _x (' Aggiungi nuova ricetta ',' culinary_recipes '),' edit_item '=> _x (' Modifica ricetta ',' culinary_recipes '),' new_item '=> _x ('Nuova ricetta', 'culinary_recipes'), 'view_item' => _x ('Visualizza ricetta', 'culinary_recipes'), 'search_items' => _x ('Cerca ricette', 'culinary_recipes'), 'not_found' => _x ('No Recipes found', 'culinary_recipes'), 'not_found_in_trash' => _x ('Nessuna ricetta trovata nel cestino', 'culinary_recipes'), 'parent_item_colon' => ", 'menu_name' => _x ('Ricette' , '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 '=>' recipe ')); reg ister_post_type ('my_culinary_recipe', $ args); Ora, se vai nell'area di amministrazione, dovrebbe esserci una nuova opzione nel menu chiamato "Ricette". Non aggiungere ancora nessuna ricetta, perché prima dobbiamo aggiungere alcuni meta box personalizzati.
Poiché per memorizzare tutti i dati specifici della ricetta saranno necessari diversi meta box personalizzati di vari tipi, per creare tali file utilizzerò gratuitamente le caselle e i campi Meta personalizzati per la libreria WordPress. Ovviamente potresti usare qualsiasi altro script o creare meta-box da zero, se preferisci.
Wptuts + ha un ottimo tutorial sull'argomento delle Meta Box riutilizzabili personalizzate
Per prima cosa, dobbiamo scaricare la libreria da GitHub. Come suggerisce l'autore, memorizzeremo tutti i file di script in 'lib / METABOX' cartella. Quindi inizia con la creazione dell 'lib'cartella nel tuo tema o tema figlio, quindi aggiungi'METABOX'cartella interna'lib'. Disimballare e caricare tutti i file scaricati su/ Wp-content / themes / my-tema / lib / METABOX'.
Infine, dobbiamo includere il file init.php. Normalmente lo includeresti nel tuo functions.php file ma lo faremo nel nostro ricetta-config.php, poiché è lì che memorizziamo tutte le funzioni specifiche della ricetta.
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); Una volta terminato, possiamo iniziare a definire i meta-box.
Per essere idonei per i rich snippet di Google, non è necessario fornire tutte le proprietà incluse nelle specifiche, sebbene ogni tipo di contenuto abbia il minimo richiesto. In questo tutorial, incorporeremo le seguenti proprietà:
nomerecipeCategoryImmaginedescrizioneingredientiIstruzionirecipeYieldtempo di preparazionetempo di cucinaretempo totaledatePublishedautoreSi noti che non sarà necessario creare meta box personalizzati per tutte le proprietà. Per esempio, tempo totale sarà calcolato sulla base di tempo di preparazione e tempo di cucinare.
Aggiungiamo alcune meta box personalizzate, dovremmo?
$ prefix = 'mcr_'; // Prefisso per tutti i campi funzione mcr_create_metaboxes ($ meta_boxes) prefisso globale $; $ meta_boxes [] = array ('id' => 'recipe-data', 'title' => 'Culinary Recipe', 'pages' => array ('my_culinary_recipe'), 'context' => 'normal', ' priority '=>' high ',' show_names '=> true,' fields '=> array (// TITLE - TEXT array (' name '=> __ (' Recipe Title ',' culinary_recipes '),' id '= > $ prefisso. 'name', 'type' => 'text',), // TIPO DI RECIPE - Array TEXT ('name' => __ ('Tipo di ricetta', 'culinary_recipes'), 'desc' => __ ('Il tipo di piatto: per esempio, antipasto, antipasto, dessert, ecc', 'culinary_recipes'), 'id' => $ prefisso. 'Tipo', 'tipo' => 'text_medium',), // Array IMAGE UPLOAD ('name' => 'Recipe Image', 'desc' => 'Immagine del piatto in preparazione.', 'Id' => $ prefix. 'Image', 'type' => 'file', 'save_id' => false, // salva ID usando true 'allow' => array ('url', 'attachment') // limita solo gli allegati con array ('attachment')), // SUMMARY - TEXT array ( 'name' => __ ('Summary', 'culinary_recipes'), 'desc' => __ ('Un breve riassunto che descrive il piatto.', 'culinary_recipes'), 'id' => $ prefi X . 'summary', 'type' => 'text',), // INGREDIENTS - Array TEXTAREA ('name' => __ ('Ingredients', 'culinary_recipes'), 'desc' => __ ('Metti ogni ingrediente in seaprate line. ',' culinary_recipes '),' id '=> $ prefisso.' ingredients ',' type '=>' textarea ',), // DIRECTIONS - Array TEXTAREA (' name '=> __ (' Istruzioni ' , 'culinary_recipes'), 'desc' => __ ('Metti ogni istruzione nella riga seaprate.', 'culinary_recipes'), 'id' => $ prefix. 'instructions', 'type' => 'textarea',) , // YIELD - Array TEXT ('name' => __ ('Yield', 'culinary_recipes'), 'desc' => __ ('Inserisci il numero di porzioni o numero di persone servite', 'culinary_recipes'), ' id '=> $ prefisso.' yield ',' type '=>' text_medium ',), // PREP TIME - Array TITLE (' name '=> __ (' Tempo di preparazione ',' culinary_recipes '),' desc ' => __ ('Quanto tempo ci vuole per preparare?', 'Culinary_recipes'), 'tipo' => 'titolo', 'id' => $ prefisso. 'Prep_title'), // PREP TIME HOURS - NUMBER array ('name' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'prep_time_hours' , 'type' => 'number', 'std' => '0',), // PREP TIME MINUTES- NUMBER array ('name' => __ ('Minutes', 'culinary_recipes'), 'id' = > $ prefisso. 'prep_time_minutes', 'type' => 'number', 'std' => '0',), // COOK TIME - Array TITLE ('name' => __ ('Cooking time', 'culinary_recipes'), ' desc '=> __ (' Tempo totale di cottura, cottura ecc. ',' culinary_recipes '),' tipo '=>' titolo ',' id '=> $ prefisso.' coking_title '), // TEMPO DI COTTURA - TESTO array ('name' => __ ('Hours', 'culinary_recipes'), 'id' => $ prefix. 'cook_time_hours', 'type' => 'number', 'std' => '0',), // COOKING TIME - Array TEXT ('name' => __ ('Minutes', 'culinary_recipes'), 'id' => $ prefix. 'Cook_time_minutes', 'type' => 'number', 'std' => '0',))); restituisce $ meta_boxes; add_filter ('cmb_meta_boxes', 'mcr_create_metaboxes'); Con questo pezzo di codice abbiamo creato una meta box chiamata "Ricetta culinaria" che verrà mostrata solo nella schermata di modifica del tipo di post Ricette.
Le definizioni di campo effettive vengono memorizzate come una matrice nell 'i campi' proprietà. Diamo un'occhiata più da vicino:
array ('name' => __ ('Summary', 'culinary_recipes'), 'desc' => __ ('Un breve riassunto che descrive il piatto.', 'culinary_recipes'), 'id' => $ prefix .'summary ',' tipo '=>' testo ',), Aggiungere un nuovo campo è facile come copiare uno degli elementi dell'array (mostrato sopra) e cambiare i valori per 'nome','id','disc' e 'genere'. La libreria Metaboxes and Fields personalizzata offre un numero di tipi di campi predefiniti e un metodo conveniente per definire il proprio.
Per facilitare l'input separato di ore e minuti per la cottura e il tempo di preparazione, ho definito il nostro tipo di campo chiamato 'numero'. Ho utilizzato uno dei nuovi tipi di input di HTML5 - numero e ho creato una semplice funzione di convalida, digitando il tipo intero sul valore fornito dall'utente.
add_action ('cmb_render_number', 'rrh_cmb_render_number', 10, 2); function rrh_cmb_render_number ($ field, $ meta) echo '''', $ campo [' desc '],'
'; add_filter ('cmb_validate_number', 'rrh_cmb_validate_number'); function rrh_cmb_validate_number ($ new) return (int) $ new; Ora siamo finalmente pronti a scrivere qualche markup. Potremmo creare un file modello separato per il nostro tipo di post personalizzato e posizionare il markup direttamente in quel modello. Invece, inseriremo tutto il markup all'interno di una funzione e lo aggiungeremo al contenuto del post il contenuto() filtro. Questo è importante, perché ci sono molti plugin che aggiungono qualche tipo di contenuto, ad es. pulsanti social media, fino alla fine del post. In questo modo ci assicuriamo che tutti gli output dei plug-in vengano visualizzati sotto la ricetta.
funzione mcr_display_recipe ($ content) global $ post; $ recipe = "; if (is_singular ('my_culinary_recipe')) $ recipe. = ''; $ ricetta. = ''; $ ricetta. = ''. get_post_meta ($ post-> ID, 'mcr_name', true). '
'; $ ricetta. = '. ')
'; $ Recipe. = 'Tipo di ricetta: '; $ ricetta. = 'Dare la precedenza: '. get_post_meta ($ post-> ID, 'mcr_yield', true). ''; $ ricetta. = 'Tempo di preparazione: '; $ ricetta. = 'Tempo di cucinare: '; $ ricetta. = 'Tempo totale: '; $ ricetta. = ''; $ ricetta. = '
'; $ ricetta. = ''. get_post_meta ($ post-> ID, 'mcr_summary', true). '
'; $ ricetta. = 'Ingredienti:
'. mcr_list_items ( 'ingredienti'); $ ricetta. = 'Indicazioni:
'. mcr_list_items ( 'istruzioni'); $ ricetta. = 'pubblicato su '; $ ricetta. = 'di '. get_the_author (). ''; $ ricetta. = ''; $ ricetta. = ''; restituisce $ contenuto. $ Ricetta; add_filter ('the_content', 'mcr_display_recipe', 1); Andiamo oltre il codice. In primo luogo, tiriamo il globale $ postale oggetto, che ci dà accesso a varie informazioni utili sul post che viene visualizzato.
Quindi usiamo il tag condizionale is_singular () per verificare se un singolo post del tipo 'my_culinary_recipe'è attualmente in fase di visualizzazione. Questo perché non abbiamo creato un modello separato per il nostro tipo di post personalizzato e quindi WordPress utilizza il più generale single.php modello (o index.php se non c'è single.php) per visualizzare la ricetta. Usando il Se affermazione ci assicuriamo che il markup della ricetta non venga visualizzato sui post normali.
Infine, recuperiamo i dati della ricetta usando il get_post_meta () funzione, e posizionarlo all'interno del markup strutturato in base al formato dei microdati.
Potresti notare che ho usato alcune funzioni aggiuntive - mcr_time (), mcr__total_time () e mcr_list_items () per recuperare e preparare i dati per la visualizzazione. Diamo un'occhiata!
Proprietà legate al tempo (tempo di preparazione, tempo di cucinare e tempo totale) si aspettano valori nel formato di durata ISO 8601. Per tenere conto di ciò, entrambe le funzioni relative al tempo assumeranno un formato come parametro e prepareranno l'output di conseguenza.
function mcr_time ($ type = 'prep', $ format = null) global $ post; $ ore = 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 ($ hours> 0) $ time = 'PT'. $ hours.'H '; if ($ minutes> 0) $ time. = $ minuti.'M '; else $ time =' PT '. $ minutes.'M'; else if ($ hours> 0) if ($ hours == 1) $ time = $ ore.' ora '; else $ time = $ hours.' hrs '; if ($ minutes> 0) $ time. = $ minutes.' mins '; else $ time = $ minuti.' mins '; restituisce $ time;
Il mcr_time () funzione prepara l'uscita per i tempi di preparazione e preparazione, accetta due parametri:
$ tipo (necessario) è il tipo di tempo che vogliamo mostrare. Accetta due valori - 'prep' (predefinito) o 'cucinare'formato $ (opzionale) - indica che l'output deve essere formattato in base al formato di durata ISO 8601. Accetta solo un valore - '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; $ ore = 0; $ minuti = 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 = $ ore. ora '; else $ total_time = $ hours.' hrs '; if ($ minutes> 0) $ total_time. = $ minutes.' mins '; else $ total_time = $ minuti.' mins '; restituisce $ total_time;
Il mcr_total_time () la funzione calcola e prepara l'output per il tempo totale della ricetta. Accetta solo un parametro - formato $, analogo al formato $ parametro nel mcr_time () funzione.
L'ultima funzione di supporto visualizza elenchi di elementi - ingredienti o istruzioni, in base a $ tipo parametro.
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. = 'Ora è il momento di aggiungere del contenuto. Passare alla sezione Ricette nell'area di amministrazione e aggiungere una ricetta. L'output potrebbe richiedere un po 'di stile, ma se visualizzi il post, dovresti vedere la ricetta sotto il contenuto normale.
Questo è tutto! L'unica cosa rimasta è verificare se il nostro markup è corretto con lo strumento di test rich snippet di Google.
Questa è l'anteprima del rich snippet generata dal nostro markup HTML:
Puoi testare il tuo markup fornendo un URL o uno snippet di codice allo strumento di test.
Dopo aver aggiunto il markup rich snippet, attendi che il crawler di Google lo scopra. Quando Google nota il nuovo markup, dovrebbe iniziare a visualizzare rich snippet per il tuo sito web nei risultati di ricerca. Puoi anche inviare un modulo di richiesta, per comunicare a Google i rich snippet sul tuo sito web, ma dovresti dargli un po 'di tempo prima.
In questo tutorial ti ho mostrato come integrare un formato di microdati con un vocabolario di schema.org per visualizzare le ricette culinarie. Questo esempio dovrebbe fungere da modello che è possibile utilizzare per abilitare rich snippet per altri tipi di contenuto. Hai utilizzato i rich snippet di Google per qualcosa nei tuoi progetti? Fateci sapere nei commenti qui sotto.
