Come migliorare il tuo modello di pagina 404 in WordPress (2 modi)

Vuoi migliorare il tuo modello di pagina 404 in WordPress?

Il miglioramento della pagina predefinita di WordPress 404 può aiutare a creare un'esperienza utente migliore, ridurre la frequenza di rimbalzo e aumentare le visualizzazioni di pagina.

In questo articolo, ti mostreremo come personalizzare il tuo modello di pagina 404 in WordPress, passo dopo passo.

Perché migliorare il tuo modello di pagina 404 in WordPress?

La maggior parte dei visitatori che atterrano sulla pagina 404 predefinita di WordPress lasceranno rapidamente il tuo sito Web WordPress.

Ciò aumenterà la frequenza di rimbalzo, creerà un'esperienza utente scadente e può persino avere un impatto negativo sul posizionamento nei motori di ricerca.

Migliorando la tua pagina WordPress 404, puoi inviare visitatori a post popolari, aumentare le visualizzazioni di pagina e ridurre la frequenza di rimbalzo e trasformare i visitatori occasionali in lettori e clienti a lungo termine.

Quando un visitatore rimane sul tuo sito più a lungo, è più probabile che effettui un acquisto, legga più post, si unisca alla tua lista e-mail e altro ancora.

Inoltre, può migliorare la SEO di WordPress, così otterrai più traffico dai motori di ricerca.

Nota: è importante creare una pagina 404 personalizzata, ma dovresti anche tenere traccia degli URL 404 utilizzati dai visitatori per visitare il tuo sito Web e quindi impostare reindirizzamenti adeguati per migliorare le classifiche SEO.

Per maggiori dettagli, consulta la nostra guida su come tracciare facilmente 404 pagine e reindirizzarle in WordPress.

Detto questo, diamo un'occhiata a come puoi migliorare il tuo modello di pagina 404 in WordPress.

Videotutorial

Se preferisci le istruzioni scritte, continua a leggere.

Metodo 1. Crea una pagina 404 personalizzata in WordPress senza codice

Il modo migliore e più adatto ai principianti per migliorare il tuo modello di pagina 404 è utilizzare il plug-in SeedProd per la creazione di pagine.

SeedProd è il miglior generatore di pagine di destinazione per WordPress. Ti consente di creare, modificare e personalizzare le tue pagine WordPress senza scrivere alcun codice.

Con questo plugin, puoi facilmente creare una pagina 404 personalizzata utilizzando i modelli di pagina 404 inclusi.

La prima cosa che devi fare è installare il plugin SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Nota: è disponibile una versione gratuita di SeedProd, ma utilizzeremo la versione Pro poiché ha i modelli di pagina 404 di cui abbiamo bisogno.

Dopo l'attivazione, devi accedere a SeedProd »Impostazioni e inserire la tua chiave di licenza. Puoi trovare queste informazioni nella pagina del tuo account sul sito Web SeedProd.

Successivamente, vai su SeedProd »Pagine e fai clic sul pulsante "Imposta una pagina 404" nella meta casella "Pagina 404".

Questo ti porterà a una pagina in cui puoi selezionare il tuo modello di pagina 404.

Ci sono dozzine di modelli di pagina 404 progettati professionalmente che puoi scegliere per aiutarti a iniziare rapidamente.

Per selezionare un modello, passaci sopra con il mouse e fai clic sull'icona "Segno di spunta". Per questo tutorial, utilizzeremo il modello "Oh No 404 Page", ma puoi utilizzare qualsiasi modello che ti piace.

Dopo aver selezionato un modello, verrai indirizzato al generatore di trascinamento della selezione, dove puoi iniziare a personalizzare la tua pagina 404.

Troverai blocchi e sezioni che puoi aggiungere alla tua pagina 404 sul lato sinistro dello schermo. Il lato destro della pagina è l'anteprima dal vivo. Ogni elemento della pagina può essere modificato e personalizzato.

Per prima cosa, aggiungeremo del testo e diremo agli utenti cosa fare dopo. Invece di semplicemente atterrare su una pagina 404 e andartene, puoi indirizzare i tuoi visitatori verso contenuti di valore e le prossime azioni da intraprendere.

Per fare ciò, trascina il blocco "Testo" sulla tua pagina e fai clic su di esso per modificare il testo.

Successivamente, cambieremo il collegamento del pulsante della home page e collegheremo invece uno dei contenuti più preziosi.

Questo può essere un post sul tuo blog WordPress che è il più popolare o quello che ti porta più entrate.

Per prima cosa, trascina sul blocco "Titolo" e aggiungi il tuo nuovo titolo.

Quindi, trascina su un altro blocco "Testo" e inserisci del testo che descriva il tuo articolo.

