Ajax Load More - bu Ajax Powered Queries bilan dangasa yuklash postlari, bitta postlar, sahifalar, sharhlar va boshqalar uchun WordPress cheksiz aylantirish plaginidir.

Ajax Load More qisqa kod yordamida murakkab maxsus WordPress so‘rovlarini yarating. Builder muharrir yordamida yoki to‘g‘ridan-to‘g‘ri shablon fayllaringizga qisqa kodni yon sahifangizga kiritadi.

Ajax Load More WooCommerce va Easy Digital Downloads kabi mashhur elektron tijorat plaginlari bilan cheksiz aylantirish uchun mos keladi.

Xususiyatlari

• Qisqa kod yaratuvchisi— Oʻzingizning shaxsiy Ajax Load More qisqa kodlarini yarating, bizning ishlatish uchun qulay signal qisqa kodimizdagi turli WordPress parametrlariga oʻxshaydi (Qisqa kod parametrlariga qarang).
• So'rov parametrlari— Ajax Load More sizga WordPress juda ko'p turli imkoniyatlarga ega ekanligini so'rash imkonini beradi. Pochta turi, xabar formati, sana, toifa, teglar, maxsus taksonomiyalar, qidiruv muddati, mualliflar va boshqalar bo'yicha so'rovlar!
• Takrorlovchi shablonlar— Veb-saytingiz koʻrinishi va hissiyotiga mos keladigan oʻz takrorlash shablonini yaratish orqali Ajax Load More funksiyasini tahrirlang va kengaytiring (skrinshotlarga qarang).
• Bir nechta misollar— Ajax Load More’dan bir nechta maqolalarni bitta sahifaga, postga yoki shablonga kiritishingiz mumkin.
• Ajax filtrlash— Ajax Load More maxsus filtrlash usuli sizga Ajax so‘rovi natijalarini filtrlash va yangilash imkonini beradi.
• Ko'p tarmoqli muvofiqligi— Tarmog'ingizdagi barcha saytlarda takrorlash shablonlarini boshqaring.
• Sozlamalar paneli— Plagin sozlamalarini yangilab, Ajax Load More versiyasini sozlang.

