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 tabindex="0"><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">wp_head</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 tabindex="0"><code><?php wp_head(); ?>
</code></pre><h3 id="body_class">body_class</h3>
<p>Rimaniamo sempre nel nostro header.php e aggiungiamo un hook anche al <body>, in questo modo:</p>
<pre tabindex="0"><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">wp_footer</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 </body></p>
<pre tabindex="0"><code><?php wp_footer(); ?>
</code></pre><h2 id="inserire-css-e-js-in-un-tema-wordpress">Inserire CSS e JS in un tema WordPress</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 </body> (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">CSS</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 tabindex="0"><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="/guide/le-basi-di-bootstrap/" >Bootstrap</a></strong> in maniera corretta. Lo aggiungiamo a questa funzione, in questo modo:</p>
<pre tabindex="0"><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">JS</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 tabindex="0"><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 tabindex="0"><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">Paginazione</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>
<p><img src="images/image-38-1.png" alt=""></p>
<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 tabindex="0"><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">Commenti</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 tabindex="0"><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 tabindex="0"><code><!-- COMMENTI -->
<?php comments_template(); ?>
</code></pre><p>In questo modo potrai <strong>vedere i commenti sui tuoi articoli!</strong></p>
<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 tabindex="0"><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><p><em><a href="/guide/le-basi-dellhtml/" >« Parte 2</a></em></p>
<p><em><a href="/guide/creare-un-plugin-wordpress/" >Creare Plugin »</a></em></p>
</div>
<div class="row items-start justify-between">
<div class="lg:col-12 flex items-center">
<div class="share-icons">
<h5 class="share-title">Condividi :</h5>
<a
class="share-link share-facebook"
href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2falby-dev.github.io%2fguide%2fcreare-un-tema-wordpress-da-zero-parte-3%2f"
target="_blank"
rel="noopener"
aria-label="share facebook">
<span class="share-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" />
</svg>
</span>
</a>
<a
class="share-link share-twitter"
href="https://twitter.com/intent/tweet/?text=Condividi&url=https%3a%2f%2falby-dev.github.io%2fguide%2fcreare-un-tema-wordpress-da-zero-parte-3%2f"
target="_blank"
rel="noopener"
aria-label="share twitter">
<span aria-hidden="true" class="share-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z" />
</svg>
</span>
</a>
<a
class="share-link share-email"
href="mailto:?subject=Condividi&body=https%3a%2f%2falby-dev.github.io%2fguide%2fcreare-un-tema-wordpress-da-zero-parte-3%2f"
target="_self"
rel="noopener"
aria-label="share email">
<span aria-hidden="true" class="share-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z" />
</svg>
</span>
</a>
<a
class="share-link share-reddit"
href="https://reddit.com/submit/?url=https%3a%2f%2falby-dev.github.io%2fguide%2fcreare-un-tema-wordpress-da-zero-parte-3%2f&resubmit=true&title=Condividi"
target="_blank"
rel="noopener"
aria-label="share reddit">
<span aria-hidden="true" class="share-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path
d="M24 11.5c0-1.65-1.35-3-3-3-.96 0-1.86.48-2.42 1.24-1.64-1-3.75-1.64-6.07-1.72.08-1.1.4-3.05 1.52-3.7.72-.4 1.73-.24 3 .5C17.2 6.3 18.46 7.5 20 7.5c1.65 0 3-1.35 3-3s-1.35-3-3-3c-1.38 0-2.54.94-2.88 2.22-1.43-.72-2.64-.8-3.6-.25-1.64.94-1.95 3.47-2 4.55-2.33.08-4.45.7-6.1 1.72C4.86 8.98 3.96 8.5 3 8.5c-1.65 0-3 1.35-3 3 0 1.32.84 2.44 2.05 2.84-.03.22-.05.44-.05.66 0 3.86 4.5 7 10 7s10-3.14 10-7c0-.22-.02-.44-.05-.66 1.2-.4 2.05-1.54 2.05-2.84zM2.3 13.37C1.5 13.07 1 12.35 1 11.5c0-1.1.9-2 2-2 .64 0 1.22.32 1.6.82-1.1.85-1.92 1.9-2.3 3.05zm3.7.13c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2zm9.8 4.8c-1.08.63-2.42.96-3.8.96-1.4 0-2.74-.34-3.8-.95-.24-.13-.32-.44-.2-.68.15-.24.46-.32.7-.18 1.83 1.06 4.76 1.06 6.6 0 .23-.13.53-.05.67.2.14.23.06.54-.18.67zm.2-2.8c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm5.7-2.13c-.38-1.16-1.2-2.2-2.3-3.05.38-.5.97-.82 1.6-.82 1.1 0 2 .9 2 2 0 .84-.53 1.57-1.3 1.87z" />
</svg>
</span>
</a>
</div>
</div>
</div>
</article>
</div>
<div class="section pb-0">
<h2 class="h3 mb-12 text-center">Articoli Correlati</h2>
<div class="row">
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">17/03/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/le-basi-di-php/">
6. Le basi di PHP
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/inizia-qui/" class="ms-1 uppercase">
(
Inizia qui
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">25/04/2023</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/chiamata-ajax-e-php/">
Chiamata AJAX e PHP
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/php/" class="ms-1 uppercase">
(
Php
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">20/03/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/configurare-il-pc-per-sviluppare-in-wordpress/">
1. Configurare il PC per Sviluppare in WordPress
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/wordpress-base/" class="ms-1 uppercase">
(
Word press base
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">20/03/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/perche-installare-wordpress-in-locale/">
2. Perché installare WordPress in locale?
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/wordpress-base/" class="ms-1 uppercase">
(
Word press base
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">4/09/2019</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/configurare-il-pc-per-sviluppo-web-con-software-free/">
Configurare il PC per Sviluppo Web con Software Free
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/sviluppo-web/" class="ms-1 uppercase">
(
Sviluppo web
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">31/08/2019</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/che-cose-git/">
CHE COS’È GIT?
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/sviluppo-web/" class="ms-1 uppercase">
(
Sviluppo web
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">20/03/2021</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/come-creare-un-widget-wordpress-personalizzato/">
Come creare un widget WordPress personalizzato
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/wordpress-tricks/" class="ms-1 uppercase">
(
Word press tricks
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">30/04/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/creare-un-tema-wordpress-da-zero-parte-1/">
1. Creare un tema WordPress da zero – Parte 1
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/wordpress-dev/" class="ms-1 uppercase">
(
Word press dev
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">20/03/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/come-funziona-xampp/">
3. Come funziona XAMPP
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/wordpress-base/" class="ms-1 uppercase">
(
Word press base
)
</a>
</div>
</div>
</div>
<div class="md:col-12">
<div class="row single-guida mb-7 md:mb-0">
<div class="md:col-2 text-left text-md-right">
<span class="date">17/03/2020</span>
</div>
<div class="md:col-6">
<h2 class="mb-3">
<a href="/guide/le-basi-dellhtml/">
1. Le basi dell'HTML
</a>
</h2>
</div>
<div class="md:col-4 text-left text-md-right">
<a href="/argomenti/inizia-qui/" class="ms-1 uppercase">
(
Inizia qui
)
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-theme-light dark:bg-darkmode-theme-light">
<div class="container">
<div class="row items-center py-10">
<div class="lg:col-3 mb-8 text-center lg:mb-0 lg:text-left">
<a
class="navbar-brand inline-block"
href="/">
<img
fetchpriority="high"
decoding="async"
class="img logo-light"
width="160"
height="32"
src="/images/logoad_huddc59c0d0fdc929421cef7b6aeec0ed0_81172_320x0_resize_q90_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logoad_huddc59c0d0fdc929421cef7b6aeec0ed0_81172_320x0_resize_lanczos_3.png';" />
<img
fetchpriority="high"
decoding="async"
class="img logo-dark"
width="160"
height="32"
src="/images/logoad_huddc59c0d0fdc929421cef7b6aeec0ed0_81172_320x0_resize_q90_h2_lanczos_3.webp"
alt="Hugoplate"
onerror="this.onerror=null;this.src='\/images\/logoad_huddc59c0d0fdc929421cef7b6aeec0ed0_81172_320x0_resize_lanczos_3.png';" />
</a>
</div>
<div class="lg:col-6 mb-8 text-center lg:mb-0">
<ul>
<li class="m-3 inline-block">
<a
href="
/about/
"
>About</a
>
</li>
<li class="m-3 inline-block">
<a
href="
/guide/
"
>Guide</a
>
</li>
<li class="m-3 inline-block">
<a
href="
/blog/
"
>Blog</a
>
</li>
<li class="m-3 inline-block">
<a
href="
/contatti/
"
>Contatti</a
>
</li>
</ul>
</div>
<div class="lg:col-3 mb-8 text-center lg:mb-0 lg:mt-0 lg:text-right">
<ul class="social-icons">
<li>
<a
target="_blank"
aria-label="youtube"
rel="nofollow noopener"
href="https://www.youtube.com/@albydev2149">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="border-border dark:border-darkmode-border border-t py-7">
<div class="text-light dark:text-darkmode-light container text-center">
<p>
© 2024 Alby DEV | <a href='/privacy-policy' title='Privacy Policy'>Privacy Policy</a>
</p>
</div>
</div>
</footer>
<script
crossorigin="anonymous"
integrity="sha256-FVnoC75A+ZUMJPxg+zkvUV1Ws17Mkanh/1eP8AUPlCo="
src="/js/script.min.1559e80bbe40f9950c24fc60fb392f515d56b35ecc91a9e1ff578ff0050f942a.js"></script>
<script
defer
async
crossorigin="anonymous"
integrity="sha256-B6xkgfh/Kvqv5KhwfzCl2bDxX83d75UmDJHTJqlOs3M="
src="/js/script-lazy.min.07ac6481f87f2afaafe4a8707f30a5d9b0f15fcdddef95260c91d326a94eb373.js"></script>
<script>
if ('serviceWorker' in navigator){navigator.serviceWorker.register("/service-worker.js");}
</script>
</body>
</html>