WordPress javascript: AJAX kullanıyorsanız

Ajax veya Asynchronous JavaScript ve XML, sunucu tarafı komut dosyalarıyla iletişim kurmak için kullanılır ve sayfayı yeniden yüklemek zorunda kalmadan dinamik içerik yüklemenizi sağlar.

Örneğin, yerel bir yardım için bir web sitesi oluşturduğunuzu ve olumlu bir atmosferi teşvik etmek istediğinizi söyleyin. "Etiketli bir düğme ekleyebilirsinizbiraz sevgi göster! »Ana sayfadaki bir sayaç ile ve AJAX sayesinde, düğme her kullanımda (bir ziyaretçi tarafından tıklandı), sayaç sayfayı yeniden yüklemeden artırır.

Bu, bu eğitimde oluşturacağımız örnek budur.

Bu eğitici yazıda, AJAX'in ne olduğu, nasıl kullanılabileceği ve WordPress'te müthiş özelliklerin nasıl oluşturulacağı hakkında daha fazla bilgi edineceksiniz.

Başlayalım.

AJAX'ın temelleri

• AJAX beslemesi genellikle aşağıdaki adımları izler:
• çünkü kullanıcı eyleminin bir AJAX arama başlatmak
• Alma ve sunucuda isteği işlemek
• Cevabı yakalayın ve gerekli tüm işlemleri JavaScript ile yapın
• Yeni bir tema ortamı kurma

Bunu WordPress'te uygulamaya koyalım. İlk örneğimiz, başlığa tıkladığımızda bir makalenin yorum sayısını içeren basit bir açılır pencereyi gösterir. "Temayı temel alan bir çocuk teması kullanacağız" yirmi Onaltı WordPress'ten.

İşte yapmanız gerekenler:

WordPress kurulumunuzdaki Temalar dizininde yeni bir klasör oluşturun " wp-content Ve "ajax-test" olarak adlandırın, iki dosyayı oluşturun WordPress tarafından gerekli, yani " functions.php "," Styles.css "ve" script.js "adlı yeni bir dosya ekleyin. Aşağıdaki kodu CSS stil sayfanızın başlığına ekleyin (style.css).

/ * Tema Adı: Ajax Test Tema Tema URI: http://premium.wpmudev.com Açıklama: Daniel Pataki Yazar URI: http://danielpataki.com Şablon: twentysixteen Versiyon: 1.0.0 Lisans bilgimiz AJAX Yazar test etmek için bir tema GNU Genel Kamu Lisansı veya sonrası v2 Lisans URI: http://www.gnu.org/licenses/gpl-2.0.html * /

Ana temanın stil sayfası, alt tema tarafından yüklenmelidir. Geçmişte, bu CSS dosyasını alt temaya içe aktarmak suretiyle yapıldı, ancak bunu yapmak için önerilen yöntem "sıkma" kullanmaktır. Unutmayın, bu özelliği nasıl kullanacağınızı gösterdik.

iki üst stil sayfasını ve JavaScript dosyası doğrudan ekleyelim:

ADD_ACTION ( 'wp_enqueue_scripts', 'ajax_test_scripts'); ajax_test_scripts function () {wp_enqueue_style (ebeveyn-style, get_template_directory_uri () '/style.css.'); wp_enqueue_script (. 'ajax-test-scriptin get_stylesheet_directory_uri ()' /scripts.js ', array (' jquery '), 1.0.0', true); }

Biraz daha ileri gitmek için enerjiniz olduğunu düşünüyorsanız, güzel bir resim bulun, 880px ile 660px'e kırpın ve çocuğun temasının klasörüne koyun, sonra yeniden adlandırın screenshot.png ". Temayı etkinleştirmek istediğinizde Görünüm bölümünde görünecektir.

Çocuğun bu teması dayanmaktadır " yirmi Onaltı Ve hiçbir şeyi değiştirmedik (henüz!), Site tam olarak temalı klasik bir temaya benzemeli " yirmi Onaltı '.

Bir düğmeye ekleme

Başlamak için, "butonu ekleyeceğiz" aşk unpeu göster! ". Görüntülemek için harika bir yer, kenar çubuğu temalı makalelerde olacak.

