WordPress дээр мэдэгдлийн самбар үүсгэх залгаасууд. WordPress bigSlide дээр мэдэгдлийн самбар үүсгэх залгаасууд - Jquery дахь слайдын навигацийн самбар

Plugin – WPFront мэдэгдлийн самбарыг ашигласнаар та WordPress сайтынхаа дээд эсвэл доод хэсэгт вэбсайтдаа мэдэгдлийн самбар нэмж болно. Самбар нь ямар ч текст болон HTML кодыг нэмж оруулах холбоос бүхий товчлуурыг харуулах боломжтой. Та мэдэгдлийн самбарын өнгийг өөрчлөх боломжтой, сайтын дээд эсвэл доод хэсэгт байрлах самбарын байршлыг сонгох боломжтой. Хуудсыг гүйлгэх үед самбар үргэлж дэлгэцэн дээр харагдахаар самбарыг түгжиж болно. Та самбарыг аль хуудсан дээр харуулах, аль нь харуулахгүй гэх мэтийг сонгож болно.

Та залгаасыг WordPress админ самбараас шууд суулгаж болно. Таб руу очно уу: Plugins - Шинээр нэмэх, хайлтын маягт дээр залгаасын нэрийг оруулаад Enter дарж, залгаасыг суулгаж идэвхжүүлнэ үү.

Залгаасыг суулгаж, идэвхжүүлсний дараа залгаасыг тохируулахын тулд WPFront – Notification Bar гэсэн хуудас руу очно уу.

Дэлгэц

– Идэвхжүүлсэн, мэдэгдлийн самбарыг идэвхжүүлэхийн тулд энд байгаа нүдийг чагтална уу.

– Байршил, самбарыг хаана харуулахыг сонгоно уу, Дээд талд - дээд талд, Доод талд - доод талд байна.

– Байрлал дээр тогтсон, хэрэв та энэ нүдийг чагталвал хуудсыг гүйлгэж байх үед ч самбар үргэлж дэлгэцэн дээр харагдах болно.

– Scroll дээр харуулах, хэрэв та энэ нүдийг сонговол хуудсыг гүйлгэх үед самбар гарч ирнэ.

– Scroll Offset, эндээс та мэдэгдлийн самбар гарч ирэхээс өмнө хуудсыг хэдэн пикселээр гүйлгэхийг зааж өгч болно.

– Bar Height, та эндээс баарны өндрийг пикселээр зааж өгч болно.

– Position Offset, эндээс та сайтын дээд хэсгээс самбар хүртэлх зайг тохируулж болно.

– Дэлгэцийн дараа та самбар гарч ирэх цагийг тохируулж болно, функцэд ажиллахгүй – Scroll дээр харуулах.

– Хөдөлгөөнт дүрсний үргэлжлэх хугацаа нь самбар дэлгэц дээр шилжих үед хөдөлгөөнт дүрсийн үргэлжлэх хугацааг тохируулах боломжтой.

– Хаах товчийг харуулах, самбарыг хаахын тулд загалмай бүхий товчлуурыг харуулахын тулд нүдийг чагтална уу.

– Автомат хаасны дараа самбар хэдэн секундын дараа автоматаар хаагдахыг зааж өгч болно, функцэд ажиллахгүй – Scroll дээр харуулах.

– Сүүдрийг харуулах, самбарын сүүдрийг харуул.

– Дахин нээх товчийг харуулах, хэрэв та хайрцгийг чагталвал самбарыг хаасны дараа дэлгэцийн буланд самбарыг нээх товчлуур гарч ирнэ.

– Хаалттай байлгах, хэрэв та хайрцгийг чагталвал нэг хуудсан дээрх самбарыг хаахад самбар бусад хуудсан дээр харагдахаа болино.

– Хаалттай байлгахын тулд самбарыг хаасан хэрэглэгчдэд самбар хэдэн өдөр харагдахгүй байхыг энд зааж өгч болно.

Агуулга

– Мессежийн текст, мэдэгдэлд харагдах текстийг энд оруулаад HTML код нэмж болно.

– Богино кодыг боловсруул, хайрцагыг чагталснаар мэдэгдэлд богино код нэмэх боломжтой.

– Дэлгэцийн товчлуур, самбар дээрх товчлуурыг харуулахын тулд нүдийг чагтална уу.

– Товчлуурын текст, товчлуурын текстийг энд оруулна уу.

– Товчлуурын үйлдэл, товчлуурын холбоосыг энд оруулна уу. URL-г шинэ цонхонд нээх - холбоос шинэ цонхонд нээгдэнэ. Дагах холбоос байхгүй - холбоосыг индексжүүлэхгүй.

– Товчлуур дээр товчлуурыг хаах, товчлуурыг дарж самбарыг хаа.

Шүүлтүүр

– Эхлэх огноо, цаг, та самбар гарч эхлэх огноо, цагийг зааж өгч болно.

– Дуусах огноо, цаг, та самбар хаагдах огноо, цагийг зааж өгч болно.

– Хуудас дээр харуулах, самбарыг аль хуудсан дээр харуулахыг сонгоно уу. Бүх хуудас - бүх хуудсан дээр. Дараах хуудсуудад оруулах - самбарыг харуулах хуудсыг шалгана уу. Дараах хуудсуудад оруулахгүй - хуудаснуудыг хасах.

