Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come migliorare il template della pagina 404 in WordPress (2 modi)

Nota editoriale: guadagniamo una commissione dai link dei partner su WPBeginner. Le commissioni non influenzano le opinioni o le valutazioni dei nostri redattori. Per saperne di più su Processo editoriale.

Volete migliorare il modello della vostra pagina 404 in WordPress?

Sostituendo la pagina 404 predefinita di WordPress con un proprio design, è possibile mostrare ai visitatori contenuti e informazioni interessanti. Questo può migliorare l’esperienza dell’utente e far rimanere le persone sul vostro sito più a lungo.

In questo articolo vi mostreremo come personalizzare il modello della pagina 404 in WordPress.

How to improve your 404 page template in WordPress

Perché migliorare il template della pagina 404 in WordPress?

La maggior parte dei temi di WordPress è dotata di un modello 404 di base, compresi i temi WordPress predefiniti.

Ad esempio, nell’immagine seguente è possibile vedere la pagina 404 di ThemeIsle Hestia.

The 404 template included in the ThemeIsle Hestia WordPress theme

La maggior parte di questi modelli predefiniti sono semplici e non mostrano alcun contenuto del vostro sito. Ciò significa che chi arriva sulla pagina 404 ha maggiori probabilità di abbandonare il vostro sito WordPress, aumentando così la vostra frequenza di rimbalzo.

Questa è una cattiva notizia per la SEO di WordPress e può influire sulla posizione del vostro sito nelle classifiche dei motori di ricerca.

Detto questo, è una buona idea creare una pagina 404 con i propri contenuti e il proprio marchio.

The WPBeginner custom 404 page

Una pagina 404 personalizzata è un ottimo modo per promuovere contenuti, come i post più popolari o i prodotti del vostro negozio online. Potete anche includere i link ai vostri profili sui social media, mettere in evidenza i vostri ultimi commenti e altro ancora.

Se siete in cerca di ispirazione, abbiamo raccolto per voi i migliori esempi di design di pagine di errore 404.

Detto questo, vediamo come migliorare il modello della pagina 404 in WordPress.

Video tutorial

Subscribe to WPBeginner

Se preferite le istruzioni scritte, continuate a leggere. Potete anche utilizzare i link rapidi qui sotto per passare direttamente al metodo che desiderate utilizzare:

Il modo migliore per migliorare la pagina 404 del vostro sito è utilizzare SeedProd.

SeedProd è il miglior costruttore di pagine di destinazione per WordPress. Consente di creare, modificare e personalizzare le pagine di WordPress senza scrivere alcun codice.

SeedProd è dotato di oltre 300 modelli già pronti, tra cui molti design 404. Ciò significa che è possibile creare una pagina 404 dal design professionale in pochi minuti.

La prima cosa da fare è installare il plugin SeedProd. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.

Nota: esiste una versione gratuita di SeedProd che consente di creare bellissime pagine di manutenzione e di prossima pubblicazione. Tuttavia, utilizzeremo il plugin premium, che consente di sostituire il modello 404 integrato nel tema.

Dopo aver attivato il plugin, SeedProd chiederà la chiave di licenza.

SeedProd license key

Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver inserito la licenza, fare clic sul pulsante “Verifica chiave”.

Una volta fatto ciò, andare su SeedProd ” Pagine di destinazione. Nella sezione “Pagina 404”, fate clic su “Imposta una pagina 404”.

The SeedProd page builder plugin

Ora è possibile scegliere un modello per la pagina 404.

Per visualizzare l’anteprima di un disegno, è sufficiente passarci sopra il mouse e cliccare sulla lente di ingrandimento.

SeedProd's ready-made 404 templates

Quando trovate un design che vi piace, fate clic su “Scegli questo modello”.

In tutte le nostre immagini utilizziamo la scritta “Oh No 404 Page”, ma potete utilizzare qualsiasi design desideriate.

Choosing a professionally-designed 404 template

Dopo aver selezionato un modello, si accede al costruttore drag-and-drop, dove si può cominciare a personalizzare la pagina 404.

