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 Більше шорткоду відповідно до різних WordPress параметрів параметрів в нашому зручному для використання шорткоду будівельник (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— Ви можете включити кілька статей з Ajax Load More на одній сторінці, post або template.
• Ajax Filtering— The 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 More updating різні 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 categories 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 of tags — include by slug. Default = null
• tag__and— A comma separated list of tags include by ID. Default = null
• tag__not_in— A comma separated list of tags — 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— Використовується з 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 Post ID's to exclude from query. Default = null
• search- Query search term ('s'). Default = null
• custom_args- A 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 або comment count. Default = 'date'
• offset- Offset the initial query (number). Default = '0'
• posts_per_page— Number of posts to load with each Ajax request. Default = '5'
• scroll— Load more posts as the user scrolls the page (true/false). Default = 'true'
• scroll_distance— Відстань від краю до краю до стріляльника loading of posts while scrolling. Default = '150'
• scroll_container- Constrain Ajax Load More 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 the .alm-reveal transition div.
• masonry_selector- The 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— Wait for all images to load before displaying ajax loaded content (true/false). Default = 'false'
• destroy_after— Remove ajax load more functionality after 'n' number of pages have been loaded. Default = null
• progress_bar— Display progress bar indicator at the top of the window while loading Ajax content. Default = 'false'
• progress_bar_color- Enter the hex color of the progress bar. Default = 'ed7070'
• button_label— The label text for Load More button. Default = 'Older Posts'
— Update the text of the Load More button while content is loading. Default = null
• container_type— Override the Global Container Type that was set on 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- Це ця незмінна Ajax Load More instance. Default = false

Example Ajax Load More Shortcode

Example Demos

• Default- Out of the box functionality and styling.
• Advanced Custom Fields— Infinite scroll Advanced Custom Fields data with Ajax Load More.
• Attachments- Endless scroll post attachments.
• Destroy After— Remove Ajax Load More функціональність після '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— Download images before displaying ajax loaded content.
• Масонрі— Creating a 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— Display a 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— Створити галерею повідомлень з Ajax Load More and Paging add-on.
• Table Layout— Ajax Load More буде відображати потрібні результати в таблиці формату.

Усі ми бачили архіви, у яких при виборі місяця нас перекидало на сторінку із записами за цей місяць. У WordPress такий висновок архівних посилань реалізується за допомогою функції wp_get_archives(). Аналогічний архів записів виходить при виведенні звичайних рубрик WordPress, тільки записи групуються за категоріями.

Сьогодні я хочу розповісти вам, як зробити динамічну архівну сторінку. "Динамічна" означає, що при виборі місяця, результати будуть відображатися на тій самій сторінці, за допомогою AJAX - Javascript. Оскільки бібліотека jQuery надає зручний API для роботи з Ajax, то будемо використовувати цей фреймворк. До того ж, куди сьогодні без jQuery? Адже він використовується часто-густо, і напевно у вашому проекті він вже підключений.

Перед написанням цієї статті я зробив динамічну архівну сторінку для цього блогу, пропоную подивитись (ДЕМО).

Щоб реалізувати динамічний архів, нам потрібно пройти 4 етапи:

Я показуватиму створення динамічної сторінки архівів на прикладі базової теми WordPress: "twentyten".

1. Підключення jQuery у WordPress

Правильний варіант підключення jQuery скрипта – це використання функції wp_enqueue_script() . Таке підключення убезпечить вас від конфліктів із підключенням цього ж скрипту в плагінах. Скрипт буде підключено один раз.

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

Варіант 2

У першому варіанті ми підключили скрипт із нашого сервера, який є у файлах 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");

Варіант 3

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

2. Завантажимо картинку перед-завантажувач

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

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

3. Створення шаблону постійної сторінки

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

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

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

Тепер заповнимо цей файл необхідним кодом.

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

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

Порожній блок

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

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


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

Розберемо трохи код:
Все що всередині $("#archive_browser select").change(function()(...) буде спрацьовувати при зміні списків, що випадають.

/images/ajax-loader.gif - шлях до файлу-картинки (завантаження...), яка підвантажуватиметься в період запиту.

/scripts/archive_getter.php – шлях до файлу обробника запиту, який ми створимо на наступному етапі.

$.post(...); - Функція jQuery, що створює запит браузера на сервер, використовуючи AJAX технологію.

Повний код шаблону постійної сторінки

Файл шаблону постійної сторінки (створюємо файл у папці теми та копіюємо туди цей код):

4. Створення файлу-обробника

AJAX має на увазі "спілкування" браузера з сервером без перезавантаження сторінки, засобами Javascript. Скрипт сам по собі не може отримати жодних даних, адже він знаходиться на комп'ютері користувача, а дані на сервері, тому щоб скрипт отримав дані, він повинен звернутися до сервера, в даному випадку такий діалог буде підтримувати файл-обробник.

Давайте створимо папку scripts у каталозі теми, у ній створимо файл archive_getter.php (/wp-content/themes/twentyten/scripts/archive_getter.php) та заповнимо цей файл наступним кодом:

Невеликий розбір коду:

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

Умовою if(($year=="") && ($month=="") && ($cat=="-1"))(...) ми перевіряємо чи існують будь-які дані, які ми пізніше можемо використовувати функції query_posts() , якщо динних немає, то виводимо повідомлення.

query_posts("posts_per_page=-1&cat=$cat&monthnum=$month&year=$year"); і все що нижче це звичний цикл WordPress.

Ось і все, сторінка готова!

Ось що в мене вийшло (правда, це всього лише картинка. Живий приклад):

Підвантаження контенту (кнопка показати ще) wordpress(ajax)

Один із замовників попросив мене зробити на сайті динамічне підвантаження контенту (постів, записів) або під іншому "кнопка показати ще". Дизайн із таким рішенням стає дуже популярним. Подібний прийом можна побачити у твіттері, вконтакті. Для wordpressa на жаль плагінів здатних вирішити це завдання дуже мало, я знайшов тільки один плагін , але він мені не дуже сподобався тому я продовжив шукати рішення. І натрапив на тему sight, там для створення динамічного підвантаження постів використовується бібліотека jquery.

Для створення динамічного підвантаження контенту нам знадобиться два файли:

Файли jquery.cookie, script треба буде завантажити в папку js яка знаходиться в папці з вашим шаблоном, якщо такої папки немає, то її потрібно створити. Далі необхідно у файлі header.php прописати шляхи до скриптів.

//помістити між тегами

Після того як ви прописали шляхи до скриптів, потрібно небагато підправити файл index.php або будь-який інший файл, де ви плануєте зробити динамічне підвантаження постів. Необхідно додати id = "loop"у контейнері постів, class = "post"у блоці виведення посту, id = "pagination"там де ви хочете розмістити кнопку «Показати ще». Код повинен виглядати приблизно так:

Результат праці:

Для роботи скрипта необхідна бібліотека jquery бібліотеку можна підключити так

Шаблон для тестування підвантаження контенту

Для того щоб протестувати підвантаження потрібно завантажити шаблон завантажити в папку wordpress з шаблонами, потім вибрати в панелі адміністратора шаблон з назвою test

Якщо вам подобається мій ресурс і ви хочете підтримати мене фінансово, то ви можете перерахувати суму, використовуючи наступні реквізити:

• Яндекс гаманець - 410014625168542
• Webmoney- R429373694729

Що за допомогою технології 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 :

Другий варіант

Цей варіант помітно простіший, т.к. тут не потрібно створювати додаткову сторінку.

Створіть у папці з WordPress-шаблоном новий php-файл (наприклад, ajax_archives.php) з наступним вмістом:

Саме перший рядок коду дозволяє уникнути необхідності створення нової сторінки.

Там файлу sidebar.php, де ви хочете побачити список архівів, вставте такий html-код:

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

Створіть новий js-файл (наприклад, scripts.js) і вставте в нього наступний код:

(function($) ( $(function() ( $("#archives").load("http://ВАШ_ДОМЕН/wp-content/themes/ПАПКА_З_ШАБЛОНОМ/ajax_archives.php"); )) ))(jQuery)

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

Ось, власне, і все. Можете спостерігати результат.

Подібним чином можна запхати хоч весь сайдбар, або зробити кілька окремих блоків із якимось вмістом.

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

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

Автоматичне підвантаження записів під час прокручування

Крок 1

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

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

max_num_pages > 1) : ?>

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

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

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

Крок 2

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

#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-animat ion: 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) ; ) )

Крок 3

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

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

Або так, додавши код до functions.php:

Function loadmore_scripts_gs() ( wp_enqueue_script("moreload", get_template_directory_uri() . "/js/moreload.js", array("jquery"), null, true); ) add_action("wp_enqueue_scrip

Крок 4

Тепер сам скрипт. Копіюємо та вставляємо в залежності від обраного Вами способу.

JQuery(function($)( $(window).scroll(function())( var bottomOffset = 2000; var data = ( "action": "loadmore", "query": true_posts, "page" : current_page ); if( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$("body").hasClass("loading"))( $.ajax(( url:ajaxurl, data:data , type:"POST", beforeSend: function(xhr)( $("body").addClass("loading"); ), success:function(data)( if(data) ( $("#load_more_gs")). $("body").removeClass("loading"); current_page++; ) else ( $("#load_more_gs").remove(); ) )));

У 3 рядку є значення 2000 . Це значення, відступ від нижньої межі сайту, доскромивши до якого, почнеться підвантаження нових записів. Можете зменшити, але не перестарайтеся, щоб підвантаження не зникло.

У 19,24 рядку вказано блок з айді load_more_gs, раптом ви захочете змінити ім'я блоку, це потрібно зробити не тільки в циклі і стилях, але і в скрипті.

Крок 5

Function true_load_posts()( $args = unserialize(stripslashes($_POST["query"])); $args["paged"] = $_POST["page"] + 1; // наступна сторінка $args["post_status" ] = "publish", $q = новий WP_Query($args);

" rel="bookmark" title="!}">

Цей код потрібно змінити залежно від вашої теми. Ви повинні замінити рядки - 9, 10, 11 на HTML код, який у Вас всередині циклу в будь-якому з файлів, де ми виконували КРОК №1. Якщо у вас не HTML, а в PHP написаний висновок записів, то потрібно замінити 8, 9, 10, 11, 12 рядки. Тобто це код, який відповідає за виведення мініатюри, назви запису, текст тизера тощо. Якщо Ви цього не зробите, все буде криво і відрізнятиметься від оформлення Ваших постів.

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

Підвантаження записів при натисканні на кнопку - Показати ще

Крок 1

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

//замість цього

показати ще- Це текст кнопки, якщо хочете, можна змінити.

Крок 2

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

#loadmore_gs( background:#63a63e; color:#fff; padding:5px 0; text-align:center; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; width: 150px;margin:0 auto;cursor:pointer;

Крок 3

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

Крок 4

Скрипт асинхронного завантаження трохи відрізнятиметься, оскільки тепер він спрацьовуватиме на натискання кнопки. Виглядатиме він так:

JQuery(function($)( $("#loadmore_gs").click(function()( $(this).text("Завантаження..."); var data = ( "action": "loadmore", "query) ": true_posts, "page" : current_page ); text("Показати ще").before(data); current_page++; if (current_page == max_pages) $("#loadmore_gs").remove(); ) else ( $("#loadmore_gs").remove(); ) ) )); )); ));

Тут можна налаштовувати текст кнопки або змінити ім'я айді, якщо Ви вирішили змінити його скрізь. У 3 рядку є слово -. Це виведеться, коли Ви натиснете кнопку і обробник AJAX почне свою роботу.

У 15 рядку текст - показати ще, цей текст з'явиться після навантаження. Якщо Ви змінили текст із першого кроку, то зміните й тут.

Крок 5

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

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

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

На цьому все, дякую за увагу. 🙂