WordPress'te Javascript: AJAX kullanım örneği

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çla ve AJAX sayesinde, düğme her etkinleştirildiğinde (bir ziyaretçi tarafından tıklandı), sayaç sayfayı yeniden yüklemeden artırır.

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:
• Kullanıcı eylemi nedeniyle bir AJAX çağrısı başlatın
• 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 pratiğe dökelim. İlk örneğimiz, başlığa tıkladığımızda bir makale için yorum sayısını içeren basit bir açılır pencere görüntüler. " 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 aktararak yapılırdı, ancak bunu yapmanın önerilen yolu "sıraya koyma" kullanmaktır. Unutmayın, size 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); }

Bir adım daha ileri gidecek enerjiniz olduğunu düşünüyorsanız, güzel bir resim bulun, 880 piksele 660 piksele kırpın ve çocuğun tema klasörüne yerleştirin, ardından 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ı " yirmi Onaltı Ve hiçbir şeyi değiştirmedik (henüz!), Site tam olarak temalı klasik bir temaya benzemeli " yirmi Onaltı '.

Bir düğme eklemek

Başlamak için, "butonu ekleyeceğiz" aşk unpeu göster! ". Bunu görüntülemek için harika bir yer, temalı makaleler için kenar çubuğunda olacaktır.

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 functions.php dosyamızda tanımlayarak değiştirebileceğimiz anlamına gelir. Bunun ilk adımı, tüm işlevi kopyalayıp kendi functions.php dosyamıza yapıştırmaktır:

function twentysixteen_entry_meta () {if ('post' === get_post_type ()) {$ author_avatar_size = apply_filters ('twentysixteen_author_avatar_size', 49); printf (' % 1 $ s % 2 $ s % 3 $ s ', get_avatar (get_the_author_meta ('user_email'), $ author_avatar_size), _x ('Yazar', 'Gönderi yazar adından önce kullanılır.', 'on altı on altı'), esc_url (get_author_posts_url (get_the_author_meta ('Kimlik'))), get_the_author ()); } eğer (in_array (get_post_type (), array ('post', 'ek'))) {twentysixteen_entry_date (); } $ biçim = get_post_format (); eğer (current_theme_supports ('post-formatlar', $ format)) {printf (' % 4 $ s % 1 $ s ', sprintf (' % s ', _x ('Format', 'Post formatından önce kullanılır.', ' yirmi altı on beş ')), esc_url (get_post_format_link ($ biçim)), get_post_format_string ($ biçim)); } eğer ('post' === get_post_type ()) {twentysixteen_entry_taxonomies (); } if (! is_singular () &&! post_password_required () && (comments_open () || get_comments_number ())) {echo ' '; comments_popup_link (sprintf (__ (' % s için bir yorum bırakın', ' on altı onik'), get_the_title ())); echo ' '; }}

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

$ aşk = get_post_meta (get_the_ID (), 'show_some_love', doğru); $ aşk = (boş ($ aşk))? 0: $ aşk; Eko ' '. $ aşk. ' ';

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

İlk satır, makalenin aldığı beğeni sayısını alır. Bazı durumlarda, diğer bir deyişle düğme henüz tıklanmadığında bu veriler mevcut olmayacaktır. Bu nedenle kullanıyoruz

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

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

Mevcut bu küçük ücretsiz resmi kullandım Bu linki. Aldığınız kodu aşağıdaki gibi resim kaynağına kopyalayıp 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>';

Ayrıca, düğmenin üzerine gelme efekti vermek için stil için biraz CSS kullandım. Düğme olup olmadığı çok açık değil, ancak basit testimiz 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ır" metnini içeren 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.

AJAX URL'si

Öncelikle veri göndermek için bir yere ihtiyacımız var. Verileri gönderdiğimiz konum verileri işleyecek ve aramayı cevaplayacaktır. WordPress, AJAX çağrılarını işlemek için yerleşik bir yere sahiptir ve bunu kullanabiliriz: admin-ajax.php "içeride" wp-admin ". Bu URL'yi komut dosyamıza ekleyemiyoruz ("ham" kodlamanın kullanılması kabul edilemez), O zaman bazı kurnaz WordPress kullanalım.

İşlevi wp_localize_script () Başlangıçta JavaScript dosyalarındaki dizeleri çevirmek için tasarlanmıştı ve bunu iyi yapıyordu. JavaScript dosyalarımıza değişkenler geçirmek 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-betikleri', 'ajaxTest', array ('ajax_url' => admin_url ('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 katmak" istediğimiz makaleyi tanımlamak için kullanacağımız). Bu, DOM'dan alınabilir. Aşağıdaki "Yirmi On Altı" temasında kullanılan yapıya bir göz atın:

Düğmemizin atalarından biri olarak bir "makale" vardır. Bu öğenin sınıfı vardır ve makalenin sayısal tanımlayıcısını içerir. Bu en zarif çözüm olmasa da kimliği oradan alabiliriz.

$ (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 eylem adında bir parametre göndermemizi gerektirir. Tüm eylemler admin-ajax'a gönderileceğinden, bu istekleri ayırt etmek için bir yola ihtiyacımız var, dolayısıyla bu parametrenin kullanılması.

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 kimliğini ve bir eylemi içeren. Bu nasıl görünmesi gerektiğidir.

(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ğimiz. Daha sonra bunları $ _POST ['eylem'] ve $ _POST ['post_id'] ile okuyabileceğiz.

Uygulama işleme

Normalde dosyayı düzenlemeniz gerekir " admin-ajax.php », Talep oraya gönderildiği için. Bu bir sistem dosyası, bu yüzden onu değiştirmeyeceğiz. WordPress, eylem parametresiyle köşeli parantez kullanarak AJAX isteklerini iletmenize izin verir. 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 "Oturumu kapatan kullanıcılar için çalışır, bir tanesi 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:

Başarı parametresi, AJAX çağrısı tamamlandığında çalışacak bir işlevdir. "Tebrikler!" Şeklinde basit bir uyarı göstereceğiz. Yeni hesap ”, sonunda cevabımız eklenmiştir.

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ı elde etmek için tek yapmamız gereken mevcut numarayı almak, bir 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 yapmamız gereken tek şey, numaranın doğrudan kullanıcı arayüzüne yansıtıldığından emin olmak.

Yanıtı kullanarak kullanıcı arayüzünde değişiklikler yapın

Bu bölüm kolay görünüyor (çünkü öyle), ancak genellikle bir araya getirilmesi en zor olanıdır. Şimdilik tek yapmamız gereken, mevcut sayıyı içeren öğeyi bulmak ve yanıtla içeriğini 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ırda, sayıyı içeren öğeyi değişken üzerinde saklıyorum $ sayı. 14 satırında, cevabı görüntülemek için yeni eleman olan bu elemanın metnini değiştiriyorum.

İşte bu, temel olarak bu yeni özelliği özel temanızda çalışırken görebilmelisiniz. Herhangi bir sorunuz varsa lütfen bize bildirin. Paylaşmak istediğiniz başka bir ipucunuz var mı? Bunu yorumlar bölümünde yapın.