WordPress yon panellari nima va u erda nimani qo'yishingiz mumkin? Yon panel va asosiy matn maydonini almashtiring Yomon yon panel kodi

Avvaliga borishimiz kerak functions.php bizning mavzuimiz. Sahifani oxirigacha va oldinga aylantiring ?> ushbu kodni joylashtiring:

Register_my_menus() ( register_nav_menus (massiv("header-menu" => "Menyu v Shapke", "footer-menu" => "Menyu v podvale")); ) agar (function_mavjud("register_nav_menus")) ( add_action( "init", "ro'yxatdan o'tish_menyularim");

Keling, kodni biroz ko'rib chiqaylik. 4-qatorda keyin qavs ichida massiv menyuni ko'rsating:
"sarlavha menyusi"— bu nom sahifadagi menyuni ko‘rsatish uchun kerak;
"Menyu v Shapke"— “Tashqi ko‘rinish” — “Menyu” bo‘limida boshqaruv panelida ko‘rsatiladigan nom. Xuddi shu tarzda men altbilgi menyusini qo'shdim. Vergul bilan ajratilgan holda, biz sizga kerak bo'lgan ko'plab menyularni sanab o'tamiz.

Kod agar (funksiya_mavjud ('register_nav_menus'))... joriy qo'llab-quvvatlayotganini tekshiradi WordPress versiyasi menyuni ro'yxatdan o'tkazish funktsiyasi register_nav_menus(funktsiya faqat juda eski versiyalarda qo'llab-quvvatlanmaydi).

Ushbu shablonni loyihalashda men fayldagi yuqori menyuni ko'rsatdim header.php , chunki bu menyu butun saytda bir xil. Mavzumizning header.php saytiga o'ting va kodni menyu bo'lishi kerak bo'lgan joyga kiriting:

"sarlavha-menyu")); ?>

Xuddi shunday altbilgi uchun:

"footer-menyu")); ?>

Endi administrator paneli orqali menyu yaratishimiz kerak. Buni amalga oshirish uchun Administrator paneliga o'ting (yoursite.ru/wp-admin). Keyin, "Tashqi ko'rinish" yorlig'ida "Menyu" ni tanlang.

Biz har qanday nom bilan menyu yaratamiz. Men "Yuqori menyu" deb nomlangan menyu yaratdim.


Endi uchun "Mavzu sohalari" blokini tanlang Menyu v"Yuqori menyu" va "Saqlash" tugmasini bosing.

Yon panelni yaratish

Yon panel unga vidjetlarni kiritish uchun kerak. Vidjetlar juda ko'p plaginlardan foydalanadi va agar sizning mavzuingiz vidjetlarni qo'llab-quvvatlamasa, uni zudlik bilan tuzatishingiz kerak.
WordPress uchun yon panel yaratish uchun siz borishingiz kerak functions.php va yangi xususiyat qo'shing.

