Come creare un'intestazione appiccicosa in WordPress

Nell'ultimo decennio circa, c'è stata un'enfasi sempre crescente posta sulla navigazione del sito web. Ciò ha coinciso con l'uso diffuso di smartphone che hanno opzioni di navigazione limitate rispetto all'interfaccia desktop tradizionale. La differenza nel design del sito web è più che evidente se guardi un confronto tra un sito del 2011 e uno che è stato realizzato ora.

Uno dei metodi principali utilizzati per riconfigurare i layout del sito erano gli elementi appiccicosi. Con un nome appropriato, questi elementi si attaccano alla pagina sui suoi bordi quando ci si sposta intorno ad essa, cioè mantengono la loro posizione originale (pensa ai riquadri di blocco in Excel e avrai una buona idea di come funziona).

In alto, in basso, a sinistra e a destra

Gli elementi permanenti sono solitamente riservati a menu, intestazioni e/o barre di stato; questi offrono una grande flessibilità al visitatore perché può passare istantaneamente da una pagina all'altra senza dover tornare sui propri passi. Inoltre, per cominciare, tutti questi sono posizionati sui bordi superiore e inferiore della pagina, il che funziona bene con l'intera premessa. Sarebbe estremamente difficile costruire una pagina attorno a un elemento adesivo posizionato al centro di una pagina.

Raramente si trovano anche sui bordi sinistro e destro, con le stesse funzioni, solo con un layout diverso. In questi casi, saranno nascosti finché non ci passi sopra con il cursore o non li tocchi sullo schermo.

Risparmiatori di spazio

La cosa interessante degli elementi appiccicosi è che ti fanno risparmiare spazio sulla pagina e sul sito nel suo insieme: possono effettivamente essere utilizzati per sostituire intere pagine. Questo perché lasciano intatto il corpo principale del sito e rendono i bordi strumenti multifunzionali che assumono su se stessi molte delle funzioni della pagina. Pensa per un momento al layout medio del tuo sito.

La parte superiore è riservata ai menu che prevedono pagine ordinate per categorie designate e una barra di ricerca. Questi sono entrambi nascosti dietro una barra durante lo scorrimento e si espandono quando necessario. In caso contrario, solo la struttura del menu occuperebbe l'intera sezione superiore della tua pagina e non "seguirebbe" durante lo scorrimento verso il basso, quindi al tuo visitatore sarebbe richiesto di spostarsi costantemente su e giù solo per navigare tra le pagine .

D'altra parte, un elemento in basso appiccicoso può sostituire un'intera pagina di supporto abbastanza facilmente: basta aggiungere l'e-mail e/o il numero insieme a un pulsante di chat e sei a posto. Stai fornendo ai tuoi visitatori un modo costantemente presente per contattarti. Ancora una volta, l'applicazione pratica è fantastica: un cliente sta scorrendo le pagine dei tuoi prodotti, ha una domanda e può scoprire immediatamente di cosa ha bisogno facendo clic sul pulsante della chat.

Creazione di elementi appiccicosi

Quando parliamo di WordPress, ci sono sempre numerosi modi per fare qualsiasi cosa tu possa pensare, e lo stesso vale qui. Puoi creare elementi appiccicosi manualmente all'interno dell'editor predefinito oppure puoi utilizzare un plug-in che sostituisce la necessità di codificare con un'interfaccia adatta ai principianti. Il contrasto tra i risultati finali è minimo, ma il modo in cui ci arrivi fa la differenza. Per il nostro esempio, utilizzeremo intestazioni adesive poiché sono di gran lunga l'elemento più comune che viene creato per rimanere.

Creazione manuale di un'intestazione adesiva

La creazione manuale di un'intestazione adesiva in WordPress richiede l'utilizzo del codice CSS. Senza diventare troppo tecnico, il codice CSS è qualcosa che possiamo aggiungere praticamente a qualsiasi elemento di una pagina per modificarne le proprietà. Quando si codifica manualmente, questo è il nostro principale metodo di personalizzazione. L'utilizzo di CSS richiede innanzitutto che l'intestazione sia presente su una pagina, quindi assicurati che ci sia qualcosa da personalizzare in primo luogo. WordPress semplifica questo processo perché anche l'editor predefinito offre la possibilità di aggiungerlo con un clic.

Una volta che hai un'intestazione con cui lavorare, dovrai accedere alla console. Vai semplicemente alla sezione dell'aspetto che si trova sul lato sinistro della dashboard, scegli "personalizza" e quindi fai clic su "CSS aggiuntivo". Con la console ora aperta, devi inserire il codice che rende l'intestazione appiccicosa:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Il codice sopra è solo un esempio di come dovrebbe apparire generalmente, non un comando definitivo. Tieni presente che la prima riga è sempre specifica per ciascun sito: sostituisci #website-navigation con la classe CSS o l'ID dell'intestazione di navigazione prima di tornare all'editor di pagina.

