WordPress ta'limi: Qanday qilib ajoyib reyting sahifani ShS pluginini yaratish

Maqola muallifi:
  • kelgan Marketing
  • Yangilandi: Sentyabr 15, 2014

Eslatma: Ushbu WP plaginini qo'llab-quvvatlamaymiz, chunki muallif hozir biz uchun yozmaydi.

Bugungi kundan boshlab, har hafta biz WordPress-dan foydalanib, asosiydan tortib to advancedgacha maxsus narsalarni qanday qilishni o'rgatadigan ajoyib kodlash bo'yicha darslik o'tkazamiz. Bugungi kunda biz JS yordamida "plyus shlyuzlar" galereyasini yaratish uchun plagin yaratamiz (shuning uchun siz buning asosiy bosqichlarini bilib olasiz).

Men sizning dastlabki veb-kunlaringizda ko'rgan kishilardan birini ko'rgan bo'lsangiz-da, bular asosan fleshlardan foydalangan holda amalga oshirildi (hozirda bu qiymat juda qadrli, lekin bu narsa uchun eng yaxshi variant emas).

Asosiy funksionallik yangi yaratiladi Galereya turi qisqa kod orqali bir nechta rasm va ularning o'lchamlariga asoslangan.

Keling, boshlang!

Zip & o'rnatish

Uni amalda ko'rishning eng yaxshi usuli uni o'zingizga o'rnatishdir. Siz .. qila olasiz; siz ... mumkin Bu yerda uni yuklab. Plaginni o'rnating va ishga tushiring, shundan so'ng siz shunday qilishingiz kerakki, sahifadagi qisqa kodni quyidagi kabi qo'shish kerak:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" width = "300" height = "225" displey = "ikki marta"]

Tezkor Ko'rib chiqish

Va shunday natijaga erishishingiz mumkin:

Flipbook ta'siri

Ammo u erda qanday qora sehr bor? Aslida, bu juda oddiy. Keling, bunday narsalarni qanday yaratishni bilib olaylik.

Sarlavha

Birinchidan, siz yangi papkani va yangi .php faylini yaratishingiz kerak bo'ladi. Agar sizda sinov muhiti mavjud bo'lsa, shu bilan siz ajoyib narsalarni buzishingiz va tekshirishingiz mumkin.

Fayl va papkada oddiy va noyob nom bo'lishi kerak, shuning uchun mavjud plaginlar bilan ziddiyatlardan qochishingiz kerak. Keyin bizning faylimizning asosiy mazmuni shunday:

/ * Plugin Name: FlipBook Gallery Ta'rif: Flipbook galereya uchun qisqa kod yarating. Versiya: 1.0 Muallif: Web-daromad blogi litsenziyasi: GPL2 * /

Juda oddiy, ha? Ushbu faylni yaratganingizdan so'ng siz ro'yxatdagi plaginni WP admin> Plugins ostida ko'rasiz va siz uni faollashtirishingiz mumkin (lekin faqat sizning tarkibingizda bu tarkib mavjud bo'lsa, bu sizning saytingizni o'zgartirmaydi).

Skriptlarni chaqirish

Keling, bu erda ba'zi muhim tashqi aktivlarni kiritishimiz kerak. Asosiy funksionallik uchun talab qilinadigan tashqi fayllar:

  • jQuery (1.9 +)
  • Turn.js buyrug'i
  • Asosiy uslubni aylantiring

Agar siz oddiygina skriptni va stil yorlig'ini qo'shsangiz, sizda ba'zi muammolar bo'ladi. Misol uchun, er-xotin jQuery qo'ng'iroqlari saytingizni buzishi mumkin. Bundan tashqari, WordPress o'zi bu narsalarni yaratganingizni bilmaydi, shuning uchun boshqa plagin yana qaytadan qo'ng'iroq qilsa yoki boshqa uslubni o'zgartirsa, saytni buzadi.

Shuning uchun biz har doim wp_enqueue_script va wp_enqueue_style funktsiyalaridan foydalanishimiz kerak. Bu erda asosiy foydalanish:

funktsiya plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ("qaytish", plugins_url ('js / turn.js', __FILE__), qator ('jquery'), '1.3', noto'g'ri); wp_enqueue_style ("turnCSS", plugins_url ('CSS / style.css', __FILE__), noto'g'ri, '1.3', 'hamma'); }

Tashqi elementlarni 3-da turli yo'llar bilan qidiramiz, bular:

  • Mavjud elementni chaqirish: jQuery - WordPress-da allaqachon bu skriptni yuklayotganini aniq bilsak, biz juda ko'p parametrlarni o'tkazishga hojat yo'q, shunchaki unga aytayapmiz: "Dude, bu skript bu erda bo'lishi kerak, aks holda bizning kodimiz ish "
  • Yangi buyruq fayli yaratish - nom, fayl joylashuvi, zarur elementlar (bu holda jQuery uchun), versiya kabi ba'zi atributlardan o'tishi kerak va agar u pastki yoki pastki satrda (false = header, true = footer)
  • Yangi uslubni yaratish - Oldingidek oldingidek, avvalgi xususiyatdagi kichik farq bilan, qaysi vositalar bu uslubni yozadi?

