{"id":233965,"date":"2023-02-25T10:47:00","date_gmt":"2023-02-25T07:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233965"},"modified":"2022-11-11T13:27:31","modified_gmt":"2022-11-11T10:27:31","slug":"tutorial-sul-tema-wordpress-per-principianti-parte-10-aggiunta-di-piu-modelli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/tutorial-sul-tema-wordpress-per-principianti-parte-10-aggiunta-di-piu-modelli\/","title":{"rendered":"Tutorial sul tema WordPress per principianti \u2013 Parte 10: aggiunta di pi\u00f9 modelli"},"content":{"rendered":"\n<p>In questa lezione del tutorial sul tema WordPress per principianti ci addentreremo maggiormente nei modelli. Impareremo le parti del modello e lo implementeremo per il riutilizzo. E aggiungeremo altri modelli predefiniti di WordPress al nostro tema.<\/p>\n<p>Ma prima di iniziare ad aggiungere pi\u00f9 file modello, dobbiamo sapere perch\u00e9 dovremmo preoccuparci delle <strong>parti del modello<\/strong>.<\/p>\n<h2>Parti del modello: elementi costitutivi pi\u00f9 flessibili<\/h2>\n<p>Le parti del modello funzionano esattamente come <code>get_header()<\/code>e come <code>get_footer()<\/code>abbiamo <a href=\"http:\/\/awhitepixel.com\/blog\/wordpress-theme-tutorial-for-beginners-part-2-building-blocks\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">appreso nella parte 2<\/a>, ma non sono limitate a questi file. Puoi utilizzare le parti del modello per qualsiasi file desideri!<\/p>\n<p>I temi usano comunemente una parte del modello per i post in un ciclo. Di solito molti modelli come categoria, archivio e risultati di ricerca di solito visualizzano ogni post in un ciclo allo stesso modo. \u00c8 quindi un&#8217;ottima idea separare l&#8217;output del ciclo post in un unico file. In questo modo non devi ripeterlo in ogni modello.<\/p>\n<p>&quot;Convertiamo&quot; parte del nostro codice esistente in parti di modelli prima di iniziare a creare pi\u00f9 modelli!<\/p>\n<h2>Creazione di una parte del modello del ciclo di post<\/h2>\n<p>Crea un nuovo file vuoto nella nostra cartella del tema; chiamato <code>content-loop.php<\/code>. Puoi nominare le parti del modello come preferisci. Ma non puoi nominarli come nessuno dei <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">modelli definiti da WordPress<\/a>. Nel nostro <code>index.php<\/code>, individua tutto ci\u00f2 che hai all&#8217;interno del loop, ritaglialo e incollalo all&#8217;interno <code>content-loop.php<\/code>.<\/p>\n<p>All&#8217;interno del loop ora vuoto in <code>index.php<\/code>, usa la chiamata di funzione <code>get_template_part()<\/code>e definisci il tuo file di parte modello come parametro (senza <code>.php<\/code>estensione). Ecco come dovrebbe apparire in entrambi i file:<\/p>\n<pre><code>...\n    while (have_posts()): the_post(); \n        get_template_part('content-loop');\n    endwhile;\n    the_posts_pagination();\n...<\/code><\/pre>\n<pre><code>&lt;article &lt;?php post_class(); ?&gt;&gt;\n    &lt;h2&gt;&lt;a href=\"&lt;?php the_permalink(); ?&gt;\" title=\"&lt;?php the_title(); ?&gt;\"&gt;&lt;?php the_title(); ?&gt;&lt;\/a&gt;&lt;\/h2&gt;\n    &lt;?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?&gt;\n    &lt;?php the_excerpt(); ?&gt;\n    &lt;?php the_category(); ?&gt;\n&lt;\/article&gt;<\/code><\/pre>\n<p>Se aggiorni la tua prima pagina non dovresti vedere assolutamente alcuna differenza.<\/p>\n<p>Grande! Ora che il nostro <code>index.php<\/code>\u00e8 bello e pulito, possiamo usarlo come base per duplicarlo in pi\u00f9 modelli. Di seguito analizzer\u00f2 come aggiungere un modello di categoria e un modello di risultati di ricerca, ma ti incoraggio a creare pi\u00f9 modelli per un maggiore controllo sulla progettazione del tuo tema.<\/p>\n<h2>Aggiunta di un modello di categoria<\/h2>\n<p>Se fai riferimento alla <a href=\"https:\/\/codex.wordpress.org\/File:Template_Hierarchy.png#file\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">gerarchia dei modelli di WordPress<\/a>, puoi vedere che per le categorie di post, WordPress cercher\u00e0 il modello denominato <code>category.php<\/code>. Creeremo quello prima.<\/p>\n<p>Nella cartella del tema, crea una copia del <code>index.php<\/code>file e rinomina la copia <code>category.php<\/code>.<\/p>\n<p>E.. questo \u00e8 tutto. Praticamente hai finito&#8230;!<\/p>\n<p>Tuttavia, aggiungeremo un dettaglio; vogliamo mostrare un titolo che ci dice che siamo in una pagina di categoria per i post nella categoria denominata X. WordPress ha una funzione per questo che puoi usare in tutti i modelli di archivio (categoria, tag, archivi di date), <code>the_archive_title<\/code>. Aggiungiamolo prima del ciclo, all&#8217;interno di un <code>&lt;h1&gt;<\/code>tag.<\/p>\n<pre><code>&lt;?php get_header(); ?&gt;\n&lt;h1&gt;&lt;?php the_archive_title(); ?&gt;&lt;\/h1&gt;\n&lt;?php\nif (have_posts()) {\n...<\/code><\/pre>\n<p>Se visualizzi una pagina di categoria di post, dovresti vedere qualcosa del genere, con il titolo dell&#8217;archivio &quot;Categoria: &quot;. PS: se desideri modificare l&#8217;output del titolo dell&#8217;archivio (ad esempio non mostrare &quot;Categoria:&quot;), puoi aggiungere un filtro a <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/get_the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_the_archive_title<\/a>. La pagina della documentazione mostra un ottimo esempio di come fare proprio questo.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7239f1b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7239f1b.png\" alt=\"Tutorial sul tema WordPress per principianti \u2013 Parte 10: aggiunta di pi\u00f9 modelli\" ><\/a><\/p>\n<p>Bene, \u00e8 stato facile! Gestiamo il modello dei risultati di ricerca in seguito.<\/p>\n<h2>Aggiunta di un modello di risultati di ricerca<\/h2>\n<p>La procedura \u00e8 esattamente la stessa che abbiamo fatto per i modelli di categoria. Questa volta, crea una copia di <code>category.php<\/code>e rinomina la copia in <code>search.php<\/code>.<\/p>\n<p>Tutto ci\u00f2 che dobbiamo correggere \u00e8 il titolo. La funzione del titolo dell&#8217;archivio che abbiamo utilizzato nel modello di categoria sfortunatamente non funziona molto bene per il modello di risultati di ricerca. In effetti, non esiste una funzione semplice in WordPress che generi un titolo per noi.<\/p>\n<p>Ma possiamo facilmente crearne uno noi stessi e allo stesso tempo dimostrer\u00f2 come produrre una variabile dinamica e mantenere comunque il testo traducibile.<\/p>\n<p>PHP ha due utili funzioni <code>printf()<\/code>e <code>sprintf()<\/code>. Fanno lo stesso, tranne per il fatto che <code>printf<\/code>lo emettono (come echo) e <code>sprintf<\/code>lo restituiscono, quindi possiamo memorizzarlo in una variabile. Dopo aver inserito il testo come primi parametri, possiamo aggiungere variabili dinamiche come argomenti, che vengono quindi iniettate nel testo. All&#8217;interno di questi, possiamo utilizzare le funzioni di testo traducibile <code>__()<\/code>e <code>_e()<\/code>. Ti consiglio di leggere un po&#8217; su come funzionano <a href=\"https:\/\/www.php.net\/manual\/en\/function.printf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">printf<\/a> o <a href=\"https:\/\/www.php.net\/manual\/en\/function.sprintf.php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sprintf<\/a>, poich\u00e9 non entrer\u00f2 nei dettagli qui.<\/p>\n<p>WordPress offre una semplice funzione per ottenere la stringa che \u00e8 stata cercata; <code>get_search_query()<\/code>. Detto questo, sostituiamo la funzione del titolo dell&#8217;archivio con questa;<\/p>\n<pre><code>&lt;h1&gt;&lt;?php printf(__('Search: %s', 'wptutorial'), get_search_query()); ?&gt;&lt;\/h1&gt;<\/code><\/pre>\n<p>Quello che fa il codice sopra \u00e8 dall&#8217;interno verso l&#8217;esterno; definendo un testo traducibile &#8220;Cerca: %s&quot; che viene inserito all&#8217;interno di un <code>printf<\/code>che fa eco alla stringa, e sostituisce la stringa costante (<code>%s<\/code>) con il secondo argomento; che \u00e8 <code>get_search_query()<\/code>.<\/p>\n<p>Di conseguenza, otteniamo un titolo come questo quando cerchiamo &quot;er&quot;:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7331b74.png\" alt=\"Tutorial sul tema WordPress per principianti \u2013 Parte 10: aggiunta di pi\u00f9 modelli\" ><\/a><\/p>\n<p>Simpatico! Un altro modello fatto. Per quanto riguarda l&#8217;ultima parte di questa lezione, entreremo nel nostro modello di post singolo e aggiungeremo qualcosa di molto comune in WordPress; il modello dei commenti.<\/p>\n<h2>Aggiunta di un modello di commenti a un singolo post<\/h2>\n<p>Nel nostro <code>single.php<\/code>, dopo l&#8217;articolo del post, vogliamo mostrare i commenti. I commenti dovrebbero produrre un elenco di commenti precedenti e un modulo per aggiungere un nuovo commento.<\/p>\n<p>Il modello di commenti \u00e8 un file modello che puoi aggiungere al tuo tema, ma WordPress ha in realt\u00e0 il proprio output di modello di commenti predefinito. Se non hai <code>comments.php<\/code>nel tuo tema, la richiesta del modello di commenti restituir\u00e0 l&#8217;output predefinito di WordPress per esso. Questo \u00e8 ci\u00f2 che faremo in questo tutorial.<\/p>\n<p>Vogliamo chiamare il modello dei commenti solo se il post ha attivato i commenti (\u00e8 un&#8217;impostazione per ogni post e un&#8217;impostazione globale del sito). Quindi aggiungiamo un controllo if per verificare se i commenti sono consentiti <code>comments_open()<\/code>e se restituisce true, richiediamo il modello di commenti con <code>comments_template()<\/code>. Tieni presente che tutto questo deve avvenire all&#8217;interno del ciclo. L&#8217;ho aggiunto dopo la fine di <code>&lt;\/article&gt;<\/code>, subito prima della chiusura del ciclo.<\/p>\n<pre><code>...\n        &lt;p&gt;&lt;?php _e('Author', 'wptutorial'); ?&gt;: &lt;?php the_author(); ?&gt;&lt;\/p&gt;\n    &lt;\/article&gt;\n    &lt;?php \n    if (comments_open()) {\n        comments_template();\n    }\n    endwhile;\n} else {\n    ?&gt;&lt;p&gt;&lt;?php _e('No posts, sorry.', 'wptutorial'); ?&gt;&lt;\/p&gt;&lt;?php\n...<\/code><\/pre>\n<p>Se visiti un singolo post che ha consentito commenti (ho aggiunto un commento solo per mostrarti anche l&#8217;elenco dei commenti); otterrai questo bellissimo (ehm) modello di commenti predefinito:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-151635-61e4cd7412986.png\" alt=\"Tutorial sul tema WordPress per principianti \u2013 Parte 10: aggiunta di pi\u00f9 modelli\" ><\/a><\/p>\n<p>Ora puoi (ed \u00e8 spesso incoraggiato) crearne uno tuo <code>comments.php<\/code>nel tuo tema, che sostituir\u00e0 l&#8217;output predefinito di WordPress. Tuttavia, non sto creando un modello di commenti in questo tutorial, poich\u00e9 l&#8217;output predefinito di WordPress funziona perfettamente purch\u00e9 lo stilizzi correttamente. Se controlli l&#8217;HTML, ci sono molti wrapper e classi disponibili.<\/p>\n<h2>Documentazione sui metodi utilizzati<\/h2>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_template_part\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_template_part<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_archive_title\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">il_titolo_archivio<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_search_query\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">get_search_query<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_open\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">commenti_apri<\/a><\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/comments_template\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">commenti_modello<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/awhitepixel.com\" class=\"external external_icon\">awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In questa lezione impareremo le parti del modello e creeremo pi\u00f9 modelli per il nostro tema WordPress. Aggiungeremo anche un modello di commenti alla visualizzazione di un singolo post.<\/p>\n","protected":false},"author":1,"featured_media":223663,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,896,720,835,918,1110,835,928,720,928,844,844,865,865],"tags":[1168],"class_list":["post-233965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-guida-per-principianti","category-n-a","category-soggetti","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233965"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223663"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}