WordPress Hook'larının Gücünden Yararlanın: Eylemler ve Filtreler Açıklaması

Yayınlanan: 2022-07-22

Herhangi bir CMS gibi, WordPress de her zaman her ihtiyacınızı hemen karşılamayacaktır. Açık kaynak olduğundan, onu iş gereksinimlerinize uygun hale getirmek için hackleyebilirsiniz - ancak bunun yerine, hedeflerinize ulaşmak için WordPress'in kancalarını kullanabilirsiniz. Kancalarla oluşturmak, WordPress geliştiricilerinin akla gelebilecek hemen hemen her web sitesi özelliğini oluşturmasına izin veren kazanan bir stratejidir.

WordPress Kancaları: Eylemler ve Filtreler

WordPress kancaları yalnızca güçlü özelleştirme araçları değil, WordPress bileşenlerinin birbirleriyle nasıl etkileşime girdiğidir. Bağlanmış işlevler, bir sayfaya stiller veya komut dosyaları eklemek veya altbilgi metnini HTML öğeleriyle çevrelemek gibi WordPress'in parçası ve parseli olduğunu düşündüğümüz rutin görevlerin çoğunu yönetir. WordPress Core'un kod tabanında yapılan bir arama, 700'den fazla konumda binlerce kancayı ortaya çıkarır. WordPress temaları ve eklentileri daha da fazla kanca içerir.

Kancalara atlamadan ve eylem kancaları ile filtre kancaları arasındaki farkı keşfetmeden önce, WordPress'in mimarisinde nereye oturduklarını anlayalım.

WordPress Altyapısı

WordPress'in modüler öğeleri birbiriyle kolayca bütünleşir, böylece kolayca karıştırabilir, eşleştirebilir ve birleştirebiliriz:

  1. WordPress Core: WordPress'in çalışması için gereken dosyalardır. WordPress Core, genelleştirilmiş mimari, WP Yönetici panosu, veritabanı sorguları, güvenlik ve daha fazlasını sağlar. WordPress Core PHP ile yazılmıştır ve bir MySQL veritabanı kullanır.
  2. Tema (veya Ana Tema): Tema, bir web sitesinin temel düzenini ve tasarımını tanımlar. PHP, HTML, JavaScript ve CSS dosyaları tarafından desteklenen bir tema, bir tarayıcıda oluşturulan HTML kodunu oluşturmak için WordPress MySQL veritabanını okuyarak çalışır. Bir temadaki kancalar, örneğin stil sayfaları, komut dosyaları, yazı tipleri veya özel gönderi türleri ekleyebilir.
  3. Alt Tema: Ana temaların sağladığı temel düzen ve tasarıma ince ayar yapmak için kendimiz alt temalar oluşturuyoruz. Alt temalar, devralınan özellikleri değiştirmek veya gönderi türleri eklemek veya kaldırmak için stil sayfaları ve komut dosyaları tanımlayabilir. Alt tema yönergeleri her zaman ana temanın yönergelerinin yerine geçer.
  4. Eklenti(ler): WordPress'in arka uç işlevselliğini genişletmek için binlerce üçüncü taraf eklenti arasından seçim yapabiliriz. Bir eklentideki kancalar, örneğin, bir gönderi yayınlandığında bize e-posta ile bildirimde bulunabilir veya yasaklı dil içeren kullanıcı tarafından gönderilen yorumları gizleyebilir.
  5. Özel Eklenti(ler): Bir üçüncü taraf eklentisi iş ihtiyaçlarını tam olarak karşılamadığında, PHP'de özel bir eklenti yazarak onu turboşarj edebiliriz. Veya sıfırdan yeni bir eklenti yazabiliriz. Her iki durumda da mevcut işlevselliği genişletmek için kanca(lar) ekleriz.

Piramit, tabandan tepeye beş seviyeyi gösteriyor: (1) WordPress Çekirdeği, (2) Tema, (3) Alt Tema, (4) Eklentiler, (5) Özel Eklentiler.
WordPress Altyapı Hiyerarşisi

