Cách thêm nút Load More trong WordPress

Làm thế nào để thêm Nút Read more trong WordPress Bạn có muốn thêm Nút Read more trong WordPress không? Nhiều nền tảng phổ biến cho phép người dùng tải nhiều bài đăng hơn khi họ đến cuối trang. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm Nút Read more trong WordPress.

Khi nào và tại sao Thêm nút Read more bài viết trong WordPress

Giữ cho người dùng của bạn gắn bó với nội dung giúp bạn có được nhiều lượt xem hơn và cuối cùng là nhiều người đăng ký hơn.

Nút Read more giúp việc tải bài viết vô hạn, khách truy cập không cần phải tải thêm một trang mới để xem tiếp nội dung. Nó sử dụng JavaScript để nhanh chóng tìm nạp bộ nội dung tiếp theo. Điều này cải thiện trải nghiệm người dùng và có thể họ xem nhiều nội dung của bạn hơn.

Cách thêm nút Read more trong wordpress ?

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Ajax Load More.

Sau khi kích hoạt, plugin sẽ thêm một mục menu mới có tên ‘Ajax Load More’  vào menu admin WordPress của bạn. Bạn cần nhấp vào nó và đi đến trang cài đặt plugin.

Trên trang cài đặt, bạn có thể chọn màu của nút. Bạn cũng có thể thay thế nút bằng cuộn vô hạn để tự động tải những bài tiếp theo mà không cần người dùng nhấp vào nút.

Tiếp theo, bạn cần truy cập Ajax Load More » Repeater Template để thêm template của bạn để hiển thị các bài đăng.

Plugin đi kèm với một mẫu cơ bản chứa vòng lặp WordPress để hiển thị các bài đăng. Tuy nhiên, nó không phù hợp với Theme của bạn và có thể không phù hợp với trang web của bạn.

Để khắc phục điều này, bạn cần sao chép mã mà Theme của bạn sử dụng để hiển thị các bài đăng trên chỉ mục, lưu trữ và trang blog.

Thông thường, mã này nằm trong thư mục phần template của theme của bạn. Trong thư mục đó, bạn sẽ thấy các template để hiển thị nội dung khác nhau. Ví dụ: content-page.php, content-search.php, v.v.

Bạn sẽ tìm kiếm template content.php. Dưới đây là một ví dụ từ tập tin demo theme của chúng tôi

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <?php

        // Post thumbnail.

        twentyfifteen_post_thumbnail();

    ?>

    <header class="entry-header">

        <?php

            if ( is_single() ) :

                the_title( '<h1 class="entry-title">', '</h1>' );

            else :

                the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );

            endif;

        ?>

    </header><!-- .entry-header -->

    <div class="entry-content">

        <?php

            /* translators: %s: Name of current post */

            the_content( sprintf(

                __( 'Continue reading %s', 'twentyfifteen' ),

                the_title( '<span class="screen-reader-text">', '</span>', false )

            ) );

            wp_link_pages( array(

                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',

                'after'       => '</div>',

                'link_before' => '<span>',

                'link_after'  => '</span>',

                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',

                'separator'   => '<span class="screen-reader-text">, </span>',

            ) );

        ?>

    </div><!-- .entry-content -->

    <?php

        // Author bio.

        if ( is_single() && get_the_author_meta( 'description' ) ) :

            get_template_part( 'author-bio' );

        endif;

    ?>

    <footer class="entry-footer">

        <?php twentyfifteen_entry_meta(); ?>

        <?php edit_post_link( __( 'Edit', 'twentyfifteen' ), '<span class="edit-link">', '</span>' ); ?>

    </footer><!-- .entry-footer -->

</article><!-- #post-## -->

Khi bạn tìm thấy mã đó, bạn cần dán nó vào Repeater Templates field trong cài đặt plugin.

Đừng quên bấm vào nút ‘Save Template’ để lưu các cài đặt của bạn.

Tiếp theo, bạn cần truy cập Ajax Load More » Shortcode Builder để tạo short code.

Trang này chứa nhiều tùy chọn khác nhau mà bạn có thể tùy chỉnh. Trước tiên, bạn sẽ cần phải chọn loại container. Nếu bạn không chắc chắn, chỉ cần nhìn vào template bạn đã sao chép trước đó.

Sau đó cuộn xuống phần button labels section. Tại đây bạn có thể thay đổi văn bản xuất hiện trên nút. Theo mặc định, plugin sử dụng ‘Load more posts’ bạn có thể thay bằng bất cứ điều gì bạn muốn.

Cuối cùng, bạn cần chọn xem bạn muốn bài viết tự động tải hay đợi người dùng nhấp vào nút tải thêm bài viết.

Shortcode của bạn đã sẵn sàng để được sử dụng. Ở cột bên phải, bạn sẽ thấy shortcode output. Hãy tiếp tục và sao chép shortcode và dán nó vào một trình soạn thảo văn bản vì bạn sẽ cần nó trong bước tiếp theo.

Thêm Load more Post trong theme WordPress của bạn

Phần hướng dẫn này yêu cầu bạn thêm mã vào các tệp theme WordPress của mình. Nếu bạn đã thực hiện điều này trước đây, thì hãy xem hướng dẫn của chúng tôi về cách sao chép và dán code trong WordPress.

Đừng quên sao lưu theme WordPress của bạn trước khi thực hiện bất kỳ thay đổi nào.

Bạn sẽ cần tìm các tệp mẫu nơi bạn muốn thêm nút Load more Post trong chủ đề của mình. Tùy thuộc vào cách tổ chức theme của bạn, thông thường các tệp này là index.php, archives.php, categories.php, v.v.

Bạn sẽ cần thêm mã shortcode bạn đã sao chép trước đó vào theme của mình ngay sauendwhile; tag.

Vì chúng tôi đang thêm shortcode trong theme, chúng tôi sẽ cần thêm nó vào bên trong hàm do_shortcode, như sau:

echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]');         

Bây giờ bạn có thể lưu các thay đổi của mình và truy cập trang web của bạn để xem nút read more hoạt động.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm tải thêm nút đăng bài trong WordPress. Nếu bạn có thắc mắc hay muốn chúng tôi hướng dẫn thêm xin hãy để lại dưới bình luận.

Nguồn: wpbeginner