Показати ще wordpress. Посторінкова навігація з асинхронним підвантаженням постів WordPress. Нескінченна прокручування постів. Створення шаблону постійної сторінки

Як Ви вже, напевно, здогадалися, сьогодні йтиметься про безперервне підвантаження нових записів при прокручуванні на WordPress. Тобто, замість посторінкової навігації, записи з'являться автоматично під час прокручування. Досягається підвантаження нових записів без перезавантаження за допомогою AJAX . зробимо все це, без використання плагінів.

Зараз я покажу два способи такого підвантаження. По суті це той самий спосіб, але трошки з різними властивостями. Підвантаження буде здійснюватися або автоматично при прокручуванні або при натисканні на кнопку, наприклад - Показати ще . Що саме підходить для Вашого сайту, теж вирішувати Вам.

Для початку потрібно знайти, де Ви хочете вивести автопідвантаження. Найчастіше її потрібно встановити скрізь, де є виведення циклу із посторінковою навігацією. Наприклад, у мене це файл content.php. Так само це може бути - index.php, archive.php, loop.php, category.php, search.php і тд. У цих файлах може бути стандартна навігація WordPress або вже саморобна функція. Приклади є у статті.

Так от, якщо у вас є щось подібне до такого, воно розташовується в самому кінці циклу. Замість нього слід вставити наступний код.

var ajaxurl = "/wp-admin/admin-ajax.php"; var true_posts = ""; var current_page =; var max_pages = "";

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

UPD .Якщо після впровадження підвантаження вона буде добре працювати на сторінці категорій, але не на сторінці пошуку, можете спробувати замінити 4 рядок у коді вище на нові два:

// Замінити це var true_posts = ""; // Це $str = serialize($wp_query->query_vars); var true_posts = "";

Тепер додамо стилі для нашої анімації. Якщо Ви її видалили, цей пункт можна пропустити.

#load_more_gs( width: 53px; padding:50px 0; margin:0 auto; ) .cssload-container( position:relative; ) .cssload-whirlpool, .cssload-whirlpool::before, .cssload-whirlpool : absolute; top: 50%; left: 50%; border: 1px solid rgb(255,255,255); border-left-color: rgb(0,225,255); border-radius: 974px; -border-radius: 974px; -webkit-border-radius: 974px; -moz-border-radius: 974px; ) cssload-rotate 1150ms linear infinite;-o-animation: cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; rotate 1150ms linear infinite; ) .cssload-whirlpool::before ( content: ""; margin: -22px 0 0 -22px; cssload-rotate 1150ms linear infinite;-ms-animation: cssload-rotate 1150ms linear infinite; -webkit-animation: cssload-rotate 1150ms linear infinite; -moz-animation: cssload-rotate 1150ms linear infinite; ) .cssload-whirlpool::after ( content: ""; margin: -28px 0 0 -28px; height: 55px; width: 55px; animation: cssload-rotate 2300ms linear infinite; infinite;-ms-animation: cssload-rotate 2300ms linear infinite; -webkit-animation: cssload-rotate 2300ms linear infinite; -moz-animation: cssload-rotate 2300ms linear infinite; rotate(360deg); ) ) @-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) ; ) )

Тепер нам потрібний скрипт асинхронного завантаження. Тут два шляхи вирішення. Або вставити скрипт у підвал Вашої теми, затиснувши його в теги:

//тут скрипт

Або створити файл, наприклад - moreload.js, додати до нього скрипт, а потім його підключити в підвалі, вказавши правильний шлях, так:

Вставляти цей код потрібно у файл теми functions.php.

У першому варіанті ми підключили скрипт із нашого сервера, який є у файлах WordPress. Однак, можна змінити посилання на файл jQuery та підключити його до CDN Google. Перевага такого підходу в тому, що якщо у браузері відвідувача вже завантажено цей файл, то при заході на ваш сайт браузер вже не завантажуватиме скрипт/ Завантаження сторінки збільшиться. Крім того, CDN скрипт віддається в стислому вигляді, за рахунок чого файл легше на кілька кілобайт:

Function 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", "my_scripts_method");

Найдавніший і так званий "жорсткий" варіант підключення jQuery - це прописати посилання на нього у файлі шаблону header.php, усередині тега. Вставляємо такий html код:

У період очікування, коли запит надсилається серверу за допомогою AJAX, нам потрібно показати картинку, повідомивши користувача, що щось відбувається. Такі картинки ви, напевно, бачили в мережі і не раз, альтернативою такої картинки виступає текст: "Завантаження...".

Щоб надалі у нас була така картинка, давайте скачаємо її, наприклад, від сюди: Анімовані gif (сервіс мені сподобався), перейменуємо її на ajax-loader.gif і завантажимо в папку images, яка знаходиться в каталозі нашої теми WordPress. У результаті в нас вийти такий нехай до картинки: http://example.com/wp-content/themes/twentyten/images/ajax-loader.gif. Нижче ми його використовуємо у коді.

Для постійних сторінок у WordPress можна використовувати окремі шаблони, таким чином ми можемо створити сторінку, яка зовсім відрізняється від структури від інших сторінок. Щоб вказати WordPress, що створений файл є шаблоном для постійної сторінки, на початок цього файлу потрібно прописати такий код:

Шаблон архівів - це назва нашого шаблону, яку ми побачимо в адмін-панелі WordPress, при створенні постійної сторінки.

Давайте створимо новий файл у папці теми з назвою tpl_archive.php і вставимо туди вищенаведений код. Потім зайдемо в адмін-панель WordPress і створимо постійну сторінку, призначивши їй, щойно створений шаблон.

1. В першу чергу, нам потрібно вивести списки, що випадають, створимо ми їх за допомогою функцій WordPress: wp_get_archives() і wp_dropdown_categories() :

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

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

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

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

#archive_browser >

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


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