Agar (funksiya_mavjud("registr_yonboshi")) (registr_yonboshi(massiv("ism" => "Chap yon paneli", "vidjetdan oldin" => "

", "before_title" => "

", "after_title" => "

",)); }

Tushuntirishlar:
"nom" - "Tashqi ko'rinish" - "Vidjetlar" bo'limida ko'rsatiladigan yon panelning nomi.
'before_title' - vidjet sarlavhasidan oldin.
'before_widget' - vidjetdan oldin nima paydo bo'ladi. Siz teg qo'yishingiz mumkin

lekin men ishlashga odatlanganman

. orqali

Yon panelning CSS dizaynini sozlash osonroq bo'ladi.
"after_widget" - vidjetdan keyin nima paydo bo'ladi. Agar siz "before_widget" dan foydalansangiz

(men kabi), keyin yopish tegini belgilang

, agar buyurilgan bo'lsa

, keyin biz foydalanamiz

.
"after_title" - vidjet sarlavhasidan keyin.

Yon panel joylashgan joyda (menda bu bor sidebar.php ) kiritmoq:

Administrator - "Tashqi ko'rinish" - "Vidjetlar" ga o'ting va bir nechta vidjetlarni qo'shing. uchun CSS o'rnatilmoqda chiroyli dizayn yon panel. Joylashtirish paytida men vidjetlar qanday ko'rsatilishini bilardim va dizaynni style.css da oldindan ro'yxatdan o'tkazdim.

Bir nechta yon panellar

functions.php da bir nechta yon panellar yaratish uchun siz bir nechta yon panellarni ro'yxatdan o'tkazishingiz kerak.
Bu men uchun shunday ko'rinadi:

Agar (funksiya_mavjud("registr_yonboshi")) (registr_yonboshi(massiv("ism" => "Chap yon paneli", "vidjetdan oldin" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => "O'ng yon panel", "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); register_sidebar(massiv("ism" => "Uchta yon panel", "oldin_vidjet" => " ", "before_title" => "

", "after_title" => "

",)); }

Siz allaqachon sezganingizdek, boshqa yon panelni qo'shish uchun kodni qo'shishingiz kerak:

Register_sidebar(array("name" => "Tut Luboe Nazvanie", "before_widget" => "

", "before_title" => "

", "after_title" => "

",));

Va sahifada yon panelni ko'rsatish uchun siz kodni kiritishingiz kerak

"Uch yon panel" yon panellar ro'yxatida uchinchi o'rinda turadi, shuning uchun uning chiqish kodi quyidagicha bo'ladi:

Barcha yon panellar “Vidjetlar” sahifasidagi boshqaruv paneli orqali sozlangan. Men sizga aytmoqchi bo'lgan hamma narsani aytdim shekilli. Agar sizda hali ham savollaringiz bo'lsa yoki biror narsa ishlamasa, sharhlarda yozing, biz albatta yordam beramiz.

WordPress-dagi sahifaga kerakli plaginlar va qo'shimchalarni qo'shish uchun siz qiziqqan vidjetni administrator panelidagi yon panelga sudrab o'tishingiz kifoya. Shunday qilib, hatto WordPress dvigatelida yangi boshlanuvchilar ham o'zlarining yon panellarini osongina o'zgartirishlari mumkin (va nafaqat u).

Ba'zan mavzuni ishlab chiquvchilari vidjetni sudrab o'tishingiz mumkin bo'lgan bir nechta yon panellarni taqdim etadilar. Ammo 1-2 ta yon panel mavjud bo'lgan mavzular ham bor va ular faqat mavzuning o'zi ehtiyojlari uchun ishlatiladi (ya'ni, siz u erga yangi vidjetlarni surib bo'lmaydi).

Va hattoki, siz shunchaki mantiqni yoki boshqa dizaynni farqlash uchun yangi yon panelni qo'shmoqchi bo'lgansiz.

Avval siz yon panelni ro'yxatdan o'tkazishingiz kerak. Bu faylda amalga oshirilishi mumkin functions.php shablon papkasida. Ba'zi shablonlarni ishlab chiquvchilar maxsus shablonlarni yaratadilar. yon panellarni ro'yxatdan o'tkazish funktsiyasi. Masalan, twentyten_widgets_init() () funktsiyasi. Bu muhim emas. Ro'yxatdan o'tish sodir bo'ladigan koddagi joyni toping. Bu shunday ko'rinadi:

Register_sidebar(array("name"=>"Sayt tavsifi", "for_widget" => "

"));

O'zingizning yon panelingizni qanday qo'shishingiz mumkin?

Yon panellar ro'yxatdan o'tgan kod qismini topsangiz, o'zingiznikini xuddi shunday tarzda ro'yxatdan o'tkazishingiz mumkin. Misol tariqasida:

Register_sidebar(array("name" =>"Ikkinchi yon panel", "id" => "ikkinchi darajali vidjet-hudud", "oldin_vidjet" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

Ism— yon panelingiz nomi. u administrator panelida ko'rsatiladi.

id- noyob identifikator. Uni sahifaga qo'shganda sizga kerak bo'ladi (quyida batafsilroq).

oldin_vidjet— har bir vidjetdan oldin kiritiladigan kod/matn.

after_vidjet— mos ravishda, har bir vidjetdan keyin kiritiladigan kod/matn.

sarlavhadan oldin— vidjet sarlavhasidan oldin kiritiladigan kod/matn.

sarlavhadan keyin— vidjet sarlavhasidan keyin kiritiladigan kod/matn.

Yuqoridagi kodni faylga qo'shgandan so'ng, uni saqlang va administrator panelidagi vidjetlar sahifasiga o'ting. Endi, xuddi boshqa yon panellar singari, kerakli vidjetlarni yangisiga sudrab olib tashlashingiz mumkin. Ushbu yon panel veb-saytingizda ko'rsatilishi uchun siz tegishli shablon faylini ochishingiz kerak, ya'ni sidebar.php , va kodni toping:

Yon panelingiz paydo bo'lishini xohlagan ochilish va yopish teglari orasiga qo'shishingiz kerak. Bu shunday bo'ladi:

Chiroyli chiqish uchun siz ushbu kodni blokga kiritishingiz mumkin:

Siz allaqachon sezganingizdek ikkinchi darajali vidjet maydoni sahifada ko'rsatilganda, bu yon panelning nomi. Faylda ro'yxatdan o'tishda ko'rsatilgan nom bilan aynan bir xil bo'lishi kerak functions.php . Endi faylni tahrirlash style.css yon panelga kerakli ko'rinishni bering.

Ba'zan siz faqat 1 ta yon panel mavjud bo'lgan mavzularga duch kelasiz va ular mavzuning o'zi ehtiyojlari uchun ishlatiladi va siz u erda yangi vidjetlarni joylashtira olmaysiz. Ehtimol, siz mavjud mavzu shablonini o'zgartirishingiz va qo'shimcha yon panel qo'shishingiz kerak edi, deylik, mavzu chap tomonda, lekin o'ng tomonda boshqasini qo'shishingiz kerak.

Bu muammoni hal qilish umuman qiyin emas. Mavzuning functions.php fayllari va yon panelni joylashtirmoqchi bo‘lgan sahifaning shablon fayliga kichik o‘zgartirishlar kiritish kifoya. Sahifa chiqishi uchun qaysi fayl javobgar ekanligini qanday aniqlash mumkin

Avval siz yangi yon panelni ro'yxatdan o'tkazishingiz kerak. Bu shablon papkasidagi functions.php faylida amalga oshiriladi. register_sidebar(massiv("name" =>"Yangi yon panel", "id" => "ikkinchi darajali vidjet maydoni", "vidjetdan oldin" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

Bajarildi, vidjet boshqaruv panelida yangi yon panel paydo bo'ldi. Qolgan narsa - uni biroz o'zgartirish tashqi ko'rinish style.css faylida (ko'rinishni mavjudidan nusxalashingiz mumkin)

Kodda nima bor

Ism– yon panel nomi, u administrator panelida Vidjetlar ko‘rsatiladi.
id- noyob identifikator. Sahifaga qo'shishda kerak.
oldin_vidjet– har bir vidjet oldiga kiritiladigan kod yoki matn.
after_vidjet– har bir vidjetdan keyin kiritiladigan kod yoki matn.
sarlavhadan oldin– vidjet sarlavhasidan oldin kiritiladigan kod yoki matn.
sarlavhadan keyin– vidjet sarlavhasidan keyin kiritiladigan kod yoki matn.

Identifikatorga, yon panelning nomiga e'tibor bering, bu holda u "ikkilamchi vidjet maydoni" dir. U functions.php faylida ro'yxatdan o'tish paytida ko'rsatilgan nom bilan aynan bir xil bo'lishi kerak.

Yon panel deyarli har qanday veb-saytning bir qismi bo'lib, odatda chapda, kontent maydonining o'ng tomonida yoki pastki kolontiterning oldida joylashgan. WordPress yon panellari bundan mustasno emas. Faqatgina farq shundaki, WordPress-da yon panel vidjetlar avtomatik ravishda ko'rsatiladigan maydondir. WordPress-da cheksiz miqdordagi yon panellarni yaratishingiz mumkin, ammo bu misol uchun men asosiy tarkib maydonining chap va o'ng tomonida ikkita yon panel yarataman.

WordPress yon panellarini ro'yxatdan o'tkazish

Yon panellar administrator panelida ko'rsatilishi uchun ularni ro'yxatdan o'tkazishimiz kerak. Boshqacha qilib aytganda, functions.php fayliga quyidagi kodni qo'shing:

/** * Yon panellarni ro'yxatdan o'tkazing. */ funktsiya fwbs_widgets_init() ( register_sidebar(massiv("nom" => __("O'ng ustun", "fwbs"), "id" => "yon panel-1", "tavsif" => __("O'ng tomondagi ustun" ", "fwbs"), "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Chap ustun", "fwbs"), "id" => "yon panel-2", "tavsif" => __("Saytdagi chap ustun altbilgi ", "fwbs"), "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); ) add_action("widgets_init", "fwbs_widgets_init");

WordPress yon panellarini yaratish uchun yuqoridagi kodni tahlil qilish

Bu birinchi qarashda ko'rinadigan darajada murakkab emas.

• "name" => __("O'ng ustun", "fwbs") - vidjet zonasining nomi, siz istalgan nomni yozishingiz mumkin, faqat qavslar orasiga ehtiyotkorlik bilan, skrinshotga qarang, u qayerda ko'rsatilishini ko'ring;
• "id" => "sidebar-1" - identifikator yon panelga tayinlangan noyob identifikator bo'lib, barcha yon panellar boshqa identifikatorlardan farqli ravishda o'z identifikatoriga ega bo'lishi kerak;
• "description" => __("O'ng tomondagi ustun", "fwbs") - vidjet zonasi nomiga o'xshash tavsif;
• "before_widget" => "
• "after_widget" => "" yon panel maydoni uchun yopilish HTML yorlig'i. Bizga ma'lumki, hamma narsa HTML teglari, ba'zi istisnolardan tashqari, juft bo'lishi kerak (ochish va yopish);
• "before_title" => "

  " - vidjet sarlavhasi sinf bilan H4 tegiga o'raladi

  , siz H1, H2, H3, H4, H5, H6 sarlavhalarining ahamiyatini o'zgartirishingiz va o'z sinflaringizni belgilashingiz mumkin;

• "after_title" => ""- yopishvidjet sarlavhasi uchun juftlangan teg.

Endi biz administrator paneliga, "vidjetlar" bo'limiga o'tamiz va natijaga qaraymiz. Mana men olgan narsamning rasmi:

Ushbu kod bilan men ikkita WordPress vidjet zonasini ro'yxatdan o'tkazdim, endi ularni ekranda ko'rsatishim kerak.

WordPress yon paneli chiqishi

Shablonning istalgan joyida yon panellarni ko'rsatish uchun quyidagi kodni kerakli joyga yozish mantiqan to'g'ri bo'ladi:

Kod bo'yicha bir nechta tushuntirishlar:

• - buyruq beruvchi PHP kodi, agar id=sidebar-1 ostida yon panelda vidjetlar mavjud bo'lsa, u holda uni ko'rsatish kerak, agar vidjetlar bo'lmasa, yon panel ko'rsatilmaydi;
• - Shablon kodida ko'rsatgan joyda id=sidebar-1 ostida yon panelni chaqiruvchi PHP kodi.

Ammo ko'rib turganingizdek, ichida WordPress shablonlar Yon panelning chiqish kodi alohida sidebar.php fayllariga joylashtiriladi, so'ngra sidebar.php faylidagi kontent shablonning kerakli joyiga chiqariladi. Biz bilamizki, WordPress kontentni dinamik ravishda namoyish etadi va sayt shabloni bir nechta qismlardan iborat bo'lsa, uning qismlaridan biri sidebar.php faylidir.

sidebar.php faylini yaratish

Fayl yarating, masalan sidebar-right.php, unga nom bering va unga yuqoridagi kodni joylashtiring. Hammasi birgalikda quyidagicha ko'rinadi:

Misoldan ko'rinib turibdiki, men kodni qo'shimcha HTML belgilari bilan to'ldirdim. Endi, vidjet zonasini ko‘rsatish uchun, kerakli joyga quyidagilarni yozish kifoya:

Chap tomondagi ustun uchun mos ravishda sidebar-left.php fayli yaratiladi va shablonning o'ng joyida biz uni quyidagicha chiqaramiz:

Ular aytganidek, kodda bitta farqni toping.

Hammasi shunday, yon panellar yaratildi, endi shablonda ular uchun belgilar yaratish va CSS uslublarini qo'shish qolgan.

Yon panel deyarli har qanday veb-saytning bir qismi bo'lib, odatda chapda, kontent maydonining o'ng tomonida yoki pastki kolontiterning oldida joylashgan. WordPress yon panellari bundan mustasno emas. Faqatgina farq shundaki, WordPress-da yon panel vidjetlar avtomatik ravishda ko'rsatiladigan maydondir. WordPress-da cheksiz miqdordagi yon panellarni yaratishingiz mumkin, ammo bu misol uchun men asosiy tarkib maydonining chap va o'ng tomonida ikkita yon panel yarataman.

WordPress yon panellarini ro'yxatdan o'tkazish

Yon panellar administrator panelida ko'rsatilishi uchun ularni ro'yxatdan o'tkazishimiz kerak. Boshqacha qilib aytganda, functions.php fayliga quyidagi kodni qo'shing:

/** * Yon panellarni ro'yxatdan o'tkazing. */ funktsiya fwbs_widgets_init() ( register_sidebar(massiv("nom" => __("O'ng ustun", "fwbs"), "id" => "yon panel-1", "tavsif" => __("O'ng tomondagi ustun" ", "fwbs"), "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Chap ustun", "fwbs"), "id" => "yon panel-2", "tavsif" => __("Saytdagi chap ustun altbilgi ", "fwbs"), "before_widget" => " ", "before_title" => "

", "after_title" => "

",)); ) add_action("widgets_init", "fwbs_widgets_init");

Endi biz administrator paneliga, "vidjetlar" bo'limiga o'tamiz va natijaga qaraymiz. Mana men olgan narsamning rasmi:

Lekin yon panellar oddiygina Front-Endda ko'rinmaydi, ularni chaqirish kerak bo'ladi. Ammo quyida bu haqda ko'proq.

WordPress yon panellarini yaratish uchun yuqoridagi kodni tahlil qilish

Bu birinchi qarashda ko'rinadigan darajada murakkab emas.

• "name" => __("O'ng ustun", "fwbs") - vidjet zonasining nomi, siz istalgan nomni yozishingiz mumkin, qavslar orasiga diqqat bilan qarang, u qayerda ko'rsatilishini ko'rish uchun skrinshotga qarang;
• "id" => "sidebar-1" - identifikator yon panelga tayinlangan noyob identifikator bo'lib, barcha yon panellar boshqa identifikatorlardan farqli ravishda o'z identifikatoriga ega bo'lishi kerak;
• "description" => __("O'ng tomondagi ustun", "fwbs") - vidjet zonasi nomiga o'xshash tavsif;
• "before_widget" => "
• "after_widget" => "" — yon panel maydonini yopuvchi HTML teg. Bizga ma'lumki, barcha HTML teglari, ayrim istisnolardan tashqari, juftlashtirilgan bo'lishi kerak (ochish va yopish);
• "before_title" => "

  " - vidjet sarlavhasi sinf bilan H4 tegiga o'raladi

  , siz H1, H2, H3, H4, H5, H6 sarlavhalarining ahamiyatini o'zgartirishingiz va o'z sinflaringizni belgilashingiz mumkin;

• "after_title" => ""- yopishvidjet sarlavhasi uchun juftlangan teg.

Ushbu kod bilan men ikkita WordPress vidjet zonasini ro'yxatdan o'tkazdim, endi ularni ekranda ko'rsatishim kerak.

WordPress yon paneli chiqishi

Shablonning istalgan joyida yon panellarni ko'rsatish uchun quyidagi kodni kerakli joyga yozish mantiqan to'g'ri bo'ladi:

Kod bo'yicha bir nechta tushuntirishlar:

• — Buyruqni beruvchi PHP kodi, agar id=sidebar-1 ostida yon panelda vidjetlar mavjud bo'lsa, u holda uni ko'rsatish kerak, agar vidjetlar bo'lmasa, yon panel ko'rsatilmaydi;
• — Shablon kodida ko'rsatgan joyda id=sidebar-1 ostida yon panelni chaqiruvchi PHP kodi.

Lekin ko'rib turganingizdek, WordPress shablonlarida yon panelning chiqish kodi alohida sidebar.php fayllariga joylashtiriladi, so'ngra sidebar.php faylidagi kontent shablonning kerakli joyiga chiqariladi. Biz bilamizki, WordPress kontentni dinamik ravishda namoyish etadi va sayt shabloni bir nechta qismlardan iborat bo'lsa, uning qismlaridan biri sidebar.php faylidir.

sidebar.php faylini yaratish

Fayl yarating, masalan sidebar-right.php, unga nom bering va unga yuqoridagi kodni joylashtiring. Hammasi birgalikda quyidagicha ko'rinadi:

Misoldan ko'rinib turibdiki, men kodni qo'shimcha HTML belgilari bilan to'ldirdim.

Endi, vidjet zonasini ko‘rsatish uchun, kerakli joyga quyidagilarni yozish kifoya:

Chap tomondagi ustun uchun mos ravishda sidebar-left.php fayli yaratiladi va shablonning o'ng joyida biz uni quyidagicha chiqaramiz:

Ular aytganidek, kodda bitta farqni toping.

Hammasi shu, yon panellar yaratildi, endi ularni yaratish qoladi HTML shablon belgilash va CSS uslublarini qo'shish, lekin bu butunlay boshqacha hikoya. Endi men yangi bo'lim ochdim