Questa lezione del tutorial sul tema WordPress per principianti continua aggiungendo il codice di base necessario per l’impostazione del tema. Impariamo ad aggiungere supporti per i temi e, di conseguenza, la funzionalit\u00e0 dell’immagine in primo piano di WordPress viene attivata. In questa lezione correggeremo anche il titolo della prima pagina applicando il nostro primo filtro.<\/p>\n
Lavoreremo principalmente in Tutti i temi necessitano di un codice per configurarlo dicendo a WordPress di attivare determinate funzionalit\u00e0. Ci\u00f2 include l’attivazione di menu, widget, traduzione e cos\u00ec via. Questo \u00e8 comunemente fatto in una "funzione del tema di installazione", solitamente agganciata a un hook chiamato convenientemente Impostiamo una tale "funzione del tema di installazione" nel nostro All’interno di questa funzione aggiungeremo un sacco di funzioni di configurazione comuni e utili per i temi di WordPress. Si prega di inserire tutti i seguenti pezzi di codice all’interno della funzione di configurazione.<\/p>\n Per prima cosa dobbiamo definire una larghezza massima di immagini e incorporamenti (come i video). Questo assicura che quando gli autori inseriscono immagini di grandi dimensioni nei post, le immagini rimangano entro una certa larghezza. L’ho impostato su 840 pixel (perch\u00e9 voglio spazio per la barra laterale), ma puoi regolarlo a tuo piacimento.<\/p>\n Dovremmo anche informare WordPress che il tema \u00e8 traducibile e dove pu\u00f2 cercare i file di traduzione. Andr\u00f2 nella traduzione del tema WordPress in dettaglio nel passaggio successivo<\/a> di questa serie di tutorial sul tema.<\/p>\n Nota l’uso di una nuova funzione per ottenere la directory del tuo tema, Quindi dobbiamo aggiungere alcuni "supporti per temi", che stanno attivando la funzionalit\u00e0 di WordPress che non \u00e8 attivata di default.<\/p>\n Era un sacco di Ci sono molte altre funzioni interessanti, quindi ti incoraggio a sfogliare la documentazione per add_theme_support<\/a>. Ad esempio ce n’\u00e8 uno abbastanza nuovo, Tieni presente che se aggiungi il supporto per Infine ne aggiungiamo alcuni Ecco la funzione di configurazione finale nel nostro Dopo aver salvato, ora dovresti essere in grado di aggiungere immagini in primo piano ai post in admin! Aggiungiamo un’altra correzione del tema Aggiungiamo la nostra prima corretta funzione di modifica del filtro, utilizzando Tieni presente di restituire sempre<\/strong> la variabile filtrata nelle tue funzioni di filtro! Tutti i filtri modificano una variabile e, se non si restituisce nulla, la variabile diventa indefinita. Questo pu\u00f2 causare molti problemi. Per ulteriori approfondimenti sui filtri, dai un’occhiata al mio post che spiega tutto su hook e filtri<\/a>.<\/p>\n Vogliamo personalizzare la variabile title solo se siamo in prima pagina. Per tutte le altre pagine vogliamo lasciarlo in pace (basta restituirlo cos\u00ec com’\u00e8). Ma come facciamo a sapere quando siamo in prima pagina?<\/p>\n Possiamo sfruttare i tag condizionali di WordPress<\/a>, che sono un sacco di utili funzioni che restituiscono true o false in base a una condizione. Questi sono pi\u00f9 comunemente usati per chiedere se ci troviamo in una determinata pagina o modello. Possiamo semplicemente chiedere "Siamo in prima pagina?". Se questo metodo restituisce true, solo allora modificheremo la variabile title.<\/p>\n Vale la pena notare che ci sono due tag condizionali per la prima pagina, vale a dire Ora sappiamo quale filtro utilizzare e come assicurarci di cambiare il titolo solo se siamo nel posto giusto. Ma quale dovrebbe essere il titolo? Di solito il titolo della pagina per la prima pagina sarebbe il nome del tuo sito WordPress. Ma come otteniamo queste informazioni?<\/p>\n Per recuperare informazioni sull’installazione corrente di WordPress utilizziamo la Se aggiorni la tua prima pagina, dovresti vedere che il nome del tuo sito appare nel In precedenza, quando abbiamo impostato i supporti dei temi, abbiamo aggiunto il supporto per le immagini in primo piano. Con questo attivato ora possiamo produrre queste immagini nei nostri modelli. Facciamolo ora!<\/p>\n Apri Se il tuo post non ha un’immagine in primo piano, non vedrai nulla in uscita dopo il titolo. Tuttavia, se imposti un’immagine in primo piano su uno dei tuoi post, functions.php<\/code>file che abbiamo aggiunto nella lezione precedente<\/a>. Alla fine aggiungeremo il codice per l’output delle immagini in primo piano all’interno dei nostri modelli.<\/p>\nImpostazione del tema<\/h2>\n
after_setup_theme<\/code>. Per alcune cose specifiche abbiamo bisogno di usare l’hook di inizializzazione di WordPress chiamato init<\/code>.<\/p>\nScrivere il codice di configurazione del tema necessario per
after_setup_theme<\/code><\/h3>\nfunctions.php<\/code>, collegato a after_setup_theme<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n$GLOBALS['content_width'] = 840;<\/code><\/pre>\nload_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\nget_stylesheet_directory()<\/code>. Questo \u00e8 molto simile a quello che get_stylesheet_directory_uri()<\/code>abbiamo riscontrato nell’ultimo passaggio, ma qui abbiamo bisogno del percorso relativo, non dell’URL.<\/p>\nadd_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n]);\nadd_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\nadd_theme_support<\/code>chiamate! Come suggerisce il nome, add_theme_support<\/code>dice a WordPress di attivare funzionalit\u00e0 che non sono attivate per impostazione predefinita. Ad esempio le immagini in primo piano ("post-miniature"), il supporto per i tag HTML5 e la funzione del logo personalizzato di WordPress in Customizer (regola l’immagine del logo desiderata se lo desideri!).<\/p>\ntitle-tag<\/code>, che gestisce il tag del titolo. L’ho omesso in questo tutorial poich\u00e9 abbiamo gi\u00e0 aggiunto header.php<\/code>manualmente il tag del titolo.<\/p>\ntitle-tag<\/code>, dovresti rimuovere il tag del titolo dal file di intestazione per evitare di ottenere tag del titolo duplicati.<\/p>\nadd_theme_support<\/code>per il nuovo Gutenberg in WordPress. Aggiungeremo il supporto per ampie sezioni, attivando la funzionalit\u00e0 degli stili di blocco e il supporto per incorporamenti reattivi:<\/p>\nadd_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\nIl risultato finale<\/h3>\n
functions.php<\/code>:<\/p>\nadd_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n $GLOBALS['content_width'] = 840;\n \/\/ Make your theme ready for translation\n load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n \/\/ Add theme support for WordPress functionality\n add_theme_support('automatic-feed-links');\n add_theme_support('title-tag');\n add_theme_support('post-thumbnails');\n add_theme_support('html5', [\n 'search-form',\n 'comment-form',\n 'comment-list',\n 'gallery',\n 'caption',\n ]);\n add_theme_support('custom-logo', [\n 'height' => 100,\n 'width' => 300,\n 'flex-width' => true,\n 'flex-height' => false,\n ]);\n add_theme_support('customize-selective-refresh-widgets');\n \/\/ Add theme support for Gutenberg specific functionality\n add_theme_support('wp-block-styles');\n add_theme_support('align-wide');\n add_theme_support('responsive-embeds');\n}<\/code><\/pre>\nfunctions.php<\/code>prima di aggiungere le immagini in primo piano ai nostri modelli; ricordi che wp_title<\/code>nel nostro header.php<\/code>di default non puoi echeggiare nulla in prima pagina? Risolviamolo.<\/p>\nAggiunta di un filtro a
wp_title<\/code><\/h2>\nadd_filter()<\/code>. Il filtro a cui ci collegheremo ha lo stesso nome della funzione che abbiamo usato per WordPress per recuperare dinamicamente il titolo della pagina; wp_title<\/code>. Quello che risolveremo \u00e8 assicurarci che il titolo non sia vuoto in prima pagina, che \u00e8 l’impostazione predefinita in WordPress. Quando in prima pagina vogliamo che sia popolata con il nome del sito WordPress.<\/p>\nSapere quando personalizzare il titolo<\/h3>\n
is_home()<\/code>e is_front_page().<\/code>Questi differiscono a seconda dell’impostazione di "Lettura", indipendentemente dal fatto che la tua prima pagina mostri o meno gli ultimi post o sia impostata su una pagina fissa. Se segui questo tutorial con una nuovissima installazione di WordPress con l’impostazione predefinita, usi is_front_page()<\/code>.<\/p>\nOttenere il nome del sito WordPress<\/h3>\n
bloginfo()<\/code>funzione. Come parametro chiediamo di restituire il nome del sito, cosa che avviene impostando il parametro su ‘ name<\/code>‘. E poich\u00e9 questo \u00e8 un filtro e dobbiamo restituirlo, non farlo eco, usiamo il suo metodo gemello get_bloginfo()<\/code>. La chiamata bloginfo()<\/code>echegger\u00e0 sempre l’output.<\/p>\nadd_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n if (is_front_page()) {\n return get_bloginfo('name');\n }\n return $title;\n}<\/code><\/pre>\n<title><\/code>tag (e nella scheda del browser)! Il nostro filtro interessa solo la prima pagina, quindi qualsiasi altra pagina come il singolo post, dovrebbe comunque restituire lo stesso di prima; il titolo del post.<\/p>\nOutput di immagini in primo piano nei file modello<\/h2>\n
index.php<\/code>e trova un posto per loro all’interno del circuito. Ho scelto di metterlo dopo il titolo, ma sta a te dove li vuoi. Utilizzare la funzione the_post_thumbnail()<\/code>per emettere l’immagine. Si consiglia di verificare prima se il post ha anche impostato un’immagine in primo piano, cosa che facciamo utilizzando has_post_thumbnail()<\/code>.<\/p>\n...\n <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n <?php if (has_post_thumbnail()) {\n the_post_thumbnail();\n } ?>\n <?php the_excerpt(); ?>\n...<\/code><\/pre>\nthe_post_thumbnail()<\/code>verrebbe generato un <img><\/code>tag con l’immagine scelta. Questa funzione accetta alcuni parametri aggiuntivi. Ad esempio, puoi definire la dimensione dell’immagine che desideri utilizzare e controllare gli attributi aggiunti all’immagine. Come al solito ti incoraggio a dare una rapida occhiata alla documentazione<\/a> e ad adattarti a tuo piacimento.<\/p>\nDocumentazione sui metodi utilizzati<\/h2>\n