• takrorlagich- Takrorlagich shablonini tanlang (qo'shimcha mavjud). Standart = "standart"
• post_type- Post turlarining vergul bilan ajratilgan ro'yxati. Standart = "post"
• sticky_posts— Ajax ro'yxati uchun yopishqoq post buyurtmasini saqlang. Standart=noto'g'ri
• post_format- Pochta formati bo'yicha so'rov. Standart = null
• kategoriya— Vergul bilan ajratilgan toifalar roʻyxati. Standart = null
• kategoriya__va— ID boʻyicha kiritiladigan toifalarning vergul bilan ajratilgan roʻyxati. Standart = null
• toifa__yo'q— ID boʻyicha chiqarib tashlash uchun vergul bilan ajratilgan toifalar roʻyxati. Standart = null
• teg— Vergul bilan ajratilgan teglar roʻyxati — slug orqali kiritiladi. Standart = null
• teg__va— Vergul bilan ajratilgan teglar roʻyxati ID tomonidan kiritilgan. Standart = null
• teg__not_in— Vergul bilan ajratilgan teglar roʻyxati — ID boʻyicha chiqarib tashlash. Standart = null
• taksonomiya- Maxsus taksonomiya nomi bo'yicha so'rov. Standart = null
• taksonomiya_termlari- Maxsus taksonomiya atamalarining vergul bilan ajratilgan ro'yxati (slug). Standart = null
• taksonomiya_operatori
• taksonomiya_munosabat— Har bir taksonomiya o‘rtasidagi mantiqiy bog‘liqlik bir nechta bo‘lganda. (VA/YOKI). Standart = 'VA'
• kun- Hafta kuni. Standart = null
• oy- Yil oyi. Standart = null
• yil- Pochta yili. Standart = null
• taksonomiya_operatori— Taksonomiya shartlarini taqqoslash operatori (IN/NOT IN). Standart = 'IN'
• meta_key- Maxsus maydon kaliti (nomi). Standart = null
• meta_qiymat- Maxsus maydon qiymati. Standart = null
• meta_qiyoslash— meta_key va meta_value ni solishtirish uchun operator. Standart = 'IN'
• meta_turi- Maxsus maydon turi. Standart = 'CHAR'
• meta_munosabat- Bir nechta maxsus maydon yozuvlari (VA/OR) bilan Vickory. Standart = 'VA'
• muallif- Vergul bilan ajratilgan mualliflar ro'yxati id bo'yicha. Standart = null
• post_in— Vergul bilan ajratilgan soʻrovga kiritilgan pochta identifikatorlari roʻyxati. Standart = null
• post__not_in— So‘rovdan chiqarib tashlash uchun vergul bilan ajratilgan pochta identifikatorlari ro‘yxati. Standart = null
• qidirmoq- Qidiruv so'rovi ("s"). Standart = null
• custom_args- nuqta-vergul bilan ajratilgan qiymatlar ro'yxati: argumentlarni juftlashtirish. masalan tag_slug__va:dizayn, ishlab chiqish; voqea_display:kelayotgan. Standart = null
• post_status- Xabar holatini tanlang. Standart = "nashr qilish"
• buyurtma— Xabarlarni ASC (o'sish) yoki DESC (pasayish) tartibida ko'rsatish. Standart = "DESC"
• buyurtma berish— Xabarlarni sana, sarlavha, ism, menyu tartibi, muallif, post identifikatori yoki sharhlar soni bo'yicha buyurtma qiling. Standart = "sana"
• ofset- Dastlabki so'rovni (raqamni) ofset qilish. Standart = '0'
• har bir_sahifada postlar— Har bir Ajax so'rovi bilan yuklanadigan postlar soni. Standart = '5'
• aylantiring— Foydalanuvchi sahifani aylantirganda koʻproq postlarni yuklang (toʻgʻri/notoʻgʻri). Standart = "to'g'ri"
• aylantirish_masofasi— Aylantirish paytida o'q otish qurolining chetidan chetiga turing. Standart = '150'
• scroll_container- Ajax Load More cheksiz aylantirishni ota-konteynerga cheklash. Standart = null
• maksimal_sahifalar- Foydalanuvchi aylanayotganda yuklanishi mumkin bo'lgan sahifalarning maksimal soni (o'tish paytida faollashtiriladi = rost). Standart = '0'
• pause_override— Pauza parametrini bekor qilish va aylantirishda postlarni yuklashni boshlash uchun aylantirishga ruxsat bering. Standart = null
• pauza— Foydalanuvchi Ko‘proq yuklash tugmasini bosmaguncha postlarni yuklamang (to‘g‘ri/noto‘g‘ri). Standart = "noto'g'ri"
• o'tish- Xabarlarni ochib beradigan o'tishni tanlang (so'nish/masonlik/yo'q). Default='fade'
• o'tish_konteyneri- Ajax Load More (.alm-reveal) yuklash konteynerini ko'rsatish. Standart = "to'g'ri"
• o'tish_konteyneri_sinflari- .alm-reveal o'tish div-ga sinflarni qo'shing.
• duvarchilik_selektori- Har bir devor elementining maqsadli sinf nomi. Standart = null
• masonry_animation— Masonlik buyumlari uchun yuklash o‘tish turini tanlang. (standart/kattalashtirish/yuqoriga siljish/pastga siljitish/yo'q). Standart = standart
• masonry_horizontaorder- Gorizontal tartibni saqlang. Standart = rost
• images_loaded— Ajax yuklangan kontentni ko'rsatishdan oldin barcha tasvirlar yuklanishini kuting (to'g'ri/noto'g'ri). Standart = "noto'g'ri"
• yo'q qilish— 'n' sonli sahifalar yuklangandan so'ng, ajax load ko'proq funksiyasini olib tashlang. Standart = null
• progress_bar— Ajax tarkibini yuklashda oynaning yuqori qismidagi taraqqiyot satri ko'rsatkichini ko'rsatish. Standart = "noto'g'ri"
• progress_bar_rangi- Jarayon satrining olti burchakli rangini kiriting. Standart = 'ed7070'
• tugma_yorlig'i— Yana yuklash tugmasi uchun yorliq matni. Standart = "Eski xabarlar"
— Kontent yuklanayotganda “Yuklash ko‘proq” tugmasi matnini yangilang. Standart = null
• konteyner_turi— ALM sozlamalari sahifasida oʻrnatilgan Global konteyner turini bekor qiling. Standart = null
• css_klasslar— Ajax Load More konteyneriga maxsus CSS sinflarini qo'shing. Standart = null
• id— Ajax Load More misoli uchun noyob identifikator.
• o'rnatilgan- Bu o'zgarmagan Ajax Load More misoli. Standart=noto'g'ri

Misol Ajax ko'proq qisqa kodni yuklash

Namoyishlarga misol

• Standart- Qutidan tashqari funksionallik va uslub.
• Kengaytirilgan maxsus maydonlar— Ajax Load More bilan kengaytirilgan maxsus maydonlar maʼlumotlarini cheksiz aylantirish.
• Qo'shimchalar- Cheksiz aylantiruvchi post qo'shimchalari.
• Keyin yo'q qilish— “n” sahifadan keyin Ajax Load More funksiyasini olib tashlang.
• Tadbirlar ro'yxati— Hodisalarni maxsus maydon sanasi bo'yicha buyurtma qilish va ro'yxatga olish.
• Filtrlash— Ajax Load More misolida asl holatini tiklash va filtrlash.
• Flexbox— Flexbox yordamida javob beruvchi Ajax Load More panjarasini yaratish.
• Cheksiz aylantirish— Yangi yuklash funksiyalari va uslublariga qarash.
• Rasmlar yuklangan— Ajax yuklangan kontentni ko'rsatishdan oldin rasmlarni yuklab oling.
• Duvarcılık— Masonry JS bilan moslashuvchan panjara tartibini yaratish.
• Bir nechta misollar- Bitta sahifaga bir nechta Ajax Load More 'qo'shing.
• Peyjing URL manzillari- SEO qo'shimchasi bilan har bir Ajax Load More so'rovi uchun noyob peyjing URL manzillarini yarating.
• — Xabarlar foydalanuvchi tashabbusi bilan yuklanmaydi.
• Oldindan yuklangan postlar— Serverga barcha Ajax so'rovlari uchun dastlabki xabarlar to'plamini osongina oldindan yuklang.
• Taraqqiyot paneli— Har bir Ajax so'rovi bilan yuklanish jarayoni indikatorini ko'rsatish.
• Qidiruv natijalari— Qidiruv shartlari asosida natijalarni qaytarish.
• Konteynerni aylantiring- Ajax Load Moreni asosiy konteynerga cheklash.
• SEO va peyjing— Bitta kuchli navigatsiya tizimini yaratish uchun ushbu ikkita qo'shimchani birlashtiring.
• Slayd-shou galereyasi— Ajax Load More va Paging plaginlari yordamida galereya yarating.
• Jadval tartibi— Ajax Load More kerakli natijalarni jadval formatida aks ettiradi.

Barchamizda arxivlar bor edi, u erda oyni tanlaganimizda, bizni o'sha oy uchun yozuvlar tomoniga yo'naltirishdi. WordPress-da arxivlarni bunday qidirish qo'shimcha wp_get_archives() funksiyasi yordamida amalga oshiriladi. Shunga o'xshash xabarlar arxivi WordPressning asosiy toifalari ko'rsatilganda paydo bo'ladi, faqat xabarlar toifalar bo'yicha guruhlangan.

Bugun men sizga aytmoqchiman, dinamik arxiv sahifasini qanday yaratish kerak. "Dinamik" degan ma'noni anglatadi Bir oyni tanlaganingizda, natijalar xuddi shu sahifada ko'rsatiladi, qo'shimcha yordam uchun AJAX - Javascript. JQuery kutubxonasi Ajax bilan ishlash uchun oddiy API taqdim etganligi sababli, biz ushbu ramkadan foydalanamiz. Undan oldin jQuery bo'lmaganda bugun qayerda bo'lardik? Garchi vikorist tez-tez va zich bo'lsa ham, sizning loyihangiz allaqachon aloqalarga ega.

Ushbu maqolani yozishdan oldin men ushbu blog uchun dinamik arxiv sahifasini yaratdim va uni hayratda qoldirmoqchiman (DEMO).

Dinamik arxivni amalga oshirish uchun biz 4 bosqichdan o'tishimiz kerak:

Men sizga WordPress asosiy mavzusidan foydalangan holda dinamik arxiv sahifasini yaratishni ko'rsataman: "twentyten".

1. WordPress uchun jQuery plaginlari

JQuery skriptini ulashning to'g'ri varianti wp_enqueue_script() funksiyasidan foydalanishdir. Bunday ulanishlar sizni plaginlardagi skriptga ulanishlar bilan ziddiyatlardan himoya qiladi. Skript bir marta ulanadi.

Ushbu kodni functions.php fayliga kiritishingiz kerak.

Variant 2

Birinchi variantda biz skriptni WordPress fayllarida joylashgan serverimizdan uladik. Biroq, jQuery fayliga yuborishni o'zgartirishingiz va uni Google CDN-ga ulashingiz mumkin. Ushbu yondashuvning afzalligi shundaki, brauzer allaqachon ushbu faylga jalb qilinganligi sababli, saytingizga kirganingizda, brauzer endi skriptga qiziqmaydi / sahifaning e'tibori ortadi. Bundan tashqari, CDN skripti ixcham shaklda taqdim etilgan, buning uchun fayl bir kilobayt engilroqdir:

Funktsiya 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", "mening_scripts_method");

Variant 3

JQuery-ni ulashning eng mashhur va "qattiq" varianti tegning o'rtasida joylashgan header.php shablon fayliga xabar yozishdir.. Biz quyidagi html kodini kiritamiz:

2. Zavantajivo rasmi oldingi-zavantazhuvach

Sovutish davrida, serverdan AJAX-dan foydalanish so'ralganda, biz mijozga nima bo'layotgani haqida xabar berib, rasmni ko'rsatishimiz kerak. Bunday suratlar fonda bir necha marta aytilgan, bunday rasmga alternativa matn: "Oshiqlik ...".

Agar bizda shunday rasm bo'lsa, uni masalan, shu yerdan yuklab olamiz: Animatsiyalangan gif (xizmat mening foydamga), nomini ajax-loader.gif deb o'zgartiring va uni katalogdagi rasmlar papkasiga qo'ying. WordPress mavzularimiz. Natijada, biz quyidagi rasmni olishimiz mumkin: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Quyida mi yogo vikoristovamo u kodi.

3. Oddiy sahifa shablonini yarating

WordPress-dagi oddiy sahifalar uchun siz uning atrofidagi shablonlardan foydalanishingiz mumkin, shuning uchun biz boshqa sahifalar tuzilishidan butunlay farq qiladigan sahifa yaratishimiz mumkin. WordPress-ni oddiy sahifa uchun shablon sifatida fayl yaratishga sozlash uchun faylning yuqori qismiga quyidagi kodni yozishingiz kerak:

Arxiv shablonlari shablonimizning nomi bo'lib, biz sahifa yaratilganda WordPress boshqaruv panelida foydalanamiz.

Keling, tpl_archive.php nomli papka uchun yangi fayl yaratamiz va u erga yo'riqnoma kodini kiritamiz. Keyin WordPress administrator paneliga o'tamiz va doimiy sahifa yaratamiz, uni tanamiz, shablon yaratamiz.

Endi biz ushbu faylni kerakli kod bilan saqlaymiz.

1. Avvalo, biz paydo bo'lgan ro'yxatlarni ko'rsatishimiz kerak, biz ularni qo'shimcha WordPress funksiyasi yordamida yaratishimiz mumkin: wp_get_archives() va wp_dropdown_categories():

get_header(); get_footer(); Shablonning sarlavha va altbilgisini olib tashlash aniq. get_sidebar(); Men hech qanday oqilona kodga aralashmasligimga ishonch hosil qildim. Oylar va sarlavhalar ro'yxatini ko'rsatish uchun kodni hal qiling.

Bo'sh blok

2. CSS orqali kiradigan ro'yxatlarni loyihalashtiramiz, Sarlavhani bosgandan so'ng darhol ushbu kodni kimga qo'shishim mumkin ():

Ushbu bosqichda men quyidagilarni o'ylab topdim:


3. Dodamo JavaScript kodi, serverga yuklab olinadi va archive_pot blokida ko'rsatiladi (kod CSS uslublaridan keyin qo'shiladi):

Keling, kodni ajratamiz:
O'rtadagi hamma narsa $("#archive_browser select").change(function())(...) chiqib ketadigan ro'yxatlarni o'zgartirganda so'raladi.

/images/ajax-loader.gif - yuklab olish davrida mavjud bo'lgan rasm fayliga (kerakli ...) o'ting.

/scripts/archive_getter.php – keyingi bosqichda biz yaratadigan arxiv fayliga o'ting.

$.post(...); - AJAX texnologiyasidan foydalangan holda brauzerdan serverga so'rov yaratuvchi jQuery funksiyasi.

Post sahifasi shabloni uchun yangi kod

Oddiy sahifa shabloni uchun fayl (biz faylni mavzu papkasida yaratamiz va kodni u erda nusxalaymiz):

4. Kompilyator faylini yaratish

AJAX Javascript yordamida sahifani qayta ishga tushirmasdan brauzerni serverga ulash orqali ishlaydi. Skriptning o'zi, agar u mijozning kompyuterida joylashgan bo'lsa ham va ma'lumotlar serverda bo'lsa ham, ma'lumotlarni chiqarib ololmaydi, shuning uchun skript ma'lumotlarni ajratib olib, serverga qaytishi kerak, bu holda bunday dialog bo'ladi. namuna fayli tomonidan qo'llab-quvvatlanadi.

Keling, katalogdagi skriptlar papkasini yaratamiz, arxiv_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) faylini yaratamiz va ushbu faylni quyidagi kod bilan eslaymiz:

Kodning kichik tahlili:

Biz birinchi navbatda WordPress yadrosini ta'kidlaymiz (barcha sozlamalar, funktsiyalar, plaginlar). WordPress funksiyalarini biz uchun mavjud qilish uchun biz ushbu faylda ma'lumotlarni olish uchun foydalanadigan query_posts() ga qo'ng'iroq qilishimiz kerak.

O'ylaymanki, agar(($yil=="") && ($oy=="") && ($cat=="-1"))(...) keyinroq foydalanishimiz mumkin bo'lgan ma'lumotlar mavjudligini tekshiramiz. query_posts() funktsiyasi, boshqa funksiyalar yo'qligi sababli, ogohlantirish ko'rsatiladi.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$oy&yil=$yil"); Va WordPressning asosiy tsiklidan past bo'lgan hamma narsa.

Eksa va tamom, tomon tayyor!

O'q mendan chiqqan narsa (garchi rasm muhim bo'lsa ham. Bu tirik dumba):

Kontentni yaxshilash (tugmani ko'rsatish) wordpress (ajax)

Yordamchilardan biri mendan tarkibni (xabarlar, yozuvlar) yoki boshqa "ko'rsatish tugmasi" ostida dinamik ravishda ta'kidlaydigan saytda ishlashni so'radi. Bunday echimlarga asoslangan dizayn yanada mashhur bo'ladi. Shunga o'xshash texnikani Twitter, VKontakte-da topish mumkin. Wordpress uchun ushbu mahsulotlarning plaginlari etarli emasligi achinarli, men faqat bitta plaginni bilaman, lekin qarorning hazilini davom ettirib, men bunga loyiq emasman. Va ko'rish mavzusiga to'xtalib, u erda jQuery kutubxonasi postlarning dinamik yaxshilanishini yaratish uchun ishlatiladi.

Dinamik tarkibni yaxshilash uchun bizga ikkita fayl kerak bo'ladi:

Jquery.cookie, skript fayllari shabloningiz bilan papkada joylashgan js jildiga joylashtirilishi kerak, chunki bunday papka yo'q, keyin ularni yaratish kerak. Keyinchalik, header.php faylidagi skriptlarga yo'l qo'shishingiz kerak.

//teglar orasiga joylashtirish

Skriptlar uchun ko'rsatmalarni yozganingizdan so'ng, agar siz postlarni dinamik reklama qilishni rejalashtirmoqchi bo'lsangiz, index.php faylini yoki boshqa faylni yuborishingiz kerak bo'ladi. Qo'shish kerak id = "loop" pochta konteynerida, sinf = "post" nazorat punktida, id = "sahifalash" U erda siz "Ko'proq ko'rsatish" tugmasini joylashtirmoqchisiz. Kod shunday ko'rinadi:

Natija:

Skriptni ishga tushirish uchun sizga jQuery kutubxonasi kerak, kutubxonani shu tarzda ulashingiz mumkin

Kontentni yaxshilashni sinab ko'rish uchun shablon

Kengayishni sinab ko'rish uchun shablonni WordPress shablonlari papkasiga yuklab olishingiz kerak, so'ngra administrator panelida nom testi bilan shablonni tanlang.

Agar siz mening resursimni yoqtirmoqchi bo'lsangiz va meni moliyaviy qo'llab-quvvatlamoqchi bo'lsangiz, quyidagi ma'lumotlarni kiritib, summani qaytadan ixtiro qilishingiz mumkin:

• Yandex Gamanets - 410014625168542
• Webmoney- R429373694729

Qo'shimcha AJAX texnologiyasi ortida nima bor? qidiruvni optimallashtirish usulidan foydalanish ovoz tizimlaridan sayt o'rniga qismni yig'ish orqali (bu, aytmoqchi, yashirish emas).

Men uni texnik jihatdan amalga oshirdim. O'z bloglarida xuddi shunday takrorlashni xohlaydigan ko'p odamlar bor edi, men buni qanday qilish haqida ma'lumot berishga harakat qilaman.

AJAX mohiyatan JavaScript yordamida yon tomon oʻrniga dinamik foydalanishni bildiradi. Tobto. Kontentning ushbu qismi saytda ko'rsatiladi, lekin agar siz sahifaning chiqish kodiga qarasangiz, u erda hech narsa yo'q. Yoki brauzeringizda JavaScript-ni yoqsangiz, uning mazmuni ham ko'rinmaydi.

Bunday imkoniyat g'olib bo'lishi mumkin, masalan, shunday ichki xabarlar sonini o'zgartirish ovoz tizimlari uchun saytida. Na Google, na Yandex kontentning AJAX orqali ulangan qismini indekslamaydi.

OK, keling, mashg'ulotga o'tamiz. Men sizga aytaman WordPress-ni qanday boshlash kerak Yon panelda ko'rsatilishi mumkin bo'lgan arxivlarning oylik ro'yxati ilova qilinadi.

Men va'z qilyapman 2 ta variant qaror. Ikkinchisi eng oddiy.

Birinchi variant

ajax_archives.php) keyingi qadam bilan:

WordPress administratoriga kiring va yangi sahifa yarating. Uni, masalan, "Arxivlar ro'yxati" deb nomlash o'rinli bo'ladi. Blokda o'ng qo'l " Hikoya atributlari» "AJAX arxivlar ro'yxati" shablonini tanlang.

Brauzeringizda ushbu sahifani ochganingizda, siz faqat kerakli narsalar ro'yxatini va boshqa hech narsa emasligini ko'rasiz. Eksa bu erda va veb-saytda kerakli joyda targ'ib qilinadi.

Fayl bor sidebar.php

Biz AJAX ni jQuery yordamida amalga oshiramiz, chunki saytingizda hali hech qanday ulanish mavjud emas, fayl header.php koddan oldinquyidagi kodni qo'shing:

Endi saytga kichik skriptni qo'shishning iloji yo'q, bu qimmatli tarkibdir. js faylini yarating (masalan, scripts.js

(funksiya($) ( $(funksiya() ( $("#arxivlar").load("http://YOUR_DOMAIN/ajax_archives/"); )) ))(jQuery)

http://YOUR_DOMAIN/ajax_archives/ ni yaratilgan sahifangizning yuqorisidagi manzil bilan almashtiring.

header.php :

Boshqa variant

Bu variant qat'iy sodda, chunki Bu erda qo'shimcha sahifa yaratishning hojati yo'q.

Otangiz uchun WordPress shabloni bilan yangi PHP fayl yarating (masalan, ajax_archives.php) keyingi qadam bilan:

Kodning birinchi qatori yangi sahifa yaratish zaruratini yo'q qiladi.

Fayl bor sidebar.php Agar siz arxivlar roʻyxatini kengaytirmoqchi boʻlsangiz, quyidagi html kodini kiriting:

Agar jQuery hali saytingizga ulanmagan bo'lsa, fayl header.php koddan oldinquyidagi kodni qo'shing:

Yangi JS fayl yarating (masalan, scripts.js) va yangi haqoratli kodni kiriting:

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

Faylni saytingizdagi shablon papkasiga joylashtiring va faylga ulaning header.php, tegdan oldin bosh qatorni kiritish :

Eksa, kuch va bu hammasi. Natijani kuzatishingiz mumkin.

Shunga o'xshab, siz butun yon panelni yopishingiz yoki uning o'rniga bir nechta qo'shni bloklarni yaratishingiz mumkin.

Siz allaqachon taxmin qilganingizdek, bugungi kunda WordPress-da harakatlanayotganda yangi yozuvlar doimiy ravishda o'sib bormoqda. Orqaga qarab navigatsiya oʻrniga, aylanayotganda yozuvlar avtomatik ravishda paydo boʻladi. Yordam uchun qayta murojaat qilmasdan yangi yozuvlar sonini ko'paytirish mumkin AJAX. Biz hech qanday plaginlardan foydalanmasdan hammasini qila olamiz.

Endi men bunday takomillashtirishning ikkita usulini ko'rsataman. Aslini olganda, bu bir xil usul, har xil kuchlar bilan bir oz. Variantlar siz aylantirganingizda yoki tugmani bosganingizda avtomatik ravishda faollashadi, masalan - indikativ. Saytingiz uchun eng mos keladigan narsa sizga bog'liq.

O'tkazish vaqtiga qarab yozuvlarni avtomatik ravishda oshiradi

Krok 1

Boshlash uchun siz avtomatik rivojlanishni joriy qilishni xohlaysizmi, bilishingiz kerak. Ko'pincha, tsiklni orqaga qarab navigatsiyadan olib tashlash uchun yorliqni o'rnatishingiz kerak. Masalan, menda kichikroq fayl bor content.php. Shunday qilib, siz shunchaki burishingiz mumkin - index.php, archive.php, loop.php, kategoriya.php, search.php va boshqalar. Ushbu fayllar standart WordPress navigatsiyasi yoki maxsus funksiyaga ega bo'lishi mumkin. Uni statistikaga qo'llang.

Shunday qilib, sizda shunga o'xshash narsa bo'lsa, u tsiklning oxirida o'zini o'zi hal qiladi. Yangi trekni keyingi kod bilan almashtiring.

maksimal_sahifalar_soni > 1): ?>