– Хэрэглэгчийн дүрд зориулсан дэлгэц, эндээс та самбарыг аль хэрэглэгчийн дүрд харуулахыг сонгож болно. Бүх хэрэглэгчид – хүн бүрт, Бүх нэвтэрсэн хэрэглэгчид – зөвхөн эрх бүхий хэрэглэгчдэд, Зочин хэрэглэгчид – зөвхөн зочдод, Дараах хэрэглэгчийн дүрд – дүрүүдийг шалгана уу.

Өнгө

– Bar Color, баарны өнгийг сонгоно уу.

– Мессежийн Текстийн өнгө, самбар дээрх текстийн өнгийг зааж өгнө үү.

– Товчлуурын өнгө, товчлуурын өнгө сонгох, та градиент харуулахын тулд хоёр өнгийг зааж өгч болно.

– Товчлуурын текстийн өнгө, товчлуур дахь текстийн өнгө.

– Дахин нээх товчлуурын өнгө, самбарыг нээх товчлуурын өнгө.

– Close Button Color, самбарын хаах товчлуурын өнгийг сонгоно уу.

– Захиалгат CSS, та самбарт өөрийн CSS хэв маягийг тохируулж болно, гэхдээ энэ нь шаардлагагүй.

Төгсгөлд нь өөрчлөлтөө хадгална уу.

Таны WordPress сайтын дээд эсвэл доод хэсэгт байрлах мэдэгдлийн самбаршинэчлэгдсэн: 2018 оны 7-р сарын 25-нд: Илья Журавлев

Сайн байна уу, блог сайтын эрхэм уншигчид. Өнөөдөр би хэд хэдэн төрлийн хуудсыг нэг дор холбох боломжтой нэлээд ажиллагаатай, тохиромжтой upPrev залгаасын талаар ярихыг хүсч байна. Та түүний ажлыг (наад зах нь энэ нийтлэлийг бичиж байх үед) нийтлэлийн хуудас бүрийн доод талд ажиглаж болно - ижил төстэй материалын жагсаалт бүхий баруун талд гарч ирэх самбар гарч ирнэ.

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

Одоо вэбсайтыг сурталчлахад холбоос ямар үүрэг гүйцэтгэдэг вэ?

Ерөнхийдөө вэбсайтыг цаашид амжилттай сурталчлахын тулд оновчтой болгох нь №1 даалгавар юм (хоёр дахь нь буцах холбоос авах). Дотоод хүчин зүйлүүд нь бусад бүх зүйлийн нөлөөг хааж, багасгаж чаддаг. Нөгөөтэйгүүр, энэ нь боломжгүй юм (ялангуяа агуулга дахь түлхүүр үгс, дотоод холбоосын зангуутай).

Өнөө үед албан тушаал ахих нэгдсэн арга барилыг удирдан чиглүүлж байгаа бөгөөд холбох нь үүнд нэлээд чухал байр суурь эзэлдэг. Сүүлийн үед инфографик ашиглан аливаа зүйлийг нүдээр харуулах моод болоод байна. SEO сэдвээр та ижил төстэй олон схемүүдийг олж болно, жишээлбэл, Seopro-ийн вэбсайтыг хэрхэн сурталчлах тухай нийтлэлээс. Харамсалтай нь би ийм шилдэг бүтээлүүдийг бүтээхэд хараахан бэлэн болоогүй байгаа ч тэдгээрт дурдвал надад шаардлагагүй ус асгахгүй байх боломжийг олгоно.

Аль холбох схемийг сонгох вэ? Маш хэцүү асуулт, учир нь өмнө нь сайн ажиллаж байсан олон схемүүд (миний дээр дурдсан зартай "цагираг", хэрэгжүүлэх аргуудын холбоосууд) арван жилийн өмнө ажиглагдсан гайхалтай үр дүнг өгөхөө больсон. Хайлтын системүүд бас суралцаж, тэдний үзэл бодлоос илт хууран мэхлэлт гэдгийг анхаарч үзэхгүй байхыг хичээдэг.

Peydrank-ийн онолын дагуу хэд хэдэн цагираг хэлбэрээр хоорондоо холбогдох нь энэ цагирагт оролцож буй сайтын хуудсуудын () статик жинг нухацтай нэмэгдүүлэх ёстой.

Гэсэн хэдий ч энэ нь практик дээр үргэлж ажилладаггүй. Хувь хуудсууд индексээс унах үед цагираг тасрах эсвэл тэмдэглэгээг багасгахын тулд хайлт нь статусын жинг тооцоолох сонгодог томъёонд ноцтой бууруулах хүчин зүйлийг нэвтрүүлсэн байж магадгүй юм.

Вэбсайт хуудсуудыг холбох нь Yandex эсвэл Google-д таалагдахгүй, харин өөр нэг даалгавартай зочдод таалагдах болно. Түүнд таны блогийг туршиж үзэхэд нэг нийтлэл хангалтгүй байх нь тодорхой - та түүнийг сонирхож, түүнийг хадгалж үлдэх, магадгүй түүнийг өөрийн захиалагч болгохын тулд өөр газар очихыг заавал урих ёстой.

Тиймээс холбох нь бас нөлөөлдөг зан үйлийн хүчин зүйлүүд, үүнийг хайлт нь мөн харгалзан үздэг бөгөөд жил бүр улам бүр нэмэгдсээр байна. Бараг бүх вэбмастерууд үүнийг ойлгож, ижил төстэй материал, хамгийн их уншдаг нийтлэл эсвэл ижил категорийн нийтлэл бүхий сайтад блок нэмж оруулдаг. Сэдвийн өөр хувилбарууд байж магадгүй юм.

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

