Nella maggior parte dei casi, le pagine di archivio, a meno che non si utilizzino degli editor o temi specifici, non hanno molta flessibilità di personalizzazione.
Può essere perciò necessario interagire con queste pagine utilizzando del codice.
Matteo, non è un procedimento complicato possibile solo a degli sviluppatori?
No, tutto il contenuto riportato sotto è spiegato passo dopo passo per permetterti di capire cosa stai modificando.
Se non vuoi perdere queste modifiche in un futuro aggiornamento del tuo tema, prima di procedere, dovrai assicurarti di avere installato un child theme.
Sei pronto? Iniziamo!
Gerarchia dei template per gli archivi su WordPress
WordPress ha un sistema di template molto efficace.
Nel caso volessimo modificare una pagina di categoria o di tag questo è l’ordine gerarchico che seguirebbe:
- category-slug.php o tag-slug.php
- category-id.php o tag-id.php
- category.php o tag.php
- archive.php
- index.php
Se per esempio volessimo modificare una singola pagina di categoria con slug “fotografia” basterà creare il file category-fotografia.php
Se WordPress non dovesse trovare nessun file chiamato category-fotografia.php passerà alla seconda gerarchia e cioè a category-id.php dove l’id sarà quello della categoria e così via.
Modifica il file archive.php se vuoi che sia le pagine di tag sia quelle di categoria abbiano lo stesso template.
Creare un template per pagine archivio, categoria o tag
Ora prenderò di riferimento la pagina archive.php ma il procedimento è analogo per gli altri file.
Ti ricordo di scegliere, come spiegato nel capitolo precedentemente, il file a seconda della personalizzazione che vuoi effettuare.
La prima cosa da fare ora sarà quella di esaminare se il file esiste o meno.
Per fare ciò vai nella gestione file del tuo hosting o utilizza una connessione FTP.
Altrimenti puoi anche installare e usare il plugin wp file manager.
Ora vai al seguente percorso wp-content > themes > tema-child.
Qui dovresti trovare uno o più file con le modalità spiegate nel capitolo precedente.
Se non trovi nessun file dovrai crearli.
Una volta aver creato il file archive.php apriamolo e iniziamo a personalizzarlo.
Aggiungiamo subito l’intestazione e l’header del tema.
<?php
/**
* Template di archivio per categorie e tag
*/
get_header(); ?>
<!-- Aggiungi qui il contenuto successivo -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>Si noti che l’intestazione non è altro che un commento e non viene eseguito dal codice, proprio per questo è rimovibile senza problemi.
La funzione get_header(); invece, è colei che richiama l’header e tutte le classi CSS e JS che permettono la corretta visualizzazione del nostro sito.
Praticamente richiama tutto il contenuto presente tra i tag <head></head>.
Da non sottovalutare e rimuovere anche le ultime due classi.
Ora aggiungiamo il seguente codice subito sotto il precedente.
<div class="contenuto-archivio">
<!-- Inserisci qui il contenuto successivo -->
</div>Adesso, prima di aggiungere qualsiasi contenuto, è molto importante effettuare un controllo.
Questo ci dirà se nella seguente categoria o tag sono presenti uno o più articoli.
<!-- Controlla se ci sono dei post da mostrare -->
<?php if ( have_posts() ) : ?>
<!-- Segue questo ciclo se sono presenti articoli da mostrare -->
<?php else: ?>
<!-- Segue questo ciclo se non sono presenti articoli da mostrare -->
<?php endif; ?>Ora inseriamo il contenuto del primo caso, subito sotto <?php if ( have_posts() ) : ?>
Inseriamo innanzitutto l’immagine hero.
<!-- Imposta hero -->
<div style="padding: 0px; background-position: 0% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover,contain!important;
height: 400px !important;
width: 100%!important;
max-width: 100%!important;
margin: 0 auto!important;
background-size: cover,contain!important; background-image: url(https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_1280.png)!important;" class="container archive_container">
<div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 0;left: 0;position: absolute; "></div>
<div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
<!-- Inserisci qui il contenuto successivo -->
</div>
</div>Ora inseriamo il numero degli articoli presenti, il nome e la descrizione della categoria.
<!-- Mostra numero articoli, nome categoria e descrizione categoria -->
<header class="header-categoria">
<!-- Mostra numero articoli -->
<h3 class="num-articoli" style="text-align: center; color:#FFF;">
<?php
$category = get_queried_object();
echo $category->count." ARTICOLI";
?>
</h3>
<!-- Mostra nome categoria -->
<h1 style="text-align: center; color:#FFF; margin-top: 15px; margin-bottom: 20px;" class="archive-title"><?php single_cat_title(); ?></h1>
<!-- Mostra descrizione della categoria -->
<?php if ( category_description() ) : ?>
<div style="text-align: center; color:#FFF; width: 50%; margin: 0 auto;" class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</header>Perfetto, se è andato tutto bene dovresti vedere una cosa simile a questa.
Tieni in considerazione che ovviamente l’immagine inserita nel codice è diversa e che il risultato potrebbe non essere proprio simile.
Puoi farlo diventare identico aggiungendo del CSS apposito.
Se non sai come fare scrivimi in chat e ti risponderò il prima possibile. Rispondo entro 24 ore.
Questo è il codice che dovresti avere attualmente:
<?php
/**
* Template di archivio per categorie e tag
*/
get_header(); ?>
<div class="jupiterx-content" role="main" itemprop="mainEntityOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
<!-- Controlla se ci sono dei post da mostrare -->
<?php if ( have_posts() ) : ?>
<!-- Imposta hero-->
<div style="padding: 0px; background-position: 0% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover,contain!important;
height: 400px !important;
width: 100%!important;
max-width: 100%!important;
margin: 0 auto!important;
background-size: cover,contain!important; background-image: url(https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_1280.png)!important;" class="container archive_container">
<div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 0;left: 0;position: absolute; "></div>
<div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
<!-- Mostra numero articoli, nome categoria e descrizione categoria -->
<header class="header-categoria">
<!-- Mostra numero articoli -->
<h3 class="num-articoli" style="text-align: center; color:#FFF;">
<?php
$category = get_queried_object();
echo $category->count." ARTICOLI";
?>
</h3>
<!-- Mostra nome categoria -->
<h1 style="text-align: center; color:#FFF; margin-top: 15px; margin-bottom: 20px;" class="archive-title"><?php single_cat_title(); ?></h1>
<!-- Mostra descrizione della categoria -->
<?php if ( category_description() ) : ?>
<div style="text-align: center; color:#FFF; width: 50%; margin: 0 auto;" class="archive-meta"><?php echo category_description(); ?></div>
<?php endif; ?>
</header>
</div>
</div>
<!-- Inserisci qui il contenuto successivo -->
<?php else: ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>Una volta verificato che vada tutto bene procediamo dove ho inserito il commento, sopra <?php else: ?>.
Aggiungiamo un altro blocco per definire il contenuto tra l’hero e il footer.
<div class="contenuto" style="max-width: 590px; margin: 0 auto;">
<!-- Inserisci qui il contenuto successivo -->
</div>Ora aggiungiamo una barra di ricerca per facilitare la navigazione dell’utente.
<div class="cerca" style="margin-bottom: 40px; margin-top: 20px;"><?php get_search_form() ?></div>
<!-- Inserisci qui il contenuto successivo -->Grandioso, ora aggiungiamo la pubblicazione dei vari articoli con immagine thumbanil, titolo, data di pubblicazione, numero dei commenti, autore e paginazione.
Se hai bisogno di aggiungere altri tipi di variabili ti consiglio di controllare sul sito di wordpress.org
<div class="contenuto-articoli">
<!-- Loop degli articoli -->
<?php while ( have_posts() ) : the_post(); ?>
<div class="cat_wrapper" style="margin-bottom: 25px; display: flex;">
<!-- Thumbnail -->
<div class="thumbnail" style="float: left; width: 61px; min-height: 61px; margin-right: 15px;">
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php echo the_post_thumbnail(array(60,60)); ?>
</a>
</div>
<!-- Titolo e Meta -->
<div class="titolo-meta" style="max-width: 515px; border-bottom: 1px solid #b4becc; padding-bottom: 5px;">
<!-- Titolo -->
<h2 style="font-size: 20px; line-height: 1.35;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<!-- Meta -->
<div class="entry-content-meta">
<!-- Data -->
<time class="Data" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
<?php the_time('j F, Y') ?>
</time>
<!-- Numero commenti -->
<span class="numero-commenti" style="margin-right: 25px; color: #a0a0a0; font-size: 12px; text-transform: uppercase;">
<?php comments_popup_link( '0 Commenti', '1 comment', '% comments', 'comments-link', 'Comments closed'); ?>
</span>
<!-- Autore articolo -->
<span class="autore" style="color: #a0a0a0; font-size: 12px; text-transform: uppercase;"> Scritto da <?php the_author_posts_link() ?>
</span>
</div>
</div>
</div>
<?php endwhile; ?>
<!-- Impaginazione numerata -->
<?php
the_posts_pagination (array (
'mid_size' => 2,
'prev_text' => __ ('Indietro', 'textdomain'),
'next_text' => __ ('Avanti', 'dominio del testo'),
));?>
</div>
</div>Adesso dovresti trovarti con una pagina archivio simile a questa.
Perfetto, il primo step è stato concluso.
Non ci resta altro che aggiungere il codice nella seconda parte della selezione e cioè quella in cui non vi saranno presenti articoli.
Dovrai quindi scrivere questo codice sotto <?php else: ?> che dovresti trovare in fondo al file.
<div style="padding: 0px; background-position: 0% 20%;
background-repeat: no-repeat;
-webkit-background-size: cover,contain!important;
height: 400px !important;
width: 100%!important;
max-width: 100%!important;
margin: 0 auto!important;
background-size: cover,contain!important; background-image: url(https://cdn.pixabay.com/photo/2017/03/25/17/55/color-2174045_1280.png)!important;" class="container archive_container">
<div class="overlay" style="background-color: #000000; opacity: 0.6; height: 400px !important;width: 100%;top: 0;left: 0;position: absolute; "></div>
<div class="thumbnail-no-overlay" style="position: relative; padding: 80px 50px;">
<h2 style="color:#FFF; text-align:center; font-size: 40px; font-weight: 700; margin-bottom: 40px;">Nessun post trovato</h2>
<!-- Inserisce barra di ricerca -->
<div class="cerca" style="margin-bottom: 40px; margin-top: 20px;"><?php get_search_form() ?></div>
</div>
</div>Abbiamo finito, ora non ti resta altro che aggiungere il tuo codice CSS per personalizzare al meglio le tue pagine di archivio.
Puoi aggiungere codice CSS direttamente di fianco ai vari tag oppure inserendo sotto alla funzione get_header() i tag <style> come nell’esempio qui sotto.
get_header(); ?>
<style>
/* Aggiungi qui il tuo codice CSS */
</style>Conclusioni
Con questo articolo abbiamo visto come poter personalizzare e migliorare le pagine di archivio che comprendono le pagine di categoria e tag.
Grazie a questa modifica inoltre, migliorerai la user experience, fattore essenziale per una buona ottimizzazione SEO.
Sai inoltre che è possibile creare dei widget custom per le tue sidebar direttamente con il codice e senza l’ausilio di alcun plugin?
Hai avuto dei problemi durante la personalizzazione di questi file? Contattami tramite la chat che trovi in fondo a destra e risponderò il prima possibile.
Cordiali saluti,
Feduzi Matteo.