Tashqi buyruqlarni chaqirganda e'tiborga olish kerak bo'lgan muhim narsalardan biri - bu plaginga bog'liq bo'lgan qo'shimcha kod bo'lsa. Bu sizning faylingiz nom yoki altbilgida chaqirilishini aniqlaydi.

Bizning holatda galereyani faqat HTML yaratilganda tashkil etish uchun qo'shimcha skriptlar mavjud va ular tanaga qo'shiladi. Shuning uchun biz bu skriptni boshga qo'shishimiz kerak, aks holda bizning kodimiz "qaytish" funktsiyasi hali mavjud emas.

Ushbu yaxshi koddan so'ng WordPress-ni skriptlar sifatida yuklash uchun, "wp_enqueue_scripts" aksiyasini bajarishimiz kerak:

add_action ("wp_enqueue_scripts", "plugin_scripts");

Qisqa kod

Qisqa kodni yaratish uchun harakatni boshlaylik. Juda oddiy, qisqa kodli tirgovichni va bajariladigan funksiyani kiritishingiz kerak bo'ladi:

add_shortcode ("flip_book", "create_flip_book");

Endi biz o'z funktsiyamizni yaratishimiz va o'z xususiyatlarimizni olishimiz kerak. Lekin ayrim xususiyatlar ixtiyoriy bo'lishi mumkin, demak, ular uchun standart qiymatlarni yaratishimiz kerak. Agar attributlar bo'sh bo'lsa, u erda sinovlar mavjud bo'lib, ko'p hollarda biz yaratib bera olamiz, ammo bu uch tomonlama operatsiyaning oddiy chaqiriqlardan yaxshiroq bo'lgan holatlaridan biridir.

Uchinchi operatsiyalar bevosita o'zgarmaydigan qiymati ifodalaridir. Agar ushbu struktura quyidagicha bo'lsa:

$ $ o'zgaruvchilari = (CONDITION)? "KO'RIDAN RO'YXATNI QADRLORUZ": "KO'RIShDA YO'Q BO'LSA VALUE";

Faoliyatimizning birinchi qismida ularni amalda ko'rishingiz mumkin:

funktsiya create_flip_book ($ attr) {// ishlov beriladigan identifikatorlarni tayyorlash $ array ['ids'] = explode ("", $ attr ["ids"]); // displey holati $ array ['display'] = bo'sh ($ attr ['display'])? "yagona": $ attr ['display']; // standart qiymat // width $ array ['width'] = bo'sh ($ attr ['width'])? 400: $ attr ['width']; // balandlik $ array ['height'] = bo'sh ($ attr [height]])? 300: $ attr [height]];
    // HTML va kodning qolgan qismi bu yerga o'tadi}

Keyin biz HTML va tasvirlar uchun asosiy qo'ng'iroqni yaratishimiz kerak. Bu erda yana bir muhim jihat - agar biz jurnal uslubini ishlatadigan bo'lsak (agar biz 2 ning kengligi bo'lishi kerak bo'lsa, biz o'rniga 2 tasvirlarni olamiz) o'lchamlarni o'zgartirish uchun:

<? php if ($ array ["display"] == "double") {$ array ["width"] = $ array [kenglik] * 2; } // HTML, JS va Black Magic?> <Div id = "flipbook"> uchun <? Php ($ i = 0; $ i <hajmiof ($ array ["ids"]); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'to'liq'); agar ($ array ["display"] == "single") {?> <span> <? = "" ($ i + 1)?> / <? ($ array ['ids'])> </ span> <? php} else {?> <spanright »:« chap »);?>> <? php echo" "($ i + 1)?> / <? echo "" .sizeof ($ array ["ids"]); jQuery ("# ​​flipbook") ochish ({width: </ php>? php echo $ array ['width'];;> balandligi: <? php echo $ array [height];;>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // bir sahifa yoki ikkilangan sahifa tezlashuvi: haqiqiy, gradyanlar:! jQuery.isTouch,}); </ skript>

Siz nima deb o'ylaysiz?

Keling, siz xohlaysizmi, buning uchun kerakli narsani o'zgartiring va o'zgartirishingiz mumkin, qo'shimcha variantlar qo'shing (ko'proq ilhom uchun ajoyib misollarni ko'rib chiqing), siz uchun ishlamaydigan narsalarni sozlash yoki boshqa plaginlar bilan birlashtirish.

Bir oz ko'proq o'rganmoqchi bo'lgan WordPress kontseptsiyasi bormi? Ehtimol, siz qanday qilib o'rganishni xohlayotganingizni bilasizmi? Fikrlar orqali bizni xabardor qiling va kelgusidagi xabarga qo'shamiz!

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.