WordPress Infinite Scroll – Ajax Load More

Deskripsi

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 the Ajax Load More shortcode builder then add the generated shortcode to your page via the content editor or directly into your template files.

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

Get More Information

Features

  • Shortcode Builder – Create your own custom Ajax Load More shortcode by adjusting the various WordPress query parameters in our easy-to-use shortcode builder (see Shortcode Parameters).
  • Query Parameters – Ajax Load More allows you to query WordPress by many different content types. 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 – You can include multiple instances of Ajax Load More on a single page, post or 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 by updating various plugin settings.

Check out the demo site for more information!

What’s New

  • Pro – Access to all premium add-ons in a single installation.
  • Filters – The Filters add-on provides front-end and admin functionality for building and managing Ajax filters.
  • User Query – Query and display a list of WordPress users by role using a WP_User_Query and Ajax Load More.
  • Advanced Custom Fields – Compatibility and integration added for infinite scrolling Flexible Content, Gallery, Relationship and Repeater fields for Advanced Custom Fields.
  • Masonry – Built-in support and functionality for Masonry layouts.
  • Progress Bars – Display a Progress Bar load indicator with each Ajax request.
  • Scroll Container – Constraining infinite scroll to a parent container.

Jenis Isi

Ajax Load More can infinite scroll any content type WordPress offers – from blog posts to multipage content to WooCommerce products – Ajax Load More can handle it all.

Check out the examples below:

*Add-on required

Shortcode Parameters

Ajax Load More accepts a number of parameters that are passed to the WordPress query. These parameters are transferred via shortcode – don’t worry, creating a custom shortcode is easy with the intuitive Shortcode Builder

  • 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 in 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 to include by slug. Default = null
  • tag__and – A comma separated list of 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 – Operator to compare Taxonomy Terms against (IN/NOT IN). Default = ‘IN’
  • 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 to 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 to 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 to 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 or 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 – The distance from the bottom of the screen to trigger the 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 clicks the 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 – Select a 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’
  • button_loading_label – 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 to the Ajax Load More container. Default = null
  • id – A unique ID for the Ajax Load More instance.
  • nested – Is this a nested Ajax Load More instance. Default = false
  • no_results_text – Display text/html when zero results are returned in an Ajax Load More query.

→ See All Parameters

Example Ajax Load More Shortcode

[ajax_load_more post_type="post, portfolio" repeater="default" posts_per_page="5" transition="fade" button_label="Older Posts"]

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 functionality after ‘n’ number of pages.
  • Event Listing – Ordering and listing events by custom field date.
  • Filtering – Reset and filter an 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.
  • Masonry – 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.
  • Pause Loading – Posts will not load until initiated by the user.
  • Preloaded Posts – Easily preload an initial set of posts before completing any 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 More to a parent container.
  • SEO & Paging – Combine these two add-ons to create one powerful navigation system.
  • Slideshow Gallery – Create a gallery of posts with Ajax Load More and the Paging add-on.
  • Table Layout – Ajax Load More will display query results in a table format.

→ See All Examples

The Custom Repeater Add-On has been installed for use on each of our product demos.

Add-ons

The following add-ons are available to increase the functionality of Ajax Load More.

  • Cache: Improve website performance by caching the results of Ajax server requests.
  • Call to Actions: Extend Ajax Load More with advertisement and call to action content blocks.
  • Comments: Load and display WordPress blog comments using the core Ajax Load More infinite scroll functionality.
  • Custom Repeaters: Create, modify and delete repeater templates as you need them with absolutely zero restrictions.
  • Filters: Front-end and admin functionality for creating, managing and displaying Ajax Load More filters.
  • Layouts: Predefined responsive layouts for Ajax Load More repeater templates.
  • Next Page: Infinite scroll multipage WordPress content with Ajax Load More and the Next Page add-on.
  • Paging: Replace the default lazy load/infinite scroll functionality of Ajax Load More with a numbered navigation system.
  • Preloaded: Load an initial set of posts before sending any Ajax requests to your server.
  • SEO: Generate unique paging URLs with each Ajax Load More query.
  • Single Post: Enable infinite scrolling of single posts on your WordPress post templates.
  • Theme Repeaters: Manage Ajax Load More repeater templates from within your current theme directory.
  • Users: Lazy loading WordPress Users with Ajax Load More.

Extensions

The following extensions are available to provide compatibility with popular WordPress plugins and core features.

  • Advanced Custom Fields: Display field type data with Ajax Load More.
  • Relevanssi: Display Relevanssi search results with Ajax Load More.
  • REST API: Enable compatibility with the WordPress REST API.
  • SearchWP: Display SearchWP query results with Ajax Load More.

Callback Functions

The following functions are available to be dispatched by Ajax Load More.

Complete – The almComplete() function is triggered after every successful ajax call made by Ajax Load More.

almComplete = function(alm){
    // Your on complete code goes here
};

Destroyed – The almDestroyed() function is dispatched after the destroy_after shortcode parameter is triggered.

almDestroyed = function(alm){
    console.log('"Ajax Load More functionality has been destroyed!');
};

Done – The almDone() function is triggered after all posts have been loaded.

almDone = function(alm){
    console.log('All posts have been loaded!');
};

Empty – The almEmpty() function is triggered if there are zero results returned in the initial query.

almEmpty = function(alm){
   console.log('Sorry, but we could not locate any posts that matched your criteria.');
};

Filter Complete – The almFilterComplete() function is triggered after a successful call to the public function almFilter().

almFilterComplete = function(){
    console.log('Ajax Load More filter has completed!');
};

URL Update – The almUrlUpdate() function is triggered after a successful URL update (pushState) from the Single Post or the Search Engine Optimization add-on

almUrlUpdate = function(permalink, type){
    console.log("URL updated to " + permalink + '- dispatched from the '+ type + ' add-on.');
};

→ View All Callback Functions

Filter Hooks

Ajax Load More has a variety of WordPress filters in place that enable users to hook into Ajax Load More to insert or modify data.

→ See All Filters

Variables

Ajax Load More passes the following PHP variables to each repeater template – these template variables can help you style and transform your repeater templates.

  • $alm_current – Returns the current item number in the current Ajax Load More loop and will reset to zero with every ‘Load More’ action.
  • $alm_page – Returns the current page number.
  • $alm_item – Returns the current item number within your loop.
  • $alm_found_posts – Returns the total number of posts found within the entire WordPress query.

Plugin Links

Please Review Ajax Load More!

Your reviews make a big difference! Please consider taking the time to review my plugin. Your ratings and reviews help the plugin grow and provide the motivation needed to keep pushing it forward.

→ Leave a Review

Tangkapan Layar

  • Settings screen
  • Available Repeater Templates
  • Custom Repeaters Add-On
  • Shortcode Builder
  • Content Editor shortcode icon
  • Edit Page Shortcode Builder
  • Shortcode and implementation examples

Pemasangan

How to install Ajax Load More.

Using The WordPress Dashboard

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Search for ‘Ajax Load More’
  3. Click ‘Install Now’
  4. Activate the plugin on the Plugin dashboard

Uploading in WordPress Dashboard

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Navigate to the ‘Upload’ area
  3. Select ajax-load-more.zip from your computer
  4. Click ‘Install Now’
  5. Activate the plugin in the Plugin dashboard

Using FTP

  1. Download ajax-load-more.zip
  2. Extract the ajax-load-more directory to your computer
  3. Upload the ajax-load-more directory to the /wp-content/plugins/ directory
  4. Activate the plugin in the Plugin dashboard

PSD (FAQ)

What are the steps to getting Ajax Load More to display on my website
  1. Create your shortcode
  2. Add the shortcode to your page, by adding it through the content editor or placing it directly within one of your template files.
  3. Load a page with your shortcode in place and watch Ajax Load More fetch your posts.
What are my server requirements?

Your server must be able to read/write/create files. Ajax Load More creates the default repeater on plugin activation and in order to modify the output we are required to write to the file as well.

Is the ajax functionality secure?

Yes, Ajax Load more uses admin-ajax and nonces in order to protect URLs and forms from being misused.

Can I make modifications to the plugin code?

Sure, but please be aware that if modifications are made it may affect future updates of the plugin.

Can I modify the repeater template?

Yes, visit the Repeater Template section in your WordPress admin.

How are my repeater templates saved?

Repeater template data is saved into your WordPress database as well as written directly to a repeater template .php file in the ajax-load-more plugin directory.

Can I use custom fields in a repeater?

Yes, but you will need to define $post at the top of the repeater before requesting your custom fields. Like so:
global $post;

Which browsers are supported?
  • Firefox (Mac, PC, iOS)
  • Chrome (Mac, PC, iOS, Android)
  • Safari (Mac, iOS)
  • Opera
  • Android
  • IE11+
How Can You Contribute?

Issues and pull requests can be submitted via GitHub.

Tinjauan

Juni 4, 2019
I used to do my infinite scrolling myself but found this plugin. It has every option we can dream of. Fast and smart !
April 12, 2019
I used Ajax Load More to load related posts into my posts. It works just as designed, the documentation provided on the developers page is about as good as it gets. The support provided by the developer is nothing short of amazing. Definitely using this on every web site I build from now on.
Maret 18, 2019
Love this plugin. Easy to use and install to website. Adaptable and very functional. Thank you!
Februari 26, 2019
This plugin works really well, however it doesn't need a top level WordPress menu. The settings should just be under the Settings tab or some other relevant main menu.
Baca semua 173 tinjauan

Kontributor & Pengembang

“WordPress Infinite Scroll – Ajax Load More” adalah perangkat lunak sumber terbuka. Berikut ini mereka yang sudah berkontribusi pada plugin ini.

Para Kontributor

Log Perubahan

5.1.4 – August 15, 2019

  • NEW – Added No Results Text(no_results_text) parameter to display text/html when zero results are returned in an Ajax Load More query.
  • NEW – Added almOnChange callback dispatch at the beginning of every Ajax Load More query.
  • NEW – Added almOnLoad callback dispatched when Ajax Load More initiates.

5.1.3 – August 6, 2019

  • FIX – Fixed issue with tag archives when using WPML or Polylang translation plugins.
  • FIX – Fixed issue with deep link pagination in the SEO and Filters addon when adding HTML comments or empty whitespace to the start/end of Repeater Template
  • UPDATE – Updated SEO <noscript/> markup to include First and Last pagination links for search crawlers.
  • UPDATE – Admin UI/UX updates.

5.1.2 – June 24, 2019

  • NEW – Added direct WooCommerce integration using the woocommerce shortcode parameter. Blog post and docs coming soon how to use this new parameter with archive and product listing pages.
  • FIX – Fixed issue with element scroll and auto-focus in iOS and Android devices.
  • UPDATE – Removing REST API code introduced in 5.1 that caused issues for some users. Please make sure you clear your site cache and any combined JavaScript.

5.1.1 – May 29, 2019

  • NEW – Added new ALM_DISABLE_REPEATER_TEMPLATES PHP constant that prevents ALM from creating the default Repeater Template or storing template data in your database. To use this feature, add the following to your wp-config.php in the root of your site: define('ALM_DISABLE_REPEATER_TEMPLATES', true);.
  • UPDATE – Removed REST API settings from admin/admin.php and ajax-load-more.php.
  • UPDATE – Better error reporting for failed Ajax requests.
  • UPDATE – Updated the scroll trigger from the Load More <button class="button"/> to the button wrap <div class="alm-btn-wrap/>. This is because many users were setting display: none; on the button directly and that caused loading issues.
  • FIX – FIxed issue with ALM not maintaining past page scroll position when a user hits the browser back button.
  • FIX – Security fix for $querystring URLs in Preloaded content.
  • FIX – Fixed issue with nested .alm-preloaded div elements with Filters and Preloaded addon.
  • FIX – Fixed issue with alm_render function throwing non static function warning message.
  • FIX – Fixed JS console warning message abut duplicate babel/polyfill scripts for users running other versions of Babel.
  • FIX – Fixed srcSet issue with paged results in Filters and SEO addon when using Safari browser.

5.1.0.1 – May 7, 2019

  • UPDATE – After the 5.1.0 launch I discovered an issue with the REST API and WooCommerce. I have reverted the default REST API Usage until I can sort this out. 😢

5.1.0 – May 7, 2019