Successivamente, fai clic sul pulsante per visualizzare la schermata dell'editor dei pulsanti.

Qui puoi personalizzare il testo, il colore, le dimensioni e altro ancora.

Aggiungi i tuoi post più popolari alla tua pagina 404 di WordPress

Successivamente, puoi aggiungere i tuoi articoli più popolari. Dal momento che questi articoli hanno dimostrato di essere popolari, ci sono buone probabilità che i tuoi visitatori trovino qualcosa che gli piace.

Il modo più semplice per farlo è utilizzare il plug-in MonsterInsights. È la migliore soluzione di analisi per WordPress utilizzata da oltre 3 milioni di siti Web.

Con questo plugin, puoi semplicemente aggiungere post popolari ovunque sul tuo sito Web WordPress.

Per maggiori dettagli, consulta la nostra guida su come visualizzare i post popolari in base alle visualizzazioni in WordPress.

Una volta attivato e configurato il plug-in, tutto ciò che devi fare è aggiungere un singolo shortcode alla tua pagina.

Per fare ciò, trascina semplicemente il blocco "Shortcode" sulla tua pagina.

Quindi, inserisci il seguente shortcode per visualizzare i tuoi post più popolari.

La parte theme=“beta” si riferisce a come verranno visualizzati i tuoi post popolari. Se vuoi vedere come appaiono i diversi temi, vai su Approfondimenti »Post popolari e fai clic su "Widget post popolari".

Nella sezione "Scegli tema", puoi visualizzare ciascuno dei temi e i loro nomi.

Puoi anche aggiungere un titolo sopra i tuoi post popolari seguendo gli stessi passaggi di cui sopra.

Aggiungi un modulo di contatto alla tua pagina 404 di WordPress

Successivamente, puoi aggiungere un modulo di contatto direttamente alla tua pagina 404. Ciò consente ai tuoi visitatori di contattarti se non sono riusciti a trovare ciò che stavano cercando nei link sopra.

Il modo migliore per aggiungere un modulo di contatto al tuo sito è utilizzare il plug-in WPForms. È il miglior plug-in per moduli di contatto per WordPress utilizzato da oltre 4 milioni di siti Web.

Per maggiori dettagli, consulta la nostra guida passo passo su come creare un modulo di contatto in WordPress.

Una volta attivato e configurato il plug-in, puoi semplicemente trascinare il blocco "Modulo di contatto" sulla tua pagina.

Quindi, tutto ciò che devi fare è selezionare il modulo di contatto dall'elenco a discesa.

Devi prima creare il tuo modulo di contatto prima di poterlo aggiungere alla tua pagina 404.

Puoi anche aggiungere un blocco "Titolo" o "Testo" sopra il modulo di contatto.

Segui gli stessi passaggi di cui sopra per aggiungere quei blocchi.

Una volta terminate le modifiche, assicurati di fare clic su "Salva" nell'angolo in alto a destra della pagina.

Se desideri pubblicare la tua pagina in tempo reale, seleziona la freccia a discesa accanto a "Salva" e fai clic su "Pubblica".

Puoi anche modificare il logo e il menu di navigazione facendo clic su di essi e apportando le modifiche con il pannello a sinistra, quindi seguendo la stessa procedura di modifica di cui sopra.

Sentiti libero di continuare a personalizzare la tua pagina, aggiungere nuovi blocchi e testare diversi layout per vedere cosa preferiscono i tuoi visitatori.

Se sei il proprietario di un negozio WooCommerce, puoi personalizzare la tua pagina 404 visualizzando prodotti popolari per aumentare le vendite.

Per rendere attiva la tua nuova pagina 404, torna a SeedProd » Pagine e quindi cambia l'interruttore "Pagina 404" su "Attivo".

Ora, i tuoi visitatori vedranno la tua pagina 404 ad alta conversione, invece dell'opzione predefinita.

Suggerimento per professionisti: puoi monitorare le prestazioni della tua pagina WordPress 404 per vedere come si sta convertendo e quali modifiche sono più utili. Per maggiori dettagli, consulta la nostra guida per principianti su come installare Google Analytics in WordPress.

Metodo 2. Crea una pagina 404 personalizzata in WordPress aggiungendo codice

Questo metodo non è adatto ai principianti perché dovrai aggiungere codice e modificare i file del tema di WordPress.

Se non l'hai mai fatto prima, consulta la nostra guida per principianti per incollare frammenti dal Web in WordPress.

Innanzitutto, devi creare un nuovo file nella cartella del tema di WordPress e 404.php . Se il tuo tema ha già un file 404.php , dovrai invece modificare quel file.

