Ajax ile dinamik olarak WordPress Post’u yükleme
Ajax son yıllarda ve iyi nedenlerle çok popüler hale geldi. Ajax (JavaScript ve XML Asenkron), sunucu ile bir “konuşma” yapmanın ve sonuçları yeniden bağlama sayfaları olmadan görüntülemenin bir yoludur. Bu teknik, “gibi” sayımları yenilememize, alışveriş sepetlerine ürün eklememize, dinamik formlar oluşturmamıza ve daha fazlasını – yeniden sevme sayfaları olmadan – daha fazlasını. Bu yazıda, temeli olarak varsayılan yirmi on beş temayı kullanarak Ajax ile bir yere nasıl bir gönderi yükleyeceğinizi göstereceğim. Ajax’ın neden kullanıldığını göreceğiz ve basit bir örnekle başlayarak Ajax yükleme işlevselliği yirmi on beşe oluşturmak.
Not: Sitenizde AJAX hazırlamaya çalışırken sorun yaşıyorsanız, yardımcı olabiliriz! Destek ekibimiz, herhangi bir WordPress probleminde size yardımcı olmak için 7/24 kullanılabilir (sadece kendi eklentimizle ilgili bir soru değil!), Bu nedenle Ajax ile ilgili sorunlar yaşıyor musunuz veya CSS’yi nasıl değiştireceğiniz konusunda tavsiye istiyorsunuz, bize ulaşın! Neden Ajax kullanıyorsunuz? WordPress, WordPress sitesinde yayınlamanın ilk sayfasını yüklediğinde, WordPress veritabanından sordu ve eklediğimiz işaretlemeyi kullanarak görüntülemek için bir döngü kullandı. Buna ek olarak, navigasyon menüleri, widget’ları, grafikler ve diğer medya, JavaScript dosyaları, stil sayfası ve diğer birçok şey yayınlanır.
Sayfa bölümündeki sayı bağlantısını hedefleyeceğiz. JavaScript’imizi destekleme İlk çağrı bağlantı noktamız bir JavaScript dosyası oluşturmak ve işlevimiz.php dosyamız aracılığıyla sıralamaktır. İçinde bir JS klasörü ve ajax-paination.js dosyası yaptım. Aynı şeyi yaptıktan sonra, işlev dosyanızı açın ve komut dosyasını zaten_enqueue_assets () işlevine ekleyin: 5CA270C7C9DDD18E57B4’ün çekirdeğini içerir
Enqueing konusunda kafanız karışmışsa, WordPress’e komut dosyaları ve stilleri ekleme hakkındaki makalemizi doğru şekilde okuyun. Kısacası, WordPress’e, nerede olduğunu (iki parametre) (iki parametre), önkoşullar (üç parametre), sayı sürümü (dört parametre) olarak adlandırmak istediğimizi söyledik ve yüklemek istiyoruz. Altbilgi (beş parametre). Stil sayfasını beklerken get_template_directory_uri () kullandığıma dikkat edin. Bu işlev her zaman ana tema dizini ifade eder. Komut dosyamızı beklerken get_stylesheet_directory_uri () kullandım. Bu, çocuk temasında kullanılırsa çocukların tema dizinini ifade eder. Komut dosyasını altbilgiye yüklediğimiz için Alert (‘Script Enqueed’) Ajax-Paination.js’e ekleyebilir ve çalışıp çalışmadığını kontrol etmek için sayfayı yeniden yükleyebilirsiniz. Öyleyse, metin doğru şekilde uyarılmalıdır. Bir sonraki görev etkinliğini oluşturmak, Ajax çağrılarını tetikleyecek bir olay oluşturmaktır. Bizim durumumuzda, etkinlik belirli bir bağlantıyı tıklamaktır. Bağlantıları hedeflemek için Element sınıfı ve çevresindeki kimlik hakkında biraz bilgi sahibi olmalıyız.
Chrome geliştirme araçlarından sayfalandırma için kaynak kodu. Bunun nasıl göründüğünü merak ederseniz, Mac’imde (Windows’ta S Hift + Control + C) SIFT + Command + C tuşlarına basın, imleci kontrol etmek ve tıklamak istediğim öğelere yönlendirin. Bu bana, sayfalandırma bağlantımızın bir sayfa numaralı sınıfı olduğunu, bir sonraki bağlantının da bir sonraki sınıfı olduğunu ve bunların NAV-Links sınıfı ile NAV öğesinde yer aldığını söylüyor. Burada görüntülenmeyen, sıradan sayfa numaralı sınıfın yanı sıra bir önceki sınıfı olan önceki bağlantıdır. Şimdilik, tüm bunlar için endişelenmeyin, sayfa konteynerindeki herhangi bir bağlantıyı hedef alalım. Bunun gibi basit bir uyarı yapabiliriz: 5CA270C7C9DDD18E57B4’ün çekirdeğini içeren
Her şeyin anonim işlevle sarıldığını unutmayın. Aynı şeyi yapmanızı öneririm. Bunun neden yardımcı olduğu hakkında bu Utas’a bakın. Bir tıklama programı hazırladım, etkinleştirilmenin varsayılan işlevini önleyin (yani sayfayı yükleme) ve birkaç metin uyardım. Ajax çağrıları yapmak, istemcinin yan verileri ile çalışmak yerine (önceden belirlenmiş metni uyarmak), sunucu tarafından bazı dinamik veriler almalıyız. Biraz hazırlık yapmalıyız. Bunun nedeni budur: Ajax’ın kullanması için çağrı URL’si vermeliyiz. JavaScript dosyaları çevremiz hakkında bilgimiz yok, bu yüzden orada get_stylesheet_directory_uri () gibi bir şey kullanamayız. Ancak, JavaScript’imize değişkenleri sürdürmek için yerelleştirme tekniğini kullanabiliriz. Şimdi işlev dosyamızda yapalım: 5CA270C7C9DDD18E57B4’ün çekirdeğini içerir
Bu kodu my_enqueue_asses () işlevine ekleyerek AjaxPaination nesnesini (parametre 2) tanımlayacağız. Nesne, üyelerini WP_LOCALICAL_SCRINK () işlevinde üçüncü parametre olarak sağlanan diziye göre kabul edecektir. Başka bir deyişle, bu kodu ekledikten sonra, URL’yi Ajax çağrılarını işlemek için kullandığımız admin-ajax.php olarak tanımlamak için ajaxpaination.ajaxurl kullanabilmeliyiz. Bu nedenle işlevler, lokalizasyon işlevinin JavaScript’imiz yüklenmeden önce bu nesnenin bir tanımını yayınlamasıdır. Bu şuna benziyor: 5CA270C7C9DDD18E57B4’ün çekirdeğini içeriyor
JavaScript dosyamıza geri dönersek, artık Ajax çağrılarını oluşturmak için ihtiyacımız olan her şeye sahibiz. İşte nasıl:
5CA270C7C9DDD18E57B4’ün çekirdeğini içerir
Gördüğünüz gibi, $ .ajax () işlevi burada kullandığımız şeydir. Gönderme yöntemi ve GET için özel bir işlev var, ancak esnekliği nedeniyle bu işlevi kullanmayı tercih ediyorum. JQuery belgelerindeki tüm parametreleri okuyabilirsiniz. URL parametresini kullanarak veri göndermek istediğimiz komut dosyası URL’sine devam ediyoruz. Bu, WP-Admin’de bulunabilen bir admin-ajax.php dosyası olmalıdır. Bunu yukarıda WP_LOCALICAL_SCRINK () işleviyle tanımlıyoruz.
Tür gönderiye ayarlanmıştır. GET’i de kullanabiliriz, kuyruğumuz çok hassas değil, ancak kullanıcıların parametreye erişmeleri gerekmedikçe veri göndermeyi tercih ederim. Veri parametreleri, geçmek istediğiniz verileri içeren nesnelerdir. Bizim durumumuzda, değeri AJAX_PaGination olan $ _POST değişkenine [‘Action’] erişebileceğim. Elbette ihtiyacınız olan birçok uygulamayı geçebilirsiniz.
0 Sunucu yan kodu yoksa döndürüldü. Son olarak, başarı parametresi Ajax çağrımızın sonuçlarını hatırlatan bir işlevdir. Bunu aşağıda biraz daha ilginç hale getireceğiz, şimdilik test için yeterince. Şimdi bağlantıyı tıklamaya çalışırsanız, gerçekten işe yarıyor, ancak sunucu tarafı kodunu tanımlamadık çünkü çok kullanışlı olmayacak. Aslında, uyarı görmelisiniz 0’dır. Peki bu neden oluyor? “Sunucu tarafı kodunu tanımlamadık” dediğimde, tamamen dürüst değilim. Yapmadık, ama zaten WordPress. Kullandığımız admin-ajax.php dosyasında bazı içerikler var. Kaynak dosya kodunu görürseniz, komut dosyasının bazı durumlarda kalıp (‘0’) kullandığını görürsünüz. Eylem vermezsek, admin-ajax.php komut dosyası öldü ve 0 döner. Eylem sağlarsak ancak gerekli WordPress kancalarına bağlanmazsak, hiçbir şey olmaz ve dosyanın sonunda tekrar ölürüz 0 Bir sunucu ile iletişim kurduğumuz sonuç. WordPress ile iletişim kurarak WordPress’ten önemli cevaplar almak için bazı WordPress eylemlerini tanımlamamız gerekiyor. Bu, ayarlanmış bir desen kullanılarak yapılır. Tema işlevimizdeki örneğimizi devam ettirerek seks yapalım: Core 5CA270C7C9DDD18E57B4
Kancanın ikinci işlevini ilişkilendirdim. WP_AJAX_ [ACTION_NAME] biçimini kullanan kanca yalnızca giren kullanıcılar için çalıştırılır. WP_AJAX_NORPIV_ [ACTION_NAME] biçimini kullanan kanca yalnızca günlüğü girmeyen kullanıcılar için çalıştırılır. Bunun en büyük yararı, işlevselliği kolayca ayırabilmenizdir.
Yukarıda bahsettiğim eylemin adı, JavaScript’teki Ajax çağrımızda tanımlanan eylemleri ifade eder (eylem: ‘Ajax_pagination’) – uygun olmalıdırlar. İşlevin adı istediğiniz her şey olabilir, netlik için my_ajax_pagination kullanıyorum. İşlevin kendisi istediğiniz her şeyi içerebilir. Kullanıcılar yayınlayabilir, verilerini alabilir, yayın yayınlayabilirsiniz vb. JavaScript’e geri dönmek ne istersen yankılanmalısınız. Yukarıdaki örnekte, Get_BlogInfo () işlevinden dinamik çizilmiş blog başlığını tekrarladım. Son adım Die () kullanmaktır. Bunu tanımlamazsak, dosyanın sonundaki admin-ajax.php’de tanımlanan kalıp işlevi girilir ve yankı ne olduğunuzdan başka yankılanırsınız. Yukarıdaki kodu denerseniz, şimdi web sitenizin başlığını geri göreceksiniz. Özet temel örneğimizi sonuçlandırıyor! Ajax aracılığıyla gönderileri çekmeye geçmeden önce, Ajax almak için gereken adımları hızlı bir şekilde özetleyelim: Henüz sahip değilseniz kuyrukta bir javascript dosyası oluşturun
Yönetici -jax.php dosya URL’sinin URL’sine devam etmek için wp_localale_script () kullanın JavaScript’te adil bir arama yapın
Uygun kanca adını kullanarak işlevi ilişkilendirin
Verileri JavaScript’e geri döndürebilen işlev kodu
Sulu şeyler için şimdi Ajax ile direkleri yükleyin! Bu projeye bunun için JavaScript kodu yazarak başladım. Daha fazla uzatmadan, bu temel sürümdür. Kullanıcıdaki bazı değişikliklerle hemen genişleteceğiz.
5CA270C7C9DDD18E57B4’ün çekirdeğini içerir
Bu neredeyse temel örneğimizle aynıdır. Dikkat edeceğiniz ilk şey, kullanıcının hangi sayfaları sormak istediğini tespit etmenin bir yolunu eklediğimdir. Her bağlantının gizli bir açıklık öğesi vardır (bir ekran okuyucusu vardır). Orijinali değiştirmediğim, aralığı kaldırmadığım ve geri kalanını bir tamsayı olarak çözmediğimden emin olmak için bir element klonu yaptım. Bu bize ihtiyacımız olan sayfa numarasını verir. Ayrıca kullanılan sorgu parametrelerini de bilmem gerekiyor. Bu ana sayfada oldukça basittir, varsayılan sorgu ile çalıştığımız için yalnızca sayfalı parametredir. Arşiv sayfasında (kategori arşivleri gibi) başlarsak, kategorinin adını da bilmemiz gerekir. Daha önce öğrendiğimiz yerelleştirilmiş yöntemleri kullanarak sorgu değişkenlerine devam edeceğiz. Şimdilik bu belirlenmemiş olsa da Ajaxpaination.query_vars’ı kullanacağız. Son olarak, başarılı olursa, tüm makale öğelerini ana kaptan sileriz, sayfaleştirme öğesini silip Ajax çağrımızın dönüş değerini ana kabına ekleriz. Bu iade değeri yayınlar ve yeni gezinme öğeleri içerecektir. Parametrenin adını HTML’ye yanıttan değiştirdiğimi unutmayın çünkü daha mantıklı. Bitirmek için, orijinal sorgu parametrelerine devam etmek için bir yerelleştirme dizisi kullanırız. Aşağıdaki işlevler, daha önce sahip olduğumuz lokalizasyonun yerini alan my_enqueue_assets () işlevine yerleştirilmelidir: 5CA270C7C9DDD18E57B4 çekirdeğini içerir
Şimdi yapmamız gereken, my_ajax_pagination () işlevi mükemmel. Bu işlev tarafından yankılanan her şey sayfalarımızdaki içeriğin yerini alacaktır. Aşağıdaki açıklama ile son kod aşağıdadır:
Memuat inti 5CA270C7C9DDD18E57B4Dengan Menggunakan Parametresi Yang Diteruskan, Kami Membuat Kueri Khusus.Bu, geçme isteğimizin değişkenini almanın ve sayfa numaralarımızın sayfalı parametre tarafından iletilmesini sağlamanın temelini içerir.Daha sonra yeni bir sorgu yapmak için son $ query_vars dizimizi kullandık.Değişken $ Globals [‘wp_query’ yapmalıyız
] Yeni yayınlarımızla aynı.Bunu yapmamızın nedeni, the_posts_pagination () işlevinin bu global değişkeni kullanmasıdır.Ardından, editor_max_image_size filtresine bir işlev eklediğimi unutmayın ve birkaç satır sildim.Bu görünen beklenmedik bir şey.Aslında bir trac wordpress bileti yaptım.İçinde biraz ilerleme görebiliriz!
Sorun bu:
Resim yazıda yüklendiğinde, her şey iyi görünüyor. Ancak, bu öğreticiyi bu filtre olmadan tamamlarsanız, görüntünüz daha dar, sadece 660 piksel genişlik, 825px’e ihtiyaç duyulmaz. Bunun nedeni, bir görüntü içeren işlevin nihayet Image_Cinain_Size_For_Dedor () adlı işlevi çağırmasıdır. Bu işlev, Editör Post’taki görüntünün çok geniş olmamasını sağlar. Havayı belirlemek için bu boyut azaltma yapılmalıdır, IS_ADMIN () işlevini kullanır. Kodumuz teknik olarak yöneticide olan admin-ajax.php aracılığıyla çalıştığından, WordPress görüntülerimizi azaltır ve yanlış bir şekilde editörde kullandığımızı düşünür. Neyse ki, maksimum boyut düzenleyiciyi belirlemek için editör_max_image_size filtresini kullanabiliriz. Ajax çağrımız dışında her şeyi olduğu gibi bırakmak istediğimiz için, özel değeri (dizi (825, 510)) kullanarak bir filtre ekliyoruz ve daha sonra başka bir yerde sorunlara neden olmadığından emin olmak için hemen siliyoruz. Bir sonraki adım, gönderi listemizi oluşturmak için sorgularımızı kullanmaktır. Üst temadaki index.php dosyasından çok kopyaladım. Yayınları yoksa, işlemek için amaçlanan şablonu kullanırız, eğer değilse, gönderiyi tekrarlar ve Post ekran şablonunu kullanırız. Sonunda dizin dosyasında gördüğümüzle aynı sayfalandırma formatını kullandık. Ajax çağrıları hakkında not, Ajax’ın çağrısının her zaman yöneticiden değerlendirildiğini hatırlamak önemlidir. Yani, taslak, planlanan ve kişisel gönderi bu çağrı ile iade edilebilir.
Bunun olmasını istemiyorsanız, davranışı Post_status gibi uygun parametrelerle kontrol etmelisiniz. Bunun gibi Ajax çözümleriyle daha iyi kullanıcı deneyimi, kullanıcı deneyimine odaklanmak çok önemlidir. Yerel bir ortamda çalışıyorum, böylece her şey çok hızlı bir şekilde yüklenir, ancak üretim sunucusunun ve diğer varlıkların resminde yüklenmesi için daha fazla zaman gerektirebilir. Bu nedenle, en azından bir yükleyici eklemeli veya metni yüklemeli ve navigasyon öğesini daha fazla tıklamanız gerekir. Bunu, kullanıcı tıkladıktan ve “yeni bir gönderi yüklüyor” metnini görüntüledikten hemen sonra bir gönderi ve gezinme ortadan kalkarak ortadan kalkar. Başarılı etkinlik açık olduğunda, yükleme metnini sildik ve gönderiyi görüntüledik. Bu bizim güncellenmiş Ajax çağrımız: 5CA270C7C9DDD18E57B4’ün çekirdeğini içeriyor
Artık ayrı beferend ve başarı işlevlerimiz var. Birincisi, Ajax’ın sunucuya gönderilmesinden önce bağlantıyı tıkladığınızda yapılır. Sunucudan veri aldıktan sonra yapılacaktır. Çağrı gönderilmeden önce makaleleri ve navigasyonu sildik. Bu, kullanıcıların yayınlanmasını beklerken gezinme bağlantısını tıklamaya devam edememelerini sağlar. Sonra belgenin en üstüne kaydırıyoruz. Ardından, kullanıcıya ne olduğunu açıklığa kavuşturmak için yükleme bildirimini ekledik. Bulunduktan sonra sayfalarda yirmi on-fifteen ile aynı işaretlemeyi kullandım. Başarı işlevinde yükleyiciyi sileriz ve içeriğimizi yükleriz, her şey bitti! Ajax Ajax’ın hatası çok güçlü;
Yayınları yüklemeye ek olarak, Ajax çağrıları aracılığıyla her türlü eylemi yapabilirsiniz.Kullanırken dikkat edilmesi gereken çok fazla tehlike ve şey var, işte bazıları: Güvenlik büyük bir endişe olabilir.AJAX aracılığıyla yayınları silmek istiyorsanız, kullanıcıların örneğin amaca ve iznine sahip olmalarını (nonces kullanarak) sağlamanız gerekir.Normal yöntemi kullanırken, WordPress bazı durumlarda doğuştan gelen korumaya sahiptir, ancak Ajax ile genellikle kendiniz düşünmeniz gerekir.Anggun bozulması, bir şey daha az önemli olsa da Ajax’ın başka bir yönüdür.Temel olarak:
JavaScript yok, Ajax yok. Ajax’a çok bağımlıysanız, devre dışı bırakan kullanıcı uygulamamızı kullanamayacaktır. JavaScript o kadar yaygın hale geldi ki bu neredeyse alakasız, ancak bazı durumlarda görünebilir. Bu durumda, gerçek bağlantıyı tıklamanın düzgün çalışacağından emin olmanız gerekir. Kullanıcı deneyimi genellikle göz ardı edilir. Ajax işlevselliği harika, ancak güvenilir bir şekilde çalışan web siteleri daha havalı. Kullanıcılar bağlantıyı tıkladıklarında sayfaları yüklemeye alışkındır. Her şeyi çok şeffaf hale getirmeniz gerekir, kullanıcılar neler olduğunu ve nedenini bilmelidir. Masaya gidebildiğiniz kadar çok bling taşımamak için işinizi geliştirmek için Ajax kullanmalısınız. Gördüğünüz gibi özet, Ajax’ı uygulamak küçük bir hazırlık ve uygulama gerektirir, ancak bir alışkanlık haline geldikten sonra kolayca bulacaksınız. Belki bunu okumak için birkaç dakikaya ihtiyacınız var ve bunu ilk kez yapmak için daha fazla zamana ihtiyacınız olacak, ancak tüm örnekleri yaklaşık 15 dakika içinde kodlıyorum. Ajax, WordPress gibi bir çerçevede kullanılan neredeyse tüm programlama dillerini içerdiği için zor olabilecek tekniklerden biridir. Kancalar ve yerelleştirme gibi sözleşmelere uymak zorunda kalarak işler daha da deneyimlidir. Egzersiz onu mükemmelleştirir. Kullanmaya başlarsanız Ajax’a aşık olacağınızı garanti ediyorum. Sitenizde Ajax uyguladınız mı? WordPress’te Ajax’ın diğer kullanımları nelerdir? Aşağıdaki yorumlarda bize fikrinizi anlatın.
Etiket:
geliştirici
PHP
