WordPress’teki formların teslimatının yönetici post ve admin-ajax ile işlenmesi
WordPress, başvurunuzda form gönderme ile çalışmanız için olağanüstü bir destek sağlar. İster yönetici veya genel alanda bir form ekleyin, yönetici post betiği ve admin-ajax ile varsayılan mekanizma, form talebini verimli bir şekilde ele almanıza izin verir. Bu makalede, WordPress API’sını kullanarak özel formların gönderilmesini nasıl ele alacağınızı göstereceğim. Bir eklentinin yönetici alanına özel bir form ekleme, HTML ve AJAX isteği aracılığıyla formların verilmesini ve Form Denetleyicisini PHP’de yazma sürecinde size rehberlik edeceğim. giriyor.
WordPress yöneticisi alanında kalacak olsam da, aynı kavram halka karşı karşıya olan alanlardaki formlarla çalışırken geçerlidir. Eklentiler için nesne yönelimli programlama yapısını da kullanacağım; Ancak, aynı sonuçları prosedür kodu kullanarak da elde edebilirsiniz. Makaleyi takip etmek için egzersiz eklentileri buradan indirilebilir. Not: Bu makale orta düzey WordPress geliştiricileri için tasarlanmıştır. Bu, HTML, JavaScript, JQuery, PHP ve WordPress eklentisi API hakkında bilgiye sahip olduğunuzu varsayar. Yenilemek istiyorsanız, aşağıdakileri okumanızı öneririm:
Yeni başlayanlar için WordPress’in geliştirilmesi: Başlangıç
Yeni Başlayanlar İçin WordPress Geliştirme: Bir Eklenti Oluşturma
WordPress Geliştiricileri için JavaScript: Ajax kullanma
Daha fazla WordPress’in geliştirilmesi: Nesne Odaklı Programlamaya Giriş
İlk olarak normal formlar talebini ele almak için varsayılan WordPress mekanizmasını anlayarak başlayalım. Admin-POSC ile formların verilmesi. Bu form oluşturma açısından farklı değildir. İhtiyacınız olan tek şey ‘bağlanmak’ ve özel formlar eklemek için doğru kanca. Özel formları işlemek için kancalar dinamiktir, yani kancanın adı size bağlıdır. Formunuzla ilgili gönderimi işlemek için aşağıda gösterildiği gibi daha iyi kontrole ihtiyacınız vardır:
WordPress formlarının admin-post.php ile teslimatı
girilen kullanıcı için admin_post _ {$ action}
Günlük girmeyen kullanıcılar için admin_post_nopriv _ {$ action}
Burada $ eylem, formda devam eden eylemin adıdır.
Daha sonra, PHP formlarının işlenmesini tetiklenen kancaya bağlamak için Add_action kullanabilirsiniz;Beklediğiniz gibi, adına bakılmaksızın, admin-post.php, yayın işleyebilir ve yönetici ve admin olmayan uygulamalar için istek ve istekler alabilir.Bunu özel bir eklenti yardımıyla keşfedelim.Buradaki amacımın nesne yönelimli eklenti yapısı, Ajax ile ve Ajax ile WordPress’te özel formların işlenmesinin arkasında olan her şeyi anlamanıza yardımcı olmaktır.Bu makale için, takip etmek için buradan indirebileceğiniz özel bir eklenti hazırladım.Uygun düzenleyiciye açmanızı ve yalnızca yerel WordPress ayarlarına yüklemenizi öneririm.
Eklentiler, Boilerplate eklentilerinin yardımıyla nesne yönelimli programlama uygulamalarını kullanarak oluşturdum. Kazan plakasının başlangıç noktası, WordPress eklentisi el kitabında listelenen en iyi uygulamalar arasındadır. Eklentiniz boyunca tutarlılık sağlamanın ve standart kodlar yazmak için çok zaman kazanmanın iyi bir yoludur. Bir dönem boyunca, nihayetinde kodlama tercihinize göre kendi özel kaynağı plakanızı bile yazabilirsiniz. Ben de öyle yaptım. Bu eklenti, orijinal WordPress Bolarplate eklenti projesinin çatalı olan kendi eklenti şablonuma dayanmaktadır. Bu, orijinal projeye birçok açıdan benzer, ancak aynı zamanda ADI Alan ve otomatik yükleme için de desteğe sahiptir. Bu şekilde, her sınıf veya işlev için benzersiz bir önek yapmam gerekmiyor ve pek çok kişi ile bitmiyor ve ifadeler gerektiriyor. Ancak, eklentim için gereken minimum PHP sürümü 5.6.0’dır. Eklentinin arka uçta düzenlenmesi budur:
Inc/Core/* – Eklentinin temel işlevselliği
Inc/Admin/* – Yönetici alanı ile ilgili işlevsellik
Inc/ön uç/* – Halkın baktığı alanla ilişkili işlevsellik
Inc./Common/* – Yönetici ve ön uç arasında bölünmüş işlevsellik
Arka uçta eklenti yapısı
Bu eklenti, form sayfası için iki menü öğesi içeren bir üst düzey yönetici menüsü vardır. Eklentilerden Yönetici Menü Yapısı
Yönetici menüsü sayfasını nasıl eklediğimi görmek için, Inc/Core/class Init.php’deki define_admin_hooks () yöntemine ve inc/admin/class-admin.php eklentisindeki add_plugin_admin_menu () yöntemine bakın. Eklentinize yönetici sayfaları ekleme hakkında daha fazla bilgi edinmek istiyorsanız, burada bir WordPress Yönetici sayfası oluşturma makalemize bakın. Eklenti Yöneticisi sayfasına formlar ekle eklenti için “HTML Form” menü sayfasını eklediğimde, sayfa içeriğini yüklemek için bir arka çağrı da belirlemeliyim. Form eklenir.
Bununla birlikte, HTML’yi doğrudan HTML_Form_Page_Content yöntemine yazmak yerine, HTML formu için Inc/Admin/Görünümlerde bulunan başka bir dosya kısıts-html-form-view.php kullanıyorum ve aşağıda gösterildiği gibi geri çağrıda bulunuyorum:
NüansedSignstudio GIST/9361C83A07F8C6343A79A59BFBB09D41 yüklenmesi
Bu saf kodlama tercihidir. Bu, HTML’yi ayırarak kodumu okumamı sağlıyor ve eklenti sayfasındaki çıktı formundan farklı değil.
Eklenti yöneticisi sayfasında html formu
Yukarıda eklenen formun formunun, yapısının ve sunulmasının güvenliğini anlamak, mevcut WordPress kullanıcı damlalarının listesi ve kullanıcı girişi için iki metin alanına sahip bir seçme alanı vardır. Ancak, bu basit örneğin perde arkasında birçok şey var. Aşağıdaki form kodu oldukça açıktır, bu yüzden önemli öğeleri keşfedelim:
NüansedSignstudio GIST/48EBF27160BCC2A99E20CA0845B252E3 yüklenmesi Güvenlik Formu WordPress yönetici alanındaki formlarla uğraşırken hatırlanması gereken en önemli şey güvenliktir. Formlarınızı WordPress nonces ve current_user_can ($ özelliği) bir kombinasyonunu kullanarak sabitleyin. Örneğimde, IF (current_user_can (‘edit_user’)) ile formla girişimi sınırladım, yani form yalnızca gelen kullanıcı Edit_USERS yeteneğine sahipse yayınlanacaktır. Ayrıca wp_create_nonce () kullanarak özel bir nonce yaptım ve sonra gizli bir form olarak ekledim. Doğrudan eklemek için wp_nonce_field () kullanabilirsiniz. Bu, nonce’yi ayrıntılı olarak anlamak için iyi bir makale. Formun şekli, benzersizliği sağlamak için formun tüm öğelerini ad eklentisi ile başlattığım formu. Bu bir kez daha kişisel bir kodlama tercihidir, çünkü eminim sadece JavaScript aracılığıyla form öğelerimi hedefliyorum. Ayrıca, form doğrulamasını tarayıcıya bırakması için gereken bir öznitelik kullandım.
Yönetici formunu kontrol edin
Admin_url formunun (‘admin-post.php’) dağıtım formu, sabit kodlama URL’si yerine admin_url işlevi (‘admin-post.php’) kullanılarak admin-post.php’ye gerçekleştirilir. WordPress bir form aldığında, formu tetiklemek için eylem alanının değerini arayacaktır. Benim durumumda, bu admin_post_nds_form_response ile sonuçlanacaktır. Herkese açık görünüme açık bir sayfa ise, admin_post_nopriv_nds_form_response tetikleyecektir. Bu aşamada post istekleri için form işleyicisi, bir form gönderirseniz, admin-post.php olarak ayarlanan sayfa URL’si ile boş bir sayfaya yönlendirilirsiniz. Bunun nedeni, işleme istekleri için kontrolör kontrolü olmamasıdır. İstekleri işlemek için, DEFINE_ADMIN_HOOKS () Class-Init.php yöntemi için özel denetleyicimi the_form_respons kaydettim: $ this-> loader-> add_action (‘admin_post_nds_form_response’, ‘the_form_respons’); Prosedürel bir kod kullanırsanız, add_action (‘admin_post_nds_form_response’, ‘the_form_response’);
The_Form_Response (), SuperGlobal $ _POST veya $ _GET aracılığıyla form verilerine tam erişime sahip olduğum yerdir. Aşağıda gösterildiği gibi, kancanın beklendiği gibi çalışmasını sağlamak için fikrim için geri çağrıya kırılma noktası ekledim.
Xdebug ile form girişini kontrol edin Formların ve Sanitasyon Girişinin Doğrulanması Herhangi bir işlem yapmadan önce, nonce’yi doğrulamanız ve kullanıcı girişini doğru şekilde temizlemeniz gerekir. $ _Post değişkeninde bulunan kullanıcı girişini temizlemek için nonce’yi doğrulamak için WP_VIFIFY_NONCE işlevini ($ nonce_name, $ nonce_raction) kullanıyorum ve sendara_key () ve sendize_text_field () işlevlerini kullanıyorum. Nonce’nin doğrulaması başarısız olursa, kullanıcı WP_DIE () WordPress işlevini kullanarak bir sunucu yanıtı olarak bir hata mesajı alır. Not: Form verilerine $ _POST değişkenini kullanarak erişiyorum. GET yöntemini kullanarak bir form gönderirsem, global değişken $ _GET veya $ _Request kullanacağım. Yalnızca her şeyin çözüldüğünden emin olduğumda, seçilen kullanıcıya kullanıcının metasını eklemek gibi WordPress işlemlerini yapacağım. Giriş sanitasyonu hakkında daha fazla bilgi edinmek için, CODEX WordPress: Doğrulama Sanitasyonu ve Kullanıcı Verilerini Kaçışınızı Okumanızı öneririm. Sunucu çalışmasından sonra sunucu yanıtı göndererek sunucu yanıtını kullanıcıya geri göndermek önemlidir. Bunu yapmak için, önce kullanıcıyı geri bildirim sağlayan yönetici sayfasına veya sayfasına yönlendirmelisiniz. Kullanıcıyı eklenti sayfasına yönlendiriyorum ve sunucu geri bildirimini görüntülemek için WordPress Yönetici Bildirimlerini kullanıyorum. Örneğimdeki sunucu yanıtı, WordPress.Respons Server Yönetici Bildirimini formu işlemekten yalnızca $ _POST değişkenini görüntülemektedir.
Aşamalı iyileştirme Bu aşamada, WordPress eklentisi yönetici alanımda tamamen çalışan bir formum var. Bu güvenlidir ve giriş verilerinin temizlendiği ve son olarak sunucu yanıtı görünür olduğu formumun işlenmesine doğru gönderilir. Form, HTML5’i destekleyen tüm tarayıcılarda kutunun dışında çalışacaktır. Ancak AJAX desteği eklemek gibi kullanıcı deneyimini geliştirmek için yapabileceğim çok şey var. Yaklaşım Tüm tarayıcılarda mevcut olan temel kullanıcı deneyim seviyesini ayarlamak ve daha sonra tarayıcıya onu destekleyen daha fazla işlevsellik eklemek için Aşamalı Artış denir. Not: Kullanıcımın HTML5 desteğine sahip modern bir tarayıcı kullandığını varsayıyorum. Ancak, form eski tarayıcıda oluşturulması gerekiyorsa, gerekli alan için varsayılan HTML5 giriş doğrulaması hasar görür. Kullanabilir miyim, tarayıcı ve tarayıcı sürümünde bulunan web özelliklerini karşılaştırmak için kullanabileceğiniz harika bir web sitesidir. WordPress’teki WordPress Ajax’ta Ajax (Admin-ajax.php) ile formların teslimatı WP-Admin/Admin -jax.php aracılığıyla ele alınır. Aşağıda, WordPress’te AJAX aracılığıyla özel formların nasıl işlenebileceğine genel bir bakış: WordPress’te Ajax desteği ile formların teslimatı
Bunun, formun admin-post.php kullanılarak nasıl işlendiğine çok benzediğini göreceksiniz. WordPress Ajax isteği aldığında, verilen eylemlere göre iki kanca yapar:
girilen kullanıcı için wp_ajax _ {$ action} Günlük girmeyen kullanıcılar için wp_ajax_nopriv _ {$ action}
Burada $ eylem, devam eden eylemin adıdır. “Ajax Gönder” eklentisinden ikinci menü sayfası eklentisi formuna Ajax desteği eklenmesi Ajax isteği aracılığıyla gönderilen formu içerir. Menü sayfasına daha önce tartışıldığı gibi eklendi ve form içeriğini yüklemek için kısmi-ajax-form-view.php dosyasını kullanın. Bu dosyayı görürseniz, önceki formla neredeyse eşanlamlı olduğunu göreceksiniz, tek fark form kimliğinin ve başlığın öznitelik değeridir. Şimdi bir formu diğerinden tanımlayabilirim, ikinci formu sadece Ajax üzerinden JavaScript kullanarak işleyebilirim. Ajax desteği eklemek için aşağıdaki adımları attım: Jquery’yi yüklemek için JavaScript Dosyası JQuery Normal formları göndermeyi önlemek için kullanılan etkinlik işleyicisini gönderin
Yöneticiye bir form göndermek için jQuery.ajax () kullanın Not: Herhangi bir nedenle JavaScript tarayıcıda devre dışı bırakılırsa, JQuery veya Ajax da mevcut olmayacaktır, ancak form normal olarak gönderilecektir. Bunun nedeni, HTML formunda admin-post.php olarak gönderme URL’sini bıraktım. Ajax aracılığıyla form göndermek için kullandığım bu JavaScript’i yayınlamak için javascript ve jQuery kullanarak.
Nüansedesignstudio GIST/C1A29B1433FD4DB658FB41815055A3E6 yüklenmesi
event.preventDefault (); normal form göndermeyi gerçekten önleyen şeydir. Serialize () jQuery işlevini kullanarak form verilerini topluyorum, ancak bunu yapmanın başka birçok yolu var. Bunlardan biri HTML5 formdata arayüzünü kullanmaktır. Bu, bu makalenin kapsamı dışındadır, ancak kesinlikle görülmeye değer. Var ajax_form_data = $ (“#nds_add_user_meta_ajax_form”). Serialize (); Ayrıca seri verilere ek URL parametreleri ekledim, böylece daha sonra PHP formundaki Ajax ve sıradan istekler arasında ayrım yapabilirim. Ajax_form_data = ajax_form_data+’& ajaxRequest = true & gönder = gönder+form’; Genellikle, HTTP başlığı ile X-Terbiye Başlığı Ajax kütüphanesi tarafından otomatik olarak XMLHTTPRequest olarak düzenlenir. Bu, AJAX isteklerini tanımlamak için de kullanılabilir, ancak her zaman güvenilir değildir. JQuery’den Ajax () yöntemi sunucuya bir istek gönderecektir.
Admin-ajax.php’e gönderilecek bir form almak için, wp_localale_script kullanılarak PHP’den devam eden params.ajaxurl dizisini kullanıyorum. Not: Örneğimdeki form verileri, WordPress’in Ajax isteği için bir kanca üretmek için kullanacağı eylemi içerir. Aşağıdaki kancalar WordPress tarafından tetiklenecektir:
Giren kullanıcılar için wp_ajax_nds_form_response
Girmeyen kullanıcılar için wp_ajax_nopriv_nds_form_response
JavaScript dosyaları, aşağıdaki gibi class-admin.php’nin enqueue_scripts () yönteminde di-enqueed:
Nüansedesignstudio GIST/99A46C09D583A65C2D0554F781AB6B85
Global Ajaxurl değişkeni, PHP’den admin-ajax.php için URL’yi devam ettirmek yerine Global JavaScript JavaS Ajaxurl değişkenini de kullanabilirsiniz. Ancak, değişkenler yalnızca son yöneticiyle uğraşırken kullanılabilir ve AJAX ile ön uçla uğraşırken mevcut değildir. Sunucudan gelen yanıtlara bağlı olarak, Ajax Promise Geri Arama. Done () ve .Fail () buna göre çalıştırılacaktır. Örneğimde, başarılı bir istek için, HTML formumun bir parçası olan boş div kap #NDS_Form_Feedback’e bir yanıt ekledim. Son olarak, alan formun yeniden düzenlenmesi ile silinir. Ajax isteği için form işleyicisi de Ajax isteğine de aynı formu ekledim.
Ve işleyici formunda, normal ve ajax isteklerini ayırt etmek için JavaScript’te manuel olarak düzenlenmiş $ _Post [‘AjaxRequest’] kullanıyorum.
NüansedSignstudio/EC6FE7654FDFCB93C7AAA50041DF8EC03 yüklenmesi
Breakpoint kullanarak Ajax isteklerini doğrulama
İşte burada. Ajax ile yanıt, sayfa yeniden yüklenmeden veya aktarılmadan görüntülenir. JavaScript bir nedenden dolayı devre dışı bırakılırsa veya yüklenmezse, $ _Post [‘ajaxRequest’] geçerli olmaz ve form normal olarak belirli ajax’ı geçerek gönderilir ($ _Post [‘AjaxRequest’]) && $ _post [” AjaxRequest ‘] ===’ True ‘) blok kodu. Kullanıcı deneyimini geliştirmek için kesinlikle daha fazlasını yapabilirsiniz ve burada Ajax için JQuery API belgelerini okumanızı öneririm. Ek kaynaklarımız burada birçok şeyi tartıştı. Ajax oldukça geniş bir konudur ve çeşitli şekillerde uygulanır. WordPress’te Ajax kullanımının bazı örnekleri: Ajax ile dinamik WordPress yayınları içeriyor
Eklenti olmadan WordPress sitenizde PHP ile Ajax kullanın
Arama sonuçlarını yüklemek için WordPress’te Ajax nasıl kullanılır
Sitenizde özel bir form kullanıyor musunuz? Bize aşağıdaki yorumlarda anlatın.
Etiket:
Ajax
gelişim