Per modificare questo file, devi connetterti al tuo account di hosting WordPress con un client FTP o il loro strumento di gestione dei file.

Dopo esserti connesso al tuo sito web, puoi vedere il tuo file 404.php nella cartella del tuo tema WordPress.

Nota: prima di personalizzare il tuo tema WordPress, ti consigliamo di eseguire il backup del tuo sito WordPress. Per maggiori dettagli, consulta la nostra guida su come eseguire il backup e il ripristino del tuo sito WordPress.

Mostra i post più popolari sulla pagina 404

La prima cosa che devi fare è installare e attivare il plugin gratuito WordPress Popular Posts. È uno dei migliori plugin di post popolari per WordPress.

Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l'attivazione, devi aggiungere questo tag modello nel tuo file 404.php in cui desideri visualizzare i post popolari.

<?php wpp_get_mostpopular(); ?>

Mostra i post più commentati sulla pagina 404

Per aggiungere i post più commentati alla tua pagina WordPress 404 utilizzeremo lo stesso plugin che hai attivato sopra.

Aggiungi semplicemente il seguente tag modello in cui desideri visualizzare i tuoi post più commentati.

<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

Puoi anche consultare la nostra guida su come visualizzare i post più commentati in WordPress.

Mostra i post recenti sulla pagina 404

Esistono diversi modi per visualizzare i post recenti in WordPress.

Il modo più semplice è aggiungere questo tag modello nel tuo modello 404 per visualizzare i tuoi post recenti.

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

Visualizza messaggi casuali sulla pagina 404

Se desideri visualizzare un elenco casuale di post in WordPress, puoi semplicemente aggiungere questo codice nel tuo modello 404 in cui desideri visualizzare un elenco casuale di post dal tuo sito.

<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>

Aggiungi archivi mensili con archivi compatti

Se hai molti contenuti sul tuo sito web, un ottimo modo per organizzarli è mostrare i tuoi archivi mensili.

Qui su WPBeginner, mostriamo i nostri archivi mensili sulla nostra pagina 404 utilizzando il plugin Compact Archives. Questo plugin è sviluppato e mantenuto dal nostro team.

Per maggiori dettagli, consulta la nostra guida su come creare archivi compatti in WordPress.

Una volta che il plugin è stato attivato e configurato, aggiungi semplicemente il seguente codice al tuo file 404.php .

<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($); ?>
</ul>

Quando un utente atterra sulla tua pagina 404, vedrà i tuoi archivi di post compatti.

Ecco come viene visualizzato sulla nostra pagina 404.

Un modello 404 di esempio per WordPress

Ecco un file 404.php di esempio basato sul modello di pagina 404 del tema WordPress predefinito Twenty Twenty-One.

<?php
/**
 * The template for displaying 404 pages (not found)
 *
 * @link https://codex.wordpress.org/Creating_an_Error_404_Page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_One
 * @since Twenty Twenty-One 1.0
 */

get_header();
?>

	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->

	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
			
			<h4>While you're here, check out some of our popular content:</h4>
 
<div class="col1">
<div class="col-header">          
<strong>Popular</strong>
</div>
<?php wpp_get_mostpopular(); ?>
</div>
 
<div class="col2">
<div class="col-header">          
<strong>Comments</strong>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>
 
<div class="col3">
<div class="col-header">          
<strong>Recent</strong>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 5, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
			
		</div><!-- .page-content -->
	</div><!-- .error-404 -->

<?php
get_footer();

Confronta questo modello 404 con il modello predefinito in Twenty Twenty-One.

Noterai che subito dopo il modulo di ricerca abbiamo aggiunto il nostro codice personalizzato per visualizzare i post più popolari, più commentati e recenti.

Successivamente abbiamo aggiunto CSS personalizzato al foglio di stile del tema di WordPress per dividerlo in colonne.

Per maggiori dettagli, consulta la nostra guida su come aggiungere facilmente CSS personalizzati al tuo sito WordPress.

.col1, .col2, .col3  
width:30%;
float:left;
padding:0px 10px 10px 10px;
margin:0px;

.col3:after
clear:both;

.col-header  
background:#28303D;
color:#D1E3DD;
margin:0px;
padding:1px;
text-align:center;

Questo è il risultato finale dopo aver aggiunto il codice della pagina 404 personalizzato sopra.

Ci auguriamo che questo articolo ti abbia aiutato a migliorare il tuo modello di pagina 404 in WordPress. Potresti anche voler vedere i migliori esempi di progettazione di pagine di errore 404 di WordPress e le nostre scelte di esperti del miglior software di notifica push web per aumentare il traffico del tuo sito web.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per i tutorial video di WordPress. Ci trovate anche su Twitter e Facebook.