Kendi özel WordPress widget kodunuzu nasıl oluşturabilirsiniz?
WordPress web siteniz için hiç özel bir widget oluşturmak istediniz mi? WordPress, CSS ve JavaScript sabitlenmiş HTML’yi görüntülemek için kullanabileceğiniz varsayılan metin widget’ı içerse de, bundan daha fazlasını yapmak istiyorsanız, metin widget’ı kesmez. Web siteniz veritabanınızdan biraz içerik almak ve bir widget’ta görüntülemek istiyorsanız ne olur? Çözüm, özel bir yan widget kodu oluşturmaktır. Korkunç bir görev gibi görünse de, PHP temel becerileriniz olduğu sürece, elinizin altında olur.
Bu öğreticiyi takip edin ve iki farklı widget yapmayı öğreneceksiniz:
Widget başlıklarını, site başlıklarını ve site sloganlarını görüntüleyen basit widget.
Alfabeye göre sıralanan ve iki sütuna bölünmüş tüm kategorilerin bir listesini görüntüleyen biraz daha karmaşık bir widget.
Özel bir WordPress widget yapmanın temellerini öğrenmeye hazır mısınız? Haydi Yapalım şunu. WordPress widget’ınızı yapmanın temelleri bu öğreticiyi takip etmek için üç şeye ihtiyaç duyar:
WordPress geliştirme ortamı
Temel PHP kodlama becerileri
Temel WordPress Geliştirme Deneyimi
Gereken tek şey, bir WordPress sitesi grevini oluşturmak için yanlış olan bir virgül veya kayıp kıvırcık parantezdir ve programlamada nispeten yeni iseniz, bir talimat bulmaya çalıştığınızda siteniz birkaç dakika veya daha uzun süre aktif olmayabilir kod. Bu nedenle, doğrudan bir web sitesinde kullanmaya çalışmadan önce yerel bir geliştirme ortamını kullanarak widget işlevinizi gerçekten yapmalısınız.
Geçmişte birçok yerel geliştirme ortamı hakkında yazdık. Şahsen, XAMPP kullanıyorum ama herhangi bir LocalHost sunucusu bunu yapacak. Birini seçin ve çalıştırın. Hiç bir PHP hattı yazmadıysanız veya temel WordPress eklentilerini kodlamadıysanız, bu eğitim erişiminizin biraz ötesinde olabilir. Bununla birlikte, iyi haber şu ki, yeni başlayanlar için WordPress’in gelişimi hakkında dizimiz üzerinde çalışarak ya da resmi olarak Akademi’de gelecekteki kursları kaydederek bilmeniz gereken her şeyi öğrenebilirsiniz. Üç temel gereksinimi karşılıyorsanız, bir sapan kodu başlatmaya hazırsınız. Yapalım. Ama WordPress Widget
Codex WordPress’teki API widget’ı hakkında daha fazla bilgi bulacaksınız.
Birden fazla temalı veya birden fazla web sitesinde widget’ları kullanmak istiyorsanız kullanmanız gereken özel eklentiler.
Dosya Function.php Aktif temalardan – bir çocuk teması veya özel bir tema şeklinde olmalıdır.
Örneğin, GitHub’da bulunan bu öğreticide açıklanan basit yan çubuk widget’ı için eksiksiz bir kod bulabilirsiniz. Kodunuzu nereden yazacağınızdan emin değilseniz veya sadece kodu aynı anda görmek istiyorsanız, eklentinin bir kopyasını indirin.
WordPress widget küçük bir nesne yönelimli programlama ile yapılır. WP_WIDGET sınıfı her widget’ı yapmak için genişletilir. WP_WIDGET sınıfı neredeyse 20 farklı yöntem içerir. Ancak, temel widget’lar için sadece dördü kullanmanız gerekir:
__Construct () : Temel widget bilgilerinin kaydedilmesi.
Widget () : Çıkış widget’ı içerir – widget alanına widget eklendiğinde sitenizde gerçekten gördüğünüz, form () : WordPress yönetici alanında görüntülenen widget ayarlarını tanımlar.
Update () : Yeni ayarlar WordPress yönetici alanında saklandığında widget ayarlarını güncelleyin.
Bu dört yönteme ek olarak, Add_action işlevi özel widget işlevini widgets_init kancasına bağlamak için kullanılır.
Örnek widget #1: Widget başlığını, site başlığını ve sloganı görüntüler İlk yapılacak şey WP_WIDGET sınıfını şöyle genişletmektir:
Core 3807314FB047BC77970E6CE59ED08F68 içerir
Bu durumda, yeni widget işlevinin adı jpen_example_widget’tir. JPEN’in yalnızca eklentilerdeki, temalardaki veya diğer WordPress çekirdeklerindeki herhangi bir işlevle çatışmaları önlemek için tüm özel işlevlere eklediğim bir önek olduğunu unutmayın. Widget’ınız için uygun herhangi bir adı kullanabilir ve en iyi uygulamayı takip etmek istiyorsanız önek ekleyebilirsiniz. Yukarıdaki listede belirtilen dört yöntemi kullanarak işlevi yazacağız ve dördünü de widget işlevimizde yığacağız. Ardından, son adımda, bir widget kaydetmek için bir işlev yazacağız.
Yöntemi __Construct () yöntemiyle yazma işlemini başlatalım. Wp_widget :: __ construct () yöntemi __construct () yöntemi, widget için kimlik, başlık, sınıf adını ve açıklamayı belirlemek için kullanılır. İlk örnek widget’ımızı oluşturmak için yapıcı işlevinin görüntülenmesi:
Yükleme Çekirdek 9d87de61356585Feb6664814babd6995
Bu işlevi anlamak için, ebeveyn :: __ yapı () ile başlayan bir satırla başlayın. Bu çizgi, ‘Örnek-Widget’ ID, ‘Örnek Widget’ adı ve iki widget seçeneği ile yeni bir widget yapar: sınıf adları ve kısa açıklamalar. Bu kodların tümü JPEN_EXample_Widget’e dahil edilmiştir ve WordPress ile widget’ları kaydetmek ve daha sonra yönetici alanındaki widget’ın başlığını ve açıklamasını görüntülemek için kullanılır. Ön uç sitede görüntülenecek çıkış widget’ı. Widget () ‘nın yaptığı şey, widget’ınız tarafından görüntülenen gerçek içeriği üreten bir kod içerir. Widget () içeriği herhangi bir şey olabilir, ancak genellikle birkaç PHP içerecektir. Değilse, yalnızca WordPress’te metin widget’ını kullanacaksınız. Bizim durumumuzda, kullanıcılara özel widget başlığını görüntüleme seçeneği sunacağız. Bu yüzden başlığı almamız ve daha sonra başlığı ve blog sloganını görüntülemek için get_bloginfo () kullanmamız gerekiyor. Bunu yapmak için kullanacağımız kod aşağıdadır:
Çekirdek yükleme CDCE8F0D9F85F24A6585D5965A6E8B89
Bu işlevde, onu anlamak için zaman ayırmak istediğiniz bazı şeyler var: $ args []: Bu değişken, widget çıkışı yapılırken kullanılabilecek argümanlar içerir. $ Args’de yer alan değer, Sisi Bilah bölgesi kaydedildiğinde aktif bir tema ile düzenlenir.
$ örneği []: Bu değişken geçerli örnek widget’ıyla ilgili değerler içerir. Çubuğa iki kez bir widget eklerseniz, her $ örneğin widget’ın her örneği için özel bir değer kaydedilir.
Widget_title filtresi: Geçerli örnek Widget başlığını geri yükler.
get_bloginfo (): Site adları ve sloganlar dahil WordPress web siteleri hakkında her türlü meta veriyi geri yüklemek için kullanılabilecek işlevler ve site adları ve slogan.
Hemen hemen her widget’ın ‘önce_widget’, ‘After_widget’, ‘Önceden_title’ ve ‘After_title’ içermesi gerektiğini unutmayın. Her widget’ın tema için HTML etiketinde yuva yaptığından emin olmak için gereklidir. Tüm widget yöntemleri () jpen_example_widget’te yerleştirilmelidir. WPTPress Yönetici alanında görüntülenecek widget’a ayarları eklemek için wp_widget :: form () form yöntemi () kullanılır. Birçok seçenek içeren widget’lar bu bölümde oldukça karmaşık olacaktır. Ancak, örnek widget’ımız durumunda, tek yapmak istediğimiz kullanıcıların widget üzerinde özel başlıklar ayarlamasına izin vermektir. Yani işler oldukça basit.
E4f10b6e30c6f2e3f70a25f521f61d90’ın özünü içerir
Bu işlev, $ örnek parametresini çağırarak belirli bir örnek widget’ından geçerli değeri döndürür. Daha sonra, başlığın boş olup olmadığını görmek için geçerli örnek bilgilerini kontrol ederiz. Değilse, geçerli başlığı görüntüleriz. Ayrıca, paragraf etiketinde yuva olan etiketler ve giriş öğeleri, kullanıcının yeni bir başlık eklemesi için etiketlenmiş giriş düzlemini yapar. Bu küçük kod JPEN_EXample_Widget’e eklendiğinde, widget ayarları şöyle görünecektir:
Wp_widget :: update () Bir sonraki adım, Update () yöntemini kullanarak WordPress veritabanındaki bilgileri güncellemektir. Bu yöntem iki parametre gerektirir: $ new_instance ve $ Old_instance. Birincisi, widget ayarları formuna katma değeri içerir. İkincisi mevcut düzenlemeleri içerir – varsa. Update () yöntemi, uygun yeni ayarları doğrulamalı ve ardından $ örnek değişkenine ayarlamalı ve güncellenen değişkeni geri yüklemelidir. Oldukça karmaşık geliyorsa, aşağıdaki örnek birçok şeyi açıklamalıdır. D2EC67ED152A8F448C099F7B91Afdfdd
Örnek widget’ımız söz konusu olduğunda, tek yaptığımız başlığı güncellemektir. Yani tek yapmamız gereken:
Başlığı yeni örnekten alın,
Widget başlığında eklenmiş tüm HTML veya PHP etiketlerini silin,
Güncellenmiş örneği döndür.
Widget’ı Kayıt Bu işlemdeki son adım, add_ace ve hook widget_init işlevlerini kullanarak widget’ı kaydetmektir. İşte bunu nasıl yapacağınız:
471F590A1F8F5D3E4CBFCB9A999D184’ün özünü içerir
İlk olarak, bir widget kaydetme ve tanımlamak için widget nesnesinin adını kullanma işlevi yaparız. Ayrıca, kayıt işlevini widgets_init kait ve kayıt işlevimizin adını kullanarak WordPress’e bağlarız. Bu küçük kod JPen_example_widget’in dışına eklenir. Bu durumda uygun adlı bir widget, jpen_example_widget ile bir widget çizecek ve widget’ta bulunan tüm kodları çalıştıracaktır. Bu son küçük kodla, kenar çubuğuna widget’lar ekleyebilir, istediğiniz gibi yapılandırabilir ve sitemizin başlık ve sloganı bu şekilde görüntüleyebiliriz: Örnek Widget #2: Kategoriyi bir süre önce iki sütun halinde görüntüler Bir yazdım. Herhangi bir HTML5 şablonunu bir WordPress temasına nasıl değiştirebileceğinizi açıklayan öğretici. Ancak, öğreticide yapmadığım şey, şablona dahil edilen yan widget’lardan birini yeniden oluşturmaktı. Bu nedenle, ikinci widget’ımızın örneği, Bootstrap tarafından Start tarafından HTML5 Blog Gönderi şablonlarının kategorilerinin bir kenar çubuğu widget listesi olacaktır. Aşağıda orijinal HTML5 şablonundaki kenar çubuğu widget’ı görüntülenir:
Bu widget’ı yeniden yapmak, basit örnek widget’ımızdan biraz daha fazla kod gerektirir, ancak gerçeklik çok karmaşık değildir. Aslında, _construct (), form () ve update () işlevi temel olarak değişmedi. Bu widget ile önceki örneğimiz arasındaki tek gerçek fark, widget çıktı yönteminin () daha fazla kod içermesidir. Bunun nedeni, widget içeriği oluşturmak için, tüm kategorilerin bir listesini yapmamız, listeyi alfabetik sıraya sıralamamız ve daha sonra kategoriyi iki sütuna ayarlamamızdır. Bunu tamamlamanın çeşitli yolları olmasına rağmen, bu işi tamamlamanın bir yoludur. Yeni başlayanlar için bir widget işlevi () yaptım: Çekirdek 4e7ee87646bd6dc5927f2e00bb870591
Sonra birkaç değişken yaptım:
Yükleme Çekirdeği 4517AA5DE74A09F02838F3904F5C6016
Başlık ve kategori değişkenleri oldukça açıktır. Widget’ın başlığını tutarlar ve tüm kategorileri listelerler. $ CAT_COUNT değişkeni, bunları iki listeye ayırabilmemiz için toplam kategori sayısını izlemek için kullanılacaktır. Kategoriyi iki sütuna bölmek için iki sütun değişkeni, $ cat_col_one ve $ cat_col_two kullanılır. Sırada, tüm kategorileri tekrarlayan ve bunları iki sütuna ayıran bir işlevdir.
Core 1F9042C4F40A91805EFC6DB84324FBBB içerir Her kategori için $ cat_count ve $ category_link değişkenleri yapılır. Ardından, geçerli $ cat_count’a dayanarak – ya da tek ister – $ category_variable, birinci veya ikinci sütun değişkenine eklenir. Buna ek olarak, bu kod aynı zamanda her kategoriyi liste öğesine, orijinal şablonda kullanılan sınıfa ve HTML ile eşleşecek “liste ile çalıştırılmış” sınıfı ile netleştirdi. Son olarak, kategorilerin bir listesini oluşturmak için gerçekten $ cat_col_one ve $ cat_col_two yazdırmalıyız: Çekirdek 95DDDDDDD89BCA7B0ABB82864’ü içerir. Kod, her kategori sütun değişkenini tekrarlar ve her kategori listesini div’e yazdırır. Widget’a göre belirlenen sınıflar ve HTML yapıları, orijinal CSS kaynaklarına dahil edilen kuvvetin yeni widget’a doğru uygulandığından emin olmak için orijinal şablona dahil edilen sınıfı ve yapıyı yansıtır. Bu, bitirdikten sonra yan çubuk widget’ın görüntülenmesidir. Yukarıdaki resimdeki şablonun orijinal sürümüne tekrar bakarsanız, bunun mükemmel bir ortak olduğunu göreceksiniz!
Bu yan çubuk widget’ı yapan tam kodu görmek istiyorsanız, GitHub’daki basit blog temasından functions.php dosyasındaki wp_widget sınıfından jpen_category_list_list_widget örneğini arayın. Kendi özel widget’ınızı oluşturmak, oldukça karmaşık bir WP_WIDGET sınıfı ile çalışmayı içeren özel bir yan widget yapar. Biraz korkutucu görünse de, iyi haber şu ki, süreci beş adımda özetleyebilirsiniz:
Temel widget bilgilerini belirlemek için __Construct () kullanın.
Çıkış widget’ını belirlemek için bir widget () kullanın.
Yönetici Ayarları menüsü oluşturmak için form () kullanın.
Widget ayarlarını güncellemek için güncelleme () kullanın.
Widget nesnesini sağ kancaya bağlamak için add_action () kullanın. Özel bir widget yapmak oldukça karmaşık olsa da, güçlü bir özel widget yapmak için ustalaşmanız gereken nispeten dar bilgi vardır.Başınızı bu beş işlevin etrafına sarın ve hayal edebileceğiniz neredeyse tüm fikirleri bir WordPress widget’ına dönüştürebilirsiniz.
Özel bir widget yapma hakkında sorularınız mı var?Aşağıdaki yorumlar bölümünde çekin!
Etiket: gelişim
Kenar çubuğu
Araç