Bazı araştırmalardan sonra, kenar çubuğunun "adlı bir işlev tarafından yaratıldığı ortaya çıktı. twentysixteen_entry_meta () »Hangi dizinde bulunur« inc / template-tags.php '.

Bu işlev " bağlanabilir Bu, onu kendi fonksiyonlarımızda tanımlayarak değiştirebileceğimiz anlamına gelir. İlk adım, tüm işlevi kopyalayıp kendi işlevlerimizin içine kopyalamaktır.

twentysixteen_entry_meta fonksiyonu () {halinde ( 'post' === get_post_type ()) {$ author_avatar_size = apply_filters ( 'twentysixteen_author_avatar_size' 49); printf ( '<span class = "imzası"> <span class = "author vcard">% 1 $ s <span class = "ekran okuyucu-text">% 2 $ s </ span> <a class = "url fn n "href =" % 3 $ s ">% 4 </a> $ s </ span> </ span> 'get_avatar (get_the_author_meta (' user_email), $ author_avatar_size), _x ( 'Yazar' ' . sonrası yazar adına '' twentysixteen), esc_url (get_author_posts_url (get_the_author_meta ( 'kimlik'))), get_the_author ()) önce kullanılmış; } Eğer (in_array (get_post_type (), dizi ( 'post', 'bağlanma'))) {twentysixteen_entry_date (); } $ Get_post_format biçimi = (); (Current_theme_supports (post formatları '$ dosya)) {printf (' <span class = "giriş boyutu">% s <a href="%1$s"> $ 2 3,% $ s </ a ise > </ span> 'sprintf'i (' <span class = "ekran okuyucu-text">% s </ span> '_x (' Biçim '' post formatlamadan önce kullanılır. '' twentysixteen ')), esc_url (get_post_format_link ($ dosya)) get_post_format_string ($ dosya)); } Eğer (post '=== get_post_type ()) {twentysixteen_entry_taxonomies (); } {Echo '<span class = "comments-link">' (is_singular () && post_password_required () && (comments_open () || get_comments_number ())!); comments_popup_link (sprintf (__ ( 'boş Yorum <span class = "ekran okuyucu-text">% s </ span> ile', 'twentysixteen), get_the_title ())); echo '</ span>'; }}

Anahtarımızı tüm meta verilerin altına ekleyelim:

$ Get_post_meta seviyorum = (get_the_ID (), 'show_some_love', true); Aşk = $ (boş ($ aşk))? 0: $ aşk; '<Span class = "love-renkli"> <img width = "28" src = ""> <span class = "sayı">' yankı. $ Aşk. </ Span> </ span> ';

Bütün bu kodu açıklayın:

İlk satır, makalenin aldığı aşk sayısını alır. Bazı durumlarda, bu veriler mevcut değil, yani henüz düğmeye basmadığınızda. Bu nedenle kullanıyoruz.

Değer boşsa, değeri 0 olarak ayarlamak için koddaki ikinci satır.

Üçüncü satır, görüntü içeren bir açıklıktan ve aşkların sayısından oluşan düğmeyi sunar. Görüntünün kaynağını boş bıraktım çünkü orada bir SVG kullanmak istiyorum. Bir görüntü çizgisi oluşturmak için SVG kodlu bir base64 kullanabilirsiniz. Bu isteklerinizi yapmaktan kurtarır ve web sitenizi daha verimli hale getirir.

Kullanılabilir bu küçük ücretsiz resim kullandım Bu linki. Kopyala ve böyle kaynak görüntüde aldığınız kodu yapıştırın:

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

Ben de bir hover etkisi vermek için düğmenin stili için bazı CSS kullandım. Bir düğme olduğu çok açık değil, ancak basit bir test için olacak.

.love düğmeli img {margin-right: 6px; opaklık: 0.7; İmleç: işaretçi; } .love düğmeli img: vurgulu {opaklık: 1; }

Bir eylemi tetiklemek

Sonunda JavaScript'imize geldik! Öğemizi hedeflemeli ve üzerine bir tıklama saptamalıyız. İşte nasıl yapılacağı:

