Хуудсыг гүйлгэхдээ тогтмол цэс хий. Хуудсыг гүйлгэх үед цэсийг зассан. WordPress дээрх дээд цэсийг хэрхэн засах вэ

Блогууд болон бусад эх сурвалжуудын хуудаснаас илүү олон удаа олддог. Ийм навигацийн баар ашиглах нь нэлээд үндэслэлтэй юм. Эдгээр jQuery залгаасуудыг идэвхтэй ашиглах гол шалтгаануудын нэг нь цэс нь хуудасны доод хэсэгт байсан ч гэсэн үргэлж зочдын гарт байдагт оршино. Үүнээс гадна, тогтмол цэс бага зай эзэлдэг бөгөөд гол агуулгаас анхаарлыг сарниулдаггүй. Ерөнхийдөө тогтмол цэс нь сайтын ашиглалтыг сайжруулдаг.
Би тогтмол цэсийг хэрэгжүүлэхэд зориулсан хамгийн шилдэг, миний бодлоор үнэгүй jQuery залгаасуудыг цуглуулсан. Би залгаас бүрийг ямар нэгэн байдлаар өвөрмөц байлгахыг хичээсэн бөгөөд ингэснээр сонгогдсон ямар ч залгаасыг таны төсөлд тусгайлан ашиглах боломжтой болно. Цуглуулгаас та хөдөлгөөнт дүрс бүхий энгийн, илүү төвөгтэй залгаасуудыг олох боломжтой.
Хэрэв танд маш энгийн тогтмол цэс хэрэгтэй бол бид нийгмийн товчлуур бүхий наалдамхай самбарыг хэрхэн хэрэгжүүлсэн гэх мэт зүйлийг jQuery залгаасгүйгээр хийж болно, учир нь хуудсыг скриптээр ачаалах нь тийм ч сайн биш боловч бид дараагийн нийтлэлүүдэд энэ тухай ярих болно. Сонирхолтой материалыг алдахгүйн тулд манай суваг эсвэл хуудсанд бүртгүүлээрэй.
Тэгэхээр. Тогтмол цэс үүсгэх 6 jQuery залгаас энд байна.

Наалттай толгойг автоматаар нуух jQuery суурин навигацийн залгаас нь дээрх скрипттэй төстэй зарчмаар ажилладаг боловч жигд биш боловч эхлээд харахад арай хялбар байдаг. Харамсалтай нь, навигаци нь бүрэн дасан зохицсон гэж би хэлж чадахгүй, учир нь жижиг дэлгэц дээр цэсийн зүйлүүд зүгээр л тоо болж хувирдаг нь маш хачирхалтай юм.

On Scroll Header Effects Тогтмол навигацийн самбарт зориулсан Powerful jQuery залгаас. Хуудас дээр гүйлгэж байхдаа тодорхой сегментүүдийг тохируулах боломжтой бөгөөд үүнд хүрэхэд самбар өөрчлөгдөж, бүрэн өөрчлөгдөж болно Гадаад төрх. Хуудас дээр хэдэн ч ийм сегмент байж болно.

On-Scroll Animated Header Наалттай навигацийн мөрийг хэрэгжүүлэх сайн залгаас. Энэ нь иймэрхүү ажилладаг: хуудасны хамгийн эхэнд лого, цэсийг агуулсан өндөр гарчгийг харж байна. Гүйлгэх үед лого, навигаци зэрэг бүх элемент бүхий толгой хэсэг нь шинж чанаруудыг ашиглан жигд буурч, дэлгэцийн дээд хэсэгт наалдсан нарийн тууз болж хувирдаг.

Сайн байна уу, блог сайтын эрхэм уншигчид. Бүх зүйлийг буцааж өгөхийг хүссэн үедээ яг юу хийснийг мартахгүйн тулд энэ нь надад илүү тэмдэглэл юм. Уншигчдын нэг нь WordPress-д зориулсан Q2W3 Fixed Widget (Sticky Widget) нэртэй залгаасын талаар бичихийг санал болгосноор бүх зүйл эхэлсэн бөгөөд энэ нь хажуугийн самбар дээрх дурын виджетийг хөвөх эсвэл өөрөөр хэлбэл тогтмол болгож чаддаг.

