WP Manifestindependent plugin directory
manifest / performance / wpg-the-loop-lazy-load

WPG The Loop Lazy Load

Ajax Load more with WordPress main query

by David Daugreilh, Pierre Dargham, Globalis Media Systems · github.com/wp-globalis-tools/wpg-the-loop-lazy-load · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/wp-globalis-tools/wpg-the-loop-lazy-load/archive/refs/heads/master.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/wp-globalis-tools/wpg-the-loop-lazy-load ↗

Easy to load ajax content !

Installation

You can install this plugin via the command-line or the WordPress admin panel.

via Command-line

  1. Download the latest zip of this repo.
  2. Add the folder in your plugins directory (wp-content/plugins)
  3. Activate the plugin via wp-cli.
wp plugin activate wpg-the-loop-lazy-load

via WordPress Admin Panel

  1. Download the latest zip of this repo.
  2. In your WordPress admin panel, navigate to Plugins->Add New
  3. Click Upload Plugin
  4. Upload the zip file that you downloaded.

How to use

Button :

class           = "js-load-more" 
data-template   = <PATH FROM YOUR THEME FOLDER> 
data-wrapper    = <ID WRAPPER>

Exemple :

<div id="wrapper">
    <?php get_template_part('template-parts/my-template'); ?>
</div>
<button data-template="template-parts/my-template" data-wrapper="wrapper" role="button" class="js-load-more">
    <?= __('Afficher plus d\'articles', 'asl-correspondants'); ?>
</button>

Scroll

Add attributes on container : 

class           = "js-load-more" 
data-template   = <PATH FROM YOUR THEME FOLDER>

Exemple : 

<div class="js-load-more"  data-template="template-parts/my-template">
    <?php get_template_part('template-parts/my-template'); ?>
</div>

Configuration

You can change few options in your config file

// Default container class
define( 'LAZYLOAD_CONTAINER_CLASS', '.js-load-more' );

// Default trigger offset : auto | <pixel>
define( 'LAZYLOAD_TRIGGER_OFFSET', 'auto' );
// define( 'LAZYLOAD_TRIGGER_OFFSET', 400 );

// Default percentage for auto trigger offset. Only use if DEFAULT_LAZYLOAD_TRIGGER_OFFSET == auto
define( 'LAZYLOAD_TRIGGER_OFFSET_AUTO_PERCENT', 40 );

// Default query vars for lazyload
define( 'LAZYLOAD_QUERY_VARS', false );
// define( 'LAZYLOAD_QUERY_VARS', ['posts_per_page' => 3, ...] );