(function ($) {$ (document) .on ('click', '.love-button img', function () {alert ("aşk paylaşılıyor");})}) (jQuery);

Bu noktada düğmeyi tıklarsanız, "Aşk paylaşılıyor" metinli bir JavaScript uyarısı görmelisiniz. "

Veri gereksinimleri

Bu metin yerine, bir AJAX çağrısını tetiklememiz gerekir. Kodumuzu yazmadan önce ne göndermemiz gerektiğini anlayacağız.

URL AJAX

Öncelikle veri gönderecek bir yere ihtiyacımız var. Verileri gönderdiğimiz yer, verileri işle ve aramayı cevapla. WordPress, kullanabileceğimiz AJAX çağrılarını işlemek için yerleşik bir konuma sahiptir: dosya " admin-ajax.php İçeride " wp-admin ". Bu URL'yi komut dosyasına ekleyemiyoruz ("ham" kodlamanın kullanılması kabul edilemez), O zaman bazı kurnaz WordPress kullanalım.

İşlevi wp_localize_script () Başlangıçta dizeleri iyi bir şekilde JavaScript dosyalarına çevirmek isteniyordu. Değişkenleri JavaScript dosyalarımıza iletmek için de kullanabiliriz, bu durumda AJAX dosyamızın URL'si. Aşağıdaki kodu dosyamıza ekleyin fonksiyonlar Aşağıdaki gibi:

wp_localize_script ( 'ajax-test-komut dosyaları', 'ajaxTest', array ( 'ajax_url' => ADMIN_URL adresini ( 'admin-ajax.php')));

Bu son nesnenin sonucu, özellikler olarak son parametrede belirli bir diziyi içerecek olan ajaxTest olarak adlandırılacaktır. Değeri girmek için kullanabiliriz ajaxTest.ajax_url JavaScript kodu.

Makalenin tanıtıcısı

Makalenin tanımlayıcısı olarak rasgele veriler göndereceğiz ("biraz sevgi eklemek" istediğimiz makaleyi tanımlamak için kullanacağız). Bu DOM'dan kurtarılabilir. Aşağıdaki Yirmi Onaltı temasında kullanılan yapıya bir göz atın:

Düğmemizin atalarından biri olarak bir "makalesi" var. Bu eleman sınıfa sahiptir ve makalenin sayısal tanımlayıcısını içerir. Bu en şık çözüm olmasa da, kimliği oradan girebiliriz.