Би өөрөө маш олон зүйлийг туршиж үзсэн бөгөөд заримынх нь талаар шүүмж бичсэн (). Үнэн хэрэгтээ, дурдсан залгаас нь холбогдох нийтлэлүүдийг тооцоолох, блог хуудсан дээр жагсаахад хамгийн тохиромжтой програмуудын нэг юм.

Гэхдээ түүний өгөгдлийг бусад WordPress өргөтгөлүүдэд ашиглаж, илүү өнгөлөг эсвэл дүр эсгэх боломжтой. YARP-ийн тухай ижил нийтлэлд би түүний өгөгдлийг Related Posts Slider залгаас хэрхэн ашигласан тухай жишээг өгсөн бөгөөд энэ нь ижил төстэй нийтлэлүүдийг дараах хэлбэрээр харуулах боломжийг олгосон.

За, эсвэл энэ:

Манай өнөөдрийн баатар залгасан дээш ӨмнөхМөн Yet Another Related Posts Plugin мэдээллийн сангаас хэрхэн мэдээлэл авахаа мэддэг бөгөөд зөв зүйлийг хийдэг, учир нь дугуйг дахин зохион бүтээх шаардлагагүй. Үнэн хэрэгтээ энэ инженерийн гайхамшгийн чадавхийг тайлбарлах руу орцгооё.

upPrev залгаасыг ашиглан сонголтуудыг холбох

Би эдгээр хэв маягийг хөндөөгүй, учир нь би өөр замаар явсан (хамгийн шууд биш), үүнийг текст дээр доор тайлбарлах болно. Дараа нь хоёр дахь таб руу очно уу:

Энэ залгаас руу холбоос үүсгэх нийтлэлийн тоог сонгоно уу. Гэхдээ арай доогуур, бид зүгээр л манай сайтын холбоосын төрлийг сонгоно уу. Би Yet Another Related Posts Plugin баазыг ашиглан ижил төстэй нийтлэлүүдийн сонголтыг сонгосон (үүнийг урьдчилан суулгасан байх ёстой), гэхдээ та хоёр, гурав дахь сонголтыг сонгон дуудлагын төрлийн холболтыг тохируулах, мөн том бөгж холбох эхлээд .

Би энэ асуудлыг зөвхөн зохих талбарт тэмдэглэгээгээр тэмдэглэсэн нийтлэлүүдэд зориулж зохион байгуулахыг зорьсон. Хэрэв та үүнийг бөглөсөн бол нийтлэлийн гарчигнаас гадна энэ самбар нь нийтлэлийн эхнээс эсвэл ишлэлийн хэсгээс хэд хэдэн үгийг (тэдгээрийн тоог хамгийн доод хэсэгт тохируулсан) харуулах боломжтой. Энэ нь надад хэрэггүй юм шиг санагдсан.

Гурав дахь таб нь миний ашиглаагүй энэ самбар дээрх холбоосууд дээр товшилтын тоог хянахад ашиглагддаг. Гэсэн хэдий ч дөрөв дэх таб дээр би кэшийг идэвхжүүлсэн хэвээр байна. Тав дахь таб дээр би самбарыг гар утсан дээр харуулахыг хориглосон боловч таблет дээр харуулахыг эсэргүүцээгүй:

За, энэ бол бүх зүйл, upPrev тохиргоог хийж дуусгасан, гэхдээ би өөр өөр холбоотой нийтлэлийн залгаасын тохиргоонд самбарын харагдах байдлыг өөрчилсөн.

Гулсах самбарын агуулгын харагдах байдлыг өөрчлөх

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

Тэр. Одоо upPrev залгаасын (попап самбарт) харуулсан ижил төстэй нийтлэлүүдийн жагсаалтын харагдах байдал нь миний сэдэв () хавтсаас миний yarpp-template-list.php файлд бичигдсэн кодоор тодорхойлогддог. Хэрэв таны блог нийтлэлийн өнгөц зургийг гаргадаг бол тэдний дэмжлэгтэйгээр Yet Another Related Posts Plugin арсеналаас загвар сонгох нь зүйтэй юм.

Энэ файлын код нь:

have_posts()): $postsArray = массив(); байхад ($холбоотой_асуулт->шууд_шууд()): $холбоотой_асуулт->шууд_шууд(); $postsArray = "
• ".гарчиг_гарч ()."
"; endwhile; echo implode(" "."\n",$postsArray); // холбогдох зүйлсийн жагсаалтыг таслалаар тусгаарлан хэвлэж гаргана уу:?>

Холбоотой нийтлэл байхгүй.

Таны харж байгаагаар гүйдэг залгуурын толгой энд байрладаг тул та crack()-аас зайлсхийхийн тулд энэ файлыг BOMгүйгээр UTF-8 кодчилол руу хөрвүүлэх (шаардлагатай бол) хэрэгтэй болно. Би та нарын тухай мэдэхгүй, гэхдээ би удаан хугацааны турш Notepad++ ()-ийг үндсэн редактороор ажиллуулж байгаа бөгөөд үүнд энэ хөрвүүлэлт дараах байдлаар хийгдсэн:

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

A.oy (өнгө: #333;фонт:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (текстийг зэрэгцүүлэх: төвд; дүүргэх: 12px 5px 17px 5px;маржин: 5px 0; хүрээ: цэгтэй 2px #ccc;) li.eto:hover (текст чимэглэл: доогуур зураас;) div.oyy (хаваас:0 0 0 0; дүүргэх:5px 0;фонт: хэвийн 17px "Trebuchet MS", Вердана, Ариал;өнгө:#666;)

Лампочка анги нь миний CSS кодонд base64 кодыг ашиглан тохируулсан ногоон тэмдэглэгээг нэмдэг (би энэ кодыг хаа нэгтээ хуулсан). Хэрэв та сонирхож байгаа бол миний style.css-г хараарай. За одоо бүх зүйл дууслаа. Хэрэв та ямар нэг зүйл мартсан бол асуугаарай. Үнэн, би энэ холбох сонголтыг сарын өмнө тохируулсан бөгөөд энэ хугацаанд ямар нэгэн зүйл миний толгойноос алга болсон.

Чамд амжилт хүсье! Удахгүй блог сайтын хуудсууд дээр уулзацгаая

Та сонирхож магадгүй юм

Yet Another Related Posts залгаас дахь ил тод пикселийг http://yarpp.org/pixels хэрхэн арилгах, бичээсийг өөрчлөх.
Дотоод холбоход зориулсан Related Posts залгаасыг ашиглан WordPress дээр холбогдох нийтлэлүүдийн жагсаалтыг (өнгөц зурагтай) үүсгэх
WordPress-д зориулсан Yet Another Related Posts and Related Posts Slider залгаасуудыг ашиглан вэбсайтын зан байдлын статистикийг хэрхэн сайжруулах вэ
Энгийн тоолуур ба ангилал, хуудасны дүрсүүд - үзэсгэлэнтэй RSS болон Twitter тоолуур, мөн WordPress дахь категори, хуудасны дүрсүүд
Миний блог (сайт) дээрх WordPress залгаасууд Таны вэбсайтад зориулсан слайдерууд болон слайд шоунууд - ямар сонголтууд байдаг, jQuery Slider скриптүүдийг хэрхэн ашиглах талаар
Breadcrumb NavXT залгаасыг ашиглан WordPress дахь Breadcrumbs (холбоосыг бэхжүүлэх)
Хуудас үүсгэх үед WordPress-ийн санах ойн хэрэглээг багасгах - нутагшуулах файлыг солих WPLANG Lite залгаас
WP-PageNavi - WordPress блогт зориулсан хуудасны навигаци - суулгах, тохируулах, хуудасны харагдах байдлыг өөрчлөх
Үүнийг календарь болго! - WordPress-д зориулсан үйл явдлын хуанли
WordPress-ээс захидал илгээгээгүй бөгөөд визуал засварлагч ажиллахгүй байна - SMTP тохируулах болон Post Editor товчлуурын залгаасуудыг ашиглан шийдэл.

Та вэбсайтын хуудсууд дээр өгөгдсөн хугацааны интервалаар автоматаар дээд, доод, баруун эсвэл зүүн талд ярьдаг, эсвэл товшилтоор идэвхжүүлдэг янз бүрийн хэлбэр, байршилтай эвхэгддэг самбаруудтай байнга таарч байсан нь лавтай. Дүрмээр бол ийм самбарууд нь хэрэглэгчийн нүднээс далд байдаг зарим чухал, зарим нь тийм ч чухал биш зарим нэмэлт мэдээллийг агуулдаг. Жишээлбэл, захиалгын маягт, нийгмийн сүлжээний виджет, холбоос, шошго, холбоо барих мэдээлэл гэх мэт, товчхондоо юу ч байна.
Javascript дээр гулсах самбар, төрөл бүрийн CMS-д зориулсан модулиуд болон залгаасууд, бие даасан jQuery залгаасуудыг хэрэгжүүлэх асар олон тооны бэлэн шийдлүүд байдаг боловч миний анхаарлыг татсан цөөхөн нь цэвэр CSS дээр бүрэн ажилладаг аргууд байсан.

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

Бид жишээг харж, эх хувилбартай нь харьцуулж үзээд, энэ нь хэнд хэрэгтэй вэ, энэ бүх зүйл хэрхэн ажилладагийг хамтдаа олж мэдье. Би танд дахин сануулж байна, ямар ч js, зөвхөн цэвэр html, css-ийн "ид шид" л бүх ажлыг хийх болно.

HTML зохион байгуулалт

Энэ нь үндсэн сав, агуулга бүхий блок, самбарыг нээх/хаах товчлуур гэсэн гурван үндсэн элементээс бүрдэнэ.

Таны харж байгаагаар самбарын загварт type=" " туг агуулагдсан бөгөөд энэ нь анхдагчаар далд бөгөөд идэвхгүй байна. Шошго ашиглаж байна , css-д товчлуур хэлбэрээр бүтээгдсэн бөгөөд бид шалгах хайрцагны хооронд холболт үүсгэдэг, өөрөөр хэлбэл, хэрэв та шошгон дээр дарвал оролт ажиллах болно (идэвхтэй болно). За, псевдо анги ашиглан: css дээр бид далд шалгах хайрцаг болон самбарын элементүүдийн хооронд холболт үүсгэдэг.
Нээх/хаах товчлуур нь самбарын их биетэй холбогдоогүй, харин үндсэн хуудасны агуулгын савтай харьцуулахад байрладаг гэдгийг би нэн даруй тэмдэглэхийг хүсч байна.

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

Одоо гулсах самбарынхаа хэв маягийг бүтээцгээе, эхлээд суурь савны хэмжээсийг тохируулж, дэвсгэр өнгө, түүний анхны байршлыг тодорхойлно. CSS дээр бид class.top-panel үүсгэх бөгөөд үүнд шаардлагатай бүх шинж чанаруудыг бичих болно.
Манай самбар эвхэгддэг тул бид үүнийг нуух хэрэгтэй гэсэн үг бөгөөд үүнийг маш энгийнээр хийдэг. Тогтмол байрлал тогтоох байрлалыг тохируулах: тогтмол; , хуудасны өргөнийг бүрэн хэмжээгээр сунгах: 100%; , бид самбарын өндрийг (өндөр:) заагаагүй бөгөөд энэ тохиолдолд самбар нь агуулгын хэмжээг автоматаар тохируулах бөгөөд transform: translateY(-100%); , манай самбарыг хуудасны дээд ирмэгээс цааш түлхэнэ үү.

. дээд самбар (арын дэвсгэр: #39464e; байрлал: тогтмол; дээд: 0; өргөн: 100%; дэвсгэр: 0; - webkit- хайрцаг- хэмжээ: хүрээ- хайрцаг; - moz- хайрцаг- хэмжээ: хүрээ- хайрцаг; хайрцаг- хэмжээ: border- box; - webkit- transform: translateY(- 100% ) ; - moz- transform: translateY(- 100% ) ;

Дээд самбар (арын дэвсгэр: #39464e; байрлал: тогтмол; дээд: 0; өргөн: 100%; дэвсгэр: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- хэмжээ: border-box; -webkit-transform: translateY(-100%) -moz-transform: translateY(-100%);

Самбарын мессежийн блок нь үндсэн контейнер дотор байрладаг бөгөөд тодорхой ангиллаар хуваарилагдсан байдаг = "мессеж" , үүнд бид энэ талд байрлах бүх элементүүдийн шинж чанарууд, өнгө, үсгийн гэр бүл, зургийн хэмжээ гэх мэтийг зааж өгдөг. .
Мэдээжийн хэрэг та мессежийг үндсэн саванд шууд байрлуулснаар нэмэлт блок хийхгүйгээр хялбархан хийж болно, гэхдээ энэ нь самбарын боломжит тохиргооны уян хатан байдлыг алддаг.
Мессежийг яг голд нь харуулах бөгөөд заасан өргөн хамгийн их өргөн: 980px; , утга нь дур зоргоороо, та огт өөр хэмжээтэй сонгож болно.

/* Мессежийн блок */ .мессеж (өнгө: #fff; үсгийн жин: 300; байрлал: харьцангуй; дэвсгэр: 2em; захын зай: 0 auto; хамгийн их өргөн: 980px ) /* 1-р түвшний гарчиг */ .мессеж h1 ( өнгө: #fff ) /* 2-р түвшний толгой */ .мессеж h2 (өнгө: #888 )

Дараа нь бид самбарын шилжүүлэгчдээ шаардлагатай бүх хэв маягийг тодорхойлох болно. Эхлэхийн тулд html таг дээр "checkbox" гэсэн тугийг хэрэглэгчийн нүднээс нууж үзье. Объектыг хөтчийн цонхонд харуулах эсэхийг тодорхойлдог далд атрибутыг бичье.

Нээлттэй (байрлал: үнэмлэхүй; клип: шулуун (0 0 0 0); тунгалаг байдал: 0; )

Тегу class="btn" -ийг оноож өгцгөөе, үүгээр бид css дээр ажиллах болно нэлээн гоё свич (товчлуур) "зурах":

/* Самбарын унтраалга */шошго. btn (дэлгэц: блок; байрлал: үнэмлэхүй; баруун: 25px; дээд: 100%; /*доод: -35px;*/ курсор: заагч; дэвсгэр: #2bbbad; хилийн радиус: 0 0 3px 3px; дэвсгэр: 8px 16px ; өнгө: #fff; фонт-хэмжээ: 100%; z индекс: 9999) /* Хүрээг асаах */шошго. btn: hover (- webkit- шилжилт: 0. 35 сек; - moz- шилжилт: 0. 35 сек; шилжилт: 0. 35 сек; хайрцаг- сүүдэр: 0 5px 11px 0 rgba(0 , 0 , 0 , 0.18 ) , 0 4px 15px 0 rgba(0 , 0 , 0 , 0.15 ) ) /* Доош шилжих сум */шошго. btn: дараа (агуулга: "\f078" ; фонт: хэвийн 18px/ 1 FontAwesome; текст- чимэглэл: өвлөх )

/* Самбарын шилжүүлэгч */ label.btn (дэлгэц: блок; байрлал: үнэмлэхүй; баруун: 25px; дээд: 100%; /*доод: -35px;*/ курсор: заагч; дэвсгэр: #2bbbad; хилийн радиус: 0 0 3px 3px өнгө: #fff; -webkit-фонт-smoothing: курсор: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0); , 0.12); z-индекс: 9999 ) /* Hover солих */ label.btn:hover ( - webkit-шилжилт: 0.35 сек; -moz-шилжилт: 0.35 сек; хайрцаг-сүүдэр: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0 , 0.15) ) /* Доош шилжүүлэх сум */ label.btn:after ( контент: "\f078"; фонт: хэвийн 18px/1 FontAwesome; текст-чимэглэл: өвлөх)

Шилжүүлэгч сумыг FontAwesome фонтын дүрсний багцаас авсан бөгөөд энэ багцын загварын файлыг эхлээд хуудсанд холбох ёстой.

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel = "загварын хуудас" >

Та тохирох текст эсвэл html тэмдэг гэх мэт өөр төрлийн шилжүүлэгчийг ашиглаж болно.
Анхдагч байдлаар, би шилжүүлэгчийн гурван төлөвийг тодорхойлсон: самбар хаагдах үед - доош сум, самбар нээлттэй үед - дээш сум, мэдээжийн хэрэг хулганаар зөөвөрлөх үед бага зэрэг хулганын эффект.

Бид самбараа идэвхжүүлж, псевдо-class:checked ашиглан шилжүүлэгчийн төлөвийг өөрчилдөг.
Box-shadow шинж чанарыг ашиглан идэвхтэй самбарын доод ирмэг дээр цайвар сүүдэр нэмж, шилжилтийг ашиглан самбарын хоёр төлөв (нээлттэй ба хаалттай) хооронд энгийн шилжилтийн эффектийг тохируулсан.

. нээлттэй: шалгасан ~ . дээд самбар ( хайрцаг- сүүдэр: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; - webkit- хувиргах: translateY(0 ) ; -moz - transform: translateY(0) ; - webkit- шилжилт: 0. 35s; нээлттэй: үгүй(: шалгагдсан) ~ . дээд самбар ( - webkit- шилжилт: 0. 35 сек; - moz- шилжилт: 0. 35 сек; шилжилт: 0. 35 сек ) /* дарахад өнгө солино */. нээлттэй: шалгасан ~ . дээд самбар > шошго. btn (арын дэвсгэр: #dd6149) /* Дээш сум сэлгэх*/. нээлттэй: шалгасан ~ . дээд самбар > шошго. btn: дараа (агуулга: "\f077" ; фонт: хэвийн 18px/ 1 FontAwesome )

Нээлттэй:checked ~ .top-panel (хайрцагны сүүдэр: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transform: translateY( 0); -moz-transform: translateY(0); -webkit-шилжилт: 0.35s ) .open:not(:checked) ~ .top-panel ( -webkit-шилжилт: 0.35s; -moz -шилжилт: 0,35 сек; шилжилт: 0,35 сек ) /* дарахад өнгө солино */ .open:checked ~ .top-panel > label.btn ( дэвсгэр: #dd6149 ) /* Дээш солих сум*/ .open:checked ~ .top-panel > label.btn:after (агуулга: "\f077"; фонт: хэвийн 18px/1 FontAwesome )

Хэрэглэгчийн төхөөрөмжүүдийн өөр өөр дэлгэц дээр үсгийн хэмжээг өөрчлөхийн тулд би @media media асуулга ашигласан. Орчин үеийн бодит байдлыг харгалзан үзэхэд нэмж хэлэх нь илүүц биш гэж би бодож байна.

Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 400px) (биеийн хэмжээ (фонтын хэмжээ: 90%)) @media зөвхөн дэлгэц ба (хамгийн их өргөн: 800px) (биеийн хэмжээ (фонтын хэмжээ: 100%)) @ зөвхөн медиа дэлгэц ба (мин-өргөн: 1100px) ( их бие (фонтын хэмжээ: 120%) )

Зөвхөн @media дэлгэц ба (хамгийн их өргөн: 400px) ( их бие ( үсгийн хэмжээ: 90% ) ) @ зөвхөн медиа дэлгэц ба (хамгийн их өргөн: 800px) ( их бие ( үсгийн хэмжээ: 100% ) ) @ зөвхөн медиа дэлгэц ба (мин-өргөн: 1100px) ( их бие (фонтын хэмжээ: 120%) )

Энэ бүхэн магадгүй юм! Дээрээс нь гулсуулж буй самбар нь ашиглахад бэлэн болсон бөгөөд үүнийг контентоор дүүргэхэд л үлддэг. Дахин нэг удаа амьд жишээг хараарай, архивыг эх кодтой нь татаж аваад, янз бүрийн параметрүүдийг туршиж үзэх, үүсгэх, үүсгэх, үүсгэх...

Хүндэтгэсэн, Эндрю

Саяхан манай уншигчдын нэг нь өөрийн сайтын навигацийн цэсийг jQuery цэсний цэсээр хэрхэн солих талаар асуусан. Ийм самбар нь сайтуудын мобайл хувилбаруудын ашиглалтыг ихээхэн сайжруулж чадна. Энэ нийтлэлд бид WordPress-ийн сэдвүүдэд гүйдэг цэсний мөрийг хэрхэн нэмэхийг танд үзүүлэх болно.

Тайлбар: Энэ нийтлэл нь HTML болон CSS-ийн дунд түвшний мэдлэгтэй байх болно.

WordPress дээрх стандарт цэсийг гүйдэг самбараар солих

Энд гол зорилго нь дэлгэцийн нягтрал багатай хэрэглэгчдэд гулсдаг цэсний мөрийг харуулахын зэрэгцээ манай сэдвийн стандарт цэсийг хадгалахын зэрэгцээ ширээний хэрэглэгчид цэсний бүрэн хувилбарыг харах боломжтой болно. Эхлэхээсээ өмнө WordPress-ийн олон янзын сэдвүүд байдгийг ойлгох нь чухал бөгөөд ингэснээр та өөрийн загвараас хамааран CSS-ийн хэв маягийг өөрчлөх хэрэгтэй болно.

Юуны өмнө бид Notepad шиг текст засварлагч нээж, шинэ файл үүсгэх хэрэгтэй. Дараах кодыг хуулж оруулаарай.

(функц($) ( $("#тоглуулалт"). сэлгэх(функц() ( $("#popout"). animate(( зүүн: 0 ), "удаан", функц() ( $("#тоглуулалт" ).html(" "); )); ), function() ( $("#popout").animate((зүүн: -250), "удаан", функц() ( $("#toggle").html(" "); ))) ))) ))(jQuery);

Солих example.comвэб сайтын домэйн нэр болон өөрчлөх таны сэдэвтаны одоогийн сэдвийн бодит хавтас руу. Файлыг нэрээр нь хадгал slidepanel.jsкомпьютер дээр. Энэ код нь гүйдэг цэсийн мөрийг сэлгэхийн тулд jQuery-г ашигладаг. Энэ нь мөн шилжих эффектийг идэвхжүүлдэг.

FTP клиентээ (Filezilla эсвэл Total Commander) нээгээд сайт руугаа холбогдоно уу. Дараа нь сэдвийнхээ лавлах руу очиж, дотор нь аль хэдийн хавтас байгаа бол js, дараа нь нээнэ үү. Хэрэв таны сэдэв ийм лавлахгүй бол түүнийг үүсгээд slidepanel.js файлыг дотор нь байршуулна уу.

Дараагийн алхам бол цэсийн дүрсийг зохион бүтээх эсвэл олох явдал юм. Үүнд хамгийн их ашиглагддаг дүрс нь гурван баартай дүрс юм. Та үүнийг дурын график засварлагч дээр (жишээ нь, Photoshop) үүсгэх эсвэл Google дээр байгаа олон програмын аль нэгийг олох боломжтой. Энэ жишээнд бид 27x23px хэмжээтэй дүрсийг ашиглах болно. Та үүнийг үүсгэсний дараа нэрийг нь menu.png болгон өөрчилж, зургийн хавтас руугаа байршуулна уу.

Дараагийн алхам бол гулсах цэсний талбар юм. Та дараах кодыг файл руу хуулж буулгахад л хангалттай functions.phpСэдвүүд:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", массив("jquery"), "20131010", үнэн);

Одоо бүх бэлтгэл ажил дууссан тул та үндсэн сэдвийн цэсийг өөрчлөх хэрэгтэй. Ихэвчлэн ихэнх загварууд нь файлд навигацийн цэсийг харуулдаг header.phpСэдвүүд. Нээлт header.phpүүнтэй төстэй мөрийг олоорой:

"анхдагч", "цэс_анги" => "nav-цэс")); ?>

Жижиг дэлгэц дээр гүйдэг цэсний мөрийг харуулахын тулд сэдэв цэсийг HTML кодоор боож өгөх нь сорилт юм. Бид үүнийг боож өгнө

"анхдагч", "цэс_анги" => "nav-цэс")); ?>

example.com-ыг өөрийн домайн нэрээр, өөрийн сэдвийг сэдэв хавтсаараа солино уу. Өөрчлөлтүүдээ хадгална уу.

Сүүлийн алхам бол том дэлгэцтэй хэрэглэгчдэд зориулсан цэсний дүрсийг нуухын тулд CSS-ийг ашиглан жижиг дэлгэцтэй хүмүүст харуулах явдал юм. Мөн бид цэсийн дүрсний байрлал болон гулсах самбарын харагдах байдлыг тохируулах хэрэгтэй. Энэ CSS кодыг загварынхаа загварын хуудсанд хуулж буулгана уу.

@media screen and (min-width: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( байрлал: тогтмол; өндөр: 100%; өргөн: 250px; дэвсгэр : rgb(25, 25, .9) өнгө: -250px; дээд: 24px; :хулгана (арын дэвсгэр:#CCC; ) .nav-цэс li a (өнгө:#FFF; текстийн чимэглэл: байхгүй; өргөн:100%; ) )

Таны сэдвийн цэс өөр өөр CSS анги ашиглаж болох бөгөөд эдгээр нь дээрхтэй зөрчилдөж болзошгүйг санаарай. Та Chrome эсвэл Firefox дээрх Inspector програмыг ашиглан аль ангиуд таньтай зөрчилдөж байгааг олж мэдэх боломжтой. Мөн самбарын гадаад төрхийг сайтын дизайнд тохируулан өөрчлөх боломжтой гэдгийг бүү мартаарай.

Мэдэгдлийн самбар- хэрэглэгчийг шаардлагатай хуудас руу шилжүүлэхэд түлхэц өгөх маш үр дүнтэй хэрэгсэл. Нэмж дурдахад тэд үргэлж хэрэглэгчийн анхаарлыг татдаг тул чухал мэдээллийг харуулахад үйлчилдэг. Зарим самбар нь өгөгдөл оруулах маягт агуулсан бөгөөд жишээлбэл, захидлын жагсаалтыг захиалах ажлыг зохион байгуулахад ашиглаж болно.

Онлайн дэлгүүрүүдэд мэдэгдлийн самбарыг зочдод урамшуулал, хөнгөлөлтийн талаар мэдэгдэхэд идэвхтэй ашигладаг бөгөөд ингэснээр борлуулалтыг нэмэгдүүлэх хүчирхэг механизм юм.

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

Тусгай мэдэгдэл

Энэ түвшний залгаастай холбоотой шаардлагатай бүх функцийг агуулсан өндөр чанартай дээд зэрэглэлийн залгаас.

Мэдэгдлийн талбар нь энгийн текст агуулж болно. имэйл оруулах маягтэсвэл вэбсайт, нийгмийн сүлжээ, цаг тоологч дээр.

Энэ бүхэн нь дасан зохицох саванд хийгдсэн бөгөөд ямар ч дэлгэц дээр зөв харагдах болно. Нэмж дурдахад тохиргооны самбар нь хуудасны байрлал, өнгөний схемийг бараг ямар ч хязгаарлалтгүйгээр хянах боломжийг олгодог.

Зардал: $29

BugMeBar WordPress залгаас

Маш үзэсгэлэнтэй, анхаарал татахуйц өнгөт эффект бүхий энгийн боловч анхаарал татахуйц самбар. Үүнийг хуудасны аль ч хэсэгт байрлуулж болох бөгөөд үүнээс гадна күүки тохируулах боломжтой бөгөөд хэрэв хэрэглэгч үүнийг гэнэт харахыг хүсэхгүй бол дараа нь хуудсанд зочлоход харагдахгүй.

Бусад онцлох шинж чанарууд:

• Самбарыг харуулах, харуулахгүй хуудсыг зааж өгөх.
• Күүкийн хүчинтэй хугацааг тохируулах.
• Өнгө, ил тод байдал зэргийг сонгох зэрэг гадаад төрхийг бүрэн хянах.
• Байршлын бүрэн бүтэн байдлыг хадгалахын зэрэгцээ тогтмол толгойг шилжүүлэх чадвар.
• Дамжуулагч болон хөдөлгөөнт дүрсийг идэвхжүүлэх эсвэл идэвхгүй болгох чадвар

Зардал: $12

Сайн уу Бар

Хамгийн алдартай нэг Wordpress-д зориулсан мэдэгдлийн самбар. Тэгээд, үнэгүй, гэхдээ функциональ байдлын хувьд энэ нь дээд зэрэглэлийн аналогиасаа ямар ч байдлаар доогуур биш юм.
Hello bar ашиглахын тулд залгаас руу ороод блогынхоо URL хаягийг оруулна уу. Дараа нь та мэдэгдлийн байршил, харагдах байдлыг тохируулах боломжтой тохиргооны самбар руу орох болно. Нэмж дурдахад, тохиргооны самбар нь урьдчилан харах функцтэй тул та мэдэгдэлдээ хүссэн дүр төрхийг хурдан өгөх боломжтой.
Тохиргоог хийж дууссаны дараа та сайтын хуудсанд шууд оруулах шаардлагатай кодын хэсгийг хүлээн авах болно. Хэрэв та энэ үйл ажиллагаанд хангалттай чадваргүй гэж бодож байвал энэ ердийн ажлыг танд зориулж суулгах боломжтой.

DW Promobar

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

Foobar - WordPress мэдэгдлийн самбар

Хэрэв би Foobar-ийн талаар дурдаагүй бол энэ тоймыг дуусгахгүй байх байсан. Энэ бол энэ ангид хамгийн өргөн хэрэглэгддэг дээд зэрэглэлийн залгаасуудын нэг юм. Энэ нь 30 гаруй тохируулгын сонголтыг агуулдаг бөгөөд бусад олон зүйлээс ялгаатай нь мэдэгдлийн самбарыг өөрчлөх боломжийг танд олгоно хуудас бүрийн хувьд тусад нь.

Зардал: 9 доллар

WordPress мэдэгдлийн самбар

Үнэгүй залгаас, ашиглах, идэвхжүүлэхэд хялбар. Самбарын агуулга нь энгийн текст байж болно, эсвэл тодорхой үйлдэлтэй холбоотой товчлуурыг агуулж болно. Өргөн хүрээний өнгөний тохиргооны ачаар та самбарыг вэбсайтынхаа дизайнд төгс тохируулах боломжтой.

Royal Footer Bar

Royal Footer Bar бол хамгийн дээд зэрэглэлийн, жинхэнэ "хааны" залгаас юм. Энэ нь маш мэргэжлийн харагддаг бөгөөд олон төрлийн сонголттой байдаг.

Мэдээллийн самбар нь энгийн текст, захидлын жагсаалтад бүртгүүлэх маягт, олон нийтийн сүлжээн дэх данс гэх мэт янз бүрийн холбоосуудыг агуулж болно. Тохиргооны самбарт та шаардлагатай тохиргоог хийхээс гадна үйл ажиллагааны талаархи бүрэн статистик мэдээллийг авах боломжтой.

Энэхүү залгаасын онцлох зүйл бол хөгжүүлэгчид үүнийг A/B/C тест гэж нэрлэсэн явдал юм - та хэд хэдэн тохиргоог хийж, өөрийн ажлын орчинд үнэлсний дараа тухайн сайтын үзэл баримтлалд хамгийн сайн тохирохыг сонгох боломжтой.

Зардал: $39

Мэдэгдлийн мөр

Харуулдаг маш энгийн залгаас мэдэгдлийн самбархуудасны дээд эсвэл доод талд байна. Мессежийн 5 өнгөний сонголттой эсвэл