Hướng dẫn thêm Load more post không cần Plugin cho WordPress

Thêm Load more post không cần Plugin cho WordPress: WordPress là một CMS dược sử dụng rất nhiều, rất nhiều giao diện mà bạn có thể lụa chọn từ miễn phí đến trả phí. Một số giao diện nó không có tính năng Load more post. Nếu bạn đang là người dùng giao diện mà không có tính năng này thì bạn có thể tham khảo bài viết dưới đây.

Thêm Load more post không cần Plugin cho WordPress

Để có thể thêm Load more post bạn có thể dùng Plugin để thêm rất dễ dàng, tuy nhiên nếu bạn muốn thử theo kiểu lập trình thì hãy kéo xuống bên dưới nhé.

1. Thêm code vào Index.php

Đầu iên là bạn thêm một đoạn code vào file index của giao diện bạn đang dùng.

<?php 
get_header();
global $wp_query;
?>
<div class="main-container">
	<div class="main-grid">
		<main
			class="posts-list"
			data-page="<?= get_query_var('paged') ? get_query_var('paged') : 1; ?>"
			data-max="<?= $wp_query->max_num_pages; ?>"
		>
			<?php if (have_posts()) : ?>
				<?php while (have_posts()) : the_post(); ?>
					<?php get_template_part('template-parts/content'); ?>
				<?php endwhile; ?>
			<?php endif; ?>
		</main>
		<button class="button primary large expanded load-more">Load More Posts</button>
	</div>
</div>
<?php get_footer();

2. Thêm code vào Content.php

Tiếp theo là đoạn code vào file content của giao diện bạn đang dùng

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<header>
		<?php the_title('<h1>', '</h1>'); ?>
	</header>
	<div class="entry-content">
		<?php the_post_thumbnail('medium'); ?>
	</div>
	<hr />
</article>

3. Thêm tính năng Load more post vào Function.php

Tiếp theo là thêm tính năng Load more post vào Function

function load_more_posts()
{
  $next_page = $_POST['current_page'] + 1;
  $query = new WP_Query([
    'posts_per_page' => 10,
    'paged' => $next_page
  ]);
  if ($query->have_posts()) :

    ob_start();

  while ($query->have_posts()) : $query->the_post();

  get_template_part('template-parts/content');

  endwhile;

  wp_send_json_success(ob_get_clean());

  else :

    wp_send_json_error('No more posts!');

  endif;
}
add_action('wp_ajax_load_more_posts', 'load_more_posts');
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts');

4. Thêm Js điều khiển tính năng Load more post

Tiếp theo là thêm Js điều khiển tính năng Load more post

import axios from 'axios';


const ajaxLoadMore = () => {

  const button = document.querySelector('.load-more');

  if (typeof (button) != 'undefined' && button != null) {

    button.addEventListener('click', (e) => {
      e.preventDefault();

      let current_page = document.querySelector('.posts-list').dataset.page;
      let max_pages = document.querySelector('.posts-list').dataset.max;

      let params = new URLSearchParams();
      params.append('action', 'load_more_posts');
      params.append('current_page', current_page);
      params.append('max_pages', max_pages);

      axios.post('/wp-admin/admin-ajax.php', params)
        .then(res => {

          let posts_list = document.querySelector('.posts-list');

          posts_list.innerHTML += res.data.data;

          let getUrl = window.location;
          let baseUrl = getUrl.protocol + "//" + getUrl.host + "/";

          window.history.pushState('', '', baseUrl + 'page/' + (parseInt(document.querySelector('.posts-list').dataset.page) + 1));

          console.log(parseInt(document.querySelector('.posts-list').dataset.page));

          document.querySelector('.posts-list').dataset.page++;

          if (document.querySelector('.posts-list').dataset.page == document.querySelector('.posts-list').dataset.max) {
            button.parentNode.removeChild(button);
          }

        })

    });

  }

}

export default ajaxLoadMore;

Chú ý: Bạn nên sao lưu lại trước khi muốn thủ nghiệm nhé

Kết luận

Thêm Load more post không cần Plugin cho WordPress là khá hay. Hy vọng bài viết này sẽ có ích với bạn. Chúc bạn thành công.

Theo dõi trên