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

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.

Bài Viết Cùng Chuyên Mục
Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL



Welcome to f4vnn.com: là một web/blog cá nhân, chủ yếu chia sẻ kiến thức về máy tính, internet, công nghệ và thủ thuật WordPress, Blogger... Mình hi vọng một điều là: Tại đây, các bạn có thể học thêm được rất nhiều kinh nghiệm và thủ thuật khi sử dụng máy tính ^_^ !

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!

Chào bạn ! Bạn thấy nội dung này thế nào?

Bài viết cùng chuyên mục

  • Tạo thanh thông báo bằng HTML và CSS cho WordPress
  • Chia sẻ Theme WordPress làm trang Download cực đẹp
  • Tùy biến trang đăng nhập không cần Plugin cho WordPress
  • Thêm box search trên menu cho WordPress không cần Plugin
  • SoraSoft giao diện chia sẻ phần mềm cho Blogger