WordPress Təlimatı: Zəhmli səhifə çevirmək plagini necə yaratmaq olar

Qeyd: Müəllif bu gün üçün bizim üçün yazmadığı üçün bu WP plagini artıq dəstəkləmirik. 


Bu gündən başlayaraq hər həftə bizdə zəhmli kodlaşdırma təlimatı təqdim ediləcək, sizə WordPress-dən baza səviyyəsindən inkişaf etmişə qədər xüsusi işlər görməyi öyrədir. Bu gün JS-dən istifadə edərək “səhifə çevirmək” qalereyası yaratmaq üçün bir plugin hazırlayacağıq (buna dair əsas addımları öyrənəcəksiniz).

Əvvəlki veb günlərinizdən birini görməyinizə ümid edirəm, amma bunlar əsasən köhnəlmiş flaşdan istifadə edilmişdir (hələ də dəyəri var, amma bu cür iş üçün ən yaxşı seçim deyil).

Əsas funksionallıq qısa kod vasitəsilə bir neçə görüntü və ölçülərə əsaslanaraq yeni bir qalereya növü yaradılacaqdır.

Gəlin bundan sonra başlayaq!

Zip & Yüklemek

Bunu hərəkətdə görməyin ən yaxşı yolu özünüz quraşdırmaqdır. Siz buradan yükləyə bilərsiniz. Plugini quraşdırın və aktivləşdirin, sonra etmək lazım olan yalnız bu səhifədəki şifrə əlavə etməkdir:

[flip_book idləri = "78 79 78 79 79 78 78 79 79 78" eni ="300" boyu ="225" ekran ="ikiqat"]

Tez Baxış

Və əldə edəcəyiniz nəticənin növü budur:

Flipbook effekti

Bəs orada hansı qara sehr gedir? Həqiqətən olduqca sadədir. Belə bir şey yaratmağı öyrənək.

Başlıq

Əvvəlcə yeni bir qovluq və yeni .php faylı yaratmalısınız. Bu nöqtədə bir sınaq mühitiniz varsa zəhmli olardı ki, məhsulları sındıra və sınaya bilərsiniz.

Fayl və qovluq sadə və bənzərsiz bir ada sahib olmalıdır, buna görə mövcud pluginlər ilə ziddiyyətlərdən qaçacaqsınız. Sonra sənədimizin əsas tərkibi bu kimi bir şeydir:

/ *
Plugin Adı: FlipBook Qalereya
Təsvir: flipbook qalereyaları üçün qısa bir kod yaradın.
Versiya: 1.0
Müəllif: Veb Gəlir Blogu
Lisenziya: GPL2
* /

Çox sadə, hə? Bu faylı yaratdıqdan sonra WP admin altındakı siyahıda plagininizi görəcəksiniz > Pluginlər, onu aktivləşdirə bilərsiniz (ancaq bu məzmununuz yalnız faylınızda olsa, saytınızı çox dəyişməz).

Skriptləri çağırır

İndi buraya bir sıra vacib xarici aktivlər daxil etməliyik. Əsas işləmə üçün tələb olunan xarici sənədlər bunlardır:

  • jQuery (1.9+)
  • Turn.js skript
  • Əsas üslubu düzəldin

Skript və stil etiketlərini sadəcə orada əlavə etsəniz, bəzi problemləriniz olacaq. Məsələn, ikiqat jQuery çağırışı saytınızı pozacaq. Ayrıca, WordPress özü həmin əşyaları yaratdığınızı “bilmir”, buna görə başqa bir plugin yenidən turn.js çağırırsa və ya fərqli bir üslubla saytınızı pozursa.

Buna görə hər zaman wp_enqueue_script və wp_enqueue_style funksiyalarından istifadə etməliyik. Budur əsas istifadə:

funksiya plugin_scriptts () {
wp_enqueue_script (‘jquery’);
wp_enqueue_script (‘növbə’, plugins_url (‘js / turn.js’, __FILE__), serial (‘jquery’), ‘1.3’, yalan);
wp_enqueue_style (‘turnCSS’, plugins_url (‘css / style.css’, __FILE__), saxta, ‘1.3’, ‘hamısı’);
}

Xarici əşyaları 3 fərqli yolla çağırırıq, burada bunlar:

  • Mövcud bir elementə zəng vurmaq: jQuery – WordPress-in bu skripti artıq yüklədiyini bildiyimiz üçün bir çox parametr keçməyimiz lazım deyil, sadəcə ona deyirik: “Dostum, bu skript burda olmalıdır, əks halda kodumuz olmaz” iş ”
  • Yeni bir skript yaratmaq – ad, fayl yeri, tələb olunan elementlər (bu vəziyyətdə jQuery tələb olunur), versiya və altbilgiyə və ya başlığa yüklənmişsə (səhv = başlıq, doğru = altbilgi) kimi bəzi atributları keçməli olacaqsınız.
  • Yeni bir üslub yaratmaq – Əvvəlki ilə olduqca eynidir, son atributunda kiçik fərqlə, bu üslubun hansı mediaya aid olduğunu söylədi

Xarici skriptləri çağırarkən diqqət etməli olduğunuz vacib şeylərdən biri bu plagindən asılı olacaq daha çox kodun olmasıdır. Faylınızın başlığına və ya altbilgisinə çağırılacağını əsasən müəyyənləşdirən budur.

Bizim vəziyyətimizdə, yalnız HTML yaradıldıqda və bədənə əlavə ediləcək qalereya qurmaq üçün bəzi əlavə skriptlərimiz var. Buna görə başımıza bu skript əlavə etməliyik, əks halda kodumuzun “növbə” funksiyası deyildiyi zaman hələ yoxdur.

Bu gözəl koddan sonra WordPress-ə skript kimi yükləmələrini söyləməliyik, “wp_enqueue_scriptts” hərəkəti bunu edəcək:

add_action (‘wp_enqueue_scriptts’, ‘plugin_scriptts’);

Qısa şifrə

Qısa şifrə yaratmaq üçün hərəkətlərdən başlayaq. Çox sadədir, sadəcə şifrə tetikleyicisini və yerinə yetiriləcək funksiyanı əlavə etməlisiniz:

add_shortcode ("flip_book","yarat_flip_book");

İndi funksiyamızı yaratmalı və atributlarımızı almalıyıq. Lakin bəzi xüsusiyyətlər əlavə ola bilər, yəni onlar üçün standart dəyərlər yaratmağımız lazım olacaqdır. Atributun boş olub olmadığını yoxlamaq üçün bir çox şey yarada bilərik, amma bu, üçdəfəlik əməliyyatın normal çağırışdan daha yaxşı olduğu hallardan biridir..

Dernary əməliyyatları birbaşa dəyişənin dəyəri olan ifadələrdir. Bu quruluşa əməl edərsə:

$ dəyişən = (CONDITION) ? "DƏSTƏK HAQQINDA DƏYƏR" : "ƏMƏKDAŞDIRMAĞA YAXŞI OLUNUR";

Bunları funksiyamızın ilk hissəsində hərəkətdə görə bilərsiniz:

funksiya create_flip_book ($ attr) {

// Şəxsiyyət sənədlərinin işlənməsinə hazırlanır
$ array [‘ids’] = partlamaq (" ",$ attr [‘ids’]);

// ekran rejimi
$ array [‘display’] = boşdur ($ attr [‘display’]) ? "subay" : $ attr [‘display’]; // standart dəyər

// en
$ array [‘width’] = boşdur ($ attr [‘width’])? 400: $ attr [‘width’];

//hündürlük
$ array [‘height’] = boşdur ($ attr [‘height’])? 300: $ attr [‘height’]; // HTML və kodun qalan hissəsi buraya gedir
}

Sonra HTML və şəkillərimiz üçün əsas çağırış yaratmalıyıq. Buradakı digər vacib bir məqam, jurnal tərzindən istifadə etdiyimiz təqdirdə ölçüsü tənzimləməkdir (birinin əvəzinə 2 şəkil çəkəcəyimiz üçün eni 2x olmalıdır):

<?php
əgər ($ array [‘display’] == "ikiqat" ) {
$ array [‘width’] = $ array [‘width’] * 2;
}
// HTML, JS və Qara Sehrli
?>

<?php
üçün ($ i = 0; $ i < sizeof ($ array [‘ids’]); $ i ++) {
?>

<?php
echo wp_get_attachment_image ($ array [‘ids’] [$ i], ‘tam’);
əgər ($ array [‘display’] == "subay" ) {
?>
<?="".($ i + 1)?>/<? əks-səda "".sizeof ($ array [‘ids’])?>
<?php
} başqa {
?>

<?php
əks-səda "".($ i + 1)?>/<? əks-səda "".sizeof ($ array [‘ids’]);
?>

<?php
}
?>

<?php
}
?>

jQuery ("#flipbook") .turn ({
eni: <?php echo $ array [‘width’]; ?>,
hündürlük: <?php echo $ array [‘height’]; ?>,
autoCenter: doğrudur,
ekran: ‘<?php echo $ array [‘display’]; ?>’, // tək səhifə və ya cüt səhifə
sürətlənmə: doğrudur,
gradients:! jQuery.isTouch,
});

Nə fikirləşirsən?

İndi bunu istədiyiniz kimi çimdik və dəyişdirə bilərsiniz, daha çox seçim əlavə edin (daha çox ilham üçün zəhmli nümunələri nəzərdən keçirin), sizin üçün yaramadığı şeyləri tənzimləyin və ya bunu digər eklentlərlə birləşdirin.

Bir az daha çox öyrənmək istədiyiniz hər hansı bir WordPress anlayışınız varmı? Bəlkə necə edəcəyinizi öyrənmək istədiyiniz bir şey? Şərhlər vasitəsi ilə bizə bildirin və gələcək posta əlavə etməkdən məmnun olarıq!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map