Beş katmanın hepsinin kaynağına erişimimiz olduğu göz önüne alındığında, WordPress'te neden kancalara ihtiyaç var?

Kod Güvenliği

Gelişen teknolojilere ayak uydurmak için WordPress Core, ana temalar ve eklentilere katkıda bulunanlar, güvenlik açıklarını azaltmak, hataları düzeltmek, uyumsuzlukları gidermek veya yeni özellikler sunmak için sık sık güncellemeler yayınlar. Acil durum deneyimine sahip herhangi bir danışmanın ilk elden bildiği gibi, WordPress bileşenlerini güncel tutmamak bir siteyi tehlikeye atabilir ve hatta devre dışı bırakabilir.

Yukarı akış WordPress bileşenlerinin yerel kopyalarını doğrudan değiştirirsek, bir sorunla karşılaşırız: Güncellemeler, özelleştirmelerimizin üzerine yazar. WordPress'i özelleştirirken bunu nasıl aşabiliriz? Kancalar aracılığıyla, alt temada ve özel eklentilerde.

Çocuk Temamızda Kodlama

Alt tema, yüklü temamızın görünümünü ve verdiği hissi özelleştirebileceğimiz güvenli bir alandır. Buraya eklenen herhangi bir kod, bir güncelleme tarafından üzerine yazılma riski olmaksızın üst öğedeki karşılaştırılabilir kodu geçersiz kılar.

Bir alt tema etkinleştirildiğinde, devre dışı bırakılmış bir ebeveyne bağlanır, ebeveynin güncellemelerinden etkilenmeden kalırken ebeveynin özelliklerini devralır ve sergiler. Bir temayı değiştirmenin cazibesine kapılmamak için en iyi uygulamalar, kurulumumuzun bir parçası olarak bir alt temanın etkinleştirilmesini önerir.

Özel Eklenti(ler) Yazma

Bir eklenti etkinleştirildiğinde, functions.php dosyası sunucudaki her çağrıda yürütülür. WordPress, sırayla, tüm aktif eklentilerden kancaları önceliklerine göre yükler ve sıralar ve bunları sırayla yürütür. Üçüncü taraf bir eklentinin işlevselliğini genişletmek için kendi WordPress özel eklentimizi yazabiliriz.

Kancalarımızı WordPress'te Nereye Yerleştirebiliriz?

Hedef Örnek Neresi?
Alt Tema PHP Özel Eklenti PHP
Bir web sayfasının yapısını değiştirmek için Web sitesi öğelerinin renklerini ve yazı tiplerini değiştirmek için özel bir stil sayfası ekleme
Başka bir eklentinin işlevselliğini değiştirmek (yani, üçüncü taraf bir eklentinin işlevselliğini geliştirmek için bir eklenti oluşturmak) Özel gönderi türlerine alt başlık (ör. "Haberler") ekleme
WordPress Core'un ötesine geçen yeni bir özellik eklemek için Bir gönderi ziyaret edildiğinde gerçekleşen iş akışını, veritabanındaki bir sayacı güncellemeyi içerecek şekilde değiştirme

Dalış Öncesi Hazırlık: Tanımlar

Terimleri birbirine karıştırmamak için bu terminolojiye bağlı kalacağız:

  • Kanca , WordPress'te işlevlerin çalışmak üzere kaydedildiği tatlı bir noktadır. İşlevlerimizi WordPress ve bileşenlerindeki birçok kancadan birine bağlayabilir veya kendimizinkini oluşturabiliriz.
    • Bir eylem kancası eylemleri çalıştırır.
    • Bir filtre kancası filtreleri çalıştırır.
  • Bağlanmış bir işlev , bir WordPress kanca konumuna "bağladığımız" özel bir PHP geri çağırma işlevidir. Hangi türün kullanılacağı, kancanın işlevin dışındaki değişikliklere izin vermesinin amaçlanıp amaçlanmadığına bağlıdır - örneğin, doğrudan web sayfası çıktısına ekleme, bir veritabanını değiştirme veya bir e-posta gönderme. Bunlar yan etkiler olarak bilinir.
    • Bir filtre (veya filtre işlevi ), yalnızca üzerinde çalışarak ve ardından kendisine iletilen verilerin değiştirilmiş bir kopyasını döndürerek yan etkilerden kaçınmalıdır.
    • Bir eylem (veya eylem işlevi ), aksine, yan etkilere neden olmayı amaçlar. Dönüş değeri yoktur.

