{"id":233627,"date":"2023-02-18T12:52:00","date_gmt":"2023-02-18T09:52:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233627"},"modified":"2022-11-11T00:43:15","modified_gmt":"2022-11-10T21:43:15","slug":"tutorial-sul-tema-wordpress-per-principianti-parte-3-contenuto-dinamico","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-sul-tema-wordpress-per-principianti-parte-3-contenuto-dinamico\/","title":{"rendered":"Tutorial sul tema WordPress per principianti \u2013 Parte 3: contenuto dinamico"},"content":{"rendered":"\n

In questa lezione del tutorial sul tema WordPress per principianti impareremo gli hook in WordPress e aggiungeremo alcuni hook nel nostro tema necessari affinch\u00e9 un tema funzioni correttamente con WordPress e plugin. Inizieremo anche ad accedere ai contenuti dinamici da WordPress nella nostra intestazione, come ottenere automaticamente il titolo della pagina corrente.<\/p>\n

Per prima cosa dobbiamo imparare qualcosa sugli hook in WordPress. Gli hook sono una funzionalit\u00e0 fondamentale con cui devi familiarizzare. Non sono un fan della semplice visualizzazione di un intero gruppo di codice in cui \u00e8 necessario copiare e incollare senza sapere cosa fa veramente. Se stai seguendo questo tutorial, vuoi impararlo correttamente, giusto?<\/p>\n

Non preoccuparti, per ora lo terr\u00f2 breve. Impareremo di pi\u00f9 su questi pi\u00f9 avanti in questo tutorial.<\/p>\n

Hook in WordPress<\/h2>\n

In breve; poich\u00e9 WordPress esegue tutto il codice per il caricamento e il rendering di una pagina, ci sono alcuni "punti di controllo" – che chiamiamo hook. Questi punti \u00e8 dove WordPress consente agli sviluppatori di modificare o aggiungere il proprio codice. WordPress ha definito un intero gruppo di "punti di controllo" in cui, ognuno con un nome univoco. Se ne conosci il nome, puoi aggiungere il tuo codice a questi checkpoint. E cos\u00ec puoi facilmente dire a WordPress di eseguire il tuo codice quando raggiunge quel checkpoint come parte del suo processo.<\/p>\n

Esistono due tipi di ganci; azioni e filtri. Le azioni<\/strong> sono punti nel codice in cui puoi aggiungere codice personalizzato, ad esempio emettere qualcosa o fare qualcosa per i tuoi scopi. I filtri<\/strong> sono punti nel codice in cui \u00e8 possibile modificare una determinata variabile prima che venga utilizzata o generata. Sono molto simili, ma i filtri sono associati a una variabile specifica e le azioni no.<\/p>\n

Plugin, temi e WordPress stesso possono "agganciare" il loro codice usando add_action()<\/code>per le azioni e add_filter()<\/code>per i filtri. Queste due funzioni dicono a WordPress di eseguire il codice agganciato ogni volta che l’esecuzione raggiunge questi hook.<\/p>\n

Per definire gli hook che usi do_action()<\/code>per le azioni e apply_filters()<\/code>per i filtri.<\/p>\n

Per chiunque sia interessato a saperne di pi\u00f9, ho un altro post che approfondisce gli hook<\/a> in WordPress.<\/p>\n

Un tema WordPress deve includere alcuni hook (azioni) importanti e specifici. Questi hook consentono a WordPress, ai plug-in e al nostro tema stesso di collegarsi e fare cose critiche. Diamo un’occhiata a quegli hook critici che dobbiamo aggiungere.<\/p>\n

Hook dell’intestazione e del pi\u00e8 di pagina del tema<\/h2>\n

Tutti i temi WordPress devono avere due hook nei modelli. Un’azione deve essere inserita nell’intestazione (all’interno del <head><\/code>tag) e un’altra nel pi\u00e8 di pagina (subito prima della chiusura del <\/body><\/code>tag). Questi due hook sono assolutamente necessari affinch\u00e9 WordPress, il tuo tema e qualsiasi plug-in siano in grado di aggiungere i loro script e stili di codice al tuo tema.<\/p>\n

I ganci di cui abbiamo bisogno sono wp_head<\/code>e wp_footer<\/code>rispettivamente per l’intestazione e il pi\u00e8 di pagina.<\/p>\n

Normalmente quando vogliamo eseguire un hook, chiamiamo do_action(<hook name>)<\/code>. Ma poich\u00e9 questi due hook sono cos\u00ec critici, WordPress li ha semplificati per noi inserendoli in una semplice chiamata di funzione. Quindi per questi due ganci puoi semplicemente usare wp_head()<\/code>e wp_footer()<\/code>. In background questi due eseguono il file do_action()<\/code>.<\/p>\n

Aggiungiamo questi due hook (chiamate di funzione) ai nostri modelli di intestazione e pi\u00e8 di pagina e vediamo cosa succede.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Premi Aggiorna sul tuo frontend. Se hai effettuato l’accesso, ora dovresti vedere apparire la barra di amministrazione di WordPress! Ci\u00f2 significa che WordPress \u00e8 ora in grado di aggiungere con successo i suoi script e stili al tuo tema.<\/p>\n
\"Tutorial<\/a><\/p>\n
Puoi controllare il tuo codice HTML e vedere che la tua intestazione ora contiene un bel po’ di codice. Questo \u00e8 il codice che non hai aggiunto al tuo tema. Come puoi vedere, lo stesso WordPress utilizza gli hook che abbiamo aggiunto per fare le sue cose.<\/p>\n
Passiamo dagli hook e iniziamo a esaminare come possiamo recuperare dinamicamente i contenuti da WordPress e visualizzarli nella nostra intestazione.<\/p>\n
Contenuto dinamico nell’intestazione<\/h2>\n
Diciamo a WordPress di impostare dinamicamente il titolo del documento (per il <title><\/code>tag). Per questo useremo una funzione, (che ha un filtro tra l’altro), chiamata wp_title()<\/code>. Come abbiamo appreso sopra, poich\u00e9 wp_title()<\/code>\u00e8 un filtro, tu, WordPress o plugin puoi modificare l’output. Aggiungeremo un filtro a questo pi\u00f9 avanti in questo tutorial.<\/p>\n
La funzione wp_title()<\/code>accetta diversi argomenti<\/a> che puoi regolare a tuo piacimento, ma per ora aggiunger\u00f2 una stringa vuota in modo che visualizzi solo il titolo di qualunque pagina ci troviamo.<\/p>\n
Cambia il tuo <title><\/code>tag header.php<\/code>in questo:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
Gli appassionati di voi potrebbero aver notato che la prima pagina non generer\u00e0 un titolo. Questo \u00e8 il comportamento standard di WordPress che correggeremo pi\u00f9 avanti in questo tutorial (lo faremo con l’aiuto del filtro). Se visiti un singolo post o pagina, dovresti ottenere il titolo del post.<\/p>\n
WordPress ha una funzione ingegnosa che genera dinamicamente un mucchio di classi per il <body><\/code>tag a seconda della pagina in cui ci troviamo; chiamato body_class<\/a>. Aggiorna il <body><\/code>tag header.php<\/code>in questo:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
Aggiorna e dai un’occhiata a tutte le classi aggiunte al <body><\/code>tag. Dai un’occhiata a diverse pagine (prima pagina, singolo, categoria). Tutte queste classi sono molto utili per lo styling e per differenziare diverse parti simili. Molto probabilmente ne utilizzerai alcuni nel tuo CSS.<\/p>\n
Per seguire le buone pratiche HTML, dovremmo anche informare sulla lingua del sito nell’HTML. Per questo utilizziamo una funzione di WordPress per ottenere la lingua dalle Impostazioni; attributi_lingua<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
E infine vorrei aggiungere alcuni meta tag e simili che non sono specifici di WordPress, ma seguono pratiche di web design comuni. Ecco header.php<\/code>come appare il file completo:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
Per il passaggio successivo di questo tutorial lasceremo header.php<\/code>e ci addentreremo index.php<\/code>per imparare come recuperare contenuti pi\u00f9 dinamici, come i post.<\/p>\n
Documentazione sui metodi utilizzati<\/h2>\n