Tilpasse og utforme passordbeskyttet skjema

Nylig hadde jeg en klient vil ha en av deres WordPress sider beskyttet, ikke noe problem! Så kom han tilbake og sa, kan du endre teksten og få det til å se bedre ut? Hmm? Sikker! Slik gjør du det?


Trinn 1 Rediger din functions.php File

OK, la oss åpne opp din functions.php-fil og legge til denne koden:

 ID)? rand (): $ post-> ID); $ o = '
'. __ ("DETTE ER DITT NYE PASSWORD INTRO TEXT SOM SKAL VÆRE OVER PASSORDORDET"). '

?EKSTRA TEKST KAN GÅ HER? DETTE VIL VISSE UNDER FORMEN

'; returner $ o; ?>

La meg dissekere dette veldig raskt for deg. Passordbeskyttelseskoden genereres fra en fil i wp-includes-mappen. "Cool", tror du, "Jeg skal bare gå inn og gjøre mine endringer". Ikke gjør det! Fristende som det kan være, å redigere kjernekoden er en forferdelig, lav nedgang, ingen god ide. Av en grunn: Hva skjer hvis du oppdaterer WordPress? Det blir utslettet? unnskyld. Ok, så setter du denne koden i din functions.php-fil, la oss endre den og ikke bekymre deg for å miste eventuelle endringer i skjemaet når du oppdaterer.

Som du kan se, har jeg faktisk lagt klasser til selve skjemaet, etiketten på skjemaet, passordfeltet og knappen. Nå har vi alt vi trenger for å utforme det helt med CSS. Oh, og vi endrer ikke noe i wp-includes-mappen, så vi bryter ikke noen regler.


Trinn 2 Endre standard passordbeskyttelsestekst

Teksten i hovedsteder ovenfor viser deg også hva jeg endret? det første settet med tekst:

DETTE ER DITT NYE PASSWORD INTRO TEXT SOM SKAL VÆRE OVER PASSORDORDET

Som du ser, var dette din innledende tekst? det pleide å si dette:

Dette innlegget / siden er passordbeskyttet. For å se det, skriv inn passordet ditt nedenfor

Nå kan vi endre den til hvilken tekst du vil ha der oppe. Du kan til og med slette alt mellom disse sitatene og har ingenting i det hele tatt.


Trinn 3 Endre feltet for passordinngangsfelt

Standardmerket som vises til venstre for inntastingsfeltet er Passord. Her kan du endre det til hva du vil si. I mitt tilfelle tildelte jeg det en klasse tok etiketten ut i css ved å sette skjermen til ingen.

 .Pass-label display: none; 

Du kan også endre skriftstørrelse, farge, fungerer på denne etiketten


Trinn 4 Stil inn passordet for passordet

Jeg hater hvordan skjemaer ser ut, men med dette tillegget til standardpassordet, kan jeg få det til å se litt mer "oppdatert". Vær så snill å endre den, men du ser det.

 

Trinn 5 Styling Send-knappen

I funksjonskoden la jeg til en klasse på send-knappen, kalt "knapp". Jeg gjorde dette fordi jeg ønsket at alle knappene på kundens nettsted skulle se akkurat ut på samme måte. Enhetlighet på et nettsted er nøkkelen. Her er CSS jeg brukte:

 .knapp bakgrunnsfarge: # 000; farge: #fff; grense: 0; font-family: Impact, Arial, sans-serif; margin: 0; høyde: 33px; polstring: 0px 6px 6px 6px; skriftstørrelse: 15px; markør: pointer; 

Av en eller annen grunn fikk jeg pilen når jeg svømte over knappen, så jeg bare forandret markøren for å vise pekeren og det gikk tilbake til hånden på hover.


Trinn 6 Legge til ekstra tekst under skjemaet

Jeg trengte faktisk å legge til et lite notat for å fortelle folk at passordfeltet er følsomt for å legge til ekstra tekst under skjemaet, jeg har nettopp lagt til en avsnittskode og satt inn en stilmerke for å formatere teksten separat fra resten av side.

Og vi er ferdige!