WordPress uchun oddiy FAQ plaginini yaratish

Maqola muallifi:
  • WordPress
  • Yangilandi: Fevral 09, 2017

Biz ko'p narsalarni ko'rganmiz Bloglash bo'yicha maslahatlar va vositalar. Xo'sh, bugun biz sizning blogingiz uchun yaxshi vositani - FAQ sahifasi plaginini qanday yaratishni bilib olamiz. Lekin eng muhimi, bu nafaqat plaginning o'zi, balki ushbu printsip bilan nima qilishingiz mumkin. Sizning WP saytingizda har qanday turdagi ma'lumotlarni qanday saqlashni va uni tashqi kutubxonalar bilan qanday bog'lashni (masalan, jQuery UI) saytingiz uchun maxsus tarkibiy qismlarni yaratishni o'rganasiz. Qani boshladik!

Fikr, Demo va yuklab olish

demo

Bizning maqsadimiz ko'p narsalar uchun ishlatilishi mumkin bo'lgan plagin yaratishdan iborat, ammo FAQ sahifalariga juda mos keladi.

Lekin bundan tashqari bizning asosiy yutug'imiz ham shunday bo'ladi WordPressni tushunish maxsus post turlari, qisqa kodlar, tashqi JS / jQuery plaginlari bilan o'zaro aloqalar. Bu fikr bilan siz u erda topishingiz mumkin bo'lgan boshqa aqldan plaginlarga asoslangan ko'plab narsalarni yaratishi mumkin, bu sizning boshlang'ich nuqtasidir, azizim Padawan.

So Bu erda jQuery API demosini topishingiz mumkin biz foydalanadigan tarkibiy qism uchun - lekin bu juda yoqimli narsa bu komponentni (PHP) yaratishda ishlatiladigan kod.

Oh, va, albatta, topa olasiz Bu yerga yuklab olish uchun plagin fayllari shuningdek WP-saytingizga o'rnatilishi mumkin.

Isitish - plagin fayllari va maxsus pochta manzili

Avvalo, biz ma'lumotni saqlash uchun maxsus xabar turini yaratishimiz kerak.

Shaxsiy pochta turlari WP sehrining muhim qismidir, u WP funktsiyalaridan foydalangan holda ularni chaqirish va boshqarish mumkin bo'lgan yangi ma'lumotlar turini (xabarlar, sahifalar, qo'shimchalar ..) yaratishga imkon beradi. Bu yangi boshlanuvchilar uchun sodda ko'rinishi mumkin, ammo eski PHP dasturchilari (bu hali ham bir narsami?) Ma'lumotlar bazasida ma'lumotlarni ulash va saqlash qanchalik qiyinligini bilishadi. Dinamik ravishda yangi ma'lumotlar turlarini yaratib qo'ymang, bu juda nozik, ammo bizning kodimizda katta moslashuvchanlikni ta'minlaydi.

Buning uchun bizda plagin kerak, lekin ehtimol bu kontseptsiyani yaxshi bilasiz. Plaginlar WordPress uchun Lego bloklariga o'xshaydi, ular mavjud funktsiyani osongina ulanadigan (duh!) Ba'zi kod yordamida qo'shib yoki o'zgartiradi yoki kerakli tugmani o'chirib qo'yadi.

WP tanib biladigan tarzda plagin yaratish uchun siz 2 narsalarga kerak:

  1. Wp-tarkib / plaginlari /
  2. Ushbu faylning boshida meta-ma'lumotlarni qo'shing, shuning uchun WP bu haqida nimani tushunishi mumkin

Fayl nomining noyob bo'lishi kerak, shuning uchun agar kimdir plaginni o'rnatgan bo'lsa (hatto o'zingiz ham) hozirgi plaginlar bilan nizolar bo'lmaydi. Yaxshi tashkilot uchun biz faq-whsr nomi bilan yangi papkani qo'shamiz va uning ichida faq-whsr.php deb nomlangan faylni qo'shamiz.

Endi metada uchun plaginlar faylining boshida (<? Php-dan keyin) shunga o'xshash narsa qo'shing:

meta_01

Bu degani:

  • Plugin Name: wp-admin> plugins interfeysida ko'rsatiladigan yaxshi nom
  • Plagin URI: Agar plaginingiz sahifasiga havola qo'shmoqchi bo'lsangiz (hujjatlar, misollar, sotish sahifasi)
  • Sharh: Bu sizning wp-admin> plugins interfeysida ko'rsatilgan kichik xat. Foydalanuvchilar nima uchun eslay olishi uchun sodda qilib turing
  • Muallif / Muallif URI: Plaginni yaratgan shaxs va kompaniya va kredit uchun havola
  • Litsenziya: Shunday qilib, foydalanuvchilar sizning plaginingiz bilan nima qila olmasliklarini bilishadi

01-plugin-yaratildi

