Kā izveidot savu lipīgo galvenes joslu, piemēram, MakeUseOf

Reklāma

Apmēram pirms mēneša MakeUseOf mēs ieviesām jaunu interfeisa elementu - peldošu navigācijas un meklēšanas joslu. Saņemtās atsauksmes ir gandrīz pilnīgi pozitīvas, iekšējā meklēšanas trafiks ir palielinājies, un daži lasītāji ir jautājuši par to, kā izveidot savu vietni, tāpēc es domāju, ka es dalīšos.

Mēs izmantosim jQuery, lai joslu pielīmētu ekrāna augšdaļā, bet tikai noteiktā vietā. Es to visu izdarīšu WordPress noklusējuma tēmā - Divdesmit vienpadsmit, lai gan, protams, to var izmantot jebkurai tēmai vai vietnei, kuru jūs pietiekami saprotat, kā modificēt.

HTML

Vispirms atveriet tēmas header.php un identificējiet navigācijas joslu, kuru mēs padarīsim lipīgu. Kā jau teicu, zemāk redzamais kods ir noklusējuma divpadsmit vienpadsmit; jūsu var atšķirties.

Pirmkārt, pievienojiet jaunu DIV konteineru, kas apņem visu šo NAV sadaļu.

Pārvietosim arī šo noklusējuma meklēšanas joslu šeit. Jūs pamanīsit, ka tas pēc noklusējuma ir pievienots motīva augšējā labajā stūrī; atrodiet līniju php get_search_form ();

un ielīmējiet to mūsu navigācijas sadaļā. Izdzēsiet visus pārējos tā failus šajā failā.

Ja tagad saglabājat un atsvaidzina, meklēšanas forma faktiski nav redzama navigācijas joslā - tā joprojām ir redzama augšējā labajā stūrī. Tas ir tāpēc, ka tas ir absolūti novietots CSS, un mēs visu to izdzēsīsim sekundes laikā.

CSS

Atveriet galveno style.css failu un atrodiet meklēšanas formas sadaļu:

#branding #searchform {... }

Aizvietojiet visu, kas atrodas tā iekšpusē (tai vajadzētu būt apmēram četrām līnijām, ieskaitot absolūto pozicionēšanu), ar šo:

#branding #searchform { pludiņš: pa kreisi; fons: balts; rezerve: 7 pikseļi; }

Jūtieties brīvi pielāgot krāsu vai malu. Nomainiet pludiņu, ja vēlaties, lai tas parādītos joslas labajā pusē. Šajā tēmā meklēšana ir iestatīta tā, lai izvērstos, kad lietotājs noklikšķina tajā; tas neietilpst šīs apmācības darbības jomā, taču līdzīgu efektu varat redzēt arī mūsu vietnē MakeUseOf.

jQuery

Ja jums rodas jautājums, kāpēc mēs to izmantojam jQuery, tas ir vienkārši: CSS ir fiksēts, un to nevar dinamiski pielāgot. Lai gan mēs varētu izmantot CSS, lai izveidotu lipīgu galveni, tam vajadzētu būt lapas augšējam elementam. Mums ir problēma, ka mūsu ēdienkarte nav galvenais elements, tāpēc mēs nevaram sākt ar to, ka tā ir lipīga. Šeit tiek izmantota jQuery; mēs varam pārbaudīt, kad lietotājs iet garām noteiktam punktam; tad un tikai tad padariet to lipīgu.

Sāciet ar motīva pievienošanu jQuery. Iespējams, ka jūsu tēma jau ir ielādēta; ja nē, tad neuztraucieties. Varat arī to iekodēt, savām funkcijām.php pievienojot šādu kodu, piemēram:

php. funkcija my_scripts_method () { wp_deregister_script ('jquery'); wp_register_script ('jquery', ' http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'); wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'my_scripts_method');

Vai arī jūs varat vienkārši apiet WordPress un vissmagāk to galvenes failā. Kaut kur galvas sadaļā vienkārši pievienojiet šo rindu:

Ja izmantosit pirmo metodi, tā tiks ielādēta noConflict režīms, kas nozīmē, ka, lai piekļūtu jQuery funkcijām, kodā ir jāizmanto “jQuery”. Ja izmantojat otro metodi, lai to tieši pievienotu galvenei, varat izmantot standarta jQuery piekļuvi $. Es pieņemšu, ka zemāk esošajā kodā ir otrā metode.

Tātad, lai pievienotu faktisko jQuery kodu, sava gala beigās kaut kur novietojiet šo header.php - Es novietoju raktuves tieši pirms

Pirmais, ko dara skripts, ir noskaidrot, kur sākas navigācijas josla, un atcerēties šo vērtību. Otrkārt, mēs pievienojamies ritināšanas notikumam - tas nozīmē, ka katru reizi, kad lietotājs ritina lapu, mēs varam palaist šo koda bloku. Kad kods darbojas, to var izmantot divējādi:
1. Ja logs ir ritinājis gar navigācijas joslu, mēs to izveidojam par fiksētu CSS (šī ir “lipīgā” daļa).
2. Ja loga augšdaļa ir augstāka par navigācijas joslas sākotnējo stāvokli (ti, lietotājs atkal ritināja atpakaļ uz augšu), mēs to ievietojam atpakaļ noklusējuma statiskajā stāvoklī.

Ir divi punkti, kuriem es gribu pievērst jūsu uzmanību:

• +288 atrodas tur, lai labotu kļūdu nepareizas pozīcijas iegūšanā; bez tā josla pārāk ātri iedarbina savu lipīgo stāvokli - noņemiet to, lai redzētu, ko es domāju. Tas nebūs vajadzīgs visās tēmās, un jūs, iespējams, varat nākt klajā ar labāku risinājumu.
• Lai novērstu navigācijas joslas mainīgās platuma problēmu, kad tā nonāk lipīgā stāvoklī, rediģējiet style.css, 550. rinda, lai lasītu 1000 pikseļi tā vietā 100%

Tas ir, jūsu navigācijas joslai tagad jābūt labi lipīgai.

Kopsavilkums:

Pilnīga nomaiņa header.php šīs apmācības kodu var atrast vietnē šo pamani; un nomaiņu stils.cssšeit. Es cerēju, ka jums patika šī mazā apmācība; Ja rodas problēmas, ievietojiet komentāros, taču atcerieties, ka jūsu vietne ir publiski pieejama, lai es varētu iet līdzi un paskatīties pati. Ja esat šeit jauns, noteikti apskatiet visus citus emuāru autori un tīmekļa attīstības raksti.