Як налаштувати нескінченну прокручування WordPress сайту
Завантажити вихідні коди
Крок 1. Плануємо поділ на сторінки при новому прокручуванні
Важливо сплануватирозподіл блогу насторінки перед тим, як налаштувати новий тип прокручування та навігації. Зазвичай поділ на сторінки відбувається шляхом перерахування номерів сторінок у нижній частині головної сторінки. Але тепер за умови, що прокручування буде динамічним, вам така нумерація та розбивка на номери не знадобиться.
Крок 2. Створюємо функцію Ajax
Ми скористаємося функцієюWordPress ajax, щоб створити процедуру обробки виклику нових постів при розбивці на сторінки з ефектом "нескінченної" прокручування. Спочатку треба задати основну функцію для нашого поділу на сторінки, для цього наступний код знадобиться додати доfunctions.php
Ця функція буде використовуватися для виклику нашої процедури поділу на сторінки, і зазвичай у нас тут відбувається відправка двох змінних за допомогоюajax : одна задаєномер сторінки, а інша -файл шаблону, який використовує таку нову прокручування. Щоб увімкнути цю функцію та використовувати її спільно за допомогою WordPress ajax, нам знадобиться наступний код:
Далі нам треба створитиajax-функцію, яка відправлятиме2 змінних, необхідних для нашої процедури поділу на сторінки. Ви можете використовувати такі приклади коду WordPress для вставкиjQuery ajax-функції або безпосередньо додати цей код у файлheader.php вашої теми:
Перед нами - основний викликajax, який буде здійснюватися, і ми використовуємо "infinite_scroll " як ім'я дії, що виробляється. WordPress буде автоматично викликати функціюwp_infinitepaginate(); тому що ми задалиїї у нашому файліfunctions.php.
Крок 3. Визначаємо дію у момент, коли користувач досягає "дна" сторінки
Щоб увімкнути "нескінченну прокручування", нам треба визначити той момент, в який користувач досягає видимого "дна " сторінки. Досягти цього можна за допомогоюjQuery, використовуючи наступний код:
Тепер ми можемо дізнатися, коли користувач досягне прокручування видимої нижньої межі на сторінці. Далі потрібно викликати функціюloadArticle у рамках функції прокручування. Для цього я додаюлічильник, який визначає номер сторінки для подальшого виклику функції:
Щоразу, коли користувач прокручує сторінку до нижньої межі, значення лічильника зростає і включає передачу номера сторінки в функціюwp_infinitepage() у рамках файлуfunctions.php з нашої теми оформлення. За допомогою функційscroll таloadArticle ми можемо здійснити виклик функціїajax у нашій темі для WordPress; але результат не з'явиться, якщо ми не розмістили файл циклу в папці з нашою темою оформлення.
Крок 4. Налаштовуємо тему оформлення
Найбільш важливий етап: нам треба налаштувати значенняdiv, яке містить новий контент, що запитується функцієюajax. У темі оформленняTwenty Ten вже єdiv, який ми можемо використати. Цейdiv має значенняid="content", тому ми вкажемоdiv id у нашій функціїajax. Якщо ви для оформлення використовуєте інші теми, які не оформлюють циклdiv, ви просто можете оформити функцію циклу так, як це зроблено в наведеному фрагменті коду, щоб отримати аналогічний результат:
Далі нам знадобитьсяфайл циклу. У теміTwenty Ten вже є файл циклу, ось одна з причин,чому я взяв цю тему для нашого сьогоднішнього уроку. Якщо у вас у темі немає файлуloop.php, просто створіть новий файл циклу та скопіюйте функцію циклу в рамках файлуindex.php у ваш новий файл, а потім новий файл циклу завантажте в папку з темою.
Крок 5. Додаємо завантажувач Ajax
Ця дія - необов'язкова, щоб просто "прикрасити" нашу нескінченну прокрутку сторінок. Для цього ми додамо образ завантажувачаajax до нижньої межі нашої сторінки. Для цього просто вставте наступний фрагмент коду у файлfooter.php :
а потім вставте наступнийCSS -код у аркуш стилів теми:
Далі треба дописати пару рядків коду в нашу функціюjQuery, щоб показати та приховати елемент завантажувачаajax :
Завантажувачajax буде відображатися відразу, як тільки користувач досягне нижньої межі на сторінці, і відразу зникне, як тільки завершитьсяajax-запит на показ нової порції постів.
Крок 6. Додаткові обмеження для покращення нескінченного механізму прокручування
Ми написали цілком робочий механізм нескінченного прокручування, але чогось йому не вистачає. Ця функція спрацьовуватиме щоразу, як тільки користувач досягає "дна " сторінки, навіть якщо постів вже більше немає. А ось такого ефекту нам зовсім не потрібне. Тому ми додамо налаштування, яке контролюватиме режим відображення постів, і якщо постів вже більше не залишилося, то дія "нескінченної" прокрутки припинятиметься :
Ще нам треба додати обмеження, яке вказує, де саме застосовується дана функція: на головній сторінці, на сторінках архіву чи може у пошуку – але не в рамках 1 посту чи окремо взятої сторінки блогу. Тому нам знадобиться досить простийPHP -параметр функціїifelse у кодіjQuery :
Ось і все, що вам знадобиться, щоб створити ефект нескінченного прокручування на вашому сайті. Будь ласка, користуйтеся даним посібником, а також файлами-вихідниками та прикладами коду з даного посту для того, щоб створити своє оформлення такого роду. Усі файли та приклади в цьому пості наведені на основі теми Twenty Ten для WordPress.