Uyumlu kancalarla eşleştirilmiş işlevleri gösteren diyagram. Filtre kancalarının kendilerine bağlı filtre işlevleri vardır ve eylem kancalarının kendilerine bağlı eylem işlevleri vardır.
WordPress kancaları birden fazla geri arama işlevine sahip olabilir, ancak tüm geri arama işlevlerinin kayıtlı oldukları kanca türüyle eşleşmesi gerekir.

Bu ayrımları göz önünde bulundurarak, kancaları keşfetmeye başlayabiliriz.

Soyutlama ve Temiz Kod

Gerektiğinde bir eylem veya filtre bir kancaya dahil edildiğinde, görev başına yalnızca bir işlev yazma ve bir proje içinde kodun yinelenmesinden kaçınma amaçlarını yerine getiririz. Örneğin, temamızdaki üç sayfa şablonuna (arşiv, tek sayfa ve özel gönderi) aynı stil sayfasını eklemek istediğimizi varsayalım. Ana şablondaki her şablonu geçersiz kılmak, sonra her birini alt temamızda yeniden oluşturmak, ardından ayrı başlık bölümlerine stil sayfaları eklemek yerine, tek bir işlevde kod yazabilir ve onu wp_head kancasıyla ekleyebiliriz.

Düşünceli İsimlendirme

Bir alt temayı veya özel eklenti kancalarını benzersiz bir şekilde adlandırarak çakışmaları proaktif olarak önleyin. Tek bir sitede aynı adlı kancalara sahip olmak, istenmeyen kod davranışı için bir reçetedir. En iyi uygulamalar, kancamızın adını benzersiz, kısa bir önekle (örneğin, yazarın, projenin veya şirketin baş harfleri) ve ardından açıklayıcı bir kanca adıyla başlamamızı önerir. Örneğin, Tahir'in Muhteşem Eklentisi projesi için “proje baş harfleri artı kanca adı” kalıbını kullanarak, kancalarımızı tfp-upload-document veya tfp-create-post-news .

Eşzamanlı Geliştirme ve Hata Ayıklama

Tek bir kanca, birden fazla eylemi veya filtreyi tetikleyebilir. Örneğin, sayfanın ön ucundaki <head> bölümünde HTML yazdırmak için wp_head eylem kancasını kullanan (örneğin, bir <style> veya <script> bölümü) birden çok komut dosyası içeren bir web sayfası yazabiliriz.

Böylece, birkaç eklenti geliştiricisi, tek bir eklenti üzerinde paralel olarak birden fazla hedef ilerletebilir veya eklentiyi birden çok, daha basit bireysel eklentilere bölebilir. Bir özellik düzgün çalışmıyorsa, tüm projeyi aramak zorunda kalmadan doğrudan bağlı işlevini araştırabilir ve hatalarını ayıklayabiliriz.

Hareketler

WordPress'te bir olay meydana geldiğinde bir eylem kodu çalıştırır. Eylemler aşağıdaki gibi işlemleri gerçekleştirebilir:

  • Veri oluşturma.
  • Veri okuma.
  • Verileri değiştirme.
  • Veriler siliniyor.
  • Oturum açmış kullanıcıların izinlerinin kaydedilmesi.
  • Konumları takip etmek ve bunları veritabanında saklamak.

