Stai cercando modi per modificare la pagina di errore 404 sul tuo sito? Allora sei nel posto giusto. In questa guida, ti mostreremo diversi modi per personalizzare la pagina 404 in WordPress .

Se usi regolarmente Internet, probabilmente ti sei imbattuto almeno una volta in una pagina di errore 404. Di solito e la pagina che appare quando la pagina richiesta non è disponibile. La maggior parte dei gestori di siti web lascia la pagina 404 predefinita senza rendersi conto che può fare molto di più per ottenere il massimo da quella pagina. La buona notizia è che se usi WordPress, puoi personalizzarla facilmente.

Prima di vedere come modificare questa pagina di errore però, cerchiamo di comprendere meglio cos’è la pagina 404 e quali sono i vantaggi della sua personalizzazione.

Cos’è una pagina 404?

Una pagina di errore 404 è la pagina di un sito web che viene visualizzata quando un utente inserisce un link interrotto o non valido nel browser web. Ciò significa che la pagina a cui il visitatore sta tentando di accedere non è accessibile. Come puoi immaginare, questa non è una buona cosa per il tuo sito.

Avere link interrotti nel proprio sito fornisce ai visitatori un’esperienza scadente, ma può anche influenzare le tue posizioni SEO. Come regola generale, dovresti cercare di evitare di inviare visitatori alla pagina 404 perché non troveranno quello che stanno cercando.

Tuttavia, i tuoi visitatori atterreranno su pagine 404 almeno una volta, non importa quanto sia ben mantenuto il tuo sito web. Potrebbe accadere anche se il server è inattivo, una pagina spostata non viene reindirizzata correttamente o la pagina stessa non è mai esistita. Inoltre, gli utenti potrebbero anche finire su una pagina 404 perché hanno inserito un URL errato nel browser. Quindi non ha senso impedire completamente le pagine 404 nel tuo sito web.

Perché personalizzare la pagina 404?

Dal momento che non puoi evitare completamente che i visitatori arrivino a una pagina di errore 404, dovresti sfruttarla al meglio e trasformare una brutta esperienza in un’opportunità.

Le pagine 404 predefinite della maggior parte dei siti web non sono eccezionali. Di solito mostrano solamente un errore “Non trovato” con alcuni dettagli tecnici del problema che di solito sono molto simili. Come puoi immaginare, non è il massimo per l’utente. L’unica cosa che l’utente può fare è tornare alla pagina precedente o lasciare il sito web. 

pagina 404 predefinita personalizza la pagina 404 in wordpress

La buona notizia è che, poiché la maggior parte dei siti ha la pagina 404 predefinita, puoi distinguerti dalla concorrenza modificandola. In WordPress, puoi facilmente personalizzare la pagina 404, fornire informazioni aggiuntive agli utenti e incoraggiarli ad agire. 

Ci sono numerose possibilità su come modificare la pagina 404 del tuo sito. Ad esempio, puoi migliorare il design della pagina cambiando lo sfondo e aggiungendo alcune opzioni. Allo stesso modo, puoi far sapere all’utente perché potrebbe essere arrivato sulla pagina 404 e aggiungere alcuni suggerimenti per ottenere le informazioni che desidera. In alternativa, puoi aggiungere alcuni link ad altri post o pagine utili del tuo sito web. 

Queste personalizzazioni possono anche fare impressione sui tuoi visitatori, il che è sempre positivo per il tuo sito web.

Senza ulteriori indugi, vediamo come modificare le pagine 404. 

Come personalizzare la pagina 404 in WordPress

Esistono 2 modi principali per personalizzare facilmente la pagina 404 in WordPress:

  1. A livello di programmazione
  2. Con un plugin

Diamo un’occhiata a ciascun metodo in modo da poter scegliere quello più appropriato per te.

Prima di iniziare con il processo, assicurati di creare un backup completo del tuo sito . Modificheremo le informazioni sensibili sul tuo sito web, quindi è sempre una buona idea avere un backup nel caso qualcosa vada storto.

1) Personalizza la pagina 404 di WordPress utilizzando il codice

Questo metodo è molto utile per coloro che hanno alcune capacità di programmazione e ti offre molta flessibilità per modificare la pagina 404. Anche se non sei un utente avanzato, puoi facilmente personalizzare vari componenti della pagina 404 aggiungendo alcuni snippet.

Tutto quello che devi fare è andare su Aspetto > Editor temi nella dashboard di WordPress e aprire il file 404.php dal lato destro dello schermo.  Qui è dove dovrai aggiungere gli snippet di codice che vedremo di seguito. 

L'editor di temi per personalizzare la pagina 404 in wordpress