Dopo aver verificato la funzionalità all'interno della finestra di anteprima della pagina/post, basta pubblicare e avrai un'intestazione appiccicosa. Dobbiamo sottolineare che probabilmente vorrai espandere il codice CSS per comprendere qualcosa di più dell'attributo "sticky" per un'intestazione come questa: si consiglia di aggiungere elementi che enfatizzino visivamente l'intestazione, come caratteri colorati, dimensioni, indentazione, ecc. Poiché è un elemento permanente su una pagina, può essere facilmente trascurato, quindi dovresti provare a farlo risaltare.

Creazione di un'intestazione adesiva con un plug-in

C'è un'enorme sovrapposizione tra coloro che hanno bisogno di un sito Web per la loro attività o blog e quelli che semplicemente non hanno le conoscenze per costruire qualcosa che abbia un aspetto e un aspetto professionale. Fortunatamente con WordPress, ci sono così tanti plugin che rendono la vita più facile a tutti; non c'è praticamente bisogno di possedere qualcosa di più della conoscenza di base del software per raggiungere i tuoi obiettivi. WP Sticky è un ottimo esempio di plug-in che sostituisce tutta la codifica di cui abbiamo parlato sopra con un'interfaccia intuitiva che chiunque può ottenere rapidamente. Allo stesso tempo, offre la stessa quantità di funzionalità che avresti durante la creazione manuale di un'intestazione adesiva. Analizziamolo.

Creazione di un elemento

Proprio come è necessario disporre di un'intestazione con cui iniziare quando si utilizza CSS, è necessario creare un elemento a cui aggiungere l'attributo sticky.

Esistono due modi distinti per individuare l'elemento: puoi inserire la designazione nel campo richiesto, oppure puoi selezionare l'elemento attraverso una finestra di anteprima facendo clic su di esso (questo funziona a meraviglia se hai problemi a capire le designazioni) . Quando scegli il tuo elemento nella finestra di anteprima, vedrai le designazioni che cambiano nella parte superiore dello schermo.

Abbiamo scoperto che dopo aver lavorato con il plugin per un po' di tempo, ti sentirai così a tuo agio con esso che non utilizzerai quasi mai il selettore visivo. Le designazioni diventeranno familiari, il che porta a inserirle semplicemente e manualmente, risparmiando tempo. Fino a quando non avrai familiarità con tale misura, il selettore visivo sarà il tuo migliore amico. Alla fine, entrambi i metodi ti porteranno nello stesso posto: un'intestazione appiccicosa sul frontend.

Fallo sembrare buono

Non tutti gli elementi appiccicosi sono creati uguali e nemmeno il tuo dovrebbe essere un esempio comune. La sezione delle impostazioni visive ti fornirà una miriade di opzioni di personalizzazione con cui puoi lavorare per rendere unica la tua intestazione adesiva in ogni modo.

La prima cosa di cui devi tenere conto è il posizionamento del tuo elemento. Dal momento che stiamo facendo un'intestazione, questa sarà una decisione facile: la inseriamo nella parte superiore della pagina. Il posizionamento è la chiave per una buona intestazione, quindi se non vuoi che abbracci la parte superiore della pagina, puoi spostarla in basso di un paio di pixel per adattarla meglio. Inoltre, se il tuo sito utilizza una barra degli strumenti di amministrazione per gli utenti registrati, puoi fare in modo che il plug-in lo controlli automaticamente e modifichi l'intestazione di conseguenza.

Abbiamo toccato un po' la necessità che un sito sia completamente reattivo poiché ci sono tanti modi in cui i potenziali visitatori devono navigare sul web. Per rendere il tuo sito completamente adattivo, puoi scegliere su quali schermate l'intestazione sarà appiccicosa.

Di solito, gli schermi più piccoli traggono il massimo vantaggio dalle intestazioni adesive, mentre quelli più grandi utilizzati sui desktop tradizionali che hanno più opzioni di navigazione vanno benissimo senza di loro. Le dimensioni sono divise in quattro gruppi che coprono tutte le principali dimensioni dello schermo.

L'indice Z è un'impostazione opzionale che potrebbe confondere molti a prima vista. Per questo motivo e per il fatto che è una funzionalità opzionale, molti probabilmente la annulleranno e la ignoreranno. Se tutto funziona, probabilmente non guarderai mai indietro; tuttavia, in caso di problemi con il display, lo Z-index potrebbe potenzialmente essere una soluzione rapida. In sostanza, pensa a una pagina come a una raccolta di pile in cui le pile in alto hanno numeri più alti di quelle in basso. Pertanto, se qualcosa sta oscurando la tua intestazione appiccicosa, prova ad elevare lo Z-index (99999 è suggerito come valore che funziona)