Sul lato sinistro dello schermo si trovano i blocchi e le sezioni che si possono aggiungere al progetto. Il lato destro della pagina mostra un’anteprima dal vivo.

Building a custom 404 page for your WordPress website

La maggior parte dei modelli 404 contiene già alcuni blocchi, che sono parte integrante di tutti i progetti SeedProd.

Per personalizzare uno di questi blocchi, è sufficiente fare clic per selezionare il blocco nel layout. È quindi possibile apportare modifiche utilizzando le impostazioni nel menu di sinistra.

Changing the text in a custom 404 page

Per aggiungere un nuovo blocco al progetto, è sufficiente trovare il blocco nel menu di sinistra. Quindi, trascinarlo nel layout. A questo punto è possibile personalizzare il blocco seguendo la procedura descritta sopra.

Per iniziare, in genere è opportuno aggiungere il logo del sito web alla pagina 404, in modo che i visitatori sappiano di essere ancora sul vostro sito.

Per sostituire il logo SeedProd con il proprio marchio, è sufficiente fare clic per selezionare il logo segnaposto nel layout. Quindi, passare il mouse sull’immagine nel menu di sinistra.

Quando appare, fare clic sul pulsante “Seleziona immagine”.

Adding your own logo to a 404 page

Questo avvia la libreria multimediale di WordPress, dove è possibile selezionare qualsiasi immagine o caricare un nuovo file dal computer.

Molti modelli 404 mostrano anche il menu di navigazione principale del sito. Se avete più menu, potreste preferire mostrare un menu diverso.

Per effettuare questa modifica, è sufficiente fare clic sul blocco “Menu nav” nel modello. Si può quindi aprire il menu a tendina ‘Menu’ e scegliere un menu qualsiasi dall’elenco.

Adding a custom navigation menu to a 404 page

Per ulteriori informazioni, consultare la nostra guida su come aggiungere menu di navigazione personalizzati nei temi WordPress.

Quando un visitatore arriva sulla vostra pagina 404, potrebbe essere confuso su come sia arrivato qui e su cosa fare dopo. Per questo motivo, è bene aggiungere un testo che spieghi l’impossibilità di trovare il contenuto e suggerisca le azioni da intraprendere successivamente.

A tal fine, aggiungere un blocco “Titolo” e un blocco “Testo” al progetto. È quindi possibile digitare il messaggio nell’editor di testo nel menu di sinistra.

Adding text to a custom 404 page

Successivamente, modificheremo il pulsante “Torna alla pagina iniziale” in modo da incoraggiare le persone a consultare un post specifico invece di tornare semplicemente alla pagina iniziale.

Ad esempio, potreste promuovere il post più popolare del vostro blog WordPress o la pagina che vi aiuta a guadagnare di più con il blogging online.

Per personalizzare il pulsante, è sufficiente fare clic per selezionarlo nel layout della pagina. Nel campo ‘Link’, digitare l’URL che si desidera utilizzare al suo posto.

Changing the button label

Poiché il pulsante non rimanda più alla homepage, è necessario sostituire l’etichetta “Torna a casa”. È sufficiente digitare un nuovo messaggio nella casella “Testo del pulsante”.

Una volta fatto ciò, fare clic sulla scheda “Avanzate”. Qui è possibile modificare il colore, le dimensioni e altro ancora del pulsante.

Creating a custom CTA button

Per ulteriori suggerimenti sul design, consultate la nostra guida su come scegliere uno schema di colori perfetto per il vostro sito WordPress.

Questo è tutto ciò che serve per creare una semplice pagina 404 personalizzata. Tuttavia, ci sono molte altre caratteristiche e contenuti che possono migliorare l’esperienza dei visitatori, mantenere le persone impegnate e persino aiutare a ottenere più conversioni.

Detto questo, vediamo alcune caratteristiche avanzate che potete aggiungere alla vostra pagina 404.

Aggiungete i vostri post più popolari alla pagina 404 di WordPress

