Ajax Load More, Ajax Destekli Sorgular ile yavaş yükleme gönderileri, tek gönderiler, sayfalar, yorumlar ve daha fazlası için nihai WordPress sonsuz kaydırma eklentisidir.

Ajax ile karmaşık özel WordPress sorguları oluşturun Daha Fazla Kısa Kod Oluşturucu, düzenleyiciyi kullanarak yan sayfanıza veya doğrudan şablon dosyalarınıza kısa kod ekleyecektir.

Ajax Load More, WooCommerce ve Easy Digital Downloads gibi popüler e-Ticaret eklentileriyle sonsuz kaydırma için uyumludur.

Özellikler

• Kısa Kod Oluşturucu— Kendi özel Ajax Load More kısa kodlarınızı oluşturun, kullanımı kolay alarm kısa kodumuzdaki çeşitli WordPress parametrelerine benzer (bkz. Kısa Kod Parametreleri).
• Sorgu Parametreleri— Ajax Load More, WordPress'in birçok farklı kapasitesine sahip olup olmadığını sorgulamanıza olanak tanır. Gönderi Türüne, Gönderi Formatına, Tarihe, Kategoriye, Etiketlere, Özel Taksonomilere, Arama Terimine, Yazarlara ve daha fazlasına göre sorgulama!
• Tekrarlayıcı Şablonları— Web sitenizin görünümüne ve tarzına uyacak şekilde kendi tekrarlayıcı şablonunuzu oluşturarak Ajax Load More'un işlevselliğini düzenleyin ve genişletin (ekran görüntülerine bakın).
• Birden fazla örnek— Ajax'tan birden fazla makaleyi tek bir sayfaya, gönderiye veya şablona ekleyebilirsiniz.
• Ajax Filtreleme— Ajax Daha Fazlasını Yükle özel filtreleme yöntemi, Ajax sorgu sonuçlarınızı filtrelemenize ve güncellemenize olanak tanır.
• Çoklu Bölge Uyumluluğu— Ağınızdaki tüm sitelerdeki tekrarlayıcı şablonlarını yönetin.
• Ayar Paneli— Eklenti ayarlarını güncelleyerek Ajax Load More sürümünüzü özelleştirin.