Ok, endi biz plaginimizni yaratdik, mos metadata qo'shdik. Plagin faylingizni saqlaganingizdan so'ng uni wp-admin interfeysingizda ko'rishingiz kerak

Uni faollashtiramiz va nima bo'lishini ko'rib chiqamiz.

Kuting, hech narsa bormi? Xo'sh, bu yaxshi narsa, agar biror narsa noto'g'ri bo'lsa, hozir siz xato ko'rdingiz. Keling, biz hozirda maxsus post turini yarataylik.

Bizning holimizda CPT - bu tez-tez so'raladigan narsa, ammo siz kitoblar, videolar, guvohliklar va shu kabi narsalarni yaratishingiz mumkin. Bu erda yodda tutish kerak bo'lgan muhim narsa: funktsiya nomlari noyob bo'lishi kerak. Men bilan takrorlang: funksiyalar nomlari noyob bo'lishi kerak, vazifalar nomlari noyob bo'lishi kerak. Tushundim? Yaxshiyamki, biz OOP ni ishlatishimiz uchun (ehtimol keyingi darslikda) sizni ko'p muammolardan saqlaydi.

Sehrgarlik ushbu kod bilan amalga oshiriladi:

cpt

Va shunga ko'ra, tegishli qismlar:

  • $ teglar - bu teglar va wp-boshqaruvchi maydoningizning turli bo'limlari uchun matnli qator. Shunday qilib, WP mahsulotimizni qidirishning to'g'ri yo'lini biladi
  • qo'llab-quvvatlaydi - bu wp-admin> tez-tez beriladigan savollar> yangi ekranda ko'rishingiz mumkin bo'lgan narsalarni aytib beradi. Bizning holatlarimizda sarlavha, muharrir (asosiy tarkib qutisi), muallif, tuzatishlar va maxsus maydonlar mavjud (agar xohlasangiz).
  • taksonomalar - bu siz WPga taksonomiyani qanday taqsimlashga ruxsat berasiz (toifalar, teglar yoki maxsus taxonomiyalar)
  • register_post_type ('faq_whsr', $ args) - bu WP-ni aytadi "Hey, $ args argumentlarini ishlatib, faq_whsr sifatida ID bilan yangi maxsus xabar turini yarating".

admin-faq

Uni saqlang va nafasingizni ushlang. Endi siz asosiy wp-administrator menyusida yangi bo'limni ko'rishingiz kerak

Kutinglar, shundaymi? Ha. Ushbu snippet barcha CPT funktsiyalarini yaratadi. Agar siz bu sovuqni topa olmasangiz, keyingi qismda sovutadigan bo'lsin deb kuting.

Wp-adminni tark etishdan oldin, ba'zi qo'g'irchoq ma'lumotlar (kamida 2 toifalari bo'lgan bir necha faq) qo'shing.

Old-End - WP x jQuery ta'sir o'tkazish

Endi nihoyat, ba'zi harakatlarni ko'rish vaqti keldi va biz foydalanamiz jQuery UI Akkordeon elementi Buning uchun.

jQuery foydalanuvchi interfeysi jQuery o'zi kabi bir xil afzalliklarga ega:

  • U erda ishlab chiquvchilar ko'p
  • O'zaro faoliyat brauzer va mobil tayyor kod
  • Yaxshi hujjatlangan
  • WP bilan yaxshi o'ynaydi (WP o'zi foydalanadi)

Savol endi: Qanday qilib uni deymiz?

2 yondashuvi mavjud:

  1. Sizning wp_head-da yomon <script> / <style> teglar
  2. Yaxshi wp_enqueue

Bugun biz noto'g'ri yondashuv bilan ko'p vaqtni yo'qotmaymiz, ammo yaxshi narsa asosan WP-ni aytadi "Hey do'stim, kodimizning bir nuqtasida jQuery UIga kerak bo'ladi, iltimos uni sahifaga qo'shish". Shunday qilib, WP boshqa hech kim uni kiritganmi yoxud uning boshqa versiyasini tekshirishi mumkin va ko'plab kutubxonalar bilan ko'p muammolarga yo'l qo'ymasligi mumkin. OK, qanaqa suhbatni kodga aylantirish kerak?

Enquue funksiyasidan foydalanish:

enqueue_02

Qisqa kod

Va endi biz wp-admin-ga qaytamiz. Tez-tez so'raladigan savollarimiz bor va biz kutubxonaga kerakli narsalarni xohlagan uslubda tarjima qilishimiz kerak, boshqa nima yo'q? Xo'sh, biz narsalarni izlashimiz kerak!

Buning uchun bizda juda ko'p imkoniyatlar mavjud, ammo bu ishning eng oson yo'li qisqa kod yaratishdir. Qisqa kod - kontent maydoniga qo'shadigan narsa (sahifalar, xabarlar, CPTlar uchun ...) va WP aslida u ustida ishlash uchun funktsiyani izlaydi. 2 qisqa kodlari mavjud:

  1. [self-enclosing] - tags <hr /> yoki <br /> bunday qisqa kod faqat bir nuqtada vazifani chaqiradi - bu bizning odam
  2. [wrapped] Content [/ wrapped] - Bu <p> </ p> yoki <div> </ div> teglariga o'xshaydi va aslida tarkibini o'zgartirishi yoki tarkibni argument sifatida ishlatishi mumkin.

