Підвантаження контенту у вордпрес без перезавантаження сторінки. Нескінченне прокручування постів WordPress без плагіна. Фільтри товарів на WooCommerce

Що за допомогою технології AJAX з метою пошукової оптимізації приховав частину вмісту сайту від пошукових систем (що, до речі, не є клоакінгом).

Технічно реалізував це я. Оскільки знайшлося багато охочих повторити те саме на своїх блогах, спробую донести інформацію про те, як це зробити.

AJAX по суті – це динамічне завантаження частини вмісту сторінки за допомогою JavaScript. Тобто. начебто б на сайті ця частина контенту відображається, але, якщо заглянути у вихідний код сторінки, там його немає. Або, якщо вимкнути в браузері підтримку JavaScript, цього контенту також не буде видно.

Таку можливість можна використати, наприклад, щоб зменшити кількість внутрішніх посилань на сайті для пошукових систем. Ні Google, ні Яндекс не проіндексують ту частину контенту, яка підключається через AJAX.

Отже, переходимо до практики. Розповім, як це зробити на WordPress на прикладі помісячного списку архівів, який зазвичай виводиться в сайдбарі.

Пропоную 2 варіанти рішення. Другий – найпростіший.

Перший варіант

ajax_archives.php ) з таким вмістом:

Зайдіть в адмінку WordPress та створіть нову сторінку. Назвіть її як завгодно, наприклад, «Список архівів». Праворуч у блоці "Атрибути сторінки" виберіть шаблон "AJAX список архівів".

Якщо ви відкриєте цю сторінку в браузері, то побачите, що там тільки потрібний список і більше нічого зайвого. Ось це ми і підвантажуватимемо на сайті в потрібному місці.

Там файлу sidebar.php

AJAX ми реалізуємо за допомогою jQuery, тому, якщо він ще не підключений на вашому сайті, до файлу header.php перед кодом додайте наступний код:

Тепер залишилося додати на сайт маленький скриптик, який завантажуватиме потрібний контент. Створіть файл js (наприклад, scripts.js

(function($) ( $(function() ( $("#archives").load("http://ВАШ_ДОМЕН/ajax_archives/"); )) ))(jQuery)

Замість http://ВАШ_ДОМЕН/ajax_archives/ підставте адресу вище створеної сторінки.

header.php :

Місяці - Рубрики

get_header(); та get_footer(); отримують шапку та підвал шаблону відповідно. get_sidebar(); я вирізав навмисно, щоб він не мішався в розумінні коду. Решта коду виводить списки Місяців і Рубрик.

Порожній блок - це контейнер куди виводяться результати запиту, тобто. запис.

2. Оформимо списки, що випадають через CSS, для цього додамо такий код відразу після виклику шапки ():

#archive_browser >

На цьому етапі у мене вийшло таке:


3. Додамо JavaScript код , який виконуватиме запит до сервера і виводитиме його в блок archive_pot (код додаємо після css стилів):