Тэдгээр. Хуудсыг гүйлгэх үед та хажуугийн самбарын үндсэн хэсэг дээшлэх боловч хамгийн доод хэсэгт байрлах виджет нь текстийг хэр хол хөдөлгөхөөс үл хамааран үзэх хэсэгт үлдэх болно. Би юу нийтлэхээ шууд хэлье контекст сурталчилгааҮүнийг хориглосон бөгөөд үүний төлөө шийтгэгдэж болно (сэтгэгдэлд бичсэнээр - YAN үүнийг зөвшөөрдөг боловч Adsense үүнийг хийхийг хориглодог).

Plugin нь маш сайн, гэхдээ миний загварт виджетүүдийг идэвхгүй болгосон тул би шийдсэн энэ даалгаварИнтернэтээс олсон хэдэн мөр JavaScript кодыг ашиглан.

Үүний үр дүнд миний дээд цэсийг харах талбарын хамгийн дээд хэсэгт байрлуулсан (үнэндээ зөвхөн CSS код хангалттай байсан, гэхдээ бид хялбар арга хайхгүй байна), мөн Доод хэсэгХуудсыг гүйлгэж байх үед хажуугийн самбар нь дэлгэцийн баруун дээд буланд бэхлэгдсэн байна. Энэ нь ямар ч ашиг тустай эсэхийг би мэдэхгүй, гэхдээ шийдэл нь үнэхээр энгийн.

Яагаад цэсийг засч, хөвөгч хажуугийн самбар хийх вэ?

Яагаад дээд цэсийг засах вэ гэж та асууж байна уу? За, ерөнхийдөө энэ бол сайжруулах сэдвээр хийсэн жижиг туршилт юм. Цэвэр таамаглалаар энэ нь үзсэн хуудасны тоо болон хэрэглэгчийн сайтад зарцуулсан цагийг нэмэгдүүлэхэд хүргэж болзошгүй гэж бид таамаглаж болно.

Нөгөөтэйгүүр, ийм тогтмол самбарын хэт их интрузив байдал нь уншигчдын сөрөг хариу урвалыг үүсгэж болзошгүй тул энэ үйлдлийн ашиг тустай эсэх асуудал нээлттэй хэвээр байна. Та долоо хоног хэрэглэсний дараа үр дүнг харах хэрэгтэй болно - хэрвээ цэсийг засахаа больсон бол (үзэх хэсгийн дээд ирмэг хүртэл хадсан) туршилт амжилтгүй болсон. Ямар ч тохиолдолд би энэ бүхэн хэрхэн болсныг дэлгэцийн агшинд авах болно.

WordPress дахь хөвөгч хажуугийн самбар нь арай өөр шалтгаанаар хийгдсэн байдаг - ямар нэгэн зүйлд илүү их анхаарал татахын тулд. Зарчмын хувьд энд та категорийн жагсаалт болон алдартай эсвэл сүүлийн үеийн нийтлэлүүдийн жагсаалтыг хоёуланг нь оруулж болох бөгөөд энэ нь зан төлөвийг сайжруулах ажлыг дахин оролдох болно. Гэхдээ ихэнхдээ зар сурталчилгааг ийм хөвөгч блокт байрлуулдаг (би өмнө нь дурдсанчлан контекст сурталчилгаа хийхийг зөвшөөрдөггүй), энэ нь цэвэр таамаглалаар вэбмастерын орлогыг нэмэгдүүлэх ёстой. Долоо хоногийн дараа үр дүнг нь харцгаая.

WordPress дээрх дээд цэсийг хэрхэн засах вэ

Би энэ хуудсан дээр өөртөө зориулж шийдлийг олсон - вэбсайт дээрх блок эсвэл цэсийг хэрхэн засах вэ. Ашиглахад зориулагдсан энэ аргахолбогдсон байх ёстой jQuery номын сан. Үүнийг хэрхэн хийх талаар контентыг ачаалах тухай нийтлэлд дэлгэрэнгүй тайлбарласан болно.

