WordPress için Basit SSS Eklentisi Nasıl Oluşturulur

Yazan makale:
  • WordPress
  • Güncelleme: Şubat 09, 2017

Daha önce gördük bloglama ipuçları ve araçları. Peki, bugün blogunuz için iyi bir araç yaratmayı öğreneceğiz - bir SSS sayfası eklentisi. Ancak en önemli şey, yalnızca eklentinin kendisi değil, bu ilkeyle yapabileceklerinizdir. Her türlü veriyi WP sitenizde nasıl saklayacağınızı ve siteniz için özel bileşenler yaratarak dış kütüphanelerle (jQuery UI gibi) nasıl entegre edeceğinizi öğreneceksiniz. Başlayalım!

Fikir, Demo ve İndirme

gösteri

Bizim amacımız, bir çok şey için kullanılabilecek bir eklenti yaratmaktır, ancak SSS sayfaları için oldukça iyi uyuyor.

Ama bunun dışında bizim ana başarımız WordPress'in anlaşılması özel posta türleri, kısa kodlar, harici JS / jQuery eklentisi ile etkileşimler. Bu fikirle, orada bulabileceğiniz diğer çılgın eklentilere dayanarak bir çok şey yaratabilirsiniz, bu sizin için sadece başlangıç ​​noktası, sevgili Padawan.

So Burada jQuery API demosunu bulabilirsiniz Kullanacağımız bileşen için - ama gerçekten harika şeyler, o bileşeni (PHP) oluşturmak için kullanılan koddur.

Ah, ve elbette buradan indirmek için eklenti dosyaları Ayrıca, WP sitenize de yükleyebilirsiniz.

Isınma - Eklenti dosyası ve Özel Mesaj Türü

Öncelikle, verilerimizi saklamak için özel bir posta türü oluşturmamız gerekiyor.

Özel Gönderi Türleri, WP'nin büyüsünün büyük bir parçasıdır, WP'nin işlevleri kullanılarak çağrılıp manipüle edilebilmesi için yeni bir veri türü (benzeri yazılar, sayfalar, ekler ..) yaratmanıza izin verir. Bu yeni başlayanlar için basit görünebilir, ancak yalnızca eski zamanlardaki PHP programcıları (bu hala bir şey mi?) DB'nizdeki verileri bağlamanın ve depolamanın ne kadar zor olduğunu bilir. Dinamik olarak yeni veri türleri oluşturmasına izin vermeyin, bu incedir ancak kodumuzda büyük bir esneklik sağlar.

Bunun bizim için bir eklentiye ihtiyacımız var, ama muhtemelen bu kavramı zaten biliyorsunuz. Eklentiler, WordPress için Lego blokları gibidir, mevcut işlevleri kolayca takılabilir (duh!) Ya da isterseniz takılı olmayan bir kod kullanarak ekler veya dönüştürür.

WP'nin tanıdığı bir şekilde bir eklenti oluşturmak için 2 şeylerine ihtiyacınız vardır:

  1. Wp içeriğinizin / eklentinizin / içeriğinizin içinde bir dosya oluşturun
  2. Bu dosyanın başına meta veriler ekleyin, böylece WP bunun hakkında ne olduğunu anlayabilir

Dosya adının benzersiz olması gerektiğini unutmayın, böylece birisi eklentinizi yüklediğinde (kendiniz bile) mevcut eklentilerle çakışma olmayacaktır. Daha iyi bir organizasyon için bizim durumumuzda faq-whsr ismiyle yeni bir klasör ekleyeceğiz ve bunun içinde faq-whsr.php adında bir dosya ekleyeceğiz.

Şimdi metada için, eklenti dosyanızın başına bu gibi bir şey eklemeniz yeterlidir (<? Php'den hemen sonra):

meta_01

Demek ki:

  • Eklenti Adı: wp-admin> eklenti arayüzünüzde gösterilecek güzel isim
  • Eklenti URI: Eklenti sayfanıza bir link eklemek istiyorsanız (dokümanlar, örnekler, satış sayfası)
  • Açıklama: Bu, wp-admin> plugins arayüzünüzde gösterilen küçük paragraftır. Kullanıcıların ne için olduğunu hatırlayabilmesi için bunu basit tutun
  • Yazar / Yazar URI: Eklentiyi oluşturan kişi / şirket ve krediler için bağlantı
  • Lisans: Böylece kullanıcılar eklentinizle neler yapabileceklerini / yapamadıklarını bilecekler

01-eklentisi oluşturulan

Tamam, şimdi eklentimizi oluşturduk, alakalı meta veriler ekledik. Eklenti dosyanızı kaydettiğiniz anda onu wp-admin arayüzünde görebilmelisiniz

Etkinleştirelim ve ne olacağını görelim.

Bekle, hiçbir şey? Bu iyi bir şey, eğer bir şey yanlış olsaydı, şimdi bir hata göreceksin. Şimdi özel yazı tipi oluşturmaya geçelim.

Bizim örneğimizde CPT SSS öğesidir, ancak kitaplar, videolar, referanslar vb. Burada akılda tutulması gereken önemli nokta şudur: işlev isimleri benzersiz olmalıdır. Şimdi benimle tekrarla: işlev adları benzersiz olmalı, işlev adları benzersiz olmalı. Anladım? İyi, bu, OOP'u kullanana kadar (belki de bir sonraki derste) size çok fazla sorun çıkaracaktır.

Sihirbaz şu kodla yapılır:

cpt

Ve ilgili parçaların anlamı budur:

  • $ tags - wp-admin alanınızın farklı bölümleri için etiketlere ve metne sahip bir dizidir. Bu yüzden WP, ürünlerimizi aramak için doğru yolu bilecek
  • destekler - bu, wp-admin> FAQ> yeni ekranda ne görebileceğinizi gösterir. Bizim durumumuzda, başlık, editör (ana içerik kutusu), yazar, revizyonlar ve özel alanlar (isteyebileceğiniz takdirde) olacak.
  • taksonomiler - burada WP'ye hangi taksonomilere izin verildiğini (kategoriler, etiketler veya özel taksonomi) bildirirsiniz
  • register_post_type ('faq_whsr', $ args) - bu WP’ye söyler “Hey, $ args argümanlarını kullanarak faq_whsr olarak ID ile yeni bir özel yazı tipi oluştur”.

admin-sss

Kaydet ve nefesini tut. Şimdi ana wp-admin menüsünüzde yeni bir bölüm görmelisiniz

Bekle, bu mu? Evet. Bu snippet, tüm CPT işlevselliğini oluşturur. Bu kadar iyi bulamazsanız, bir sonraki bölümde daha soğuk olmasını bekleyin.

Wp-admin'den ayrılmadan önce, bazı kukla veriler ekleyin (en az 2 kategorisine sahip birkaç SSS).

Ön Uç - WP x jQuery etkileşimi

Şimdi sonunda bir eylem görmenin zamanı geldi ve kullanacağız jQuery UI Akordeon elemanı Bunun için.

jQuery UI jQuery'nin kendisi ile hemen hemen aynı avantajlara sahiptir:

  • Üzerinde çalışan çok sayıda geliştirici var
  • Çapraz tarayıcı ve mobil kullanıma hazır kod
  • İyi belgelenmiş
  • WP ile iyi oynuyor (WP'nin kendisi kullanıyor)

Şimdi soru şu: Nasıl diyoruz?

Buna 2 yaklaşımları vardır:

  1. Wp_head sayfanızdaki kötü niyetli <script> / <style> etiketleri
  2. Güzel wp_enqueue

Bugün yanlış bir yaklaşımla fazla zaman kaybetmeyeceğiz, ama en iyisi WP'ye söylemek. “Hey dostum, kodumuzun bir noktasında jQuery UI'ye ihtiyacımız var, lütfen sayfaya ekleyin”. Bu şekilde WP, başka bir dosyayı zaten dahil edip etmediğini kontrol edebilir veya farklı bir versiyonunu dahil edebilir ve çoğaltılmış kütüphanelerle çok fazla sorun yaşamaz. Tamam, bu güzel sohbeti nasıl kod haline getirebiliriz?

Enqueue işlevini kullanarak:

enqueue_02

Kısa kod

Ve şimdi wp-admin'e geri döndük. SSS öğelerini aldık ve kütüphaneyi istediğimiz gibi şekillendirmek için başka bir şey yok, başka neler eksik? Şey, eşyaları aramamız gerek!

Bunun için birçok seçeneğimiz var, ancak bu vaka için en kolayı bir kısa kod oluşturmak. Kısa kod, içerik alanınıza eklediğiniz bir şeydir (sayfalar, mesajlar, CPT'ler için…) ve WP, üzerinde çalışacak bir işlev arar. 2 tipi kısa kod vardır:

  1. [self-enclosing] - Etiketleri <hr /> veya <br /> gibi bu tür bir kısa kod sadece bir noktada bir işlevi çağırır - bu bizim adam
  2. [Sarma] İçerik [/ sar] - Bu, <p> </ p> veya <div> </ div> etiketlerine benzer ve aslında içeriğini değiştirebilir veya içeriği argüman olarak kullanabilir.

O zaman nasıl çalıştığını görelim. Wp-admin'inizde yeni bir sayfa oluşturun ve bu kodu buraya ekleyin:

[Sss-whsr]

Bu sayfayı kaydedin ve ziyaret edin ve neler olduğunu görün…

Şaka yapıyorum, doğru bir şey yapmayacak mı? Şey, çünkü bunun için henüz bir işlev oluşturmadık.

Bunu eklenti dosyanıza ekleyin:

shortcode_02

Şimdi sayfanızı yenileyin ve çok güzel bir şeyin gerçekleşeceğine söz veriyorum.

Havalı değil mi? Şimdi koşuyor ve gökyüzünün sizin için sınır olduğunu görebilirsiniz. Bu kod sadece WP'ye [faq-whsr] olarak adlandırılan bir kısa kod olduğunu ve WP'nin bulması durumunda, WP'nin sayfanın bu noktasında bir işlev çalıştırması gerektiğini söyler.

Bizim durumumuzda, oluşturulacak jQuery UI paneli için bu yapıya ulaşmamız gerekecek:

api_02

Ve bunun için bir WP Sorgusu, SSS öğelerini ve içeriklerini yükleyin. Kısa kod işlevini bununla değiştirin:

shortcode-basic_02

Tamam, şimdi SSS öğeleriniz aranacak. Yaptığımız şey, özel yazı türümüzü aramak için wp_query'yi çağırmak ve ardından kısa kod dönüşüne geçirmek, böylece WP istenen yapıyı izleyerek hepsini gösterecek.

Güzel ama bir şeyler eksik değil mi? Peki ya orada bazı seçenekler? Peki, bir kısa kod için seçenekler ekleyebiliriz, kısa kodumuzda birkaç WP_Query argümanının nasıl oluşturulduğunu görelim:

shortcode-final_02

Bu şekilde aşağıdaki argümanları kullanarak öğeleri arayabilirsiniz (istediğiniz kadar birleştirebilirsiniz):

  • cat - category ID (dizi olarak çoklu eklenen) [faq-whsr cat = 1]
  • category_name - kategori adı [faq-whsr category_name = ”food”]
  • sipariş - ASC veya DESC (DESC varsayılan) [faq-whsr sırası = ”ASC”]
  • orderby - öğeleri sipariş etmek için kriterleri değiştirin [faq-whsr orderby = ”title”]
  • posts_per_page - yüklenen öğelerin sayısını değiştir [faq-whsr posts_per_page = 5]

Ama dediğim gibi, gökyüzü arkadaşım için sınırdır. Uygulayabileceğiniz ve kullanabileceğiniz WP_Query için birkaç seçenek vardır:

  • Yazar
  • Kategori (not_in ile hariç tutulan seçenekleri ekleme)
  • Arama yapın (kullanıcılara arama yapabilmeleri için harika)
  • Özel Alan (SSS öğeleri, bunları belirli özel alanlara ve değerlere sahip öğeler yüklemek için kullanabilirsiniz)

Şimdi senin sıran

Görebildiğin gibi, bu sadece senin için bir başlangıç ​​noktası. Hepimiz bu basit eklentiyi geliştirmek için birçok güzel şey öğrenebiliriz, burada daha derinlere inmeniz için birkaç öneri:

  • Duyarlı Tasarım
  • Widget oluşturma
  • Eklenti kancaları etkinleştirir / devre dışı bırakır
  • Uluslararasılaşma
  • OOP
  • Sadece gerekli olduğunda (belirli sayfalar için)

Düşüncelerinizi yorumlarda bırakmayı unutmayın! Ve işte sizin için zorlu görevimiz: Kısa kod için “varsayılan öğe” seçeneğini uygulamanız mümkün mü (yani sayfa yüklendiğinde başka bir öğe açık olacak, bu ilk değil)? Nasıl yapardın?

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.