Per cominciare, si potrebbe mostrare un elenco dei post più popolari. Poiché questi articoli sono popolari, è molto probabile che i visitatori trovino qualcosa di loro gradimento.

È possibile creare questo elenco automaticamente utilizzando il plugin MonsterInsights. È la migliore soluzione analitica per WordPress, utilizzata da oltre 3 milioni di siti web.

MonsterInsights può vedere quali sono i post che ottengono il maggior numero di visitatori e aggiungerli alla pagina 404. Per maggiori dettagli, consultate la nostra guida su come visualizzare i post più popolari in base alle visualizzazioni in WordPress.

Dopo aver attivato MonsterInsights, è possibile visualizzare i post più popolari aggiungendo uno shortcode in WordPress. Nel menu di sinistra di SeedProd, è sufficiente trovare il blocco “Shortcode” e inserirlo nel layout.

How to add shortcode to your website's 404 page

Ora, copiate il seguente shortcode:

[monsterinsights_popular_posts_widget theme="beta"]

Successivamente, fare clic per selezionare il blocco Shortcode nell’editor di SeedProd. Ora è possibile incollare il codice nel menu a sinistra.

Adding shortcode to you website's 404 page

Per impostazione predefinita, SeedProd non mostra un’anteprima dei post più popolari all’interno dell’editor di pagina, quindi è necessario fare clic sul pulsante “Anteprima” nell’angolo in alto a destra per vedere lo shortcode in azione.

Se si desidera visualizzare l’elenco dei post popolari all’interno dell’editor di SeedProd, è sufficiente fare clic sull’interruttore “Mostra anteprima shortcode”.

Previewing the 404 page's shortcode

Nello shortcode qui sopra, usiamo theme="beta" per il nostro elenco, ma MonsterInsights offre alcuni temi diversi che si possono usare.

Per vedere i diversi temi, andate su Insights ” Popular Posts nella dashboard di WordPress e poi cliccate su ‘Popular Posts Widget’.

The MonsterInsights' popular posts widget settings

È ora possibile fare clic sui diversi temi per vederne un’anteprima.

Quando trovate un design che vi piace, aggiornate semplicemente lo shortcode in SeedProd. Ad esempio, se si desidera utilizzare il tema ‘Alpha’, è necessario digitare:

[monsterinsights_popular_posts_widget theme="alpha"]

Mostrare i prodotti WooCommerce più popolari

Se avete un mercato o un negozio online, potreste voler mostrare i vostri prodotti WooCommerce più venduti nella pagina 404. In questo modo, la pagina 404 personalizzata può aiutarvi a ottenere più vendite.

Nel menu di sinistra, trovare il blocco Prodotti più venduti e trascinarlo nel layout.

How to show best-selling products on a 404 page

SeedProd mostrerà automaticamente alcuni prodotti. Tuttavia, è possibile regolare questo blocco selezionandolo nell’editor e utilizzando le impostazioni nel menu a sinistra.

Ad esempio, è possibile modificare il numero di colonne del blocco, aggiungere la paginazione, consentire agli acquirenti di filtrare i prodotti più venduti e altro ancora.

Displaying WooCommerce products on a 404 page

Per ulteriori informazioni, consultare la nostra guida su come visualizzare i prodotti WooCommerce più popolari.

Nonostante il nome, è possibile utilizzare questo blocco per mostrare altri tipi di prodotti. Ad esempio, si possono mostrare i prodotti in saldo o gli articoli più votati.

Per dare un’occhiata alle diverse opzioni, aprire il menu a discesa “Tipo” e scegliere un’opzione dall’elenco.

Showing different WooCommerce products on a 404 page

Aggiungere un modulo di contatto alla pagina 404 di WordPress

Si può anche aggiungere un modulo di contatto, in modo che i visitatori possano contattarli se non riescono a trovare ciò che cercano. Questo modulo offre anche un modo semplice per segnalare gli errori 404, in modo da poter correggere i link non funzionanti e migliorare l’esperienza dei visitatori futuri.

Per ulteriori informazioni, consultate la nostra guida completa su come correggere i link rotti in WordPress.

Il modo migliore per aggiungere un modulo di contatto al vostro sito è utilizzare il plugin WPForms. È il miglior plugin per moduli di contatto per WordPress e viene fornito con un costruttore di moduli drag-and-drop.

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

Una volta creato un modulo di contatto, è possibile aggiungerlo alla pagina 404 utilizzando il blocco “Modulo di contatto”. È sufficiente trovare il blocco nel menu di sinistra e trascinarlo nel progetto.

The WPForms form builder plugin

Quindi, aprire il menu a tendina “Seleziona un modulo” e scegliere il modulo di contatto dall’elenco.

L’editor di pagina mostrerà ora un’anteprima del modulo di contatto.

How to add a contact form to your website's 404 page

Si potrebbe aggiungere un testo che introduca il modulo di contatto o che incoraggi i visitatori a mettersi in contatto.

Per farlo, è sufficiente aggiungere un blocco “Titolo” o “Testo” sopra il modulo di contatto e digitare il testo che si desidera utilizzare.

A custom 404 page, created using SeedProd

Come pubblicare la pagina 404

Quando si è soddisfatti dell’aspetto della pagina 404, è il momento di pubblicarla.

È sufficiente fare clic sulla freccia a discesa accanto a “Salva” e selezionare “Salva come modello”.

Saving your SeedProd 404 template

Quando vi viene chiesto, digitate un nome per il modello. Questo è solo un riferimento, quindi si può usare qualsiasi cosa si voglia.

Quindi, fare clic su “Salva modello”.

Naming your WordPress template

Nel popup successivo, fare clic su “Torna all’editor di pagine”. È quindi possibile fare clic sul pulsante “X” nell’angolo superiore destro per chiudere l’editor di pagine di SeedProd.

A questo punto, potrebbe apparire un popup che chiede se si desidera pubblicare il progetto 404. Se siete d’accordo, fate clic su “Sì, attiva”.

Activating a SeedProd template for your WordPress website

Se non si desidera pubblicare il modello in questo momento, fare clic su “No, chiudere”.

Successivamente, è possibile pubblicare il progetto in qualsiasi momento andando su SeedProd ” Pagine. Qui, fare clic sull’interruttore nella sezione “404 Page” in modo che appaia “Active”.

Activating a template for your WordPress website

Per vedere la vostra pagina 404 in azione, basta aggiungere /404 alla fine del vostro nome di dominio.

Dopo aver pubblicato la vostra pagina 404 personalizzata, è bene monitorare il coinvolgimento delle persone in quella pagina. In questo modo è possibile vedere cosa funziona e cosa non funziona, in modo da poter perfezionare il design della 404 per ottenere più conversioni e coinvolgimento.

Per saperne di più, consultate la nostra guida per principianti su come installare Google Analytics in WordPress.

Metodo 2: Creare una pagina 404 utilizzando l’editor completo del sito (solo per i temi a blocchi)

Se si utilizza un tema WordPress abilitato ai blocchi, è possibile modificare la pagina 404 del sito nell’editor completo del sito.

Per iniziare, andate su Aspetto ” Editor nella dashboard di WordPress.

Opening the WordPress full-site editor (FSE)

Per impostazione predefinita, l’editor completo del sito mostra il modello di home del tema.

Per modificare la pagina 404, fare clic su “Modelli”.

How to edit the 404 template using the full-site editor

Ora viene visualizzato un elenco di tutti i modelli che compongono il tema a blocchi, come la pagina dei risultati di ricerca e la pagina dell’archivio.

Basta fare clic su “404”.

Improving the built-in 404 design using FSE

WordPress mostrerà ora un’anteprima del design attuale della 404.

Per modificare questo modello, fare clic sull’icona della matita.

Editing the 404 template in your WordPress theme

L’editor del sito completo funziona in modo simile all’editor di contenuti standard di WordPress.

Per aggiungere blocchi al disegno, fare clic sul pulsante “+”.

Adding blocks to a 404 page design using the block-based WordPress editor

Ora è possibile digitare il blocco che si vuole aggiungere alla pagina 404.

Ad esempio, potreste voler visualizzare i post recenti del vostro sito. Questo può essere particolarmente efficace se si pubblicano contenuti sensibili al tempo, come nel caso di un sito web aggregatore di notizie.

A tal fine, è sufficiente digitare “Ultimi messaggi” e trascinare il blocco sul proprio progetto.

Adding the Latest Posts block to a 404 page design

Dopo aver aggiunto un blocco, è possibile personalizzarlo.

È possibile fare clic per selezionare il blocco nell’anteprima. Il menu di destra mostrerà tutte le impostazioni che si possono utilizzare per modificare il contenuto e l’aspetto del blocco.

How to customize blocks in a WordPress 404 page

Le opzioni visualizzate possono variare a seconda del blocco selezionato. Tuttavia, in genere è possibile modificare il colore dello sfondo, il colore del testo e la dimensione dei caratteri.

A questo punto, potete continuare ad aggiungere blocchi al vostro progetto e a perfezionarli seguendo lo stesso processo descritto sopra. Potreste anche voler disporre i widget di WordPress in colonne o utilizzare i modelli di blocco di WordPress per creare più velocemente una pagina 404 personalizzata.

Quando si è soddisfatti dell’aspetto della pagina 404, fare clic su “Salva” per renderla attiva.

Publishing a custom 404 page template

Ora, se aggiungete /404 alla fine del nome di dominio del vostro sito web, vedrete la pagina 404 personalizzata in azione.

Quando è necessario reindirizzare le pagine 404?

Una delle cause più comuni degli errori 404 è quando il visitatore ha commesso un errore nell’inserimento dell’URL.

In questo caso, di solito non è necessario reindirizzare l’utente a un’altra pagina. Tuttavia, vi consigliamo di seguire le best practice che vi abbiamo illustrato per riportarli sulla retta via.

Detto questo, se non avete il tempo di creare un modello di pagina 404 personalizzato, potreste voler reindirizzare gli utenti alla homepage nel frattempo. In questo modo, è possibile mantenere gli utenti sul sito web.

Oltre a questo, vi suggeriamo di monitorare e reindirizzare gli errori 404. In questo modo è possibile individuare i link a cui gli utenti non sono riusciti ad accedere e reindirizzarli alle pagine più pertinenti.

Di conseguenza, è possibile massimizzare l’opportunità di aumentare le pagine viste e ridurre la frequenza di rimbalzo. Inoltre, potete conservare i backlink che sono stati collegati a queste pagine per mantenere l’autorità del vostro dominio.

Il plugin All in One SEO dispone di un pratico registro degli errori 404 e di una funzione di reindirizzamento. Non è necessaria alcuna conoscenza tecnica per utilizzarlo correttamente, in quanto è piuttosto semplice da usare.

Click 404 logs menu option

Se volete altri consigli sui plugin, consultate il nostro elenco dei migliori plugin per il reindirizzamento 404 gratuiti per WordPress.

Speriamo che questo articolo vi abbia aiutato a migliorare il vostro modello di pagina 404 in WordPress. Potreste anche consultare la nostra guida su come impostare gli obiettivi di Google Analytics per il vostro sito WordPress e la nostra scelta di esperti delle migliori app per numeri di telefono aziendali virtuali.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

10 commentiLascia una risposta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Moinuddin Waheed says

    Thanks for giving the design options for making intuitive and innovative 404 page error.
    I have been seeing good 404 error pages and was not sure that making it is so easy.
    Seedprod gives so much options to tweak on 404 error page and make it as intuitive and innovative as possible so that users bad experience turns into good experience.

  3. Joe Wocoski says

    Hi,

    I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.

    What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.

    Do you have a widget to send readers back to my main blog page or my other main 9 tabs?

    Thank you very much
    Joe Wocoski

  4. On Boit Quoi Ce Soir says

    Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?

  5. Cheri- CreationScience4kids says

    Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
    The email alert will be a relief and the most recent/popular/etc posts idea is great. :-)

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.