Хэрэв та санаж байгаа бол хуудас ачаалах хурдыг оновчтой болгох тухай нийтлэлд та бүх CSS болон JS-ийг нэг нийтлэг нэг болгон (хоёр гэсэн утгаараа - нэг нь хэв маяг, нөгөө нь скрипт) болгон нэгтгэхийг хичээх хэрэгтэй. Тиймээс би яг доор өгөгдсөн кодын мөрүүдийг ийм файлд нэмсэн. Хэдийгээр та тэдгээрийг шууд нэмж болно HTML код, скрипт хаягуудаар хүрээлэгдсэн. Жишээ нь, үүнийг header.php загвар дээр толгойн таг дотор хийж болно.

Та мөн дээд цэсийг ашиглан засах боломжтой цэвэр CSS- бидэнд туслах. Үнэн хэрэгтээ үүнийг ашиглан байршил тогтоох аргыг энд бас ашигладаг CSS шинж чанарууд, гэхдээ тэр даруй биш, харин гүйлгэж эхэлснээс хойш хэсэг хугацааны дараа (дээд талаас тодорхой зайд) тогтмол цэсийг харуулах боломжтой болно.

Миний хувьд дээд цэсийг засах код дараах байдалтай байна.

$(функц())( $(цонх).scroll(функц() ( var top = $(баримт бичиг).scrollTop(); if (дээд)< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });

Та энэ кодыг дараах хэсэгт буулгаж болохыг сануулъя.

  • Таны ашиглаж буй сэдэвтэй хавтсанд амьдардаг .js өргөтгөлтэй файл (/wp-content/themes/theme). Энэ нь таны сайтын вэб хуудсуудтай хамт ачаалахын тулд header.php файлд мөр бичигдсэн тохиолдолд л тохиромжтой бөгөөд энэ нь дараах байдалтай байж болно.
  • Та header.php файлыг өөрөө ашиглаж болно энэ коднээх, хаах толгойн тагуудын хооронд, скрипт тагуудад ороох, жишээ нь: $(функц())( $(цонх).scroll(функц() ( var top = $(баримт).scrollTop(); if (дээд< 10) $("#navi").css({top: "0", position: "relative"}); else $("#navi").css({top: "0px", width: "100%", position: "fixed"}); }); });
  • Та мөн энэ кодыг скрипт хаягууд дээр өөр аль ч газар бичиж болно. Хамгийн гол нь ачаалал ихтэй байдаг зөв хуудаснуудблог. Жишээлбэл, та үүнийг footer.php дээр хаалтын үндсэн тагны өмнө хийж болно.

    • Одоо энэ кодыг шууд харцгаая. Дээрээс нь 10 пиксел гарч ирдэг харьцангуй байрлалтогтмол нэгээр солигдсон байна (дээр дурдсан холбоос дээрх нийтлэлийг үзнэ үү). Шаардлагатай бол else-ийн мөрөнд та дээд талын утгыг тэгээс өөр утгаар сонгож болно, дараа нь дээд талд нь зассан цэс нь харах цонхны дээд ирмэгээс ухрах болно. өгөгдсөн үнэ цэнэпиксел (миний бодлоор, энэ нь шаардлагагүй юм).

    Анхны кодоос ялгаатай нь би бас өргөнийг нэмэх шаардлагатай болсон: "100%", эс тэгвээс цэсийн хэмжээ багасах бөгөөд энэ нь зургийг бүхэлд нь сүйтгэх болно.

    Хараач, ойлгомжтой болгохын тулд би дээд цэсийг бий болгох Html кодыг өгөх болно WordPress загварблог (энэ нь миний header.php файлд амьдардаг):

    Таны загварт цэсийн зүйлсийг харуулахыг жишээлбэл, ийм бүтэц (функц) ашиглан зааж өгсөн байх магадлалтай, гэхдээ энэ нь тийм ч чухал биш юм.