Hvordan lage din egen klistrede topplinje som MakeUseOf

For omtrent en måned siden introduserte vi et nytt grensesnittelement til MakeUseOf - en flytende navigasjons- og søkefelt. Tilbakemeldingene vi har fått er nesten helt positive, intern søketrafikk har raket, og noen lesere har spurt om hvordan man lager en til sitt eget nettsted, så jeg trodde jeg ville dele.

Vi bruker jQuery til å holde stangen til toppen av skjermen - men bare forbi et bestemt punkt. Jeg vil gjøre alt dette i standard WordPress-tema - Tjuefem, selv om det selvfølgelig kan brukes på ethvert tema eller nettsted som du forstår tilstrekkelig å endre.

HTML-koden

Først opp, åpne temaene header.php og identifiser navigasjonslinjen som vi vil gjøre klebrig. Som jeg sa, er koden nedenfor for standard tjuefem; din kan variere.

Først legger du til en ny DIV-beholder som omgir hele denne NAV-delen.

La oss også flytte denne standard søkefeltet inn her. Du vil legge merke til at den er lagt til som standard øverst til høyre på temaet; finn linjen og lim det inn i vår navigasjonsseksjon. Slett alle andre forekomster av den i denne filen.

Hvis du lagrer og oppdaterer nå, ser du at søknadsskjemaet ikke vises i navigasjonsfeltet - det vises fortsatt øverst til høyre. Det er fordi det har blitt plassert helt med CSS, og vi vil slette alt det om et sekund.

CSS

Åpne den viktigste style.css filen og finn delen for søkeskjemaet:

 #branding #searchform ...

Erstatt hva som er inni det (bør være i stand til fire linjer, inkludert noen absolutt posisjonering) med dette:

 #branding #searchform float: left; bakgrunn: hvitt; margin: 7px; 

Du er velkommen til å justere fargen eller marginen. Bytt float hvis du helst vil det dukket opp på høyre side av baren. I dette temaet blir søket utvidet når brukeren klikker inni den; Det er ikke omfattet av denne opplæringen, men du kan se en lignende effekt på vår MakeUseOf-søk.

jQuery

Hvis du lurer på hvorfor vi bruker jQuery til å gjøre dette, er det enkelt: CSS er løst, og kan ikke justeres dynamisk. Selv om vi kunne bruke CSS til å lage en klebrig overskrift, ville det være nødvendig å være toppelementet på siden. Problemet vi har er at vår meny ikke er toppelementet, så vi kan ikke starte med å være klissete. Dette er hvor jQuery brukes; Vi kan sjekke når brukeren går forbi et bestemt punkt; da, og bare da, gjør det klebrig.

Start med å legge jQuery til temaet ditt. Ditt tema kan allerede ha det lastet Hvis ikke, ingen bekymringer. Du kan enten enqueue det ved å legge til følgende kode i dine funksjoner.php, slik som:

Eller du kan bare omgå WordPress helt og hardcore dette inn i headerfilen. Et sted i hoveddelen din, bare legg til denne linjen:

Hvis du bruker den første metoden, lastes den inn noConflict modus, noe som betyr at du må bruke “jQuery” i koden din for å få tilgang til jQuery-funksjoner. Hvis du bruker den andre metoden for direkte å legge den til toppteksten, kan du bruke standard jQuery accessor av $. Jeg antar den andre metoden i koden nedenfor.

Så, for å legge til en bestemt jQuery-kode, plasser du et eller annet sted på slutten av din header.php - Jeg har plassert meg like før