$ (Belge) .sistem ({var = parseInt Post_id ($ (this)) (, 'img .love düğmeli' 'klik' fonksiyonu .parents ( 'article.post:first'). Attr ( 'id') .Kapağı (post ', '')); console.log (id)})

eylem

WordPress ayrıca action adında bir parametre göndermemizi gerektirir. Tüm eylemler admin-ajax'a gönderileceğinden, bu sorguları ayırt etmek için bir yönteme ihtiyacımız var, bu nedenle bu parametrenin kullanımı.

Bir AJAX isteği gönderme

Artık her şeyi bir araya getirebiliriz. "İçin bir AJAX çağrısı oluşturmamız gerekiyor." wp-admin / admin-ajax.php Makale numarası ve bir eylem içeren. İşte olması gerektiği gibi.

(Fonksiyon ($) {$ (document) .sistem ( 'img .love düğmeli' 'klik' function () {var = parseInt Post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') ( ' 'sonrası'') değiştirin); $ .ajax ({url: ajaxTest.ajax_url tipi 'sonrası', veriler: {eylemi: 'add_love' POST_ID: Post_id} başarı: fonksiyonu (yanıt)})})}) (jQuery) {uyarı (+ yanıt başarı, yeni sayısıdır ')};

$ .ajax (), bir sürü parametre alan işlevdir. URL, şu anda bizim dosyamız olan hedefi içeriyor ajax-url.php ". Türü "olarak ayarlanır Facebook post Bir form tarafından gönderilen herhangi bir isteği beğen. Data parametresi içeren bir nesnedir " anahtar değeri Sunucuya göndermek istediğimizi. Daha sonra, onları $ _POST ['action'] ve $ _POST ['post_id'] ile okuyabiliriz.

Uygulama işleme

Normalde dosyayı düzenlemeniz gerekir " admin-ajax.php Çünkü istek oraya gönderildi. Bu bir sistem dosyası, o yüzden değiştirmeyeceğiz. WordPress, action parametresiyle köşeli parantez kullanarak AJAX sorguları göndermenizi sağlar. Model aşağıdaki gibidir:

İşleminizi adlandırdıysanız add_love "Adlı bir kancaya bir işlev eklemelisiniz wp_ajax_add_love Ve / veya wp_ajax_nopriv_add_love ". Eylemler NoPriv Bağlantısı kesilmiş kullanıcılar için çalışıyor, yalnızca oturum açmış kullanıcılar için tetiklenir. Bizim durumumuzda ikisini de kullanmak istiyoruz. Hızlı bir test olarak, varsayılan bir dönüş değeri belirleyeceğiz:

Success parametresi, AJAX araması tamamlandığında çalıştırılacak olan bir işlevdir. "Bravo!" U gösteren basit bir uyarı göstereceğiz. Yeni hesap "cevabımızın sonuna eklendi.

ADD_ACTION ( 'wp_ajax_add_love 'ajax_test_add_love'); ADD_ACTION ( 'wp_ajax_nopriv_add_love 'ajax_test_add_love'); ajax_test_add_love fonksiyonu () {4 yankı; () Bir kalıp; }

Biz fonksiyonumuzu her iki brakete de ekledik, bir tanesi bitti kaçırmak 4 ve sonra "işlevini kullandı ) (Kalıp ". Bu WordPress'te gereklidir, aksi takdirde her cevabın sonunda bir 0 alırsınız. Şimdi düğmesine tıklarsanız aşağıdakileri görmelisiniz:

Gerçek "beğeni" sayısını almak için tek yapmamız gereken geçerli sayıyı almak, birer birer arttırmak, veritabanına kaydetmek ve yeni numarayı görüntülemek.

ajax_test_add_love fonksiyonu () {$ aşkın = get_post_meta ($ _POST [ 'Post_id'] 'show_some_love' doğru); Aşk = $ (boş ($ aşk))? 0: $ aşk; $ Aşk ++; update_post_meta ($ _ POST [ 'Post_id'], 'show_some_love' aşk $); $ Aşkı echo; () Bir kalıp; }

Şimdi düğmeye tıklarsanız, açılan pencerenin görüntülendiğini görmelisiniz "1". Sayfayı yeniliyorsanız, görüntülenen yeni numarayı görmelisiniz. Düğmeye tekrar tıklamak bunu yapacaktır. 2 ". Şimdi tek yapmamız gereken, numaranın doğrudan kullanıcı arayüzüne yansıdığından emin olmak.

Cevabı kullanarak kullanıcı arayüzündeki değişiklikleri yapın

Bu bölüm kolay görünüyor (çünkü öyle), ancak genellikle kurmak en zor olanıdır. Şimdilik tek yapmamız gereken, geçerli numarayı içeren öğeyi bulmak ve içeriğini yanıtla değiştirmek.

(Fonksiyon ($) {$ (document) .sistem (, 'img .love-düğmesini' 'klik' function () {var = parseInt post_id ($ (this) .parents ( 'article.post:first'). . attr ( 'id') '); var $ numarası = $ (this) .parent () (bulabilirsiniz. (', 'post' ') yerine numara') $ .ajax ({url :. ajaxTest.ajax_url, Tür: 'post', veriler: {eylem: 'add_love' post_id: post_id,}, başarı: function (response) {$ number.Text (tepki);}})})}) (jQuery);

Önceki JS kodumuza sadece iki satır ekledim. 5 satırında, sayıyı içeren öğeyi değişkende saklarım $ sayı. 14 satırında, cevabı görüntülemek için yeni eleman olan bu elemanın metnini değiştiriyorum.

Hepsi bu kadar, prensipte bu yeni özelliği özel temanızda çalışırken görebilmelisiniz. Bir sorunla karşılaşırsanız, bize bildirmekten çekinmeyin. Paylaşmak istediğiniz başka bir ipucunuz var mı? Yorumlar bölümünde yapın.