Нескінченна прокручування Супер плагін WordPress. Технологія Ajax для WordPress: плагіни та їх призначення AJAX-технологія: оновлення даних сторінки без перезавантаження

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

Скажу прямо, на моєму сайті використовується деякою мірою шаманський спосіб навігації по сторінках - цю навігацію я розробляв давно і можливо в ті часи ще не був такий гарний у PHP та jQuery. Тепер я вам покажу більш правильний та ефективний спосіб реалізації посторінкової навігації з можливістю асинхронного завантаження нових постів. Тобто в код мого сайту можете не дивитися, а якщо у вас з'являться питання, тоді пошукайте відповіді на них у коментарях до цієї посади або подивіться на вигляд.

Працюватимемо зі стандартною темою TwentySeventeen, по-перше, ця тема досить проста і буде неважко розібратися в коді, по-друге, ви завжди можете встановити її прямо з адмінки з репозиторію тем WordPress.

Що ми спробуємо зробити у цій посаді?

• Завантаження постів при натисканні на кнопку Завантажити ще.
• Нескінченне завантаження, повідомлення та коментарі будуть підвантажуватися автоматично при прокручуванні сторінки (так, як у вконтакті).
• Зробимо так, щоб підвантаження постів працювало для будь-яких архівів.

Для початку нам потрібно знайти файл, у якому додається посторінкова навігація. У TwentySeventeen цей файл - прямо index.php. Якщо ви не розумієте, у якому файлі потрібно шукати у вашій темі, рекомендую поглянути на .

Якщо ж ви вирішили використати якусь із стандартних тем (як я), то нагадую, що для змін бажано використовувати (докладніше на відео у низу посту).

Знайдіть відповідне місце у шаблоні за межами циклу while , тобто після того, як закінчується виведення постів (у TwentySeventeen це місце практично відразу після endwhile) і вставляємо туди код:

Ajaxurl Це в WordPress. true_posts Серіалізований масив, що містить усі необхідні параметри запиту, є . current_page Номер .

А тепер трохи стилів, які ми додамо на нашу кнопку, щоб вона виглядала круто (стилі можна вставити в стандартний style.css в папці з темою).

Успішним виконанням першого кроку буде вважатися ось така кнопка, яка повинна буде з'явитися на сторінці всіх записів, але майте на увазі, що якщо записів недостатньо для двох сторінок, то кнопки не буде, для цього або створіть більше записів, або перейдіть в Налаштування > Читання і змініть кількість відображених на сторінці записів там.

Найлегший крок позаду.

По-друге, стилі CSS нам теж більше не потрібні, якщо ви їх додавали, можете геть-чисто видалити.

По-третє, вміст файлу loadmore.js зміниться і буде наступним:

Файл functions.php (це кроки 2 та 4) ми залишаємо без змін.

Ajax Load More is the ultimate WordPress infinite scroll plugin for lazy loading posts, single posts, pages, comments and more with Ajax Powered Queries.

Build complex custom WordPress queries with Ajax Load Більше шорсткий code Builder буде встановлювати шорсткий код до вашої сторінки за допомогою вмісту editor або прямо в ваші template files.

Ajax Load More is compatible for endless scrolling with popular eCommerce plugins such as WooCommerce and Easy Digital Downloads.

• Shortcode Builder — Створити ваш own custom Ajax Load Більше shortcode вказує на різні WordPress параметри параметрів в нашому зручному для використання shortcode builder (see Shortcode Parameters).
• Query Parameters — Ajax Load More allows you to query WordPress може мати різні вмісти. Query by Post Type, Post Format, Date, Category, Tags, Custom Taxonomies, Search Term, Authors and more!
• Repeater Templates — Edit and extend the functionality of Ajax Load More by creating your own repeater template to match the look and feel of your website (see screenshots).
• Multiple Instances — Ви можете включати multiple instances of Ajax Load More on a single page, post or template.
• Ajax Filtering — Ajax Load More custom filtering method will allow you to filter and update your Ajax query results.
• Multisite Compatibility — Manage repeater templates across all sites in your network.
• Setting Panel — Customize your version of Ajax Load Більше за updating various plugin settings.

