WordPress e l’inedito tema Capablanca minimalista: evoluzioni, come personalizzare la pagina 404

costruisci la tua pagina personalizzata 404.php

All’ indirizzo https://umbriawaytarget.wordpress.com/ ci sono numerosi articoli didattici che seguono la filosofia del “chi ha la pretesa di insegnare, in realtà impara“, infatti sono più consigli utili per chi ha in testa di migliorare il suo profilo di wordpress developer riferito all’ autore medesimo! Tuttavia l’intera metafora della factory regge magnificamente PER TUTTI e non solo per l’autore dei post perchè possiamo immaginarci quel famoso ordine fatto dall’ utente all’ interno di un’ area produttiva che non è altro che il SERVER paragonato al sito dell’ industria, la location. Un ordine che passa attraverso un URL e questo prodotto finito in realtà muove tutte le risorse interne dell’ azienda che con i carrelli che corrono a fianco delle catene di montaggio si danno molto da fare per recuperare tutte le risorse richieste da assemblare. Tornando al nostro primo tema ribattezzato CAPABLANCA per il suo stile minimalista all’ indirizzo https://www.umbriaway.it/wp/, se digitiamo una URL assente (che nella metafora della factory era “voglio acquistare una 500”) tutto il sistema complesso di pesi e contrappesi interno a wordpress non fa altro che andare a cercare in prima istanza la pagina 404.php e se non dovesse trovarla ripiega alla pagina numero uno che sta in testa a tutti e cioè alla index.php. Questo ci dice che nel caso non esistesse all’ interno del nostro blocco di file del tema una pagina 404.php dobbiamo comunque crearla. Tornando al mondo reale digitando una risorsa assente sul sito indicato compare un messaggio di risorsa mancante e fin qui ci siamo, da dove salta fuori quel messaggio, nello specifico:

ops...non ho trovato articoli!

dalla index.php! Infatti il sistema non trovando la pagina 404.php si affida al supporto naturale offerto dalla sua prima porta di accesso, la index.php che al suo interno avrà una istruzione condizionale che dice di stampare a video un messaggio di errore nel caso che non si fossero articoli con quel tipo di contenuto cercato dal WIDGET. Ma in questo caso non ho cercato un articolo, ma una risorsa specifica sulla barra degli indirizzi del browser! Qualcosa non quadra! Quindi si crea come prima cosa la pagina 404.php, poi il passo successivo è modellarla:

<?php
//Template Name: 404 Page
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php bloginfo('name'); ?></title>
<style>
a:link {color: yellow;}
a:visited {color: #ff9900;}
a { text-decoration:none; }
</style>
</head>
<body style="font-size:16px;font-family:verdana;background: url(https://www.tuodominio.it/tuadirectorywp/wp-content/recipiente/2021/01/nomefile.jpg) no-repeat center center fixed;">

<!-- Corpo articolo-->
    <section>
        <div style="color:white;margin:4%">

<div>
<h1><?php _e('La risorsa che cercavi è latitante' , 'uwc'); ?></h1>
<h2><?php _e('ma non ti lasciamo in braghe di tela come dicono a Padova<br>TORNA A CASA <a href="https://www.umbriaway.it/wp/">HERE</a> oppure ecco dei suggerimenti:' , 'uwc'); ?></h2>
<div class="row">

<div>
  <?php the_widget('WP_Widget_Recent_Posts' , 'title=Recent Posts' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Pages' , 'title=Le mie pagine' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Tag_Cloud' , 'title=Le nuvola del tag' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

<div>
  <?php the_widget('WP_Widget_Categories' , 'title=Naviga nelle categorie' , 'before_title=<h4>&after_title=</h4>'); ?>
</div>

  </div>

  </div>
</div>
</section>

</div>	
</body>
</html>

Qui si è voluto spogliare la pagina di tutto lo schema base presente ad esempio nella index, dove solo per dirna una, avevamo la funzione che all’ interno dell’ HEAD attivava tutta una serie di link e collegamenti canonici per esempio a framework come bootstrap. Qui nella 404.php personalizzata si è voluto togliere l’impaginazione tradizionale per differenziare la pagina AIRBAG da tutte le altre (parliamo sempre della 404.php) e renderla ULTRA-MINIMALISTA come era nell’ intenzione dell’ assegnazione del NOME. Da notare le funzioni the_widget recuperabili sempre dalla nostra bibbia https://codex.wordpress.org/Main_Page che agganciano i WIDGET che desideriamo sulla pagina. Il lavoro fatto qui è davvero molto spartano e in un ottica professionale a gioco corretto era più elegante utilizzare per esempio oltre wp_head per agganciare le risorse anche il set di icone alternativo a font-awesome recuperabile all’ indirizzo https://developer.wordpress.org/resource/dashicons/#admin-network e messo a disposizione dallo stesso wordpress per arricchire le nostre creazioni. In ogni caso abbiamo lavorato per colmare una lacuna, quella cioè di garantire un paracadute all’ utente con una pagina 404 che non esisteva e abbiamo portato a casa il risultato, anche se spartano. Da notare anche il blocco CSS aggiunto nell’ HEAD per rendere almeno i LINK più piacevoli e coerenti con la grafica DARK.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Blog su WordPress.com.

Su ↑

%d blogger hanno fatto clic su Mi Piace per questo: