WordPress-da bildirishnomalar panelini yaratish uchun plaginlar. WordPress bigSlide-da bildirishnomalar panelini yaratish uchun plaginlar - JQuery-da slaydni navigatsiya paneli

Plagin - WPFront bildirishnoma panelidan foydalanib, siz WordPress saytingizning yuqori yoki pastki qismida veb-saytingizga bildirishnoma paneli qo'shishingiz mumkin. Panel har qanday matnni va istalgan sahifaga havolasi bo'lgan tugmani ko'rsatishi mumkin, siz HTML kodini qo'shishingiz mumkin. Siz bildirishnomalar paneli uchun ranglaringizni sozlashingiz mumkin; panelning joylashishini saytning yuqori yoki pastki qismida tanlashingiz mumkin. Siz sahifani aylantirganingizda panel har doim ekranda ko'rinadigan bo'lishi uchun panelni qulflashingiz mumkin. Siz qaysi sahifalarda panel ko'rsatilishini va qaysilarida ko'rinmasligini tanlashingiz mumkin va hokazo.

Plaginni to'g'ridan-to'g'ri WordPress boshqaruv panelidan o'rnatishingiz mumkin. Yorliqlarga o'ting: Plaginlar - Yangisini qo'shing, qidiruv formasiga plagin nomini kiriting, Enter tugmasini bosing, plaginni o'rnating va faollashtiring.

Plaginni o'rnatish va faollashtirgandan so'ng, plaginni sozlash uchun sahifaga o'ting: WPFront - Bildirish paneli.

Displey

– Yoqilgan, bildirishnoma panelini yoqish uchun bu yerdagi katakchani belgilang.

– Joylashuv, panel qayerda ko‘rsatilishini tanlang, Yuqori – tepada, Pastki – pastda.

– Position da oʻrnatildi, agar siz ushbu katakchani belgilasangiz, sahifani aylantirganda ham panel har doim ekranda koʻrinadi.

– Scroll-da ko‘rsatish, agar siz ushbu katakchani belgilasangiz, sahifani aylantirganingizda panel paydo bo‘ladi.

– Scroll Offset, bu yerda siz bildirishnomalar paneli paydo bo‘lishidan oldin sahifani qancha pikselga aylantirish kerakligini belgilashingiz mumkin.

– Bar balandligi, bu yerda bar balandligini piksellarda belgilashingiz mumkin.

– Position Ofset, bu yerda siz saytning yuqori qismidan panelgacha bo'lgan masofani belgilashingiz mumkin.

– Displey Keyin, panel paydo bo'ladigan vaqtni belgilashingiz mumkin, funksiya uchun ishlamaydi – Scroll on Display.

– Animatsiya davomiyligi, panel ekranga o‘tganda animatsiya davomiyligini belgilashingiz mumkin.

– Displey Yopish tugmasi, panelni yopish uchun xochli tugmani ko'rsatish uchun katakchani belgilang.

– Avtomatik yopishdan keyin panel necha soniyadan so‘ng avtomatik ravishda yopilishini belgilashingiz mumkin, funksiya uchun ishlamaydi – Scrollda ko‘rsatish.

– Soyani ko‘rsatish, panel uchun soyani ko‘rsatish.

– Displey Qayta ochish tugmasi, agar siz katakchani belgilasangiz, panelni yopganingizdan so'ng ekran burchagida panelni ochish tugmasi ko'rsatiladi.

– Yopiq tuting, agar siz katakchani belgilasangiz, panelni bir sahifada yopsangiz, panel boshqa sahifalarda ko‘rinmaydi.

– Keep Closed For, bu yerda panelni yopgan foydalanuvchi uchun panel necha kun ko‘rsatilmasligini belgilashingiz mumkin.

Tarkib

– Xabar matni, xabarnomada ko'rsatiladigan matnni shu yerga kiriting, siz HTML kodini qo'shishingiz mumkin.

– Qisqa kodni qayta ishlang, bildirishnomalarga qisqa kodlarni qo'shishingiz uchun katakchani belgilang.

– Displey tugmasi, paneldagi tugmani ko‘rsatish uchun katakchani belgilang.

– Button Text, bu yerga tugma uchun matnni kiriting.

– Tugma harakati, tugma uchun havolani shu yerga kiriting. URLni yangi tab/oynada oching - havola yangi oynada ochiladi. Kuzatuv havolasi yo'q - havola indekslanmaydi.

– Tugmachani bosish orqali panelni yoping, tugmani bosib panelni yoping.

Filtr

– Boshlanish sanasi va vaqti, panel ko‘rsatila boshlagan sana va vaqtni belgilashingiz mumkin.

– Tugash sanasi va vaqti, panel yopilgan sana va vaqtni belgilashingiz mumkin.

– Displey on Pages, qaysi sahifalarda panel ko‘rsatilishini tanlang. Barcha sahifalar - barcha sahifalarda. Keyingi sahifalarga qo'shing - panel ko'rsatiladigan sahifalarni tekshiring. Keyingi sahifalarda chiqarib tashlash - sahifalarni chiqarib tashlash.

– Foydalanuvchi rollari uchun ekran, bu yerda panel qaysi foydalanuvchi rollari uchun ko‘rsatilishini tanlashingiz mumkin. Barcha foydalanuvchilar - hamma uchun, Barcha tizimga kirgan foydalanuvchilar - faqat vakolatli foydalanuvchilar uchun, Mehmon foydalanuvchilar - faqat mehmonlar uchun, Quyidagi foydalanuvchi rollari uchun - rollarni tekshiring.

Rang

– Bar rangi, bar uchun ranglarni tanlang.

– Xabar matn rangi, paneldagi matn uchun rangni belgilang.

– Tugma rangi, tugma uchun ranglarni tanlang, siz gradientni ko'rsatish uchun ikkita rangni belgilashingiz mumkin.

– Tugma matn rangi, tugmadagi matn uchun rang.

– Qayta ochish tugmasi rangi, panelni ochish tugmasi uchun rang.

– Yopish tugmasi rangi, panelning yopish tugmasi uchun ranglarni tanlang.

- Maxsus CSS, siz panel uchun o'zingizning CSS uslublaringizni o'rnatishingiz mumkin, ammo bu shart emas.

Oxirida o'zgarishlaringizni saqlang.

WordPress saytingizning yuqori yoki pastki qismidagi bildirishnomalar paneli yangilangan: 2018 yil 25-iyul Ilya Juravlev

Salom, aziz blog o'quvchilari. Bugun men bir vaqtning o'zida bir nechta sahifalarni ulashni amalga oshirishi mumkin bo'lgan juda funktsional va qulay upPrev plagini haqida gapirmoqchiman. Siz uning ishini (hech bo'lmaganda ushbu maqolani yozish vaqtida) har bir maqola sahifasining pastki qismida kuzatishingiz mumkin - o'ng tomonda shunga o'xshash materiallar ro'yxati bilan qalqib chiquvchi panel paydo bo'ladi.

Plagin nafaqat o'xshash materiallarni, balki xuddi shu toifadagi yoki teglar arxividagi oldingi maqolalarni ham ko'rsatishi mumkin (bu haqda biz yuqoridagi maqolada batafsil gaplashdik va men amalda qo'llashni tasvirlab berganman), oldingi materiallar butun blogning formati, shuningdek tasodifiy olingan nashrlar. Bundan tashqari, agar siz postlarni yozishda ularni yaratsangiz, hamma narsani eskizlar bilan bezash mumkin.

Hozirda veb-saytni reklama qilishda havola qanday rol o'ynaydi?

Umuman olganda, veb-saytni keyingi muvaffaqiyatli targ'ib qilish uchun optimallashtirish birinchi raqamli vazifadir (ikkinchi raqam - bu qayta havolalarni olish). Ichki omillar hamma narsaning ta'sirini to'sib qo'yishi va kamaytirishi mumkin. Boshqa tomondan, bu mumkin emas (ayniqsa, tarkibdagi kalit so'zlar va ichki havolalarning langarlari bilan).

Hozirgi kunda rag'batlantirishning kompleks yondashuvi muhim ahamiyatga ega bo'lib, unda bog'lanish juda muhim o'rin tutadi. So'nggi paytlarda har qanday narsani vizual tasvirlash uchun infografikadan foydalanish modaga aylandi. SEO mavzusida siz shunga o'xshash ko'plab sxemalarni topishingiz mumkin, masalan, Seopro-ning veb-saytni qanday targ'ib qilish haqidagi maqolasida. Afsuski, men bunday durdona asarlarni yaratishga hali tayyor emasman, lekin ularga murojaat qilish menga keraksiz suv quymaslikka imkon beradi.

Qaysi ulanish sxemasini tanlash kerak? Bu juda qiyin savol, chunki ilgari yaxshi ishlagan ko'plab sxemalar (hammasi bir xil mashhur "halqa", men yuqorida aytib o'tgan amalga oshirish usullariga havolalar) endi o'n yil oldin kuzatilgan ajoyib natijalarni bermaydi. Qidiruv mexanizmlari ham o'rganmoqda va ularning nuqtai nazari bo'yicha aniq aldash ekanligini hisobga olmaslikka harakat qilmoqda.

Peydrank nazariyasiga ko'ra, bir qator halqalar shaklida o'zaro bog'lanish, ushbu halqada ishtirok etadigan sayt sahifalarining () statik og'irligini jiddiy ravishda oshirishi kerak.

Biroq, bu har doim ham amalda ishlamaydi. Ehtimol, alohida sahifalar indeksdan tushib qolsa, uzuk uzilib qolishi yoki belgilarni kamaytirish uchun qidiruv status og'irligini hisoblash uchun klassik formulaga jiddiy pasaytirish omilini kiritgan bo'lishi mumkin.

Veb-sayt sahifalarini bog'lashning yana bir vazifasi bor, u endi Yandex yoki Google-ni xursand qilish uchun emas, balki tashrif buyuruvchiga yoqadi. Uning blogingizni sinab ko'rishi uchun bitta maqola etarli bo'lmasligi aniq - uni qiziqtirish, uni saqlab qolish va, ehtimol, uni sizning obunachiga aylantirish uchun uni boshqa joyga taklif qilishingiz kerak.

Shunday qilib, bog'lanish ham ta'sir qiladi xulq-atvor omillari, bu qidiruv ham hisobga oladi va har yili ko'proq va ko'proq darajada. Deyarli barcha veb-ustalar buni tushunishadi va shunga o'xshash materiallar, eng ko'p o'qilgan nashrlar yoki bir xil toifadagi maqolalar bilan saytga bloklar qo'shishadi. Ehtimol, mavzu bo'yicha boshqa o'zgarishlar mavjud.

Tabiiyki, ichki bog'lanishni amalga oshirish uchun juda ko'p imkoniyatlar mavjud. Siz hatto plaginlarsiz ham qilishingiz mumkin (maqoladagi misolni ko'rishingiz mumkin), lekin ularning ko'pchiligi ulanish uchun yozilgan. Eng qiyin narsa - blogingiz uchun to'liq mos keladigan variantni tanlash.

Men o'zim ulardan ko'pini sinab ko'rdim va hatto ba'zilari haqida sharhlar yozdim (). Aslida, eslatib o'tilgan plagin tegishli xabarlarni hisoblash va ularni blog sahifalarida ro'yxatga olish uchun eng yaxshilaridan biridir.

Ammo uning ma'lumotlari boshqa WordPress kengaytmalari tomonidan ham ishlatilishi mumkin, bu ularni yanada rang-barang yoki go'zal tarzda loyihalash. YARP haqidagi xuddi shu maqolada men uning ma'lumotlari Related Posts Slider plaginida qanday ishlatilganiga misol keltirdim, bu unga o'xshash xabarlarni quyidagi shaklda ko'rsatishga imkon berdi:

Xo'sh, yoki bu:

Bizning bugungi qahramonimiz qo'ng'iroq qildi yuqorigaOldingi shuningdek, Yet Another Related Posts Plugin ma'lumotlar bazasidan qanday ma'lumot olishni biladi va to'g'ri ish qiladi, chunki har safar g'ildirakni qayta ixtiro qilishning hojati yo'q. Keling, aslida, ushbu muhandislik mo''jizasining imkoniyatlarini tasvirlashga o'taylik.

upPrev plagini yordamida opsiyalarni ulash

Men bu uslublarga tegmadim, chunki men boshqa yo'lni tanladim (eng to'g'ridan-to'g'ri emas), uni quyida matnda tasvirlab beraman. Keyin ikkinchi tabga o'ting:

Ushbu plagin havolalar yaratadigan postlar sonini tanlang. Lekin bir oz pastroq, biz shunchaki saytimiz uchun ulanish turini tanlang. Men shunga o'xshash postlar variantini Yene Another Related Posts plagin bazasidan foydalangan holda tanladim (u oldindan o'rnatilgan bo'lishi kerak), lekin siz ikkinchi yoki uchinchi variantni tanlash orqali qo'ng'iroq turini, shuningdek, katta qo'ng'iroqni ulashni sozlashingiz mumkin. birinchi.

Men bu masalani faqat tegishli maydonda tasdiq belgisi bilan ko'rsatilgan postlar uchun tashkil qilmoqchi edim. Agar siz uni to'ldirsangiz, post sarlavhasidan tashqari, ushbu panelda post boshidan yoki kotirovka maydonidan boshlab bir nechta so'zlarni (ularning soni eng pastki qismida o'rnatiladi) ham ko'rsatishi mumkin. Bu menga keraksizdek tuyuldi.

Uchinchi yorliq men foydalanmagan ushbu paneldagi havolalarni bosish sonini kuzatishni o'rnatish uchun ishlatiladi. Biroq, to'rtinchi yorliqda men hali ham keshni faollashtirdim. Beshinchi yorliqda men panelni mobil telefonlarda ko'rsatishni taqiqladim, lekin uning planshetlarda ko'rsatilishiga e'tiroz bildirmadim:

Hammasi shu, upPrev sozlamalarni tugatdi, lekin men allaqachon Boshqa Tegishli Postlar plaginining sozlamalarida panel ko'rinishini o'zgartirdim.

Sürgülü panel tarkibining ko'rinishini sozlash

U erda men shunga o'xshash xabarlarni ko'rsatish uchun javobgar bo'lgan shablon faylini tanladim (ushbu kengaytma bilan ishlashning mohiyati va xususiyatlari uchun yuqoridagi havolaga qarang):

Bu. Endi upPrev plaginida (qalqib chiquvchi panelda) ko'rsatiladigan o'xshash xabarlar ro'yxatining ko'rinishi mening mavzuim () bo'lgan papkadan yarpp-template-list.php faylimga yozilgan kod bilan aniqlanadi. Agar sizning blogingiz postlar uchun eskizlarni yaratadigan bo'lsa, ularning yordami bilan Yet Another Related Posts Plugin arsenalidan shablonni tanlash mantiqan.

Ushbu fayl uchun kod:

have_posts()): $postsArray = array(); while ($related_query->have_posts()): $related_query->the_post(); $postsArray = "
• ".get_the_title()."
"; endwhile; echo implode(" "."\n",$postsArray); // vergul bilan ajratilgan tegishli elementlar ro'yxatini chop eting else:?>

Tegishli postlar yo'q.

Ko'rib turganingizdek, bu erda toymasin rozetkaning sarlavhasi yashaydi, shuning uchun crack() ni oldini olish uchun ushbu faylni BOMsiz UTF-8 kodlashiga aylantirishingiz kerak bo'ladi (agar kerak bo'lsa). Siz haqingizda bilmayman, lekin menda uzoq vaqtdan beri asosiy muharrir sifatida Notepad++ () bor edi va unda bu konvertatsiya quyidagicha amalga oshiriladi:

Ko'rinib turibdiki, bu kod oddiy Html ro'yxatini () hosil qiladi va kodda mavjud bo'lgan sinflar uchun uslublar faylida yozilgan CSS xususiyatlari tashqi ko'rinish uchun javobgardir. Mening holatimda bu uslublar quyidagicha ko'rinadi:

A.oy (rang: #333; shrift: 700 1.2em/1 "PT Sans Narrow", Arial, sans-serif; line-height: 18px;) li.eto (matnni tekislash: markaz; toʻldirish: 12px 5px 17px 5px;chegara: 5px 0;chegara: nuqtali 2px #ccc;) li.eto: hover (matn-bezatish: ostiga chizish;) div.oyy (chet: 0 0 0 0; toʻldirish: 5px 0; shrift: normal 17px "Trebuchet MS", Verdana, Arial; rang: # 666;)

Lampochka sinfi yashil tasdiq belgilarini qo'shadi, ular mening CSS kodimda base64 kodi yordamida o'rnatiladi (men bu kodni biron bir joyga ko'chirib olganman). Agar qiziqsangiz, mening style.css sahifamga qarang. OK, endi hammasi tugadi. Agar biror narsani unutgan bo'lsangiz, so'rang. To'g'ri, men bir oy oldin ushbu bog'lanish variantini o'rnatganman va shu vaqt ichida bir narsa xayolimdan g'oyib bo'ldi.

Omad sizga! Tez orada blog sayti sahifalarida ko'rishguncha

Sizni qiziqtirishi mumkin

Yene Another Related Posts plaginidagi shaffof pikselni http://yarpp.org/pixels qanday olib tashlash va yozuvni o'zgartirish mumkin Shu kabi materiallar
Ichki bog'lanish uchun Related Posts plaginidan foydalangan holda WordPress-da tegishli postlar ro'yxatini yaratish (eskiz rasmlari bilan).
WordPress uchun Yene Another Related Posts and Related Posts Slider plaginlari yordamida veb-sayt xatti-harakatlari statistikasini qanday yaxshilash mumkin
Oddiy hisoblagichlar va toifalar va sahifa piktogrammalari - chiroyli RSS va Twitter hisoblagichlari, shuningdek WordPress-dagi toifalar va sahifalar uchun piktogrammalar
Mening blogimdagi WordPress plaginlari (sayt) Veb-saytingiz uchun slaydlar va slayd-shoular - qanday variantlar mavjud va jQuery Slider skriptlaridan qanday foydalanish kerak
Breadcrumb NavXT plaginidan foydalangan holda WordPress-dagi non parchalari (bog'lanishni kuchaytirish)
Sahifalar yaratishda WordPress-da xotira sarfini kamaytirish - mahalliylashtirish faylini almashtirish uchun WPLANG Lite plagini
WP-PageNavi - WordPress blogi uchun sahifa navigatsiyasi - o'rnatish, sozlash va sahifalash ko'rinishini o'zgartirish
Uni kalendarlashtiring! - WordPress uchun voqealar taqvimi
Pochta WordPress-dan yuborilmaydi va vizual muharrir ishlamayapti - SMTPni sozlash va Post muharriri tugmalari plaginlari yordamida yechim

Albatta, siz tez-tez veb-sayt sahifalarida yuqorida, pastda, o'ngda yoki chapda to'liq avtomatik ravishda, ma'lum bir vaqt oralig'ida gapiradigan yoki bosish orqali faollashtirilgan har xil turdagi va joylarda tortiladigan panellarni uchratasiz. Qoida tariqasida, bunday panellarda ba'zi qo'shimcha ma'lumotlar mavjud, ba'zilari muhim va ba'zilari unchalik muhim bo'lmagan, ular hozircha foydalanuvchining ko'zidan yashiringan. Masalan, obuna shakllari, ijtimoiy tarmoq vidjetlari, havolalar, teglar, aloqa ma'lumotlari va boshqalar va boshqalar, qisqasi, har qanday narsa.
JavaScript-da toymasin panellarni amalga oshirish uchun juda ko'p tayyor echimlar, turli CMS-lar uchun modullar va plaginlar, individual jQuery plaginlari mavjud, ammo juda kam sonlilari sof CSS-da to'liq ishlaydigan usullar edi.

Men uzoq vaqtdan beri shunga o'xshash narsani qilishni xohlardim, yashirin tasdiqlash qutilarini ishlatish mexanizmi yaxshi ma'lum va tushunarli, lekin qandaydir tarzda men bunga hech qachon erisha olmadim. Shunday qilib, CodePen-ning changli omborlarida bittasiga qoqilib, men tajriba o'tkazishga va sof CSS-da tortiladigan yuqori panelning o'z versiyasini ishlab chiqarishga qaror qildim, juda yaxshi ishlaydi, biroz o'zgartirilgan va birodarimiz uchun moslashtirilgan va shunday bo'ldi)) .

Biz misolni ko'rib chiqdik, uni asl nusxasi bilan taqqosladik va endi bu kimga kerak, keling, bularning barchasi qanday ishlashini birgalikda aniqlaylik. Yana bir bor eslatib o'taman, js yo'q, faqat toza html va CSS "sehrli" barcha ishni bajaradi.

HTML tartibi

U uchta asosiy elementdan iborat: asosiy konteyner, tarkibga ega blok va panelni ochish/yopish tugmasi.

Ko'rib turganingizdek, panel dizayni sukut bo'yicha yashirin va nofaol bo'lgan type=" " bayrog'ini o'z ichiga oladi. Teg foydalanish , css-da tugma sifatida yaratilgan, biz tasdiqlash qutisi o'rtasida aloqa o'rnatamiz, ya'ni yorliqni bossangiz, kiritish ishlaydi (faol bo'ladi). Xo'sh, pseudo-klassdan foydalanib: CSS-da biz yashirin tasdiqlash qutisi va panel elementlari o'rtasida aloqa o'rnatamiz.
Darhol shuni ta'kidlashni istardimki, ochish/yopish tugmasi panel korpusiga bog'lanmagan, lekin asosiy sahifa kontent konteyneriga nisbatan joylashtirilgan.

va surma paneli faollashtirilganda, kontent bloki va tugma panelning balandligiga mos keladigan masofaga pastga siljiydi.

Keling, toymasin panelimiz uslublarini yarataylik, birinchi navbatda, asosiy konteynerning o'lchamlarini o'rnatamiz, fon rangini va uning boshlang'ich joyini aniqlaymiz. CSS-da biz class.top-panel yaratamiz, unda barcha kerakli xususiyatlarni yozamiz.
Bizning panelimiz tortib olinadi, ya'ni biz uni yashirishimiz kerak, bu juda sodda tarzda amalga oshiriladi. Ruxsat etilgan joylashuv pozitsiyasini o'rnating: sobit; , sahifa kengligining to'liq kengligigacha cho'zing: 100%; , panelning balandligini (balandligini:) belgilamaymiz, bu holda panel avtomatik ravishda kontent hajmiga moslashadi va transform yordamida: translateY(-100%); , panelimizni sahifaning yuqori chetidan tashqariga surib qo'ying.

. yuqori panel (fon: #39464e; joylashuv: qattiq; tepa: 0; kenglik: 100%; to‘ldirish: 0; - webkit- box- o‘lchami: border- box; - moz- box- o‘lchami: border- box; box- o'lcham: border- box; - webkit- transform: translateY(- 100% ) ; - moz- transform: translateY(- 100% ) ; transform: translateY(- 100% ) ; )

Yuqori panel (fon: #39464e; joylashuv: qattiq; tepa: 0; kenglik: 100%; to‘ldirish: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box- o'lcham: chegara qutisi; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); )

Panel xabar bloki asosiy konteyner ichida joylashgan va ma'lum bir sinfga tayinlangan class="xabar" , aynan unda biz ushbu tomonda joylashgan barcha elementlarning xususiyatlarini, rang va shrift oilasini, tasvir o'lchamlarini va boshqalarni aniqlaymiz. .
Siz, albatta, xabarni to'g'ridan-to'g'ri asosiy konteynerga joylashtirish orqali ushbu qo'shimcha bloksiz osongina qilishingiz mumkin, ammo bu mumkin bo'lgan panel sozlamalarining moslashuvchanligini yo'qotadi.
Xabar qat'iy ravishda markazda ko'rsatiladi va belgilangan kenglik maksimal kengligi: 980px; , qiymat o'zboshimchalik bilan, siz butunlay boshqa o'lchamlarni tanlashingiz mumkin.

/* Xabar bloki */ .xabar (rang: #fff; shrift og'irligi: 300; joylashuv: nisbiy; to'ldirish: 2em; chekka: 0 avtomatik; maksimal kenglik: 980px ) /* 1-darajali sarlavha */ .xabar h1 ( rang: #fff ) /* 2-darajali sarlavha */ .xabar h2 (rang: #888 )

Keyinchalik, panelni almashtirish uchun barcha kerakli uslublarni aniqlaymiz. Boshlash uchun, keling, html tegida type="checkbox" bayrog'ini foydalanuvchilarning ko'zidan yashirib qo'yamiz. Ob'ekt brauzer oynasida ko'rsatilishi yoki ko'rsatilmasligini aniqlaydigan yashirin atributni yozamiz.

Ochiq (pozitsiya: mutlaq; klip: rect(0 0 0 0); shaffoflik: 0; )

Tegu keling class="btn" ni tayinlaymiz, u bilan biz CSS-da juda yaxshi kalitni "chizish" uchun ishlaymiz (tugma):

/* Panelni almashtirish */ yorliq. btn (displey: blok; pozitsiya: mutlaq; o'ng: 25px; tepa: 100%; /*pastki: -35px;*/ kursor: ko'rsatgich; fon: #2bbbad; chegara radiusi: 0 0 3px 3px; to'ldirish: 8px 16px ; rang: #fff; shrift o'lchami: 100%; chiziq balandligi: 1em; matnni tekislash: markaz; - webkit- shrift- tekislash: antialiased; kursor: ko'rsatgich; quti soyasi: 0 2px 5px 0 rgba(0 , 0 , 0 , 0.16 ), 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12 ) ; z-indeks: 9999 ) /* kursorni yoqish */ yorliq. btn: hover (- webkit- o'tish: 0. 35s; - moz- o'tish: 0. 35s; o'tish: 0. 35s; box- soya: 0 5px 11px 0 rgba(0, 0, 0, 0.18) , 0 4px 15px 0 rgba(0 , 0 , 0 , 0,15 ) ) /* Pastga o'tish strelkasi */ yorliq. btn: keyin (kontent: "\f078" ; shrift: oddiy 18px/ 1 FontAwesome; matn-bezatish: meros )

/* Panelni almashtirish */ label.btn (displey: blok; pozitsiya: mutlaq; o'ng: 25 piksel; tepa: 100%; /*pastki: -35px;*/ kursor: ko'rsatgich; fon: #2bbbad; chegara radiusi: 0 0 3px 3px; toʻldirish: 8px 16px; rang: #fff; shrift oʻlchami: 100%; chiziq balandligi: 1em; matnni tekislash: markaz; -webkit-shrift-tekislash: antialiased; kursor: koʻrsatgich; quti soyasi: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); z-index: 9999 ) /* Hoverni oʻzgartirish tugmasi */ label.btn:hover (- webkit) -o'tish: 0,35s; -moz-o'tish: 0,35s; o'tish: 0,35s; quti-soya: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0 , 0.15) ) /* Pastga oʻtish strelkasi */ label.btn:after (kontent: "\f078"; shrift: normal 18px/1 FontAwesome; matn bezatish: meros )

O'zgartirish strelkalari FontAwesome shrift-icon to'plamidan olingan; shunga ko'ra, ushbu to'plam uchun uslub fayli avval sahifaga ulangan bo'lishi kerak:

< link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel = "uslublar jadvali" >

Siz mos keladigan matn yoki HTML belgisi kabi boshqa turdagi kalitlardan foydalanishingiz mumkin.
Odatiy bo'lib, men o'tish uchun uchta holatni aniqladim: panel yopilganda - pastga strelka, panel ochiq bo'lganda - yuqoriga o'q va, albatta, sichqonchani ushlab turganda biroz hover effekti.

Biz panelimizni faollashtiramiz va psevdo-sinf:checked yordamida kalitning holatini o'zgartiramiz.
Box-shadow xususiyatidan foydalanib, men faol panelning pastki chetiga engil soya qo'shdim va o'tishdan foydalanib, panelning ikkita holati (ochiq va yopiq) o'rtasida oddiy o'tish effektini o'rnatdim.

. ochiq: tekshirildi ~ . yuqori panel (box- soya: 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) ; transform: translateY(0) ; - webkit- o'tish: 0. 35s; - moz- o'tish: 0. 35s; o'tish: 0. 35s). ochiq: not(: tekshirildi) ~ . yuqori panel (- webkit- o'tish: 0. 35s; - moz- o'tish: 0. 35s; o'tish: 0. 35s ) /* Bosilganda rangni almashtiring */. ochiq: tekshirildi ~ . yuqori panel > yorliq. btn (fon: #dd6149 ) /* O'qni yuqoriga o'tkazing*/. ochiq: tekshirildi ~ . yuqori panel > yorliq. btn: keyin (tarkib: "\f077" ; shrift: normal 18px/ 1 FontAwesome )

Ochiq:checked ~ .top-panel (box-soya: 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); transform: translateY(0); -webkit-o'tish: 0,35s; -moz-o'tish: 0,35s; o'tish: 0,35s ) .open:not(:checked) ~ .top-panel ( -webkit-o'tish: 0,35s; -moz-o'tish: 0,35s; o'tish: 0,35s ) /* Bosilganda rangni o'zgartirish */ .open:checked ~ .top-panel > label.btn ( fon: #dd6149 ) /* Yuqoriga oʻtish strelkasi*/ .open:checked ~ .top-panel > label.btn:after (kontent: "\f077"; shrift: oddiy 18px/1 FontAwesome )

Foydalanuvchi qurilmalarining turli ekranlarida ko‘rilganda shrift o‘lchamlarini o‘zgartirish uchun men @media media so‘rovlaridan foydalandim. Zamonaviy voqelikni hisobga olgan holda, menimcha, qo'shimcha qilish ortiqcha emas:

@faqat media ekrani va (maksimal kenglik: 400px) (tana (shrift oʻlchami: 90%)) @faqat media ekrani va (maksimal kenglik: 800px) (tana (shrift oʻlchami: 100%)) @faqat media ekrani va (min. kengligi: 1100px) (tana (shrift oʻlchami: 120%))

faqat @media ekrani va (maksimal kenglik: 400px) ( tana (shrift oʻlchami: 90% ) ) @faqat media ekrani va (maksimal kenglik: 800px) ( tana (shrift oʻlchami: 100% ) ) @faqat media ekrani va (min. kengligi: 1100px) (tana (shrift oʻlchami: 120%))

Bu, ehtimol, hammasi! Yuqoridan siljiydigan panel foydalanishga tayyor, qolgan narsa uni tarkib bilan to'ldirishdir. Yana bir bor jonli misolga qarang, arxivni manba kodi bilan yuklab oling, turli parametrlar bilan tajriba o'tkazing va yarating, yarating, yarating...

Hurmat bilan, Endryu

Yaqinda bizning o'quvchilarimizdan biri o'zining sayt navigatsiya menyusini jQuery qalqib chiquvchi menyu satriga qanday almashtirishni so'radi. Bunday panel saytlarning mobil versiyalarida foydalanishni sezilarli darajada yaxshilashi mumkin. Ushbu maqolada biz sizga WordPress mavzulariga toymasin menyu panelini qanday qo'shishni ko'rsatamiz.

Eslatma: Ushbu maqola HTML va CSS bo'yicha oraliq bilimlarni nazarda tutadi.

WordPress-da standart menyuni toymasin panel bilan almashtirish

Bu erda maqsad, ish stoli foydalanuvchilari menyuning to'liq versiyasini ko'rishlari uchun mavzuimizning standart menyusini saqlab qolgan holda, past ekran o'lchamlari bilan foydalanuvchilarga toymasin menyu panelini ko'rsatishdir. Ishni boshlashdan oldin, WordPress-ning juda ko'p turli mavzulari mavjudligini tushunish muhimdir, shuning uchun siz dizayningizga qarab CSS uslublarini o'zgartirishingiz kerak bo'ladi.

Avvalo, biz Notepad kabi matn muharririni ochib, yangi fayl yaratishimiz kerak. Unga quyidagi kodni nusxalash va joylashtirish:

(funksiya($) ( $("#toggle").toggle(funksiya() ( $("#popout").animate(( chap: 0 ), "sekin", function() ( $("#toggle" ).html(" "); )); ), function() ( $("#popout").animate((chapda: -250), "sekin", function() ( $("#toggle").html(" "); ))) ))) )))(jQuery);

O'zgartiring example.com veb-saytingizning domen nomiga, shuningdek o'zgartiring sizning mavzuingiz joriy mavzuingizning haqiqiy papkasiga. Faylni nomi bilan saqlang slidepanel.js kompyuterda. Ushbu kod toymasin menyu satrini almashtirish uchun jQuery-dan foydalanadi. Shuningdek, u kommutatsiya effektini jonlantiradi.

FTP mijozingizni (Filezilla yoki Total Commander) oching va saytingizga ulaning. Keyinchalik, mavzuingiz katalogiga o'ting va unda allaqachon papka mavjud bo'lsa js, keyin uni oching. Agar sizning mavzuingizda bunday katalog bo'lmasa, uni yarating va ichiga slidepanel.js faylini yuklang.

Keyingi qadam menyu uchun belgini loyihalash yoki topishdir. Buning uchun eng ko'p ishlatiladigan piktogramma uchta chiziqli belgidir. Siz uni har qanday grafik muharrirda (masalan, Photoshop) yaratishingiz yoki Googleda mavjud bo'lgan ko'plaridan birini topishingiz mumkin. Ushbu misolda biz belgi uchun 27x23px o'lchamidan foydalanamiz. Uni yaratganingizdan so'ng, uni menu.png ga o'zgartiring va mavzu katalogingizdagi tasvirlar jildiga yuklang.

Keyingi qadam toymasin menyu satriga tegishli. Siz shunchaki quyidagi kodni faylga nusxalashingiz va joylashtirishingiz kerak functions.php Mavzular:

Wp_enqueue_script("wpb_slidepanel", get_template_directory_uri() . "/js/slidepanel.js", array("jquery"), "20131010", rost);

Endi barcha tayyorgarlik ishlari tugallangandan so'ng, siz standart mavzu menyusini o'zgartirishingiz kerak. Odatda, ko'pchilik mavzular faylda navigatsiya menyusini ko'rsatadi header.php Mavzular. Ochilish header.php va shunga o'xshash qatorni toping:

"asosiy", "menu_class" => "nav-menyu")); ?>

Qiyinchilik kichik ekranlarda toymasin menyu satrini ko'rsatish uchun mavzu menyusini HTML kodiga o'rashdir. Biz uni o'rab olamiz

"asosiy", "menu_class" => "nav-menyu")); ?>

example.com ni domen nomingiz bilan, mavzuingizni esa mavzu papkangiz bilan almashtiring. O'zgartirishlaringizni saqlang.

Oxirgi qadam katta ekranli foydalanuvchilar uchun menyu belgisini yashirish va uni kichik ekranlilar uchun ko'rsatish uchun CSS-dan foydalanishdir. Shuningdek, menyu belgisining o'rnini va toymasin panelning ko'rinishini sozlashimiz kerak. Ushbu CSS kodidan nusxa oling va mavzuingizning uslublar jadvaliga joylashtiring.

@media ekrani va (minimum kenglik: 769px) ( #toggle (displey: yoʻq; ) ) @media ekrani va (maksimal kenglik: 768px) ( #popout (pozitsiya: belgilangan; balandlik: 100%; kenglik: 250px; fon : rgb(25, 25, 25); fon: rgba(25, 25, 25, .9); rang: oq; tepada: 0px; chap: -250px; toʻldirish: avtomatik; ) #toggle ( float: oʻng; joylashuv : belgilangan; tepa: 60px; oʻng: 45px; eni: 28px; balandlik: 24px; ) .nav-menu li (chegara-pastki: 1px qattiq #eee; toʻldirish: 20px; kenglik: 100%; ) .nav-menyu li :hover (fon:#CCC; ) .nav-menyu li a (rang:#FFF; matn bezatish: yo‘q; kenglik:100%; ) )

Mavzuingiz menyusi turli CSS sinflaridan foydalanishi va ular yuqoridagilarga zid kelishi mumkinligini yodda tuting. Qaysi sinflar siznikiga zid ekanligini aniqlash uchun Chrome yoki Firefox-dagi Inspektor yordamida bu muammoni hal qilishingiz mumkin. Bundan tashqari, panelning ko'rinishini sayt dizayniga mos ravishda sozlashingiz mumkinligini unutmang.

Bildirishnomalar panellari- foydalanuvchini kerakli sahifaga o'tishga undashning juda samarali vositasi. Bundan tashqari, ular muhim ma'lumotlarni ko'rsatishga xizmat qiladi, chunki ular doimo foydalanuvchi e'tiborini tortadi. Ba'zi panellarda ma'lumotlarni kiritish uchun shakllar mavjud va ular, masalan, pochta ro'yxatlariga obuna bo'lishni tashkil qilish uchun ishlatilishi mumkin.

Onlayn do'konlarda bildirishnoma panellari tashrif buyuruvchilarni aktsiyalar va chegirmalar to'g'risida xabardor qilish uchun faol foydalaniladi va shu bilan savdoni oshirishning kuchli mexanizmi hisoblanadi.

Ushbu sharhda men faqat eng funktsional va jozibali, mening fikrimcha, platformadagi veb-sayt yoki blog sahifalarida bunday panellarni yaratish uchun plaginlar haqida gapiraman. Ularning har biri o'zining afzalliklariga, ko'plab funktsiyalariga va tashqi ko'rinishini saytingizning uslubi va dizayniga moslashtirish qobiliyatiga ega. Ushbu sharh tufayli siz o'zingizning talablaringizga eng mos keladigan plaginni tanlashingiz mumkinligiga shubham yo'q.

Maxsus bildirishnomalar

Ushbu darajadagi plaginga xos bo'lgan barcha kerakli funktsiyalarga ega bo'lgan yuqori sifatli premium plagin.

Bildirishnomalar panelida oddiy matn bo'lishi mumkin, elektron pochta orqali kirish shakli yoki veb-saytda, ijtimoiy tarmoqlarda va ortga hisoblash taymerida.

Va bularning barchasi moslashuvchan konteynerlarga joylashtirilgan va har qanday ekranda to'g'ri ko'rsatiladi. Bundan tashqari, sozlamalar paneli sahifadagi joylashuvni va rang sxemasini deyarli hech qanday cheklovlarsiz boshqarish imkonini beradi.

Narxi: $29

BugMeBar WordPress plagini

Juda chiroyli va ko'zni qamashtiruvchi rang effektlariga ega oddiy, ammo ko'zni qamashtiruvchi panel. U sahifaning istalgan joyiga joylashtirilishi mumkin va bundan tashqari, u cookie-fayllarni o'rnatishi mumkin va agar foydalanuvchi to'satdan uni boshqa ko'rishni istamasa, sahifaga keyingi tashrifda ko'rsatilmaydi.

E'tiborga loyiq boshqa xususiyatlar:

• Panel ko'rsatiladigan va qaysi sahifalarda ko'rsatilmasligini belgilash.
• Cookie-fayllarning amal qilish muddatini belgilash.
• Tashqi ko'rinishni to'liq nazorat qilish, jumladan rang, shaffoflik va boshqalarni tanlash.
• Tartibning yaxlitligini saqlagan holda sobit sarlavhalarni o'zgartirish qobiliyati.
• O'tish va animatsiyani yoqish yoki o'chirish qobiliyati

Narxi: $12

Salom Bar

Eng mashhurlaridan biri Wordpress uchun bildirishnoma paneli. Undan keyin, ozod, garchi funksionallik jihatidan u hech qanday tarzda premium hamkasblaridan kam emas.
Salom panelidan foydalanish uchun plaginga o'ting va blogingiz URL manzilini kiriting. Keyin siz sozlamalar paneliga o'tasiz, u erda siz bildirishnomalarning joylashuvi va ko'rinishini sozlashingiz mumkin. Bundan tashqari, sozlamalar panelida oldindan ko'rish funksiyasi mavjud, shuning uchun siz tezda bildirishnomalarga kerakli ko'rinishni berishingiz mumkin.
Sozlamalarni tugatgandan so'ng, siz to'g'ridan-to'g'ri sayt sahifasiga joylashtirishingiz kerak bo'lgan kod qismini olasiz. Agar siz ushbu operatsiyani bajarish uchun etarli malakaga ega bo'lmasangiz, siz uchun ushbu muntazam ishni bajaradigan birini o'rnatishingiz mumkin.

DW Promobar

Faqat asosiy narsalarni o'z ichiga olgan juda oddiy plagin. Bildirishnomalar paneli oddiy matnni, tugmani, havolani yoki ortga hisoblash taymerini ko'rsatishi mumkin. Bu jozibali ko'rinadi va sizga barcha moslashtirish opsiyalarini to'liq boshqarish imkonini beradi.

Foobar - WordPress bildirishnoma paneli

Agar Foobar haqida gapirmasam, bu sharh to'liq bo'lmaydi. Bu ushbu sinfda eng ko'p ishlatiladigan premium plaginlardan biridir. U 30 dan ortiq moslashtirish opsiyalarini o'z ichiga oladi va boshqalardan farqli o'laroq, bildirishnomalar panelini sozlash imkonini beradi har bir sahifa uchun alohida.

Narxi: $9

WordPress bildirishnoma paneli

Bepul plagin, ishlatish va faollashtirish oson. Panel tarkibi oddiy matn bo'lishi mumkin yoki u muayyan harakat bilan bog'liq tugmani ham o'z ichiga olishi mumkin. Rang sozlamalarining keng doirasi tufayli siz panelni veb-saytingiz dizayniga mukammal moslashtira olasiz.

Royal Footer Bar

Royal Footer Bar - bu eng yuqori darajadagi plagin, chinakam "qirollik". Bu juda professional ko'rinadi va keng imkoniyatlarga ega.

Axborot panelida oddiy matn, pochta ro'yxatlariga obuna bo'lish shakli va turli xil havolalar, shu jumladan ijtimoiy tarmoqlardagi hisob qaydnomalari bo'lishi mumkin. Sozlamalar panelida siz nafaqat kerakli sozlamalarni o'rnatishingiz, balki faoliyat haqida to'liq statistikani ham olishingiz mumkin.

Ushbu plaginning diqqatga sazovor tomoni shundaki, ishlab chiquvchilar uni A/B/C testi deb atashgan – siz bir nechta sozlamalarni o‘rnatishingiz va ularni ish muhitingizda baholaganingizdan so‘ng sayt kontseptsiyasiga mos keladiganini tanlashingiz mumkin.

Narxi: $39

Bildirishnoma paneli

Ko'rsatadigan juda oddiy plagin bildirishnoma paneli sahifaning yuqori yoki pastki qismida. Matnli xabar yoki uchun 5 ta rang variantini o'z ichiga oladi