Tieni presente che il codice su questi file varia a seconda del tema che utilizzi . Per questo tutorial useremo il tema Divi , ma il codice potrebbe avere un aspetto diverso se utilizzi un altro tema. 

Se utilizzi un tema diverso, usa i seguenti snipper di codice come base e modificali per personalizzare le tue pagine 404 in WordPress.

Personalizzazione del testo e del titolo della pagina 404

Puoi facilmente personalizzare il testo e il titolo della pagina 404 modificando il codice predefinito nel file 404.php .

Il codice predefinito della tua pagina di errore 404 potrebbe essere simile a questo.

<?php get_header(); ?>

    <div id="main-content">
        <div class="container">
            <div id="content-area" class="clearfix">
                <div id="left-area">
                    <article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>
                        <?php get_template_part( 'includes/no-results', '404' ); ?>
                    </article> <!-- .et_pb_post -->
                </div> <!-- #left-area -->

                    <?php get_sidebar(); ?>
            </div> <!-- #content-area -->
        </div> <!-- .container -->
    </div> <!-- #main-content -->

<?php

get_footer();

Tutto quello che devi fare è sostituire l’intero tag <article> con una serie di tag di intestazione e aggiungere il testo e i titoli che desideri visualizzare nella pagina 404 come segue.

<?php get_header(); ?>

    <div id="main-content">
        <div class="container">
            <div id="content-area" class="clearfix">
                <div id="left-area">
                    <h2> Pagina non trovata - Errore 404 </h2>
                    Potrebbe essere un errore del server. 
                </div> <!-- #left-area -->

                    <?php get_sidebar(); ?>
            </div> <!-- #content-area -->
        </div> <!-- .container -->
    </div> <!-- #main-content -->

<?php

get_footer();

Suggerimento rapido: se desideri visualizzare l’anteprima della pagina 404, puoi semplicemente inserire l’URL del tuo sito web in una nuova scheda del tuo browser web e aggiungere il percorso 404 .

Ad esempio, se l’URL del tuo sito è ” www.sitename.com “, puoi semplicemente aggiungere il 404 alla fine di esso (” www.sitename.com/404 “) per visualizzare in anteprima la pagina 404.

Assicurati che non ci siano pagine con il percorso esatto sul tuo sito. Se esiste già, puoi aggiungere alcuni caratteri casuali al percorso come ” www.sitename.com/404-preview-404″ . 

Visualizza i post più recenti nella pagina 404

Se desideri visualizzare i post più recenti nella pagina 404 del tuo sito web, aggiungi semplicemente il seguente frammento di codice al file 404.php .

<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

In questo caso, stiamo visualizzando gli ultimi 10 post, ma puoi cambiare l’attributo limite con il numero di post recenti che vuoi mostrare.

Mostra post casuali nella pagina 404

Allo stesso modo, puoi anche mostrare post casuali sulla pagina 404. Per questo, aggiungi lo snippet di codice al file 404.php .

<ul>
<?php
$posts = get_posts('orderby=rand&numberposts=5');
   foreach($posts as $post) { ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php } ?>
</ul>

Modificando lo snippet di codice puoi anche regolare il numero di post casuali che desideri visualizzare.

Se non ti senti sicuro a modificare i file con il codice, puoi anche modificare la pagina 404 con i plugin.

2) Personalizza la pagina 404 in WordPress con un plugin

Questo metodo può essere utile se non conosci il codice o preferisci non modificare i file con snippet di codice. L’utilizzo di un plugin è uno dei modi più semplici e veloci per personalizzare la pagina 404 nel tuo sito web WordPress. Tutto quello che devi fare è installare il plugin e apportare alcune modifiche. 

Ci sono diversi plugin che puoi usare per modificare le pagine 404. 

Alcuni dei migliori sono:

2.1) 404page

404page è uno dei plugin WordPress più popolari per personalizzare la pagina 404. Ti consente di utilizzare l’editor di WordPress predefinito per aiutarti a creare le tue pagine di errore personalizzate. 

Il plugin è molto facile da usare, quindi puoi modificare la tua pagina 404 in pochi minuti. Funziona bene con i temi e i plugin più conosciuti di WordPress, quindi non avrai problemi di compatibilità.

Caratteristiche principali
  • Utilizza l’editor di pagine WordPress predefinito per modificare la pagina 404
  • Compatibile con i principali temi e plugin WordPress
  • Molto semplice e facile da usare
  • Ben documentato con un manuale
Prezzo

404page è un plugin gratuito.

2.2) Colorlib 404 Customizer

Colorlib 404 Customizer è un ottimo plugin per personalizzare le pagine 404. Offre la possibilità di modificare le pagine 404 con il customizer del tema, il che è molto comodo in quanto puoi vedere tutte le modifiche apportate nell’anteprima live.