Keling, u qanday ishlashini ko'rib chiqaylik. Wp-admin-dagi yangi sahifani yarating va quyidagi kodni qo'shing:

[faq-whsr]

Ushbu sahifani saqlash va ko'rish va nima sodir bo'lishini ko'rish ...

Faqat hazil qilyapsizmi, bu to'g'rimi? Buning sababi, biz buning uchun hali biror funksiya yaratmaganmiz.

Buni plagin faylida qo'shing:

shortcode_02

Endi sizning sahifangizni yangilang va men sizga haqiqatan xushbo'y narsa bo'ladi, deb va'da qilaman.

Salqin, ha? Endi siz u harakat qilayotganini va osmon hozir siz uchun chegara ekanligini ko'rishingiz mumkin. Bu kod nimani anglatishini WPga faqat [faq-whsr] deb nomlangan qisqa kod mavjudligini va agar WP uni topsa, WP sahifadagi ushbu funksiyani bajarishi kerakligini aytadi.

Bizning vaziyatimizda jQuery UI panelini yaratish uchun ushbu tuzilishga erishishimiz kerak bo'ladi:

api_02

Va buning uchun biz yaratamiz WP so'rovi, FAQ elementlarimizni va ularning mazmunini yuklab oling. Qisqa kod funktsiyasini bu bilan almashtiring:

shortcode-basic_02

OK, endi sizning tez-tez beriladigan savollaringiz chaqiriladi. Biz qilgan ishimiz bu wp_query-ga qo'ng'iroq qilib, bizning shaxsiy pochta turimizga qo'ng'iroq qilish va keyin uni shortcode return-ga o'tkazish, shunda WP ularning barchasini kerakli tuzilishga o'tkazadi.

Yaxshi, lekin nimadir etishmayapti, to'g'rimi? U erda ba'zi variantlar haqida nima deyish mumkin? Xo'sh, biz qisqa kod uchun variantlarni qo'shishimiz mumkin, keling, bizning qisqa kodimizda bir nechta WP_Query argumentlarini qanday yaratishni ko'rib chiqamiz:

shortcode-final_02

Shunday qilib, siz quyidagi argumentlarni ishlatib narsalarga qo'ng'iroq qilishingiz mumkin (kerakli darajada ko'pni birlashtira olasiz):

  • cat - toifa ID (bir nechta qator sifatida qo'shilgan) [faq-whsr cat = 1]
  • category_name - toifalar nomi [faq-whsr category_name = "oziq-ovqat"]
  • buyurtma - ASC yoki DESC (DESC default) [faq-whsr order = "ASC"]
  • orderby - buyurtma berish mezonlarini o'zgartirish [faq-whsr orderby = "title"]
  • posts_per_page - yuklangan ob'ektlar sonini o'zgartirish [faq-whsr posts_per_page = 5]

Lekin aytganimdek, osmon sizning do'stingiz uchun chegara. WP_Query uchun siz amalga oshirishingiz va foydalanishingiz mumkin bo'lgan quyidagi variantlar:

  • Muallif
  • Category (not_in-ni tanlashni tashqari qo'shish)
  • Qidiruv (agar siz foydalanuvchilarga ularni qidirish qobiliyatini berishni istasangiz salqin)
  • Maxsus maydon (tez-tez so'raladigan narsalar ularni maxsus sohalar va qiymatlarga ega narsalarni yuklash uchun ularni ishlatishingiz mumkin)

Endi sizning navbatingiz

Ko'rib turganingizdek, bu siz uchun boshlang'ich nuqtadir. Barchamiz bu oddiy plaginni yaxshilash uchun juda ko'p ajoyib narsalarni o'rganishimiz mumkin, bu erda chuqurroq qazish uchun bir nechta takliflar mavjud:

  • Responsive dizayn
  • Vidjet yaratish
  • Plugin aloqalarni faollashtirish / o'chirish
  • Xalqaro aloqalar
  • OOP
  • Zarur hollarda majburlash (ba'zi sahifalar uchun)

Fikrlaringizni izohlarda qoldirishni unutmang! Va bu erda siz uchun bizning vazifamiz: siz qisqa kod uchun "standart element" variantini qo'llashingiz mumkinmi (shuning uchun sahifa yuklanganda boshqa element ochiladi, bu birinchi emas)? Buni qanday qilardingiz?

Rochesterda Oliveira haqida

Men Itajubaning (MG) braziliyalik veb-uslubchisi va tadbirkori bo'ldim. Men qorong'u mavzular haqida yozishni yaxshi ko'raman va ba'zi ajoyib narsalarni qilaman.

»I ¿