• repeater - Choose a repeater template (Add-on available). Default = 'default'
• post_type - Comma separated list of post types. Default = 'post'
• sticky_posts — Preserve sticky post ordering у Ajax listing. Default = false
• post_format - Query by post format. Default = null
• category — A comma separated list of category to include by slug. Default = null
• category__and — A comma separated list of categories to include by ID. Default = null
• category__not_in — A comma separated list of categories to exclude by ID. Default = null
• tag — A comma separated list tags to include by slug. Default = null
• tag__and — Відомості про те, як роздільна здатність tags to include by ID. Default = null
• tag__not_in — A comma separated list of tags to exclude by ID. Default = null
• taxonomy - Query by custom taxonomy name. Default = null
• taxonomy_terms — Comma separated list of custom taxonomy terms(slug). Default = null
• taxonomy_operator
• taxonomy_relation — The logical relationship between each taxonomy when there is more than one. (AND/OR). Default = 'AND'
• day - Day of the week. Default = null
• month - Month of the year. Default = null
• year - Year of post. Default = null
• taxonomy_operator — Operator для compare Taxonomy Terms against (IN/NOT IN). Default = 'IN'
• meta_key - Custom field key(name). Default = null
• meta_value - Custom field value. Default = null
• meta_compare — Operator для compare meta_key and meta_value against. Default = 'IN'
• meta_type - Custom field type. Default = 'CHAR'
• meta_relation — Used with multiple custom field entries (AND/OR). Default = 'AND'
• author – Comma separated list of authors by id. Default = null
• post__in — Comma separated List of Post ID's include in query. Default = null
• post__not_in — Comma separated list of the post ID's exclude from query. Default = null
• search - Query search term ( 's'). Default = null
• custom_args - Semicolon separated list of value:pair arguments. e.g. tag_slug__and:design,development; event_display:upcoming. Default = null
• post_status - Select status of the post. Default = 'publish'
• order — Display posts in ASC(ascending) or DESC(descending) order. Default = ‘DESC’
• orderby — Order posts by date, title, name, menu order, author, post ID or comment count. Default = 'date'
• offset - Offset the initial query (number). Default = '0'
• posts_per_page — Кількість повідомлень про load with each Ajax request. Default = '5'
• scroll — Load more posts as the user scrolls the page (true/false). Default = 'true'
• scroll_distance — Відстань від аркуша до краю до trigger the loading of posts while scrolling. Default = '150'
• scroll_container — Constrain Ajax Load Більше infinite scrolling to a parent container. Default = null
• max_pages — Maximum number of pages to load while user is scrolling (activated on when scroll = true). Default = '0'
• pause_override — Allow scrolling to override the Pause parameter and trigger the loading of posts on scroll. Default = null
• pause — Do not load posts until user натисніть Load More button (true/false). Default = 'false'
• transition - Choose a posts reveal transition (fade/masonry/none). Default = 'fade'
• transition_container - Display the Ajax Load More (.alm-reveal) loading container. Default = 'true'
• transition_container_classes — Add classes to .alm-reveal transition div.
• masonry_selector - target classname of each masonry item. Default = null
• masonry_animation — Виберіть loading transition type for Masonry items. (default/zoom-out/slide-up/slide-down/none). Default = default
• masonry_horizontalorder - Maintain horizontal order. Default = true
• images_loaded — Використовувати всі зображення для завантаження до розповсюдження ajax loaded content (true/false). Default = 'false'
• destroy_after — Remove ajax load more functionality after 'n' число pages have been loaded. Default = null
• progress_bar — Display progress bar indicator на верхній частині вікна при навантаженні Ajax content. Default = 'false'
• progress_bar_color - Enter the hex color of the progress bar. Default = 'ed7070'
• button_label — Текст повідомлення для Load More button. Default = 'Older Posts'
— Update the text of the Load More button while content is loading. Default = null
• container_type — Виберіть Global Container Type, що було встановлено на ALM Settings page. Default = null
• css_classes — Add custom CSS classes до Ajax Load More container. Default = null
• id — A unique ID для Ajax Load More instance.
• nested — це this a nested Ajax Load More instance. Default = false

• Default — Out of the box functionality and styling.
• Advanced Custom Fields — Індивідуальний прокрутка Advanced Custom Fields data with Ajax Load More.
• Attachments - Endless scroll post attachments.
• Destroy After — Remove Ajax Load Більше функціональності після 'n' number of pages.
• Event Listing — Ordering and listing events by custom field date.
• Filtering — Reset and filter на Ajax Load More instance.
• Flexbox - Creating a responsive Ajax Load More grid with Flexbox.
• Infinite Scroll — A look at the new loading functionality and styles.
• Images Loaded — Завантажити зображення до displaying ajax loaded content.
• Masonry — Створення flexible grid layout with Masonry JS.
• Multiple Instances — Include multiple Ajax Load More' on a single page.
• Paging URLs — Generate unique paging URLs for every Ajax Load More query with the SEO add-on.
• — Posts will not load until initiated by the user.
• Preloaded Posts — Easily preload an initial set of posts для всіх Ajax requests to the server.
• Progress Bar — Відображення progress bar load indicator with each Ajax request.
• Search Results — Returning results based on search terms.
• Scroll Container - Constrain Ajax Load Більше до parent container.
• SEO & Paging — Combine these two add-ons to create one powerful navigation system.
• Slideshow Gallery — Create a gallery of posts з Ajax Load More and Paging add-on.
• Table Layout — Ajax Load More буде відображати помилки результатів в таблиці формату.

Як Ви вже, напевно, здогадалися, сьогодні йтиметься про безперервне підвантаження нових записів при прокручуванні на 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, додати до нього скрипт, а потім його підключити в підвалі, вказавши правильний шлях, так: