Personalizzazione e Styling Il modulo protetto da password

Recentemente ho chiesto a un cliente di proteggere una delle sue pagine WordPress, nessun problema! Poi è tornato e ha detto: puoi cambiare il testo e farlo sembrare migliore? Hmm? Sicuro! Ecco come?


Passaggio 1 Modifica il file functions.php

Bene, apriamo il file functions.php e aggiungiamo questo blocco di codice:

 ID)? rand (): $ post-> ID); $ o = '
'. __ ("QUESTA È LA TUA NUOVA PASSWORD INTRO TESTO CHE MOSTRA SOPRA IL MODULO DELLA PASSWORD"). '

?IL TESTO EXTRA PUOI ANDARE QUI? QUESTO MOSTRERÀ SOTTO IL MODULO

'; ritorno $ o; ?>

Lascia che analizzi questo per te molto velocemente. Il codice di protezione della password viene generato da un file nella cartella wp-includes. "Cool", pensi, "ci andrò e farò i miei cambiamenti". Non farlo! Per quanto possa essere allettante, la modifica del codice base è terribile, in basso, nessuna buona idea. Per una ragione: cosa succede se aggiorni WordPress? Viene spazzato via? spiacente. Va bene, quindi mettendo questo blocco di codice nel file functions.php, modificarlo e non preoccuparti di perdere alcuna modifica al modulo quando si aggiorna.

Come puoi vedere, ho effettivamente aggiunto delle classi al modulo stesso, all'etichetta del modulo, al campo della password e al pulsante. Ora abbiamo tutto ciò di cui abbiamo bisogno per modellarlo completamente con i CSS. Oh, e in realtà non stiamo cambiando nulla nella cartella wp-includes, quindi non stiamo infrangendo le regole.


Passaggio 2 Modificare il testo di protezione password predefinita

Il testo in maiuscolo sopra mostra anche ciò che ho cambiato? il primo set di testo:

QUESTO È IL TUO NUOVO PASSWORD INTRO TESTO CHE MOSTRA SOPRA IL MODULO DELLA PASSWORD

Come puoi vedere questo era il tuo testo introduttivo? era solito dire questo:

Questo post / pagina è protetto da password. Per vederlo, inserisci la tua password qui sotto

Ora siamo in grado di cambiarlo in qualunque testo tu voglia lassù. Puoi anche cancellare tutto tra quelle citazioni e non avere nulla da mostrare.


Passaggio 3 Modificare l'etichetta del campo di immissione della password

L'etichetta predefinita visualizzata a sinistra del campo di immissione è Password. Qui puoi cambiarlo in qualsiasi cosa tu voglia dire. Nel mio caso, l'ho assegnato a una classe che ha eliminato l'etichetta in css mettendo il display su none.

 .pass-label display: none; 

Puoi anche cambiare la dimensione del carattere, il colore, il lavoro su questa etichetta


Step 4 Style Il campo di inserimento della password

Odio come appaiono le forme, ma con questa aggiunta al campo di inserimento della password di default sono in grado di renderlo un po 'più "aggiornato". Sentiti libero di cambiarlo come meglio credi.

 

Step 5 Styling Il pulsante Submit

Nel codice delle funzioni, ho aggiunto una classe al pulsante di invio chiamato "pulsante". L'ho fatto perché volevo che tutti i pulsanti sul sito del mio cliente sembrassero esattamente gli stessi. L'uniformità in un sito è fondamentale. Ecco il CSS che ho usato:

 .button background-color: # 000; color: #fff; confine: 0; font-family: Impact, Arial, sans-serif; margine: 0; altezza: 33 px; imbottitura: 0px 6px 6px 6px; font-size: 15px; cursore: puntatore; 

Per qualche ragione stavo ricevendo la freccia quando passavo il mouse sopra il pulsante, così ho appena cambiato il cursore per mostrare il puntatore e sono tornati alla mano al passaggio del mouse.


Passaggio 6 Aggiunta di testo aggiuntivo sotto il modulo

In realtà avevo bisogno di aggiungere una piccola nota per dire alla gente che il campo password è case sensitive così da aggiungere del testo extra sotto al form, ho appena aggiunto un codice di paragrafo e inserito un tag di stile per rendere lo stile del testo separatamente dal resto del pagina.

E abbiamo finito!