Puoi anche modificare le immagini di sfondo della pagina 404 e i diversi template di pagine 404. Se necessario puoi anche aggiungere CSS personalizzati alla pagina per modificarla ulteriormente,

Caratteristiche principali
  • Ti consente di utilizzare il Customizer di temi per modificare la pagina 404
  • Opzioni aggiuntive per modificare il testo e lo sfondo della pagina 404
  • Opzione per aggiungere CSS personalizzato alle pagine 404, se necessario
  • Diversi template di pagine 404
Prezzo

Questo plugin è gratuito al 100% e puoi scaricarlo dal repository di WordPress.

Personalizzazione della pagina 404 con il plugin Colorlib 404

Vediamo ora come modificare la pagina 404 con uno dei plugin. Per questo tutorial, useremo Colorlib 404 Customizer . Oltre a consentirti di vedere le modifiche apportate in tempo reale, hai accesso a 20 diversi templaste di pagina per il tuo sito web. Quindi, tutto ciò che devi fare è apportare alcune modifiche con il customizer e aggiornare le pagine 404.

Diamo un’occhiata al processo passo passo.

Installa e attiva il plugin

Per installare il plugin, nella dashboard di WordPress vai su Plugin > Aggiungi nuovo e cerca il plugin nella barra di ricerca come mostrato nello screenshot sotto. Una volta trovato Colorlib 404 Customizer, fai clic su Installa ora per installare il plugin e quindi attivarlo.

Installa il plugin 404 customizer su WordPRess

Puoi anche scaricare e installare il plugin manualmente. Se non sei sicuro di come farlo, consulta la nostra guida su come installare un plugin di WordPress .

Personalizza la tua pagina 404

Dopo aver attivato il plugin, vai su Aspetto> Personalizza per aprire il customizer del tema. Vai alla scheda Colorlib 404 customizer settings e vedrai tre opzioni: Template attivo, Opzioni generali e Custom CSS. A seconda del template scelto, potresti vedere più opzioni.

L’anteprima del pcustomizer cambierà di conseguenza nella tua nuova pagina 404 personalizzata. Innanzitutto, seleziona il modello che desideri per la tua pagina 404 facendo clic sul pulsante Modifica su template attivo. Puoi scegliere tra 20 diversi template.

cambia il mtemplate attivo e personalizza la pagina 404 in wordpress

Quindi, seleziona le opzioni Generali . Qui, devi attivare il customizerdi Colorlib 404 per visualizzare la pagina 404 personalizzata. Successivamente, puoi aggiungere o modificare l’immagine di sfondo e il testo come contenuto principale della pagina. Inoltre, puoi regolare la ripetizione dello sfondo, le dimensioni e il colore della pagina.

Puoi anche aggiungere testo e link se desideri reindirizzare i tuoi visitatori altrove dalle pagine 404. Questo è molto utile per portare gli utenti a pagine pertinenti ed essere sicuroi che rimangano sul tuo sito. 

Il plugin include un pulsante predefinito per portare il tuo pubblico alla home page che puoi anche personalizzare.

opzioni generali per personalizzare la pagina 404 in wordpress con il plugin Colorlib

Se torni indietro e apri le opzioni Custom CSS, puoi modificare la pagina utilizzando i tuoi codici CSS personalizzati. Questo può essere utile per modificare il design della pagina e abbinarlo all’aspetto base del tuo sito.

Come accennato in precedenza, puoi visualizzare tutte le modifiche apportate in tempo reale con l’anteprima del pcustomizer. Quando sei soddisfatto di tutte le modifiche alla tua pagina 404, premi Pubblica per aggiornare la pagina. 

anteprima finale della pagina 404 customizzata in wordpress

Conclusione

In sintesi, non importa quanto perfetto mantieni il tuo sito, i visitatori finiranno per imbattersi sicuramente in una pagina 404. La maggior parte degli amministratori di siti web di solito lascia la pagina predefinita, ma è possibile modificarla e sfruttarla al meglio. Modificando la pagina 404, puoi distinguerti dai tuoi concorrenti migliorando l’esperienza dei visitatori ed evitare di perdere utenti.

In questa guida, abbiamo visto diversi modi per personalizzare la pagina 404:

  • A livello di programmazione
  • Con un plugin dedicato

Se hai capacità di programmazione, puoi utilizzare gli snippet di codice che ti abbiamo suggerito per modificare la pagina 404. Puoi modificare il testo del sito web, aggiungere link e pulsanti utili, visualizzare i post recenti, inserire un modulo di ricerca e altro ancora. Diversamente, se sei un principiante e non hai dimestichezza con la modifica dei file del CMS, per modificare le pagine 404 puoi utilizzare un plugin.

Buon lavoro.