• tekrarlayıcı- Bir tekrarlayıcı şablonu seçin (Eklenti mevcuttur). Varsayılan = 'varsayılan'
• yazı tipi- Yazı türlerinin virgülle ayrılmış listesi. Varsayılan = 'gönderi'
• yapışkan_postlar— Ajax listesi için yapışkan gönderi siparişini koruyun. Varsayılan=yanlış
• post_format- Posta biçimine göre sorgulayın. Varsayılan = boş
• kategori— Bilgiye göre eklenecek kategorilerin virgülle ayrılmış listesi. Varsayılan = boş
• kategori__ve— Kimliğe göre eklenecek kategorilerin virgülle ayrılmış listesi. Varsayılan = boş
• kategori__değil_in— Kimliğe göre hariç tutulacak kategorilerin virgülle ayrılmış listesi. Varsayılan = boş
• etiket— Virgülle ayrılmış etiket listesi — bilgi notuna göre dahil edilir. Varsayılan = boş
• etiket__ve— Kimliğe göre eklenen etiketlerin virgülle ayrılmış listesi. Varsayılan = boş
• tag__not_in— Virgülle ayrılmış etiket listesi — kimliğe göre hariç tutun. Varsayılan = boş
• taksonomi- Özel sınıflandırma adına göre sorgulama. Varsayılan = boş
• taksonomi_termleri- Özel sınıflandırma terimlerinin virgülle ayrılmış listesi (bilgi). Varsayılan = boş
• taksonomi_operatörü
• taksonomi_ilişkisi— Birden fazla taksonomi olduğunda her taksonomi arasındaki mantıksal ilişki. (VE/VEYA). Varsayılan = 'VE'
• gün- Haftanın günü. Varsayılan = boş
• ay- Yılın ayı. Varsayılan = boş
• yıl- Gönderi yılı. Varsayılan = boş
• taksonomi_operatörü— Sınıflandırma Terimlerini (IN/NOT IN) ile karşılaştırmak için operatör. Varsayılan = 'GİRİŞ'
• Meta Anahtarı- Özel alan anahtarı (isim). Varsayılan = boş
• meta_value- Özel alan değeri. Varsayılan = boş
• meta_karşılaştır— Meta_anahtarı ve meta_değeri karşılaştırma operatörü. Varsayılan = 'GİRİŞ'
• meta_type- Özel alan türü. Varsayılan = 'CHAR'
• meta_relation— Birden fazla özel alan girişine (AND/OR) sahip Victory. Varsayılan = 'VE'
• yazar- Yazarların kimliğe göre virgülle ayrılmış listesi. Varsayılan = boş
• post_in— Sorguya eklenen Posta Kimliklerinin virgülle ayrılmış listesi. Varsayılan = boş
• post_not_in— Sorgudan hariç tutulacak Posta Kimliklerinin virgülle ayrılmış listesi. Varsayılan = boş
• aramak- Arama terimini ('leri) sorgulayın. Varsayılan = boş
• özel_args- Noktalı virgülle ayrılmış değer listesi: çift bağımsız değişkenler. Örneğin. tag_slug__ve:tasarım,geliştirme; event_display:yaklaşan. Varsayılan = boş
• post_status- Gönderinin durumunu seçin. Varsayılan = 'yayınla'
• emir— Gönderileri ASC (artan) veya DESC (azalan) sırayla görüntüleyin. Varsayılan = 'DESC'
• tarafından sipariş— Gönderileri tarihe, başlığa, isme, menü sırasına, yazara, gönderi kimliğine veya yorum sayısına göre sıralayın. Varsayılan = 'tarih'
• telafi etmek- İlk sorguyu (sayı) dengeleyin. Varsayılan = '0'
• posts_per_page— Her Ajax isteğiyle yüklenecek gönderi sayısı. Varsayılan = '5'
• taslak— Kullanıcı sayfayı kaydırdıkça daha fazla gönderi yükleyin (doğru/yanlış). Varsayılan = 'doğru'
• kaydırma_mesafesi— Silah atışlarını kaydırırken direklerin kenarından kenarına kadar durun. Varsayılan = '150'
• kaydırma_konteyner- Ajax Yükünü Sınırlandır Bir ana konteynere daha fazla sonsuz kaydırma. Varsayılan = boş
• max_pages- Kullanıcı kaydırırken yüklenecek maksimum sayfa sayısı (kaydırma = doğru olduğunda etkinleştirilir). Varsayılan = '0'
• duraklatma_geçersiz kılma— Kaydırmanın Duraklat parametresini geçersiz kılmasına ve kaydırma sırasında gönderilerin yüklenmesini tetiklemesine izin verin. Varsayılan = boş
• Duraklat— Kullanıcı Daha Fazla Yükle düğmesini (doğru/yanlış) tıklayana kadar gönderileri yüklemeyin. Varsayılan = 'yanlış'
• geçiş- Bir gönderiyi ortaya çıkaran geçişi seçin (solma/duvarcılık/yok). Varsayılan='solma'
• geçiş_konteyneri- Ajax Daha Fazla Yükle (.alm-reveal) yükleme konteynerini görüntüleyin. Varsayılan = 'doğru'
• geçiş_container_classes- .alm-reveal geçiş div'ine sınıflar ekleyin.
• masonry_selector- Her duvar öğesinin hedef sınıf adı. Varsayılan = boş
• duvar_animasyonu— Duvar öğeleri için yükleme geçiş türünü seçin. (varsayılan/uzaklaştırma/yukarı kaydırma/aşağı kaydırma/yok). Varsayılan = varsayılan
• masonry_horizontalorder- Yatay düzeni koruyun. Varsayılan=doğru
• resimler_yüklendi— Ajax yüklü içeriği (doğru/yanlış) görüntülemeden önce tüm resimlerin yüklenmesini bekleyin. Varsayılan = 'yanlış'
• destroy_after— 'n' sayıda sayfa yüklendikten sonra ajax yükleme işlevini kaldırın. Varsayılan = boş
• ilerleme çubuğu— Ajax içeriğini yüklerken pencerenin üst kısmında ilerleme çubuğu göstergesini görüntüleyin. Varsayılan = 'yanlış'
• Progress_bar_color- İlerleme çubuğunun onaltılık rengini girin. Varsayılan = 'ed7070'
• düğme_etiketi— Daha Fazla Yükle düğmesinin etiket metni. Varsayılan = 'Eski Gönderiler'
— İçerik yüklenirken Daha Fazla Yükle düğmesinin metnini güncelleyin. Varsayılan = boş
• konteyner tipi— ALM Ayarları sayfasında ayarlanan Global Konteyner Türünü geçersiz kılın. Varsayılan = boş
• css_classes— Ajax Load More kapsayıcısına özel CSS sınıfları ekleyin. Varsayılan = boş
• İD— Ajax Daha Fazla Yükle örneği için benzersiz bir kimlik.
• iç içe geçmiş- Bu Ajax Daha Fazla Yükle örneği değişmedi. Varsayılan=yanlış

Örnek Ajax Daha Fazla Kısa Kod Yükle

Örnek Demolar

• Varsayılan- Alışılmışın dışında işlevsellik ve stil.
• Gelişmiş Özel Alanlar— Ajax ile sonsuz kaydırma Gelişmiş Özel Alanlar verileri Daha Fazlasını Yükle.
• Ekler- Sonsuz kaydırmalı gönderi ekleri.
• Sonra Yok Et— 'n' sayfa sayısından sonra Ajax Load More işlevini kaldırın.
• Etkinlik Listesi— Olayları özel alan tarihine göre sıralama ve listeleme.
• Filtreleme— Ajax Load More örneğini sıfırlayın ve filtreleyin.
• Esnek Kutu— Flexbox ile duyarlı bir Ajax Daha Fazla Yükle ızgarası oluşturma.
• Sonsuz kaydırma— Yeni yükleme işlevlerine ve stillerine bir bakış.
• Yüklenen Resimler— Ajax yüklü içeriği görüntülemeden önce görselleri indirin.
• Duvarcılık— Masonry JS ile esnek bir ızgara düzeni oluşturma.
• Birden fazla örnek- Tek bir sayfaya birden fazla Ajax Daha Fazla Yükle'yi ekleyin.
• Sayfalama URL'leri- SEO eklentisiyle her Ajax Load More sorgusu için benzersiz sayfalama URL'leri oluşturun.
• — Gönderiler kullanıcı tarafından başlatılana kadar yüklenmeyecektir.
• Önceden Yüklenmiş Gönderiler— Tüm Ajax istekleri için başlangıç ​​gönderi kümesini sunucuya kolayca önceden yükleyin.
• İlerleme çubuğu— Her Ajax isteğinde bir ilerleme çubuğu yükleme göstergesi görüntüleyin.
• Arama Sonuçları— Arama terimlerine göre sonuçların döndürülmesi.
• Kaydırma Kabı- Ajax Load More'u ana konteynere sınırlayın.
• SEO ve Sayfalama— Güçlü bir navigasyon sistemi oluşturmak için bu iki eklentiyi birleştirin.
• Slayt Gösterisi Galerisi— Ajax Daha Fazlasını Yükle ve Sayfalama eklentisiyle bir galeri oluşturun.
• Masa Düzeni— Ajax Daha Fazlasını Yükle gerekli sonuçları tablo formatında gösterecektir.

Hepimizin, bir ay seçerken o aya ait girişlerin olduğu tarafa yönlendirildiğimiz arşivlerimiz vardı. WordPress'te bu tür bir arşiv alımı, wp_get_archives() ek işlevi kullanılarak gerçekleştirilir. Ana WordPress kategorileri görüntülendiğinde benzer bir gönderi arşivi görünür, yalnızca gönderiler kategorilere göre gruplandırılır.

Bugün size şunu söylemek istiyorum: dinamik arşiv sayfası nasıl oluşturulur. "Dinamik" şu anlama gelir: Bir ay seçtiğinizde sonuçlar aynı sayfada görüntülenecektir, ek yardım için AJAX - Javascript. jQuery kütüphanesi Ajax ile çalışmak için basit bir API sağladığından bu çerçeveyi kullanacağız. Bundan önce jQuery olmasaydı bugün nerede olurduk? Vikorist sık sık ve yoğun olsa da projenizin zaten bağlantıları var.

Bu yazıyı yazmadan önce bu blog için dinamik bir arşiv sayfası oluşturdum ve ona hayran olmak istiyorum (DEMO).

Dinamik bir arşiv uygulamak için 4 aşamadan geçmemiz gerekir:

Size temel WordPress temasını kullanarak dinamik bir arşiv sayfası oluşturmayı göstereceğim: “yirmi on”.

1. WordPress için jQuery eklentileri

Bir jQuery betiğini bağlamak için doğru seçenek wp_enqueue_script() işlevini kullanmaktır. Bu tür bağlantılar sizi eklentilerdeki komut dosyasına yapılan bağlantılarla çakışmalardan koruyacaktır. Komut dosyası bir kez bağlanacaktır.

Bu kodu function.php dosyasına eklemeniz gerekir.

seçenek 2

İlk seçenekte betiği WordPress dosyalarındaki sunucumuzdan bağladık. Ancak, jQuery dosyasına göndermeyi değiştirebilir ve onu Google CDN'ye bağlayabilirsiniz. Bu yaklaşımın avantajı, tarayıcı zaten bu dosyaya ilgi duyduğu için sitenize gittiğinizde artık tarayıcının scriptle ilgilenmemesi / Sayfanın dikkati artacaktır. Ek olarak, CDN betiği, dosyanın bir kilobayt daha hafif olduğu kompakt bir biçimde sunulur:

Function my_scripts_method() ( wp_deregister_script("jquery"); wp_register_script("jquery", "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"); wp_enqueue_script("j ) ;) add_action("wp_enqueue_scripts", "my_scripts_method");

Seçenek 3

JQuery'yi bağlamak için en popüler ve sözde "sert" seçenek, etiketin ortasındaki başlık.php şablon dosyasına bir mesaj yazmaktır.. Aşağıdaki html kodunu ekliyoruz:

2. Zavantazhuvach'tan önceki Zavantazhivo resmi

Bekleme süresi boyunca, sunucudan AJAX kullanması istendiğinde, müşteriye ne olduğunu bildiren bir resim göstermemiz gerekir. Bu tür resimler arka planda birden fazla kez söylenmiştir; böyle bir resmin alternatifi şu metindir: "Aşıklık...".

Eğer böyle bir resmimiz varsa, örneğin buradan indirelim: Animasyonlu gif (hizmet benim lehimedir), ajax-loader.gif olarak yeniden adlandırın ve katalogdaki resimler klasörüne koyalım. WordPress temalarımızdan biri. Sonuç olarak şu resmi elde edebiliriz: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Mi yogo vikoristovamo u kodunun altında.

3. Normal bir sayfa şablonu oluşturun

WordPress'teki normal sayfalar için etrafındaki şablonları kullanabilirsiniz, böylece diğer sayfaların yapısından tamamen farklı bir sayfa oluşturabiliriz. WordPress'i normal bir sayfa için şablon olarak bir dosya oluşturacak şekilde ayarlamak için dosyanın üstüne aşağıdaki kodu yazmanız gerekir:

Arşiv şablonu, WordPress admin panelinde sayfa oluşturulduğunda kullandığımız şablonumuzun adıdır.

Tpl_archive.php adlı klasör için yeni bir dosya oluşturalım ve yönlendirme kodunu buraya ekleyelim. O halde WordPress admin paneline gidip kalıcı bir sayfa oluşturalım, onu tanıyalım, şablon oluşturalım.

Şimdi bu dosyayı gerekli kodla birlikte saklayacağız.

1. Öncelikle karşınıza çıkan listeleri görüntülememiz gerekiyor bunları ek WordPress işlevini kullanarak oluşturabiliriz: wp_get_archives() ve wp_dropdown_categories():

get_header(); get_footer(); Şablonun üstbilgisini ve altbilgisini kaldırmak açıktır. get_sidebar(); Herhangi bir makul koda müdahale etmediğimden emin oldum. Ay ve Başlık listelerini görüntülemek için kodu çözün.

Boş blok

2. CSS'e düşen listeleri tasarlayalım, Başlığa tıkladıktan hemen sonra bu kodu kimin için ekleyebilirim ():

Bu aşamada aşağıdaki sonuçlara ulaştım:


3. Dodamo JavaScript kodu Sunucuya indirilecek ve archive_pot bloğunda görüntülenecek (kod, css stillerinden sonra eklenir):

Kodu parçalayalım:
Ortadaki her şey $("#archive_browser select").change(function())(...) silinen listeleri değiştirirken sorulacaktır.

/images/ajax-loader.gif - indirme süresi boyunca mevcut olan resim dosyasına (aranıyor...) gidin.

/scripts/archive_getter.php – bir sonraki aşamada oluşturacağımız arşiv dosyasına gidin.

$.post(...); - AJAX teknolojisini kullanarak tarayıcıdan sunucuya istek oluşturan bir jQuery işlevi.

Gönderi sayfası şablonu için yeni kod

Normal sayfa şablonunun dosyası (dosyayı tema klasöründe oluştururuz ve kodu oraya kopyalarız):

4. Derleyici dosyasının oluşturulması

AJAX, Javascript kullanarak sayfayı yeniden etkinleştirmeden tarayıcıyı sunucuya bağlayarak çalışır. Komut dosyasının kendisi, müşterinin bilgisayarında bulunsa ve veriler sunucuda olsa bile verileri çıkaramaz, bu nedenle verileri çıkartan komut dosyasının sunucuya geri dönmesi gerekir, bu durumda böyle bir diyalog kurulacaktır. Örnek bir dosya ile desteklenmektedir.

Dizinde scripts klasörünü oluşturalım, archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) dosyasını oluşturalım ve bu dosyayı aşağıdaki kodla hatırlayalım:

Kodun küçük bir analizi:

Öncelikle WordPress çekirdeğini (tüm ayarlar, işlevler, eklentiler) vurguluyoruz. WordPress işlevlerini kullanımımıza sunmak için, bu dosyada veri çıkarmak için kullandığımız query_posts() öğesini çağırmamız gerekir.

Sanırım eğer(($year=="") && ($month=="") && ($cat=="-1"))(...) daha sonra kullanabileceğimiz herhangi bir veri olduğunu doğrularsak Kullan query_posts() işlevi, başka işlev olmadığından bir uyarı görüntülenecektir.

query_posts("posts_per_page=-1&cat=$cat&aynum=$ay&yıl=$yıl"); Ve WordPress'in birincil döngüsünün altındaki her şey.

Eksen ve işte bu, yan hazır!

Eksen benden çıkan şeydir (gerçi önemli olan tek şey resimdir. Canlı bir kıçtır):

İçerik geliştirme (göster düğmesi) wordpress(ajax)

Asistanlardan biri benden sitede içeriği dinamik olarak vurgulayarak (gönderiler, kayıtlar) veya başka bir "göster düğmesi" altında çalışmamı istedi. Bu tür çözümlere dayalı tasarım daha da popüler hale geliyor. Benzer bir teknik Twitter'da VKontakte'de bulunabilir. WordPress için bu ürünlerin eklentilerinin yeterli olmaması üzücü, sadece bir eklenti biliyorum ama kararın şakasına devam ederek buna bile layık değilim. Görme konusuna değindikten sonra, jquery kütüphanesi burada gönderilerin dinamik olarak geliştirilmesi için kullanılıyor.

Dinamik içerik geliştirme oluşturmak için iki dosyaya ihtiyacımız var:

Jquery.cookie, script dosyalarının şablonunuzun bulunduğu klasörde bulunan js klasörüne yerleştirilmesi gerekir, çünkü böyle bir klasör yoktur, sonra oluşturulması gerekir. Daha sonra, başlık.php dosyasındaki komut dosyalarına yollar eklemeniz gerekir.

//etiketlerin arasına yerleştir

Komut dosyalarının talimatlarını yazdıktan sonra, gönderilerin dinamik tanıtımını yapmayı planlıyorsanız index.php dosyasını veya başka bir dosyayı göndermeniz gerekecektir. Eklemen gerek kimlik = "döngü" posta konteynerinde, sınıf = "gönderi" kontrol noktasında, kimlik = "sayfalandırma" Oraya “Daha Fazla Göster” düğmesini yerleştirmek istiyorsunuz. Kod şuna benzer:

Sonuç:

Betiği çalıştırmak için jquery kütüphanesine ihtiyacınız var, kütüphaneyi bu şekilde bağlayabilirsiniz.

İçerik geliştirmeyi test etmek için şablon

Genişletmeyi test etmek için şablonu WordPress şablonları klasörüne indirmeniz, ardından yönetici panelinde test adı verilen şablonu seçmeniz gerekir.

Kaynağımı beğendiyseniz ve bana maddi olarak destek olmak istiyorsanız, aşağıdaki ayrıntıları girerek tutarı yeniden yatırabilirsiniz:

• Yandex Gamanets - 410014625168542
• İnternet parası-R429373694729

Ek AJAX teknolojisinin arkasında ne var? arama optimizasyonu yöntemini kullanma site yerine parçayı ses sistemlerinden toplayarak (bu arada, gizleme değil).

Teknik olarak uyguladım. Bloglarında bunu tekrarlamak isteyenler çok oldu, nasıl yapılacağına dair bilgiler aktarmaya çalışacağım.

AJAX aslında JavaScript yardımıyla bir tarafın yerine bir tarafın dinamik olarak kullanılması anlamına gelir. Tobto. İçeriğin bu kısmı sitede görüntülenecekti ancak sayfanın çıkış koduna baktığınızda orada hiçbir şey yok. Veya tarayıcınızda JavaScript'i etkinleştirirseniz içeriği de görünmeyecektir.

Örneğin böyle bir olasılık galip gelebilir, yani dahili mesajların sayısını değiştirme Ses sistemleri için sitede. İçeriğin AJAX aracılığıyla bağlanan kısmını ne Google ne de Yandex indeksler.

Tamam, uygulamaya geçelim. sana anlatacağım WordPress'e nasıl başlanır? Ekte, kenar çubuğunda görüntülenebilecek aylık arşiv listesi bulunmaktadır.

vaaz veriyorum 2 seçenek karar. Diğeri ise en basitidir.

İlk seçenek

ajax_archives.php) bir sonraki adımla:

WordPress yöneticisine giriş yapın ve yeni bir sayfa oluşturun. Mesela “Arşiv Listesi” adını vermek uygun olacaktır. Blokta sağ el " Hikaye özellikleri» "AJAX arşiv listesi" şablonunu seçin.

Bu sayfayı tarayıcınızda açtığınızda, yalnızca gerekli öğelerin bir listesinin olduğunu ve başka hiçbir şeyin olmadığını göreceksiniz. Buradaki eksen web sitesinde gerekli yerde tanıtılmaktadır.

Bir dosya var kenar çubuğu.php

AJAX'ı jQuery kullanarak uyguluyoruz, sitenizde henüz bağlantı olmadığından dosya başlık.php koddan önceaşağıdaki kodu ekleyin:

Artık siteye değerli bir içerik parçası olan küçük bir komut dosyası eklemek imkansız. Bir js dosyası oluşturun (örneğin, scripts.js

(function($) ( $(function() ( $("#archives").load("http://ALANINIZ/ajax_arşivler/"); )) ))(jQuery)

http://ALAN_ALANINIZ/ajax_arşivleri/ adresini, oluşturduğunuz sayfanın üzerindeki adresle değiştirin.

başlık.php :

Başka seçenek

Bu seçenek kesinlikle daha basittir, çünkü Burada ek bir sayfa oluşturmaya gerek yoktur.

Babanız için WordPress şablonuyla yeni bir php dosyası oluşturun (örneğin, ajax_archives.php) bir sonraki adımla:

İlk kod satırı yeni bir sayfa oluşturma ihtiyacını ortadan kaldırır.

Bir dosya var kenar çubuğu.php Arşiv listesini genişletmek istiyorsanız aşağıdaki html kodunu ekleyin:

jQuery henüz sitenize bağlı değilse dosya başlık.php koddan önceaşağıdaki kodu ekleyin:

Yeni bir js dosyası oluşturun (örneğin, scripts.js) ve yeni saldırı koduna şunu ekleyin:

(function($) ( $(function() ( $("#archives").load("http://ALANINIZ/wp-content/themes/FOLDER_WITH_TEMPLATE/ajax_archives.php"); )) ))(jQuery)

Dosyayı sitenizdeki şablon klasörüne yerleştirin ve dosyaya bağlanın başlık.php, etiketten önce bir satır ekleyerek :

Eksen, güç ve hepsi bu. Sonucu izleyebilirsiniz.

Benzer şekilde kenar çubuğunun tamamını kapatabilir veya bunun yerine birkaç bitişik blok oluşturabilirsiniz.

Zaten tahmin ettiğiniz gibi, bugün WordPress'te gezinirken yeni girişlerde sürekli bir artış var. Arka arkaya gezinme yerine, siz kaydırdıkça girişler otomatik olarak görünecektir. Yeniden yardım başvurusu yapmadan yeni giriş sayısını artırmak mümkündür AJAX. Tüm bunları herhangi bir eklenti kullanmadan yapabiliriz.

Şimdi böyle bir gelişmenin iki yolunu göstereceğim. Aslında bu aynı yöntemdir, sadece biraz farklı güçlere sahiptir. Seçenekler kaydırdığınızda veya bir düğmeye bastığınızda otomatik olarak etkinleştirilecektir, örneğin - gösterge niteliğinde. Sitenize en uygun olanı size kalmış.

Kaydırma süresine göre girişleri otomatik olarak artırır

Krok 1

Başlangıç ​​olarak, otomatik ilerlemeyi tanıtmak isteyip istemediğinizi bilmeniz gerekir. Çoğu zaman, döngüyü arka arkaya gezinmeden kaldırmak için bir kısayol yüklemeniz gerekir. Örneğin, daha küçük bir dosyam var içerik.php. Yani sadece yapabilirsin ama - index.php, arşiv.php, döngü.php, kategori.php, arama.php vesaire. Bu dosyalar standart WordPress navigasyonuna veya özel bir işleve sahip olabilir. Bunu istatistiklere uygulayın.

Yani buna benzer bir şeyiniz var, döngünün en sonunda kendi kendine çözülüyor. Yeni parçayı sonraki kodla değiştirin.

max_num_pages > 1) : ?>

Kodun üst kısmının çizilmesine gerek yoktur ve alt eksen çekim saatindeki animasyondan sorumludur. Bloğun ortasındaki her şeyi silmenize gerek yok - load_more_gs veya ortadaki her şeyi, load_more_gs'nin kendisini değil, kodunuzla değiştirin; kendi animasyonunuza sahip olacaksınız.

GÜNCELLEME Promosyonun tanıtımını yaptıktan sonra arama tarafı yerine kategori tarafında çalışmak daha iyi olacaksa, kodun 4. satırını yeni iki satırla değiştirmeyi deneyebilirsiniz:

// Bunu değiştirin var true_posts = "query_vars); ?>"; // Bunda $str = seriize($wp_query->query_vars); var true_posts = "";

Timsah 2

Şimdi animasyonumuz için stiller ekleyeceğiz. Bunu daha önce gördüyseniz bu noktayı atlayabilirsiniz.

#load_more_gs( genişlik: 53px; dolgu:50px 0; kenar boşluğu:0 otomatik; ) .cssload-container( konum:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool: mutlak; üst: %50; sol: %50; kenarlık: 1px katı rgb(255,255,255); kenarlık-sol-renk: rgb(0,225,255); kenarlık yarıçapı: 974 piksel; -sınır yarıçapı: 974 piksel; -webkit-sınır-yarıçapı: 974px; -moz-sınır-yarıçapı: 974px; ) cssload-döndürme 1150ms doğrusal sonsuz;-o-animasyon: cssload-döndürme 1150ms doğrusal sonsuz;-ms-animasyon: cssload-döndürme 1150ms doğrusal sonsuz; 1150ms doğrusal sonsuz döndürme; ) .cssload-whirlpool::before ( içerik: ""; kenar boşluğu: -22px 0 0 -22px; cssload-rotate 1150ms doğrusal sonsuz; -ms-animat ion: cssload-rotate 1150ms doğrusal sonsuz; -webkit-animation: cssload- 1150ms doğrusal sonsuz döndür; -moz-animation: cssload-rotate 1150ms doğrusal sonsuz; ) .cssload-whirlpool::after ( içerik: ""; kenar boşluğu: -28px 0 0 -28px; yükseklik: 55px; genişlik: 55px; animasyon: cssload-döndürme 2300 ms doğrusal sonsuz; -ms-animation: cssload-döndürme 2300 ms doğrusal sonsuz; -webkit-animation: cssload-rotate 2300 ms doğrusal sonsuz; -moz-animation: cssload-döndürme 2300 ms doğrusal sonsuz; döndür (360 derece); ) ) @-o-keyframes cssload-rotate ( 100% ( -o-transform: döndür(360 derece); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: döndür(360 derece); ) ) @- webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: döndür(360 derece); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: döndür(360 derece) ; ))

Timsah 3

Şimdi eşzamansız bir animasyon komut dosyasına ihtiyacımız var. Burada iki yön var. Veya komut dosyasını etiketlerin içine sıkıştırarak altbilginize ekleyin:

Veya örneğin bir dosya oluşturun - moreload.js, yeni bir komut dosyası ekleyin ve ardından aşağıdaki gibi doğru yolu belirterek bodruma bağlayın:

Veya öyle, kodu ekleyerek işlevler.php:

Function loadmore_scripts_gs() ( wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); ) add_action("wp_enqueue_scrip)

Krok 4

Şimdi senaryonun kendisi. Bu, seçtiğiniz yönteme göre kopyalanıp yapıştırılır.

JQuery(function($)( $(window).scroll(function())( var BottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); if ( $(document).scrollTop() > ($(document).height() - BottomOffset) && !$("body").hasClass("loading"))( $.ajax(( url:ajaxurl, data: veri , şunu yazın:"POST", beforeSend: function(xhr)( $("body").addClass("loading"); ), başarı:function(data)( if(data) ( $("#load_more_gs") $("body").removeClass("loading"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

3. satırın bir değeri var 2000 . Bu, sitenin alt sınırlarına erişimin sınırına ulaşmasıyla yeni giriş sayısının artmaya başlayacağı anlamına geliyor. Bunu değiştirebilirsiniz, ancak aşırıya kaçmayın, böylece aşırı güçlenmez.

Satır 19.24'te kimlikli bir blok var load_more_gs, o zaman yalnızca döngüde ve stillerde değil, aynı zamanda komut dosyasında da çalışmayı gerektirecek blok adını değiştirmek isteyeceksiniz.

Krok 5

Function true_load_posts())( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // taraf geliyor $args[" post_status" ] = "yayınla", $q = new WP_Query($args);

" rel = "yer işareti" title = "!}!}">

Bu kodun ihtiyaçlarınıza göre değiştirilmesi gerekiyor. 9, 10, 11 numaralı satırları, CROC No. 1'i oluşturduğunuz dosyalardan herhangi birinde döngünün ortasında bulunan HTML koduyla değiştirmeniz gerekir. HTML'niz yoksa, soyut girişler yazmak için PHP'niz varsa, o zaman 8, 9, 10, 11, 12 satırları değiştirmeniz gerekir. Bu, küçük resmin görüntülenmesini, gönderinin adını, teaser metnini vb. gösteren koddur. Eğer hiçbir şey yapmazsanız paylaşımlarınızın tasarımı her şeyi çarpıtacak ve bozacaktır.

Kodun bir kısmını kendi kodunuzla değiştirdikten sonra otomatik gelişmiş robotu kontrol etmeyi deneyebilirsiniz. İyi bir yemek yemediyseniz ilk sonucu alırsınız. Şimdi başka bir geliştirme türüne geçelim.

Bir düğmeye basıldığında kayıtları artırır - Göster

Krok 1

Döngüden dosyaya eklenmesi gereken yöntemi geçen ilk çiğdemdeki kod, alt kısım dışında aynı olacaktır, böylece ön yükleyici yerine bir düğme olacaktır. Bu nedenle, kodu ilk çiğdemden son yönteme kadar vikorize edin:

//kimin yardımcısı

gösterge niteliğinde- Bu buton metni dilediğiniz gibi değiştirilebilir.

Timsah 2

Artık düğme için yeni stiller ekledik. İlk yönteme stiller eklediyseniz bunları silebilirsiniz.

#loadmore_gs( arka plan:#63a63e; renk:#fff; dolgu:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; genişlik: 150 piksel;kenar boşluğu:0 otomatik;imleç:işaretçi;

Timsah 3

Önceki yöntemin tamamen aynısı, daha önce denediyseniz atlayın, denemediyseniz ilk yönteme benzer şekilde çalışın.

Krok 4

Eşzamansız animasyon komut dosyası bir süredir kullanımdan kaldırıldı ve artık düğmelere basılarak kullanılabilir. Bunun gibi:

JQuery(function($)( $("#loadmore_gs").click(function())( $(this).text("Zavantazhenya..."); var data = ( "action": "loadmore", " sorgu ) ": true_posts, "page" : current_page ); text("Gösterge").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $ ("#loadmore_gs").remove(); ) ) )); )); ));

Burada düğmenin metnini özelleştirebilir veya değiştirmek istediğiniz kimliğin adını değiştirebilirsiniz. 3. satırda - kelimesi var. Bu, düğmeye bastığınızda gerçekleşecek ve AJAX analizörü çalışmanızı tamamlayacaktır.

15. satırda metin var - gösterge niteliğinde, bu metin navigasyondan sonra görünecektir. Metni ilk metinden değiştirdiyseniz buradan değiştirin.

Krok 5

Obluvach değişiklik yapılmadan aynı şeyden mahrum bırakılır, bu nedenle bu süre de atlanabilir, aksi takdirde rahatsız olmadıysanız onu önceki yöntemden öldürün.

Başka bir yöntem için takip etmeniz yeterli. İlkinde olduğu gibi Wikonan'ın tüm kuralları doğru olduğundan sonuç bozulmayacaktır.

Bir düğme ve ön yükleyici eklemek ve sitemdeki her şeyi denemek de dahil olmak üzere hem yöntemleri hem de robotları kontrol ettim. Belki de sorunlarınız varsa, durumdan çıkmanız ve her şeyi saygıyla gözlemlemeniz gerekir. Cilt konusu farklı ve cilt blogu özeldir, bu nedenle yöntemin işe yaramadığını yazmadan önce tekrar çevirin.

Bunların hepsi saygı uğruna. 🙂