MAJOR UPDATE NOTICE
Ajax Load More can now use the WordPress REST API as the default for Ajax requests – this includes all add-ons and extensions.
Users that wish to continue using admin-ajax.php for Ajax requests can disable the REST API from Ajax Load More > Settings > Global Settings in your WordPress admin.

For backwards compatibility, all users running WordPress version 4.7 or lower will default to using admin-ajax.php.

Please update all your add-ons and extensions when you update Ajax Load More as this release contains breaking changes.

What’s New in 5.1.0
* NEW – ALM now uses the REST API for all Ajax queries 👏. This includes all add-ons and extensions.
* NEW – Added new Results Text display for displaying the current page number to users. view example
* NEW – Added custom JavaScript fix for reply links in Comment query causing page refresh.
* NEW – Added custom WP_Query parameter, alm_query that can be used in hooks/filters to modify the current query.
* UPDATE – Added aria attributes and focus position after Ajax load to improve plugin accessibility.
* FIX – Fixed issue with images not displaying in Safari when transition_container="false" is set.
* FIX – Fixed issue where Load More button was not hiding after destory_after value was reached.
* FIX – Fixed issue with meta_value shortcode parameter. Passing zero as a value was returning false and not the number.
* FIX – Fixed IE11 issue where filtering was not working with camelCase data attributes.

5.0.2 – April 4, 2019

  • NEW – alm_shortcode_defaults filter.
  • NEW – Addedalm_settings` filter.
  • FIX – Added custom Safari polyfill for srcset img height issue with Masonry and ImagesLoaded.
  • FIX – Fixed issue with encoding URLs in HTTP Ajax request.
  • FIX – Fix for undefined labels in Shortcode Builder.
  • FIX – Fixed issue with HTML comments in repeater templates causing issues with Masonry.

5.0.1 – March 13, 2019

  • FIX – Fixed issue with Masonry not working when empty whitespace was present in a Repeater Template.
  • FIX – Fixed issue with innerHTML and appendChild not trigger JavaScript present in Repeater Templates.

5.0.0 – March 8, 2019

MAJOR UPDATE NOTICE
All users running the Filters, SEO, Paging or Next Page add-ons MUST also update each of these plugins when running this 5.0 update.
Failing to upgrade the add-ons may result in JavaScript errors or broken functionality. It’s always best to also backup your site prior to updating.

If you are using one of the add-ons listed above and you do not see a plugin update notification, please hold off on updating until prompted. Or try installing Force Plugin Updates Check to force the plugin cache to clear.

Callback Functions
ALL callback functions have been updated to remove legacy jQuery $.fn() prototype properties.
Users are encouraged to update their current callbacks to the new methods, but for now can autoload a helper JS file that has these legacy callbacks in place.
To maintain the legacy callbacks, visit Ajax Load More > Settings > Legacy Callbacks to enable the library.

What’s New in 5.0.0
* NEW – Removing jQuery dependancy. Ajax Load More and all the add-ons plugins have been completely rewritten in Vanilla JS and ES6. 🎉
* NEW – Added ImagesLoaded library in place of WaitForImages for images_loaded param.
* NEW – Nested Ajax Load More instances will now auto-trigger on load.
* UPDATE – Updated build process from Gulp to Webpack.
* UPDATE – Added JS polyfills for various IE 11, 10 and 9 issues.
* UPDATE – Added ALM ID to alm_nextpage_query for Next page users.
* Fix – Fixed issue with querySelector on button element when using nested ALM instances.
* FIX – Removed duplicate transition_container_classes when using Paging add-on.
* FIX – Fixed issue with alm-listing container causing an error with the Comments addon.
* FIX – Added fix for destroy_after not triggered button .done class.
* Fix – Various JS other fixes and UX improvements.

4.0 – November 5, 2018

  • NEW – Introducing Ajax Load More Pro! Access to every Ajax Load More add-on in a single installation.
  • NEW – Adding category__and and tag__and support for querying categories and tags.
  • UPDATE – Adding fix for permission error on repeater template directory by replacing mkdir() with WordPress core function wp_mkdir_p.
  • FIX – Fixed issue with Filters onComplete functions triggering before Ajax results were rendered on the screen.
  • FIX – Adding fix for alm_get_canonical_url function when getting URLs of child category and tag archives.

2.0.1 – June 20, 2014

  • Ajax Load More