Kodning yuqori qismini tirnash kerak emas, pastki o'q esa jozibali soat davomida animatsiya uchun javobgardir. Blokning o'rtasida joylashgan hamma narsani o'chirib tashlashingiz shart emas - load_more_gs, yoki o'rtadagi hamma narsani o'zgartiring, load_more_gs ning o'zini emas, balki uning o'rniga kodingiz bilan o'zgartiring va siz o'zingizning animatsiyangizga ega bo'lasiz.

UPD Agar reklamani targ'ib qilgandan so'ng, qidiruv tomonida emas, balki kategoriya tomonida ishlash yaxshiroq bo'lsa, kodning 4-qatorini yangi ikkitasi bilan almashtirishga urinib ko'rishingiz mumkin:

// Ushbu parametrni o'zgartiring true_posts = "query_vars); ?>"; // Bunda $str = serialize($wp_query->query_vars); var true_posts = "";

Croc 2

Endi biz animatsiyamiz uchun uslublar qo'shamiz. Agar siz buni allaqachon ko'rgan bo'lsangiz, ushbu nuqtani o'tkazib yuborishingiz mumkin.

#load_more_gs( width: 53px; padding:50px 0; margin: 0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::oldin, .cssload-whirlpool :; yuqori: 50%; chap: 50%; chegara: 1px qattiq rgb (255,255,255); chegara-chap-rang: rgb(0,225,255); chegara radiusi: 974px; -chegara radiusi: 974px; -webkit-border-radius: 974px; -moz-chegara radiusi: 974px; ) cssload-aylantirish 1150ms chiziqli cheksiz;-o-animatsiya: cssload-aylantirish 1150ms chiziqli cheksiz;-ms-animatsiya: cssload-aylantirish 1150ms chiziqli cheksiz; 1150ms chiziqli cheksiz aylantirish; ) .cssload-whirlpool::befor (kontent: ""; hoshiya: -22px 0 0 -22px; cssload-aylantirish 1150ms chiziqli cheksiz; -ms-animation ion: cssload-1150ms chiziqli cheksiz aylantirish; -webkit-load-animation: cs 1150ms chiziqli cheksiz aylantirish; -moz-animatsiya: cssload-aylantirish 1150ms chiziqli cheksiz; ) .cssload-whirlpool::after (kontent: ""; chegara: -28px 0 0 -28px; balandlik: 55px; kenglik: 55px; animatsiya cssload-aylantirish 2300ms chiziqli cheksiz;-ms-animatsiya: cssload-aylantirish 2300ms chiziqli cheksiz; -webkit-animatsiya: cssload-aylantirish 2300ms chiziqli cheksiz; -moz-animatsiya: cssload-aylantirish 2300ms chiziqli cheksiz aylanish;)() @-o-keyframes cssload-rotate ( 100% ( -o-transform: rotate(360deg); ) ) @-ms-keyframes cssload-rotate ( 100% ( -ms-transform: rotate (360deg); ) ) @- webkit-keyframes cssload-rotate ( 100% ( -webkit-transform: rotate(360deg); ) ) @-moz-keyframes cssload-rotate ( 100% ( -moz-transform: rotate (360deg) ; ) )