Con la tua intestazione adesiva "in cima alle pile", è tempo di diventare ancora più creativi con l'aggiunta di effetti mentre scorri verso il basso. Quando entrambe le opzioni sono disabilitate, l'intestazione manterrà la sua posizione in alto come un pezzo ritagliato della pagina originale. Puoi aggiungere più bagliori con effetti come dissolvenza in entrata o scorrimento verso il basso. Considera il design visivo generale del tuo sito prima di optare per questi tipi di effetti; tuttavia, spesso, meno è di più.

Gli effetti visivi non si limitano solo a quelli collegati al movimento. Puoi anche personalizzare l'intestazione stessa (oltre alle mosse che hai fatto durante la creazione dell'intestazione). L'opacità è utile se non si desidera che l'intestazione oscuri altri contenuti della pagina. Impostarlo a circa il 50% renderà relativamente visibili sia l'intestazione che il contenuto sottostante.

Una funzione ancora più utile dell'opacità è la regolazione dell'intervallo di scorrimento. Nel caso in cui tu abbia pagine molto lunghe come di solito hanno i blog, c'è un certo punto nella navigazione verso il basso in cui avere un'intestazione appiccicosa non ha più senso. Questi sono i momenti in cui è una buona idea rimuovere l'intestazione dopo che il tuo visitatore è passato abbastanza in basso.

Infine, c'è un'opzione per cambiare il colore di sfondo dell'intestazione quando è appiccicosa, facendola risaltare ancora di più, ma riportandola ai suoi valori originali quando l'intestazione non è più appiccicosa.

L'ultima parte dell'editing visivo ci riporta al punto di partenza per modificare manualmente l'intestazione appiccicosa tramite CSS.

Anche se in realtà non è necessario avere alcuna conoscenza di programmazione precedente per utilizzare con successo WP Sticky, può elevare il tuo lavoro se lo usi. La funzione è facoltativa, quindi dipende interamente da te se desideri utilizzarla e in che misura.

Opzioni avanzate

La sezione delle opzioni avanzate riguarda praticamente l'esclusione, ovvero in quali casi un'intestazione appiccicosa cesserà di essere appiccicosa e tornerà alla "programmazione originale".

L'impostazione manuale delle dimensioni dello schermo in cui l'intestazione non è appiccicosa è un passo avanti rispetto alle quattro dimensioni predefinite presentate nella sezione delle impostazioni visive. Qui, sarai il più specifico che desideri, quindi se in futuro c'è uno schermo selvaggio che non si adatta a nessuna delle dimensioni predeterminate, puoi creare regole che funzionino per questo.

Rendere un'intestazione non appiccicosa non riguarda solo le dimensioni dello schermo, ma anche il contenuto del tuo sito, in particolare la categorizzazione. Puoi fare in modo che la tua intestazione non si attacchi a pagine, post e tipi di post designati, categorie specifiche o contenuti con determinati tag. Tutte queste condizioni possono essere mescolate e abbinate per creare il compendio perfetto quando viene utilizzata l'intestazione appiccicosa e quando non lo è.

Simile al modo in cui hai scelto l'elemento sticky (nel nostro caso, l'intestazione) all'inizio, puoi anche scegliere un elemento push-up più in basso nella pagina su cui desideri posizionare l'intestazione. Questo essenzialmente farà spostare la tua intestazione sul bordo stesso di questo elemento senza padding o alcun tipo di spazio tra di loro.

Per finire tutto, quando sei stufo e non vuoi più il tuo elemento appiccicoso, c'è sempre l'ultima opzione per eliminarlo completamente. Tieni presente che questa è un'azione permanente e tutta la personalizzazione che hai apportato all'elemento (in questo caso, l'intestazione) andrà persa.

Riepilogo

È difficile dire quale sia il modo migliore di fare le cose. Hai sicuramente più opzioni a tua disposizione usando CSS, ma questa è una soluzione per pochissime persone in generale. D'altra parte, un plug-in come WP Sticky combina facilità d'uso con funzionalità ancora robuste che lo rendono una scelta perfetta per i principianti o per coloro che non sono ancora sicuri della codifica da zero. Probabilmente il modo migliore per creare un'intestazione appiccicosa e funzionante è iniziare con quest'ultima e allenarti fino alla prima.

Autore: Matej Milohnoja

Utilizzato per scrivere di giochi e giochi in generale, ma da allora è passato a testare e scrivere di software di sviluppo web. Gioca ancora a molti giochi, solo per il gusto di farlo.