Eylemlerin tetiklenebileceği olay örnekleri şunları içerir:

  • init , WordPress yüklendikten sonra ancak çıkış akışına başlık göndermeden önce.
  • save_post , bir gönderi kaydedildiğinde.
  • wp_create_nav_menu , bir gezinme menüsü başarıyla oluşturulduktan hemen sonra.

Bir eylem, veri iletmek için bir API ile etkileşime girebilir (örneğin, sosyal medyadaki bir gönderiye bağlantı), ancak veriyi çağıran kancaya döndürmez.

Sitemizdeki tüm yeni gönderilerin sosyal medya üzerinden paylaşımını otomatikleştirmek istediğimizi varsayalım. Bir gönderi yayınlandığında tetiklenebilecek bir kanca için WordPress belgelerine bakarak başlayın.

Kancamızı bulmanın kestirme yolu yoktur: Olası adayları bulmak için deneyim yoluyla öğrenir veya listelenen eylemleri incelerdik. save_post bir aday olarak kabul edebiliriz, ancak tek bir düzenleme oturumu sırasında birden çok kez tetikleneceği için bunu hemen ekarte edebiliriz. Daha iyi bir seçim, yalnızca bir gönderi durumu değiştirildiğinde (örneğin, draft publish , publish trash ) tetiklenen transition_post_status .

Transition_post_status ile gideceğiz, ancak eylemimizi yalnızca transition_post_status sonrası durumumuz publish çalışacak şekilde hassaslaştıracağız. Ayrıca, çeşitli sosyal medya platformlarının resmi belgelerini ve API'lerini takip ederek, gönderimizin içeriğini öne çıkan bir görselle birlikte entegre edebilir ve yayınlayabiliriz:

 <?php function publish_post_on_social_media ( $new_status = NULL, $old_status = NULL, $post_ID = NULL ) { if ( 'publish' == $new_status && 'publish' != $old_status ) { // build the logic to share on social media } } add_action( 'transition_post_status', 'publish_post_on_social_media', 10, 3 ); ?>

Artık eylem kancalarının nasıl kullanılacağını bildiğimize göre, özellikle CSS söz konusu olduğunda özellikle yararlı olan bir kanca var.

wp_enqueue_scripts ile Öncelikleri Belirleme

Başka bir yerden kaynaklanan aynı adlı sınıfların alt temamızın sınıfları tarafından geçersiz kılındığından emin olmak için, diğerlerinin tümü yüklendikten sonra, alt temamızın stil sayfasını en son eklemek istediğimizi varsayalım.

WordPress, stil sayfalarını varsayılan bir sırayla yükler:

  1. ana tema
  2. çocuk temalı
  3. Herhangi bir eklenti

Bu yapıda:

 add_action( string $hook_name, callable $callback, int $priority = 10, int $accepted_args = 1)

…eklenen eylemin priority değeri, yürütme sırasını belirler:

  • wp_enqueue_scripts (veya herhangi bir eylem) için varsayılan priority değeri “10”dur.
  • priority daha düşük bir sayıya sıfırlarsak bir işlev daha erken çalışır.
  • priority daha yüksek bir sayıya sıfırlarsak bir işlev daha sonra çalışır.

Alt temamızın stil sayfasını en son yüklemek için, WordPress temaları ve eklentileri tarafından yaygın olarak kullanılan bir eylem olan wp_enqueue_scripts kullanın. Yalnızca alt temamızın wp_enqueue_scripts eyleminin önceliğini "10" varsayılan değerinden daha yüksek bir sayıyla değiştirmemiz gerekiyor, diyelim ki "99":

 add_action( 'wp_enqueue_scripts', 'child_theme_styles', 99 );



Genel olarak, dönüş değerleri aramadığımızda eylemleri kullanırız. Verileri arama kancasına döndürmek için filtrelere bakmamız gerekir.

Filtreler

Bir filtre, bir tarayıcıda görüntülenmek üzere işlenmeden önce verileri değiştirmemize izin verir. Bu amaçla, bir filtre değişken(ler)i kabul eder, iletilen değeri/değerleri değiştirir ve daha sonraki işlemler için verileri döndürür.

WordPress, tarayıcılar için içerik hazırlamadan önce kayıtlı tüm filtreleri kontrol eder ve yürütür. Bu şekilde, verileri uygun şekilde tarayıcıya veya veritabanına göndermeden önce değiştirebiliriz.

Müşterilerimden biri, sattığı ürünleri müşterilerin sağladığı görsellerle damgalayarak kişiselleştiriyor. Bu istemci, e-ticareti yönetmek için WooCommerce eklentisini kullanır. WooCommerce, bu işlevi kutunun dışında desteklemez. Bu nedenle, müşterimin functions.php dosyasına iki bit kod ekledim:

  1. woocommerce_checkout_cart_item_quantity belgelerinde listelenen woocommerce_checkout_cart_item_quantity , müşterilerin ödeme yapmadan önce sepetlerine harici öğeler eklemesine olanak tanıyan bir filtre kancasıdır.
  2. my_customer_image_data_in_cart , WooCommerce bir alışveriş sepetini görüntülemek için hazırladığında woocommerce_checkout_cart_item_quantity tetiklemek için kendimiz yazacağımız ve kullanacağımız bir filtredir.

Aşağıdaki şablonu kullanarak filtremizi ekleyebilir ve sepetin varsayılan davranışını değiştirebiliriz:

 add_filter( 'woocommerce_checkout_cart_item_quantity', 'my_customer_image_data_in_cart', 1, 3 ); function my_customer_image_data_in_cart( $html, $cart_item, $cart_item_key ) { if ( !empty( $cart_item['images_data'] ) ) { // Store image // Get image URL // Modify $html } return $html; }

Eylemleri eklediğimiz gibi filtreler ekleriz. Filtreler, önceliklerin nasıl işlendiği de dahil olmak üzere eylemlere benzer şekilde çalışır. Filtreler ve eylemler arasındaki en büyük fark, bir eylemin çağrı kancasına veri döndürmemesi, ancak bir filtrenin vermesidir.

Özelleştirilmiş Hareket Kancaları ve Filtre Kancaları

Özel eylem kancaları yazmak, Wordpress Core'u genişletmez, yalnızca kendi kodumuz içinde yeni tetik noktaları oluşturur.

Özel Eylem Kancaları Oluşturma

Temamıza veya eklentimize özel bir kanca eklemek, diğer geliştiricilerin kod tabanımızı değiştirmeden işlevselliği genişletmesine olanak tanır. Özel bir kanca eklemek için, WordPress Çekirdek kod tabanının kullandığı tekniğin aynısını kullanın: İstenen tetik noktamızda, yeni do_action adıyla do_action'ı çağırırız, isteğe bağlı olarak geri aramalarımızın yararlı bulabileceği kadar çok argüman ekleriz:

 do_action( 'myorg_hello_action', $arg1, $arg2 );

Bu kod, özel kancamıza bağlı olan herhangi bir geri arama işlevini çalıştırır. Ad alanının global olduğuna dikkat edin, bu nedenle, daha önce önerildiği gibi, özel kanca adlarımıza kuruluşumuzun (ve muhtemelen projemizin de) adının kısaltılmış bir biçimiyle başlamak iyi bir fikir olacaktır, dolayısıyla myorg_ burada.

Artık myorg_hello_action 'u tanımladığımıza göre, geliştiriciler için daha önce yerleşik kancalar için ele aldığımızla aynı şekilde bağlantı kurabilir: Bir işlev tanımlayın, ardından add_action() çağırın.

Yeni bir kancayı tamamen dahili olarak kullanmak istemiyorsak - sonuçta kodumuzu yapılandırmanın yararlı bir yolu - kullanılabilirliğini aşağı yönde, ekibimizin diğer üyelerine veya eklentimizin harici kullanıcılarına net belgeler aracılığıyla iletmemiz gerekecek. .

Özel Filtre Kancaları Oluşturma

WordPress'in özel filtre kancaları için kalıbı, eylem kancalarınınkiyle aynıdır, ancak apply_filters() yerine do_action() olarak adlandırırız.

Bu sefer daha somut bir örnek üzerinden gidelim. Eklentimizin normalde dört öğeden oluşan bir kenar çubuğu menüsü oluşturduğunu varsayalım. Biz (ve alt geliştiriciler) bu öğe listesini başka bir yerde değiştirebilmemiz için özel bir filtre kancası ekleyeceğiz:

 // Text labels of sidebar menu $sidebar_menu = array( "Page One", "Page Two", "Page Three", "Page Four" ); $sidebar_menu = apply_filters( 'myorg_sidebar_menu', $sidebar_menu );

İşte bu—özel filtre myorg_sidebar_menu artık daha sonra veya bunun içinde başka bir yere yüklenebilecek bir eklentide kullanıma hazır. Bu, aşağı akış kodu yazan herkesin kenar çubuğumuzu özelleştirmesine olanak tanır.

Yerleşik bir WordPress kancası kullanırken biz veya diğer geliştiriciler aynı kalıbı takip edeceğiz. Başka bir deyişle, geçirilen verilerin değiştirilmiş bir sürümünü döndüren bazı geri çağırma işlevlerini tanımlayarak başlayacağız:

 function lowercase_sidebar_menu( $menu ) { $menu = array_map( 'strtolower', $menu ); return $menu; } function add_donate_item( $menu ) { $menu = array_push( $menu, 'Donate' ); return $menu; }

Daha önceki örneklerimizde olduğu gibi, artık filtre geri çağırma işlevlerimizi özel kancamıza bağlamaya hazırız:

 add_filter( 'myorg_sidebar_menu', 'add_donate_item', 100 ); add_filter( 'myorg_sidebar_menu', 'lowercase_sidebar_menu' );

Bununla, iki örnek geri arama işlevimizi özel filtre kancamıza bağladık. Her ikisi de şimdi $the_sidebar_menu orijinal içeriğini değiştirir. add_donate_item öğesine daha yüksek bir priority değeri verdiğimiz için, daha sonra, lowercase_sidebar_menu add_donate_item yürütüldükten sonra çalışır.

Bu bölümde açıklanan filtre işlevlerinin sonuçlarını gösteren üç panel. Panel 1, filtreye bağlı bir geri arama olmadığı için kenar çubuğunu gösterir. Panel 2, kenar çubuğunu, dört öğe adının tümü küçük harfle, filtreye bağlı küçük harf_sidebar_menu geri çağrısı gibi gösterir. Panel 3 kenar çubuğunu, donate_button geri araması da filtreye bağlıymış gibi gösterir --- Panel 2'deki aynı küçük harf öğeleri artı başlıkta bırakılan beşinci öğe "Bağış".

Aşağı akış geliştiricileri, myorg_sidebar_menu daha fazla geri arama işlevi bağlamakta her zaman özgürdür. Yaptıkları gibi, kancalarını iki örnek geri arama işlevimizden önce, sonra veya arasında çalıştırmak için priority parametresini kullanabilirler.

Eylemler ve Filtrelerle Sınır Gökyüzünde

Eylemler, filtreler ve kancalarla WordPress işlevselliği sıçramalar ve sınırlarla büyüyebilir. Kendi katkılarımızı WordPress kadar genişletilebilir bırakarak sitemiz için özel özellikler geliştirebiliriz. Kancalar, WordPress sitemizi bir sonraki seviyeye taşırken güvenlik ve en iyi uygulamalara bağlı kalmamızı sağlar.

Toptal Engineering Blog, uzmanlığı, beta testi ve bu makalenin teknik incelemesi için Fahad Murtaza'ya şükranlarını sunar.