Home Blog 3. Creare un tema WordPress da zero – Parte 3
3. Creare un tema WordPress da zero – Parte 3
Scritto il 30 aprile 2020
(Ultima Modifica 4 luglio 2024)
•
10 min tempo di lettura •
2.106 parole
Negli ultimi tutorial abbiamo iniziato a creare un tema WordPress da zero , e siamo arrivati già a un buon punto!
Ci mancano però ancora un paio di cosette per rendere accettabile il nostro lavoro. Vediamo di andare avanti!
Ti ricordo che sul fondo di questo articolo potrai trovare un link al tema completo. Potrai scaricarlo per cercare eventuali errori ed utilizzarlo come vorrai! Consideralo un regalo!
Ma riprendiamo il tutorial !
Inserire immagini
Con WordPress è semplicissimo inserire immagini all’interno degli articoli, delle pagine o dei widget, ma se volessimo inserire per esempio un logo? Oppure un’immagine in un punto specifico del sito?
Per fare questo dobbiamo utilizzare la funzione get_template_directory_uri , che ci permette di collegarci alla cartella del nostro tema . Vediamo come fare.
Inseriamo un logo nella navbar
Per prima cosa rechiamoci nella cartella del nostro tema e creiamo un’altra cartella chiamata “img “. Qua dentro ora possiamo inserire le immagini che vogliamo inserire nel tema. Inseriamo un logo. Io lo chiamerò “logo.png “.
Ora andiamo nel nostro header.php e inseriamo il logo prima del titolo del nostro sito, in questo modo:
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="" height="50">La funzione get_template_directory_uri inserirà il percorso della cartella del nostro sito, a cui noi aggiungiamo il percorso per raggiungere l’immagine.
Prova a salvare e aggiornare il sito, dovresti vedere il logo comparire prima del nome del sito!
Se appare brutto puoi modificarlo tramite CSS , ma per il momento ci interessa il fatto che compaia!
La funzione get_template_directory_uri può essere utilizzata ogni volta che dobbiamo raggiungere qualcosa contenuto nella cartella del nostro tema.
Potremmo anche utilizzarla per inserire i file CSS e JS nel sito, ma WordPress prevede un sistema diverso, che vedremo fra poco.
Hook
Nello sviluppo WordPress gli hook hanno una grande importanza.
Ci permettono di aggrapparci a questi per inserire le nostre customizzazioni. Questo permette a noi sviluppatori di inserire delle modifiche al nostro tema senza toccare il core di WordPress.
Ci sono alcuni hook che sono fondamentali in ogni tema ben fatto.
wp_title
Un primo hook da inserire è il wp_title , che va messo nel meta tag
, nell’<head> della pagina.</p>
<p>Apriamo quindi il nostro <em>heder.php</em> e modifichiamo il <title> in questo modo:</p>
<pre class="wp-block-code"><code><title><?php wp_title(); ?></title></code></pre>
<p>In questo modo il tag del titolo verrà <strong>gestito da WordPress</strong> nel migliore dei modi.</p>
<h3 id="wp_head" class="heading">wp_head <a href="#wp_head" aria-labelledby="wp_head">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Sempre nel nostro header dobbiamo aggiungere l’hook <em>wp_head</em>. Questo ci permette di inserire i nostri CSS e JS nell’<head> della pagina, come vedremo fra poco.</p>
<p>Aggiungiamo quindi questo codice giusto prima del <em></head></em>:</p>
<pre class="wp-block-code"><code><?php wp_head(); ?></code></pre>
<h3 id="body_class" class="heading">body_class <a href="#body_class" aria-labelledby="body_class">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Rimaniamo sempre nel nostro header.php e aggiungiamo un hook anche al <body>, in questo modo:</p>
<pre class="wp-block-code"><code><body <?php body_class(); ?>></code></pre>
<p>Così WordPress <strong>gestirà al meglio il body</strong> del nostro tema.</p>
<h3 id="wp_footer" class="heading">wp_footer <a href="#wp_footer" aria-labelledby="wp_footer">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>L’ultimo hook che andremo ad aggiungere è il <em>wp_footer</em>, che permette di inserire i contenuti prima del <em></body></em>, come i file javascript.</p>
<p>Andiamo quindi nel <em>footer.php</em> e inseriamo questo giusto prima del</p>
<pre class="wp-block-code"><code><?php wp_footer(); ?></code></pre>
<h2 id="inserire-css-e-js-in-un-tema-wordpress" class="heading">Inserire CSS e JS in un tema WordPress <a href="#inserire-css-e-js-in-un-tema-wordpress" aria-labelledby="inserire-css-e-js-in-un-tema-wordpress">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h2>
<p>Il <strong>metodo corretto</strong> per inserire dei file CSS e JS all’interno di un tema WordPress è un po’ particolare.</p>
<p>Sebbene funzioni anche in metodo classico di inserimento nell’<head> e prima del (metodo che abbiamo utilizzato nella parte 1 di questa serie di tutorial), un tema WordPress ben fatto deve inserire i file CSS e JS attraverso il file <strong><em>functions.php.</em></strong></p>
<h3 id="css" class="heading">CSS <a href="#css" aria-labelledby="css">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Iniziamo ad aprire il nostro file <em>functions.php</em> e inseriamo questo codice per embeddare il nostro file style.css nel tema:</p>
<pre class="wp-block-code"><code>function risorse_il_mio_tema() {
//CSS
enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'risorse_il_mio_tema');</code></pre>
<p>In questo modo embedderemo il file <em>style.css</em>, obbligatorio in ogni tema WordPress.</p>
<p>Ora inseriamo il CSS di <strong><a href="/le-basi-di-bootstrap/">Bootstrap</a></strong> in maniera corretta. Lo aggiungiamo a questa funzione, in questo modo:</p>
<pre class="wp-block-code"><code>wp_enqueue_style( 'bootstrap','http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css','','','all');</code></pre>
<p>Ricorda di inserire <strong>Bootstrap</strong> come <strong>primo file</strong>, prima di “style”, per un corretto funzionamento.</p>
<p>Ora andiamo nell’header.php e rimuoviavo il CSS di bootstrap, che ora verrà inserito nella maniera corretta tramite functions.php</p>
<h3 id="js" class="heading">JS <a href="#js" aria-labelledby="js">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Inseriamo ora i file <strong>javascript di Bootstrap</strong> nel modo corretto.</p>
<p>Anche i file Javascript vanno inseriti come i CSS, nella stessa funzione, in questo modo:</p>
<pre class="wp-block-code"><code>//JS
wp_enqueue_script( 'jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '','' ,true);
wp_enqueue_script( 'bootstrap-js', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', '','' ,true);
</code></pre>
<p>Ora possiamo eliminare i file JS di bootstrap dal nostro <strong>footer.php</strong></p>
<p>Per semplicità ti riscrivo <strong>tutta la funzione</strong> di embeddamento di CSS e JS:</p>
<pre class="wp-block-code"><code>/* CSS e JS */
function risorse_il_mio_tema() {
//CSS
wp_enqueue_style( 'bootstrap','http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css','','','all');
wp_enqueue_style('style', get_stylesheet_uri());
//JS
wp_enqueue_script( 'jquery-js', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '','' ,true);
wp_enqueue_script( 'bootstrap-js', 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', '','' ,true);
}
add_action('wp_enqueue_scripts', 'risorse_il_mio_tema');</code></pre>
<p><strong>In questo modo hai inserito i codici CSS e JS secondo le Best Practice di WordPress!</strong></p>
<h2 id="paginazione" class="heading">Paginazione <a href="#paginazione" aria-labelledby="paginazione">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h2>
<p>Se il nostro tema inizierà ad avere molti articoli, allora la pagina archivio diventerà presto molto pesante.</p>
<p>Fortunatamente WordPress fornisce una funzione per facilitare moltissimo la <strong>paginazione</strong>.</p>
<p>Puoi decidere quanti articoli far visualizzare nelle pagine archivio tramite la sezione “<strong>Impostazioni – Lettura</strong>“.</p>
<div class=""><img class="img-fluid "
src="/img/uploads/2022/03/image-38-1-1400x216.png"
srcset="/img/uploads/2022/03/image-38-1-576x89.webp 576w, /img/uploads/2022/03/image-38-1-768x119.webp 768w, /img/uploads/2022/03/image-38-1-992x153.webp 992w, /img/uploads/2022/03/image-38-1-1200x185.webp 1200w, /img/uploads/2022/03/image-38-1-1400x216.webp 1400w" sizes="100vw"
height="216"
width="1400"
>
</div>
<p>Per inserire la paginazione nel frontend andiamo nel nostro <em><strong>archive.php</strong></em> e inseriamo questa funzione <strong>dopo il</strong> <strong>loop</strong>:</p>
<pre class="wp-block-code"><code><?php echo paginate_links(); ?></code></pre>
<p>In questo modo <strong>i link di paginazione saranno gestiti interamente da WordPress!</strong></p>
<p>Fantastico vero? Nulla di più semplice! Non ti resta che rendere questi link un po’ più carini, tramite <strong>CSS</strong>.</p>
<h3 id="commenti" class="heading">Commenti <a href="#commenti" aria-labelledby="commenti">
<!-- <i class="fas fa-link anchor"></i> --><svg class="svg-inline--fa fas fa-link anchor" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
</a></h3>
<p>Il sito inizia ad avere senso, ma non abbiamo ancora inserito una sezione commenti! Vediamo come fare!</p>
<p>Iniziamo creando un file <strong><em>comments.php</em></strong> nella cartella del nostro tema.</p>
<p><strong>comments.php</strong></p>
<pre class="wp-block-code"><code>
<div id="comments" class="comments-area">
<?php if ( have_comments() ) : ?>
<h2 class="comments-title">
<?php
printf( _nx( 'Un commento per "%2$s"', '%1$s Commenti su "%2$s"', get_comments_number(), 'comments title', 'beauty-mountain' ),
number_format_i18n( get_comments_number() ), '<span>' . get_the_title() . '</span>' );
?>
</h2>
<ol class="comment-list">
<?php
wp_list_comments( array(
'style' => 'ol',
'short_ping' => true,
'avatar_size' => 74,
) );
?>
</ol><!-- .comment-list -->
<?php
// Ci sono più commenti?
if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
?>
<nav class="navigation comment-navigation" role="navigation">
<h1 class="screen-reader-text section-heading"><?php _e( 'Comment navigation', 'beauty-mountain' ); ?></h1>
<div class="nav-previous"><?php previous_comments_link( __( '← Older Comments', 'beauty-mountain' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments →', 'beauty-mountain' ) ); ?></div>
</nav><!-- .comment-navigation -->
<?php endif; ?>
<?php if ( ! comments_open() && get_comments_number() ) : ?>
<p class="no-comments"><?php _e( 'Comments are closed.' , 'beauty-mountain' ); ?></p>
<?php endif; ?>
<?php endif; // have_comments() ?>
<?php comment_form(); ?>
</div><!-- #comments --></code></pre>
<p>Questo codice ti pemetterà di inserire i commenti, ora andiamo nel file <strong><em>single.php,</em></strong> quello che contiene i nostri articoli, e inseriamo il template per i commenti dopo il contenuto:</p>
<pre class="wp-block-code"><code><!-- COMMENTI -->
<?php comments_template(); ?></code></pre>
<p>In questo modo potrai <strong>vedere i commenti sui tuoi articoli!</strong></p>
<div aria-hidden="true" class="wp-block-spacer" style="height:50px">
</div>
<p><strong>Perfetto!</strong> Direi che per iniziare abbiamo già creato qualcosa di carino!</p>
<p>Prima di lasciarti andare via ti condivido ancora <strong>un po’ di CSS</strong> per rendere il nostro lavoro un po’ più carino.</p>
<p>Ricorda che puoi <strong>scaricare l’intero tema</strong>, per controllare errori e verificare di aver capito tutto al meglio! Clicca <strong>sul bottone sul fondo</strong> dell’articolo per scaricare il tema!</p>
<p>Non è un tema perfetto ma può essere un buon <strong>starter theme</strong> per i tuoi progetti futuri!</p>
<p><strong>style.css</strong></p>
<pre class="wp-block-code"><code>/*
Theme Name: Il mio tema
Author: Specialista WP
Description: Il mio primo tema WordPress
Version: 0.0.1
*/
/*
* Globals
*/
a:hover{
text-decoration: none;
}
img{
max-width: 100%;
height:auto
}
footer{
background-color: #888;
margin-top: 50px;
padding-top: 50px;
color:#000;
margin-bottom: 0;
padding-bottom: 50px;
}
</code></pre>
<div class="wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-5 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p>
<em><a href="/le-basi-dellhtml/"><< Parte 2</a></em>
</p>
</div>
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<p class="has-text-align-right">
<em><a href="/creare-un-plugin-wordpress/">Creare Plugin >></a></em>
</p>
</div>
</div>
<div aria-hidden="true" class="wp-block-spacer" style="height:50px">
</div>
<div aria-hidden="true" class="wp-block-spacer" style="height:50px">
</div>
<div class="row row-cols-2 mt-5 mb-3">
<div class="col">
<a class="next" href="/creare-un-tema-wordpress-da-zero-parte-2/">
<!-- <i class="fas fa-arrow-left "></i> --><svg class="svg-inline--fa fas fa-arrow-left " fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 448 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"/></svg>
2. Creare un tema WordPress da zero – Parte 2
</a></div>
<div class="col text-end">
<a class="previous" href="/creare-un-plugin-wordpress/">
4. Creare un plugin WordPress
<!-- <i class="fas fa-arrow-right "></i> --><svg class="svg-inline--fa fas fa-arrow-right " fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 448 512"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a></div>
</div>
</div>
<div
class="col col-md-3 col-lg-2 d-none d-md-block pt-5">
<div class="toc toc-sidebar mb-5 my-md-0 mb-lg-5 p-3 text-body-secondary sticky-top">
<strong class="d-block h6 my-2 pb-2">Indice:</strong>
<nav id="TableOfContents">
<ul>
<li><a href="#inserire-immagini">Inserire immagini</a>
<ul>
<li><a href="#inseriamo-un-logo-nella-navbar">Inseriamo un logo nella navbar</a></li>
</ul>
</li>
<li><a href="#hook">Hook</a>
<ul>
<li><a href="#wp_title">wp_title</a></li>
<li><a href="#wp_head">wp_head</a></li>
<li><a href="#body_class">body_class</a></li>
<li><a href="#wp_footer">wp_footer</a></li>
</ul>
</li>
<li><a href="#inserire-css-e-js-in-un-tema-wordpress">Inserire CSS e JS in un tema WordPress</a>
<ul>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JS</a></li>
</ul>
</li>
<li><a href="#paginazione">Paginazione</a>
<ul>
<li><a href="#commenti">Commenti</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-primary bg-opacity-10">
<div class="container-xxl px-4 px-xxl-0">
<div class="row row-cols-2 py-3 align-items-center">
<div class="col col-6">
<div class="row justify-content-end p-0">
<div class="col-12 col-md-8 p-0">
<div class="fs-3 fw-bold">Seguici su</div>
<p></p>
</div>
</div>
</div>
<div class="col col-6 text-sm-start">
<a href="https://www.youtube.com/@thetuxdev" aria-label="YouTube" class="text-decoration-none link-secondary d-inline p-2">
<!-- <i class="fab fa-youtube fa-2x"></i> --><svg class="svg-inline--fa fab fa-youtube fa-2x" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 576 512"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>
</a>
<a href="https://github.com/thetuxdev" aria-label="GitHub" class="text-decoration-none link-secondary d-inline p-2">
<!-- <i class="fab fa-github fa-2x"></i> --><svg class="svg-inline--fa fab fa-github fa-2x" fill="currentColor" aria-hidden="true" role="img" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
</div>
</div>
</div>
</div>
<footer class="container-fluid footer text-center p-3">
<div class="container-xxl text-center">
<small>
Copyright © 2024 - <b>The TUX Dev</b> - <a href="/about" title="About">Chi sono</a> - <a href="/index.xml" title="RSS">RSS</a><br>
Questo sito è non ha nessun tipo di tracciamento, non ci sono cookies e non vengono raccolti dati di nessun
tipo.
<br>
Il sito web è completamente open source, puoi trovare il codice sorgente <a
href="https://github.com/thetuxdev/thetuxdev.github.io" target="_blank" title="GitHub">qui</a>.<br>
Per informazioni e collaborazioni <a href="mailto:thetuxdev@gmail.com" title="contattami">contattami</a>
</small>
</div>
</footer>
</div>
<div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="toast-copied-code-message" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">The TUX Dev</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">Code copied to clipboard</div>
</div>
</div>
<script src="/js/main.bundle.min.034c29d55399c85d9f9bc0c1bbb15281725a7ed4763ba068aa3f07968aabb68e.js" integrity="sha256-A0wp1VOZyF2fm8DBu7FSgXJaftR2O6Boqj8Hloqrto4=" crossorigin="anonymous" async></script>
<script async defer src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
</body>
</html>