WordPress Eğitimi: Nasıl Awesome Page Flip Plugin Oluşturma

Yazan makale:
  • Gelen Pazarlama
  • Güncelleme: Eylül 15, 2014

Not: Yazar şu an için bizim için yazmadığı için bu WP eklentisini artık desteklemiyoruz.

Bugünden başlayarak, her hafta, temelden ileri seviyeye kadar WordPress kullanarak nasıl özel şeyler yapılacağını öğreten harika bir kod öğretici özelliğine sahip olacağız. Bugün bir eklenti oluşturacağız (böylece bu konudaki temel adımları öğreneceksiniz) ve JS kullanarak bir “sayfa çevirme” galerisi oluşturuyoruz.

Bahse girerim, ilk web günlerinizdekilerden birini görmüşsünüzdür, ancak bunlar çoğunlukla flaş kullanılarak yapılmıştır, ki bu artık kullanımdan kaldırılmıştır (hala değeri vardır, ancak bu tür şeyler için en iyi seçenek değildir).

Temel işlevsellik yeni oluşturulacak galeri türü Birkaç görüntü ve boyutlarına dayanarak, kısa kod ile.

Hadi başlayalım o zaman!

Zip & Yükle

Eylemde görmenin en iyi yolu onu kurmaktır. Yapabilirsin buradan indirebilirsiniz. Eklentiyi kurun ve etkinleştirin, sonra yapmanız gereken tek şey, aşağıdaki gibi bir sayfada kısa kodu eklemektir:

[flip_book ids = "78 79 78 79 79 78 78 79 79 78" genişlik = "300" yükseklik = "225" ekran = "çift"]

Hızlı Önizleme

Ve bu elde edeceğiniz sonuç türüdür:

Flipbook Etkisi

Ama orada ne tür bir kara büyü var? Aslında, aslında oldukça basit. Bunun gibi bir şeyi nasıl oluşturacağımızı öğrenelim.

Başlık

Her şeyden önce yeni bir klasör ve yeni bir .php dosyası oluşturmanız gerekir. Bu noktada bir test ortamınız varsa harika olur, bu sayede bir şeyleri kırıp test edebilirsiniz.

Dosya ve klasörün basit ve benzersiz bir adı olmalıdır, bu yüzden mevcut eklentilerle çakışmayı önlersiniz. Sonra dosyamızın temel içeriği şunun gibi:

/ * Eklenti Adı: FlipBook Gallery Açıklama: Flipbook galerileri için bir kısa kod oluşturun. Sürüm: 1.0 Yazar: Web Geliri Blog Lisansı: GPL2 * /

Oldukça basit, ha? Bu dosyayı oluşturduktan sonra eklentinizi WP admin> Eklentiler altındaki listede görürsünüz ve onu etkinleştirebilirsiniz (ancak bu içeriği dosyanızda bulundurursanız, sitenizi çok değiştirmezsiniz).

Arama komutları

Şimdi burada bazı önemli dış varlıkları dahil etmeliyiz. Temel işlevsellik için gerekli harici dosyalar:

  • jQuery (1.9 +)
  • Turn.js komut dosyası
  • Temel stili çevir

Komut dosyasını ve stil etiketlerini eklemeniz durumunda, bazı sorunlarınız olacaktır. Örneğin, çift jQuery çağrısı muhtemelen sitenizi bozar. Ayrıca WordPress'in kendisi bu öğeleri oluşturduğunuzu “bilmeyecektir”, bu yüzden farklı bir eklenti tekrar turn.js'yi çağırırsa veya farklı bir stilse sitenizi bozarsa.

Bu yüzden her zaman wp_enqueue_script ve wp_enqueue_style işlevlerini kullanmalıyız. İşte temel kullanım:

plugin_scripts () işlevi {wp_enqueue_script ('jquery'); wp_enqueue_script ('dönüş', plugins_url ('js / turn.js', __FILE__), dizi ('jquery'), '1.3', yanlış); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), yanlış, '1.3', 'tümü'); }

3'teki harici öğeleri farklı yollardan arıyoruz, işte burada:

  • Var olan bir öğeyi arama: jQuery - WordPress'in bu betiği zaten yüklediğinden emin olduğumuzda çok fazla parametre göndermemize gerek yok, sadece ona “Dude, bu betik burada olmalı. iş"
  • Yeni bir komut dosyası oluşturma - ad, dosya konumu, gerekli öğeler (bu durumda jQuery gerektirir), sürüm ve altbilgi veya üstbilgide yüklenmişse (false = başlık, true = altbilgi) bazı öznitelikleri geçmeniz gerekir.
  • Yeni bir stil oluşturma - Bir öncekiyle aynı olan, son öznitelikte küçük bir farkla, bu tarzın hangi medya türünü yazdığını belirtir.

Dış komutları çağırırken dikkate almanız gereken önemli şeylerden biri, bu eklentiye bağlı olacak daha fazla kod varsa. Temelde, dosyanızın üstbilgi veya altbilgi içinde çağrılacağını tanımlar.

Bizim örneğimizde, galeriyi yalnızca HTML oluşturulduğunda ve vücudun içine eklenecek şekilde ayarlamak için bazı ek komutlarımız var. Bu yüzden bu betiği kafaya eklemeliyiz, aksi takdirde kodumuz “dönüş” fonksiyonu henüz yok ise.

Bu güzel koddan sonra, WordPress'e bunları komut dosyası olarak yüklemesini söylememiz gerekiyor, “wp_enqueue_scripts” eylemi bunu yapacak:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Kısa kod

Kısa kodu oluşturmak için eylem ile başlayalım. Oldukça basit, sadece kısa kod tetikleyicisini ve çalıştırılacak işlevi eklemeniz gerekiyor:

add_shortcode ( "flip_book", "create_flip_book");

Şimdi işlevimizi yaratmalı ve özniteliklerimizi almalıyız. Ancak, bazı özellikler isteğe bağlı olabilir, bu da onlar için varsayılan değerler oluşturmamız gerektiği anlamına gelir. Eğer özniteliğin boş olup olmadığını test edersek çok şey yaratabiliriz, fakat bu, üçlü işlemin normalden daha iyi olduğu durumlardan biridir.

Üçlü işlemler, değişkenin değerinde doğrudan doğruya ifadelerdir. Bu yapı aşağıdaki gibidir:

$ variable = (CONDITION)? "DEĞER ŞARTI DOĞRU OLDUĞU": "DURUMUNDA YANLIŞ OLDUĞU MUHTEŞEM";

Onları faaliyetimizin ilk bölümünde hareket halinde görebilirsiniz.

function create_flip_book ($ attr) {// İşlenecek ID'lerin hazırlanması $ array ['ids'] = patlamak ("", $ attr ['ids']); // görüntüleme modu $ array ['display'] = boş ($ attr ['display'])? "single": $ attr ['display']; // standart değer // genişlik $ array ['width'] = boş ($ attr ['genişlik'])? 400: $ attr ['genişlik']; // height $ array ['height'] = boş ($ attr ['height'])? 300: $ attr ['yükseklik'];
    // HTML ve kodun geri kalanı buraya gider

O zaman HTML ve resimlerimiz için temel çağrıyı oluşturmamız gerekecek. Buradaki bir diğer önemli nokta, dergi stili kullanıyorsak boyutu ayarlamaktır (bir tane yerine 2 görüntüler alacağımız için genişlik 2x olmalıdır):

<? php if ($ dizi ['görüntüleme'] == "çift") {$ dizi ['genişlik'] = $ dizi ['genişlik'] * 2; } // HTML, JS ve Black Magic?> <Div id = "flipbook"> <? Php ($ i = 0; $ i <sizeof ($ array ['ids']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'dolu'); if ($ array ['display'] == "tek") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['ids'])?> </span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i?> / <) 1 +? echo "" .sizeof ($ array ['ids']); ?> </span> <? php}?> </div> <? php}?> </div> <script tipi = "metin / javascript"> jQuery ("# ​​flipbook"). dönüş ({width: < ? php echo $ array ['genişlik'];?>, yükseklik: <? php echo $ dizi ['yükseklik'];?>, autoCenter: true, görüntüleme: '<? php echo $ array [' display ']; ?> ', // tek sayfa veya çift sayfa ivme: true, gradyanlar:! jQuery.isTouch,}); </ Script>

Ne düşünüyorsunuz?

Artık bunu istediğiniz gibi ayarlayabilir ve değiştirebilirsiniz, daha fazla seçenek ekleyerek (daha fazla ilham almak için harika örneklerine bakın), sizin için neyin işe yaramadığını ayarlayarak veya diğer eklentilerle birleştirerek.

Biraz daha öğrenmek istediğin herhangi bir WordPress konseptin var mı? Belki öğrenmek istediğin bir şey var mı? Yorum yoluyla bize bildirin ve bunu gelecekteki bir gönderiye dahil etmekten memnuniyet duyarız!

Rochester Oliveira hakkında

Brasil, Itajubá (MG) 'dan bir web tasarımcısı ve girişimcisiyim. Karanlık konular hakkında yazmayı ve güzel şeyler yapmayı seviyorum.