Come creare una pagina 404 personalizzata in un tema figlio di WordPress

Non importa quanto sia ben progettato e progettato il tuo sito Web, gli utenti incontreranno una pagina 404 a un certo punto. Può essere qualcosa di semplice come digitare un URL con un errore di ortografia. Ad esempio, se hai una pagina di contatto trovata su www.website.com/contact e qualcuno tenta di atterrare su www.website.com/contacts, c'è una buona possibilità che venga reindirizzato alla pagina 404. Inoltre, le regolazioni del contenuto del sito Web potrebbero non tenere sempre conto delle pagine che avrebbero potuto essere spostate senza che i collegamenti venissero reindirizzati. Si spera che questa esperienza non accada troppo spesso ai tuoi utenti, ma quando accade, è un'opportunità per offrire aiuto e rendere qualcosa di unico per il tuo marchio.

È probabile che tu non sia estraneo a 404 pagine sul Web, quindi potresti già avere in mente un design. In caso contrario, cercando su Google "cool 404 pagine", troverai ogni sorta di ispirazione. Il design può essere qualsiasi cosa, da serio a divertente, ricco di testo o minimalista, o una via di mezzo.

Di seguito sono riportati alcuni dei miei preferiti. Sono buoni esempi di come la creatività viene utilizzata nella progettazione della pagina.

Figma

Figma è una semplice pagina 404, ma la grafica è molto adatta ai punti vettoriali. Mi piace quanto sia semplice e audace; è davvero tutto ciò che serve.

Airbnb

Questo esempio offre qualcosa in più in termini di contenuto. L'approccio illustrativo aggiunge un elemento di umorismo. Ciò include alcuni dei collegamenti principali. Se un utente ha digitato in modo errato qualcosa, è possibile che riesca a trovare ciò che sta cercando nell'elenco.

MailChimp

Il design è sempre divertente sul sito MailChimp, soprattutto con la recente riprogettazione. Ha un elemento di umorismo sia nel testo che nell'illustrazione.

Ottieni gratuitamente i temi Genesis Framework e StudioPress!

Quando ospiti i tuoi siti su Flywheel, avrai accesso a oltre 30 temi WordPress premium (incluso Genesis!) direttamente dalla nostra deliziosa dashboard. Si tratta di un valore di oltre $ 2.000 con cui puoi iniziare con soli $ 15 al mese! Scopri di più qui.

Creazione di una pagina 404 personalizzata

Per prima cosa: tutte le personalizzazioni dovrebbero essere eseguite in un tema figlio. In questo modo tutte le modifiche non verranno sovrascritte dagli aggiornamenti al tema normale. Questa pagina 404 sarà un file nel tema figlio, il file chiamato 404.php per l'esattezza.

Come aggiungere variabili CSS per personalizzare i temi figlio di WordPress

Le variabili CSS, denominate anche proprietà personalizzate CSS, consentono un facile riutilizzo nei fogli di stile CSS. Se hai lavorato con i temi figlio di WordPress, probabilmente ti ritroverai a fare un sacco di porcile...

Inoltre, ricorda di farlo in un ambiente di test. Quando i file del tema vengono modificati, c'è sempre la possibilità di errori di sintassi che potrebbero portare il sito inattivo.

1. Crea un nuovo file

Quando hai il tema figlio, il primo passo è creare un nuovo file con cui iniziare a lavorare. Ti consigliamo di aprire la cartella in cui hai creato il tema figlio e aggiungere un file 404.php .

2. Modificare il file

Esempio di base

Questo esempio rappresenta una pagina che contiene testo e un'immagine. L'idea progettuale qui è quella di creare qualcosa di semplice che richieda una grafica illustrata.

Incolla il seguente codice nella pagina 404.php . È un inizio di base. Puoi modificare le cose in una struttura diversa per renderla davvero tua (ad esempio, se non vuoi una barra laterale, questa può essere rimossa).

<?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( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Ci sono un paio di modifiche che dovrai fare. Uno è cambiare il percorso dell'immagine e includere il titolo desiderato. Non dimenticare di scrivere un messaggio personalizzato e quindi salvare le modifiche.

Se hai seguito le istruzioni fino a questo punto, hai creato un modello personalizzato con un'immagine, un messaggio e un'intestazione, una barra laterale e un piè di pagina standard. (Potresti averlo anche nelle altre pagine.)

Approccio a widget

Questo è facoltativo, ma molti designer preferiscono lavorare con le aree dei widget. È più facile apportare modifiche e più gestibile. Ad esempio, un widget è un modo efficiente per visualizzare gli articoli del blog più recenti e popolari.

Aggiunta del widget

Per aggiungere il widget al 404.php file , dovrai creare una nuova area con widget. Un tema figlio necessita di un file functions.php , quindi ora è il momento di ricontrollare che il tema figlio ne abbia uno.

Nel file functions.php sarà necessario uno snippet per aggiungere un nuovo widget alla pagina.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Questo frammento aggiunge solo il widget. Per iniziare effettivamente ad usarlo, è necessario chiamare questa funzione. Verrà chiamato nel file 404.php . Tieni d'occhio la posizione in cui desideri questa area del widget.

Copia e incolla il codice seguente dove vuoi mostrare i nuovi widget (ad esempio, dopo il titolo e il testo):

<?php dynamic_sidebar( '404' ); ?>

Ora che hai stabilito dove visualizzare la nuova area del widget, è il momento di aggiungere il contenuto del widget andando su Aspetto > Widget . Qui è dove puoi scegliere cose come un blocco HTML, post popolari o qualsiasi altro widget per la pagina 404.

Che tu stia creando qualcosa di semplice o una pagina con molti collegamenti, creare una pagina 404 personalizzata è piuttosto semplice. Utilizzando un tema figlio e utilizzando i widget, ci sono possibilità di progettazione illimitate.

Cerchi altri modi per personalizzare il tuo sito? Dai un'occhiata a questi tutorial:

• Come aggiungere variabili CSS per personalizzare i temi figlio di WordPress
• Semplici personalizzazioni per il tuo tema figlio Genesis
• Come creare e utilizzare campi personalizzati in WordPress