Naglo-load ng content sa WordPress nang hindi nire-reload ang page. Walang katapusang pag-scroll ng mga post sa WordPress nang walang plugin. Mga filter ng produkto sa WooCommerce

Na, gamit ang teknolohiya ng AJAX, para sa mga layunin ng pag-optimize ng search engine, itinago ko ang bahagi ng nilalaman ng site mula sa mga search engine (na, sa pamamagitan ng paraan, ay hindi cloaking).

Teknikal kong ipinatupad ito. Dahil marami ang gustong ulitin ang parehong bagay sa kanilang mga blog, susubukan kong maghatid ng impormasyon kung paano ito gagawin.

Ang AJAX ay mahalagang dynamic na paglo-load ng bahagi ng nilalaman ng pahina gamit ang JavaScript. Yung. Tila ang bahaging ito ng nilalaman ay ipinapakita sa site, ngunit kung titingnan mo ang source code ng pahina, wala ito doon. O, kung hindi mo pinagana ang suporta ng JavaScript sa iyong browser, hindi rin makikita ang nilalamang ito.

Maaaring gamitin ang tampok na ito, halimbawa, upang bawasan ang bilang ng mga panloob na link sa isang site para sa mga search engine. Hindi ii-index ng Google o Yandex ang bahaging iyon ng nilalaman na konektado sa pamamagitan ng AJAX.

Kaya, magpatuloy tayo sa pagsasanay. Sasabihin ko sa iyo kung paano ito gawin sa WordPress gamit ang halimbawa ng buwanang listahan ng mga archive, na karaniwang ipinapakita sa sidebar.

Nag-aalok ako ng 2 solusyon. Ang pangalawa ay ang pinakasimpleng.

Unang pagpipilian

ajax_archives.php ) na may sumusunod na nilalaman:

Mag-login sa iyong WordPress admin at lumikha ng bagong page. Pangalanan ito ng kahit anong gusto mo, halimbawa "Listahan ng mga Archive". Sa kanan, sa block na “Mga Katangian ng Pahina,” piliin ang template na “listahan ng mga archive ng AJAX.”

Kung bubuksan mo ang pahinang ito sa isang browser, makikita mo na mayroon lamang ang listahan na kailangan namin at wala nang iba pa na hindi kailangan. Ito ang ilo-load natin sa site sa tamang lugar.

Sa lugar na iyon sa sidebar.php file

Ipinapatupad namin ang AJAX gamit ang jQuery, kaya kung hindi pa ito pinagana sa iyong site, idagdag ang sumusunod na code sa header.php file bago ang code:

Ngayon ang natitira na lang ay magdagdag ng isang maliit na script sa site na maglo-load ng kinakailangang nilalaman. Gumawa ng js file (hal scripts.js

(function($) ($(function() ($("#archives").load("http://YOUR_DOMAIN/ajax_archives/"); )) ))(jQuery)

Sa halip na http://YOUR_DOMAIN/ajax_archives/, palitan ang address sa itaas ng ginawang pahina.

header.php:

Mga Buwan - Mga Pamagat

get_header(); at get_footer(); kunin ang header at footer ng template ayon sa pagkakabanggit. get_sidebar(); Sinadya kong pinutol ito upang hindi ito makagambala sa pag-unawa sa code. Ang natitirang bahagi ng code ay nagpapakita ng Buwan at Kategorya na mga dropdown na listahan.

Ang isang walang laman na bloke ay isang lalagyan kung saan ipapakita ang mga resulta ng query, i.e. mga tala.

2. Idisenyo natin ang mga drop-down na listahan gamit ang CSS para magawa ito, idagdag kaagad ang sumusunod na code pagkatapos tawagan ang header ():

#archive_browser >

Sa yugtong ito nakuha ko ang mga sumusunod:


3. Magdagdag ng JavaScript code na gagawa ng kahilingan sa server at i-output ito sa archive_pot block (idinaragdag namin ang code pagkatapos ng mga istilo ng css):