Inhoud in WordPress laden zonder de pagina opnieuw te laden. Oneindig scrollen door WordPress-berichten zonder plug-in. Productfilters op WooCommerce

Dat ik, met behulp van AJAX-technologie, voor zoeen deel van de inhoud van de site voor zoekmachines heb verborgen (wat overigens geen cloaking is).

Ik heb dit technisch geïmplementeerd. Omdat er velen waren die hetzelfde op hun blogs wilden herhalen, zal ik proberen informatie over te brengen over hoe je dit kunt doen.

AJAX is in wezen het dynamisch laden van een deel van de inhoud van een pagina met behulp van JavaScript. Die. Het lijkt erop dat dit deel van de inhoud op de site wordt weergegeven, maar als je naar de broncode van de pagina kijkt, is deze er niet. Of als u JavaScript-ondersteuning in uw browser uitschakelt, is deze inhoud ook niet zichtbaar.

Deze functie kan bijvoorbeeld worden gebruikt om het aantal interne links op een site voor zoekmachines te verminderen. Noch Google noch Yandex zullen dat deel van de inhoud indexeren dat via AJAX is verbonden.

Laten we dus verder gaan met oefenen. Ik zal je vertellen hoe je dit op WordPress kunt doen aan de hand van het voorbeeld van een maandelijkse lijst met archieven, die meestal in de zijbalk wordt weergegeven.

Ik bied 2 oplossingen. De tweede is de eenvoudigste.

Eerste optie

ajax_archives.php ) met de volgende inhoud:

Log in op uw WordPress-beheerder en maak een nieuwe pagina. Noem het zoals je wilt, bijvoorbeeld 'Lijst met archieven'. Aan de rechterkant, in het blok “Paginakenmerken”, selecteert u de sjabloon “AJAX-lijst met archieven”.

Als u deze pagina in een browser opent, ziet u dat er alleen de lijst is die we nodig hebben en niets anders dat niet nodig is. Dit is wat we op de juiste plaats op de site zullen laden.

Op die plaats in het sidebar.php-bestand

We implementeren AJAX met behulp van jQuery, dus als dit nog niet is ingeschakeld op uw site, voegt u de volgende code toe aan het header.php-bestand vóór de code:

Nu hoeft u alleen nog maar een klein script aan de site toe te voegen dat de benodigde inhoud laadt. Maak een js-bestand (bijvoorbeeld scripts.js

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

In plaats van http://YOUR_DOMAIN/ajax_archives/ vervangt u het adres boven de gemaakte pagina.

header.php:

Maanden - Koppen

get_header(); en get_footer(); haal respectievelijk de kop- en voettekst van de sjabloon op. get_zijbar(); Ik heb het met opzet uitgeknipt, zodat het het begrijpen van de code niet zou belemmeren. De rest van de code geeft de vervolgkeuzelijsten Maand en Categorie weer.

Een leeg blok is een container waarin de queryresultaten worden weergegeven, d.w.z. records.

2. Laten we de vervolgkeuzelijsten ontwerpen met behulp van CSS; voeg de volgende code toe onmiddellijk na het aanroepen van de header ():

#archief_browser >

In dit stadium kreeg ik het volgende:


3. Voeg JavaScript-code toe die een verzoek aan de server zal doen en deze naar het archive_pot-blok zal uitvoeren (we voegen de code toe na de CSS-stijlen):