Croc 3

Endi bizga asinxron animatsiya skripti kerak. Bu erda ikkita yo'nalish mavjud. Yoki skriptni altbilgiga kiriting, uni teglarga siqib qo'ying:

Yoki fayl yarating, masalan - moreload.js, yangi skript qo'shing va keyin uni to'g'ri yo'lni ko'rsatgan holda podvalga ulang, masalan:

Yoki shunday qilib, kodni qo'shing functions.php:

Funktsiya 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

Endi skriptning o'zi. Bu siz tanlagan usul bo'yicha ko'chiriladi va joylashtiriladi.

JQuery(function($)( $(window).scroll(function())( var bottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); agar ( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$("tana").hasClass("loading"))( $.ajax(( url:ajaxurl, data: ma'lumotlar , turi:"POST", beforeSend: function(xhr)( $("tana").addClass("loading"); ), muvaffaqiyat:function(ma'lumotlar)( if(data) ( $("#load_more_gs") ). $("tana").removeClass("yuklash"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

3-qator qiymatga ega 2000 . Bu shuni anglatadiki, saytning pastki chegaralariga kirish o'z chegarasiga etib, yangi yozuvlar sonini ko'paytira boshlaydi. Siz uni o'zgartirishingiz mumkin, lekin uni haddan tashqari oshirib yubormang, shunda u kuchsizlanmaydi.

19.24-qatorda ID bilan blok mavjud load_more_gs, keyin siz blok nomini o'zgartirishni xohlaysiz, bu nafaqat tsikl va uslublarda, balki skriptda ham ishlashni talab qiladi.

Krok 5

Function true_load_posts())( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // tomon kelmoqda $args[" post_status" ] = "nashr qilish", $q = new WP_Query($args);

" rel="xatcho'p" title="!}!}">

Ushbu kod sizning talablaringizga muvofiq o'zgartirilishi kerak. 9, 10, 11 qatorlarni CROC № 1 yaratgan istalgan fayllarda tsiklning o'rtasida bo'lgan HTML kod bilan almashtirishingiz kerak. Agar sizda HTML bo'lmasa, lekin mavhum yozuvlarni yozish uchun PHP bo'lsa, unda siz 8, 9, 10, 11, 12 qatorlarni almashtirishingiz kerak. Bu eskiz ko'rinishini, post nomini, tizer matnini va hokazolarni ko'rsatadigan kod. Agar siz hech narsa qilmasangiz, hamma narsa egri va sizning postlaringiz dizayni bilan buziladi.

Kodning bir qismini o'zingizga almashtirganingizdan so'ng, avtomatik rivojlangan robotni tekshirishga urinib ko'rishingiz mumkin. Agar siz yaxshi ovqatlanmagan bo'lsangiz, unda siz birinchi natijaga erishasiz. Endi takomillashtirishning boshqa turiga o'tamiz.

Tugmani bosganda yozuvlarni oshiradi - Ko'rsatish

Krok 1

Birinchi krokusdan olingan kod, faylga pastadirdan kiritilishi kerak bo'lgan usuldan o'tib, pastki qismdan tashqari bir xil bo'ladi, shuning uchun oldindan yuklovchi o'rniga tugma bo'ladi. Shunday qilib, birinchi krokusdan oxirgi usulgacha kodni vikorize qiling:

//kimning o'rinbosari

indikativ- Ushbu tugma matnini xohlaganingizcha o'zgartirishingiz mumkin.

Croc 2

Endi biz tugma uchun yangi uslublar qo'shdik. Agar siz birinchi usulga uslublar qo'shgan bo'lsangiz, ularni o'chirishingiz mumkin.

#loadmore_gs(fon:#63a63e; rang:#fff; toʻldirish:5px 0; matnni tekislash: markaz; -moz-border-radius: 4px; -webkit-border-radius: 4px; chegara radiusi: 4px; eni: 150px;margin:0 auto;kursor:koʻrsatgich;

Croc 3

Oldingi usulda bo'lgani kabi, agar siz allaqachon sinab ko'rgan bo'lsangiz, uni o'tkazib yuboring, agar bo'lmasa, birinchi usulga o'xshash tarzda ishlang.

Krok 4

Asinxron animatsiya skripti bir muncha vaqtdan beri to'xtatilgan va endi tugmalarni bosish uchun mavjud. Bu kabi ko'ring:

JQuery(function($)( $("#loadmore_gs").click(function())( $(this).text("Zavantazhenya..."); var data = ( "action": "loadmore", " so'rov ) ": true_posts, "page" : current_page ); text("Indicative").oldin(ma'lumotlar); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $ ("#loadmore_gs").remove(); ) ) )); ))) )))

Bu erda siz tugma matnini sozlashingiz yoki o'zgartirmoqchi bo'lgan ID nomini o'zgartirishingiz mumkin. 3-qatorda - so'zi bor. Agar siz tugmani bossangiz, bu sodir bo'ladi va AJAX analizatori ishingizni yakunlaydi.

15-qatorda matn bor - indikativ, bu matn navigatsiyadan keyin paydo bo'ladi. Agar siz birinchi matndagi matnni o'zgartirsangiz, uni shu yerda o'zgartiring.

Krok 5

Obluvach o'zgarishsiz bir xildan mahrum, shuning uchun bu davrni ham o'tkazib yuborish mumkin, aks holda sizni bezovta qilmagan bo'lsangiz, uni avvalgi usuldan o'ldiring.

Boshqa usul uchun faqat amal qiling. Birinchisi kabi, Wikonan-ning barcha qoidalari to'g'ri bo'lgani uchun, natija buzilmaydi.

Men ikkala usulni ham, robotlarni ham tekshirdim, shu jumladan tugma va oldindan yuklovchini qo'shib, saytimdagi hamma narsani sinab ko'rdim. Ehtimol, agar sizda muammolar bo'lsa, vaziyatdan chiqib, hamma narsani hurmat bilan kuzatishingiz kerak. Teri mavzusi boshqacha va teri blogi maxsus, shuning uchun usul ishlamayapti deb yozishdan oldin uni yana aylantiring.

Hammasi hurmat uchun. 🙂