Ielādēt vairāk

Bieži rodas vajadzība parādīt piemēram pirmos 9 rakstus, bet lapotāja vietā izmantot "Ielādēt vairāk" pogu, kas ielādēs nākošos rakstus ar AJAX palīdzību. Tāpēc arī šī funkcionalitāte ir iestrādāta PandaGo2 tēmā.

Lai izmantotu šo funkciju nepieciešamas 3 lietas.

  1. Elements ar atribūtu data-lm-wrap="...". Iekš šī elementa tiks pievienoti ielādētie raksti.
  2. Elements ar klasi js-pdg-load-more un atribūtu data-lm-id="...". Šī ir pat ielādes poga.
  3. Inline skripts, kas satur mainīgo var pdg_load_more = { ... }. Šeit tiek norādīti parametri, kas attiecas uz konkrēto pogu.

data-lm-id norāda ielādes pogas identifikatoru ( gadījumā, ja ir vajadzība pēc vairākām pogām vienā lapā ). Šis identifikators jāizmanto arī iekš data-lm-wrap atribūta un iekš JavaScript mainīgā. Lai vieglāk būtu saprast - apskati piemērus.

Mainīgā pdg_load_more atribūti:

  • args - Vaicājuma argumenti JSON formātā. Argumentus var iegūt no jebkura WP_Query objekta izmantojot query_vars mainīgo, piemēram $wp_query->query_vars. Definējot šo parametru JavaScript izmanto vienkāršās pēdiņas ( ' ), jo funkcija JSON kodā viss tiek ievietots dubultajās pēdiņās.
  • page - Esošā lapa. Šo var iegūt izmantojot get_query_var( 'paged' ), bet jāpārbauda, vai šis mainīgais eksistē un ja nē, jānorāda 1.
  • max - Maksimālais lapu skaits vaicājumā. Šo var iegūt no jebkura WP_Query objekta izmantojot max_num_pages mainīgo, piemēram $wp_query->max_num_pages.
  • lang - Valoda. Šis jānorāda, ja lapā tiek izmantotas vairākas valodas un to iegūt var ar WPML kontanti ICL_LANGUAGE_CODE.
  • tpl - Raksta šablona atrašanās vieta. Piemēram, ja rakstiem tiek izmantots šablons /template-parts/post.php tad te norāda template-parts/post. Tas, kas tiks norādīts šeit, tiks iekļauts funkcijā get_template_part().

Piemēri

Skripts ciklā izvada pirmos X rakstus, pēctam tiek parādīta "Ielādēt vairāk" poga. Pēctam tiek pievienots inline skripts ar parametriem.

<?php global $wp_query; ?>

<?php if ( have_posts() ): ?>
    <div class="row" data-lm-wrap="posts">
        <?php
            while ( have_posts() ) {
                the_post();

                get_template_part( 'template-parts/post' );
            }
        ?>
    </div>

    <div class="text-center">
        <button class="btn btn--primary js-pdg-load-more" data-lm-id="posts">
            <?php _e( 'Ielādēt vairāk', 'pdgc' ); ?>
        </button>
    </div>
<?php endif; ?>

...

<script>
    var pdg_load_more = {
        'posts': {
            args: '<?php echo json_encode( $wp_query->query_vars ); ?>',
            page: <?php echo ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1; ?>,
            max : <?php echo $wp_query->max_num_pages; ?>,
            lang: '<?php echo ICL_LANGUAGE_CODE; ?>',
            tpl : 'template-parts/post'
        }
    };
</script>