WordPress Loop là gì? cách hoạt động và ứng dụng trong việc hiển thị bài viết động

WordPress Loop là một kỹ thuật quan trọng giúp hiển thị các bài viết động trên trang web WordPress. Kỹ thuật này cho phép lập trình viên kiểm soát cách thức và cách bài viết được truy vấn và hiển thị. Bài viết này sẽ giới thiệu cách hoạt động của WordPress Loop, những tình huống nên và không nên sử dụng nó. Ngoài ra, mình sẽ so sánh WordPress Loop giữa Classic Themes và Block Themes, từ đó hướng dẫn cách thiết lập Loop trong cả hai loại theme này.

Điểm chính cần nắm

• WordPress Loop là gì?: Giới thiệu khái niệm và vai trò của WordPress Loop trong việc hiển thị nội dung.
• Cách hoạt động của WordPress Loop: Giải thích cách thức WordPress Loop lấy dữ liệu và hiển thị trên trang.
• Khi nào KHÔNG cần WordPress Loop?: Đưa ra các tình huống không cần sử dụng WordPress Loop.
• Khi nào nên dùng WordPress Loop?: Các trường hợp nên sử dụng WordPress Loop để hiển thị nội dung động.
• WordPress Loop trong Classic Themes vs Block Themes: Hướng dẫn cách thiết lập WordPress Loop trong Classic Themes và Block Themes.
• Vietnix – Dịch vụ hosting tối ưu tốc độ cao: Giới thiệu dịch vụ hosting của Vietnix với tốc độ cao và tối ưu.
• FAQ: Các câu hỏi thường gặp liên quan đến WordPress Loop.

WordPress Loop là gì?

Khi bạn truy cập một trang web WordPress và thấy danh sách các bài viết hiện ra — ví dụ như trang blog, trang chuyên mục, hoặc kết quả tìm kiếm — thì phần hiển thị những bài viết đó chính là nhờ WordPress Loop.

Hiểu đơn giản, Loop là một đoạn mã mà WordPress dùng để “quét qua” các bài viết (hoặc sản phẩm, hoặc bất kỳ nội dung nào) và hiển thị chúng ra ngoài giao diện. Nhờ Loop, bạn có thể tự động hiển thị tiêu đề, nội dung, hình đại diện, tác giả, ngày đăng… của từng bài viết.

Đẩy nhanh quá trình tối ưu website với

BỘ QUÀ TẶNG THEME VÀ PLUGIN TỪ VIETNIX!

Bên cạnh Rank Math SEO Pro, bạn còn được nhận miễn phí Elementor Pro, WP Smush Pro cùng hơn 500+ theme bản quyền – miễn phí 100% khi sử dụng hosting tại Vietnix!

Khám phá ngay bộ quà tặng độc quyền!

Cách hoạt động của WordPress Loop

Về mặt kỹ thuật, Loop sử dụng một cặp hàm have_posts() và the_post() để lặp qua các bài viết. Dưới đây là cấu trúc cơ bản của Loop:

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <!-- Nội dung bài viết sẽ được hiển thị ở đây -->
    <?php endwhile; ?>
<?php endif; ?>

Mỗi lần vòng lặp chạy, WordPress sẽ:

• Kiểm tra xem còn bài viết nào không (have_posts())
• Nếu có, chuyển sang bài tiếp theo (the_post())
• Hiển thị nội dung bài viết bằng các hàm như:
  • the_title() – tiêu đề bài viết
  • the_content() – nội dung chính
  • the_excerpt() – đoạn trích ngắn
  • the_permalink() – đường dẫn bài viết
  • the_post_thumbnail() – hình đại diện

Khi nào KHÔNG cần WordPress Loop?

Bạn không cần dùng WordPress Loop nếu:

• Không hiển thị danh sách bài viết: Ví dụ như trang giới thiệu (About), trang liên hệ hoặc trang landing page tĩnh không có bài viết nào.
• Chỉ đang làm giao diện tĩnh: Nếu bạn đang dựng phần đầu trang (header), chân trang (footer) hoặc một block không liên quan đến nội dung bài viết.
• Đã có dữ liệu bài viết cụ thể: Ví dụ bạn đang ở trang bài viết đơn (single.php) và không cần lặp danh sách — chỉ cần hiển thị bài viết đó thôi (dù thật ra vẫn có Loop phía sau, nhưng bạn không cần gọi lại nữa).

Khi nào nên dùng WordPress Loop?

Bạn nên dùng WordPress Loop nếu:

• Hiển thị nhiều bài viết: Trang blog chính, trang chuyên mục (category), thẻ (tag), kết quả tìm kiếm, trang lưu trữ (archive).
• Tùy biến bố cục bài viết: Ví dụ, bạn muốn bài đầu tiên to hơn, các bài sau nhỏ hơn, hay chia bài viết theo hàng, cột.
• Chèn danh sách bài viết vào bất kỳ đâu: Trong sidebar (widget), trong homepage tự thiết kế, hay thậm chí là trong block Gutenberg tùy chỉnh.
• Gọi bài viết theo truy vấn riêng: Ví dụ như bài viết nổi bật, bài theo ID cụ thể, hoặc bài theo custom post type (sản phẩm, đánh giá…).

WordPress Loop trong Classic Themes vs Block Themes

Khi bắt đầu sử dụng WordPress Loop, bạn có thể áp dụng WordPress Loop trong các Classic Theme (sử dụng mã code) hoặc trong các Classic Theme (sử dụng Site Editor và Query Loop block). Cả hai phương pháp đều có thể hoạt động tốt, nhưng cách thức thực hiện sẽ khác nhau. Ví dụ, các Classic Theme yêu cầu chỉnh sửa mã nguồn trong file PHP.

Cách thiết lập WordPress Loop trong các Classic Theme

Các Classic Theme dựa vào mã PHP trong các file mẫu để hiển thị nội dung. Dưới đây là hướng dẫn cách thêm WordPress Loop cơ bản vào một Classic Theme:

Bước 1: Truy cập vào file của theme

Bạn cần truy cập vào các file của theme. Có hai cách chính để thực hiện điều này:

1. Qua Bảng Điều Khiển WordPress (Theme File Editor):

• Truy cập vào bảng điều khiển WordPress của bạn (ví dụ: yourwebsite.com/wp-admin).
• Chọn Appearance > Theme File Editor.

2. Qua FTP Client (ví dụ: FileZilla) hoặc File Manager của Hosting:

• Đây là phương pháp an toàn hơn và đáng tin cậy hơn. Bạn sẽ cần thông tin đăng nhập FTP (hostname, username, password) từ nhà cung cấp hosting của mình.
• Kết nối với server bằng FTP Client hoặc File Manager của nhà cung cấp hosting.
• Điều hướng đến thư mục WordPress, sau đó vào thư mục wp-content/themes/ và tìm thư mục theme đang sử dụng.

Bước 2: Chọn file mẫu để chỉnh sửa

Chọn file mẫu mà bạn muốn hiển thị nội dung WordPress Loop. Các file mẫu phổ biến bạn có thể chỉnh sửa là:

• index.php: Thường được sử dụng làm mẫu mặc định cho trang chủ, nếu bạn muốn hiển thị bài viết blog ở đây, hoặc cho danh sách bài viết chung.
• archive.php: Dùng cho các trang danh mục, trang thẻ và các lưu trữ theo ngày (danh sách bài viết theo các danh mục, thẻ hoặc ngày).
• category.php hoặc tag.php: Các mẫu dành riêng cho lưu trữ theo danh mục hoặc thẻ (nếu có trong theme, chúng sẽ có ưu tiên thay vì archive.php).
• page.php: Dùng để hiển thị các trang tĩnh. (Hiếm khi sử dụng Loop trong page.php trừ khi bạn cố ý hiển thị danh sách bài viết trên một trang tĩnh).
• single.php: Dùng để hiển thị bài viết đơn lẻ. (Loop luôn được sử dụng trong single.php để hiển thị nội dung của một bài viết đơn lẻ).

Ở đây, mình sẽ giả định bạn muốn thêm danh sách bài viết blog vào file index.php (nếu trang chủ của bạn hiển thị các bài viết blog).

Bước 3: Tìm khu vực nội dung trong file mẫu

Mở index.php (hoặc file bạn chọn) trong Theme File Editor hoặc trình chỉnh sửa văn bản của FTP Client.

Tìm phần trong code mà bạn muốn hiển thị các bài viết blog. Phần này thường nằm trong khu vực nội dung chính của trang, có thể được đánh dấu bởi các phần tử HTML như <main>, <div id="content">, <div class="content">, hoặc tương tự. Bạn có thể sẽ thấy các code HTML hiện có cấu trúc trang.

Bước 4: Chèn WordPress Loop cơ bản

Sao chép và dán đoạn code WordPress Loop cơ bản sau vào vị trí bạn đã xác định trong Bước 3, nơi bạn muốn danh sách bài viết xuất hiện. Bạn có thể thay thế bất kỳ nội dung placeholder nào có sẵn trong khu vực đó.

<?php if ( have_posts() ) : ?>
    <?php /* Bắt đầu WordPress Loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
                <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
                <div class="entry-meta">
                    <?php the_date(); ?> by <?php the_author(); ?>
                </div>
            </header>
            <div class="entry-content">
                <?php the_excerpt(); ?>
                <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
            </div>
            <footer class="entry-footer">
                <?php /* Thêm thông tin bài viết hoặc các hành động ở đây nếu cần */ ?>
            </footer>
        </article>
    <?php endwhile; ?>
    <?php /* Điều hướng trang trước/sau nếu cần */ ?>
    <?php the_posts_navigation(); ?>
<?php else : ?>
    <?php /* Nếu không có bài viết nào */ ?>
    <p><?php _e( 'Xin lỗi, không có bài viết nào phù hợp.', 'your-theme-textdomain' ); ?></p>
<?php endif; ?>

Bước 5: Lưu thay đổi và xem trước

• Nếu sử dụng Theme File Editor: Nhấn nút “Update File” ở dưới cùng của trình chỉnh sửa.
• Nếu sử dụng FTP: Lưu file index.php đã chỉnh sửa trong trình chỉnh sửa văn bản và tải lại file index.php đã cập nhật vào thư mục theme của bạn trên server, thay thế file cũ.

Giờ đây, bạn có thể truy cập trang chủ website của mình và kiểm tra. Bạn sẽ thấy danh sách các bài viết blog mới nhất, mỗi bài có tiêu đề (liên kết đến bài viết), ngày đăng, tác giả, đoạn trích và liên kết “Read More”.

Cách thiết lập WordPress Loop trong các Block Theme

Các Block theme sử dụng WordPress Site Editor và các block để xây dựng và tùy chỉnh các mẫu. Dưới đây là cách bạn có thể thiết lập WordPress Loop trong các Block theme.

Bước 1: Truy cập Site Editor

Truy cập vào bảng điều khiển WordPress của bạn (ví dụ: yourwebsite.com/wp-admin). Bạn chọn Appearance > Editor để mở WordPress Site Editor.

Bước 2: Chọn mẫu để chỉnh sửa (hoặc tạo mẫu mới)

Chọn nơi bạn muốn hiển thị danh sách nội dung động. Các mẫu phổ biến có thể bao gồm:

• Mẫu trang chủ (Index): Nếu trang chủ của bạn hiển thị các bài viết blog, bạn có thể chỉnh sửa mẫu “Index”.
• Mẫu trang Front Page: Nếu bạn có một trang front page tĩnh và một trang blog riêng biệt, bạn có thể chỉnh sửa mẫu “Front Page” cho trang tĩnh hoặc mẫu “Index” cho trang blog.
• Mẫu lưu trữ: Chỉnh sửa mẫu “Category”, “Tag”, “Date”, “Author” cho các trang lưu trữ.
• Mẫu bài viết đơn (Single): Chỉnh sửa mẫu này nếu bạn muốn tùy chỉnh cách hiển thị các bài viết liên quan hoặc phần “bạn có thể quan tâm” trong bài viết đơn.

Bước 3: Mở mẫu để chỉnh sửa

• Chọn mẫu bạn muốn chỉnh sửa (ví dụ, “Index” hoặc “Homepage”).
• Nhấn vào tên mẫu để mở nó trong Site Editor.

Bước 4: Chèn Query Loop Block

• Trong Site Editor, di chuyển đến vị trí bạn muốn thêm danh sách nội dung động. Nhấn vào biểu tượng “+” để thêm block.
• Tìm kiếm block “Query Loop” và chèn nó vào.

Bước 5: Chọn mẫu bố cục (hoặc bắt đầu từ trang trắng)

Chọn một mẫu bố cục như “Grid” hoặc “List” nếu nó phù hợp với giao diện bạn muốn. Nếu không, bạn có thể chọn “Start Blank” để tự thiết kế từ đầu.

Bước 6: Tùy chỉnh cài đặt Query trong thanh bên Block

Khi bạn đã chọn block Query Loop, thanh bên bên phải sẽ hiển thị phần “Query settings”. Cấu hình các cài đặt sau:

• Post Type:
  • Dropdown: Chọn loại nội dung bạn muốn hiển thị (thông thường là “Posts” cho danh sách blog, nhưng cũng có thể là “Pages” hoặc loại bài viết tùy chỉnh như “Portfolio”).
• Filters (Tùy chọn):
  • Categories: Lọc bài viết chỉ hiển thị từ các danh mục cụ thể.
  • Tags: Lọc bài viết theo thẻ.
  • Taxonomies: Lọc theo các phân loại tùy chỉnh nếu website của bạn sử dụng chúng.
  • Keywords: Lọc theo từ khóa tìm kiếm trong nội dung bài viết.
• Ordering:
  • Order By: Chọn cách sắp xếp các bài viết (ví dụ: “Date published,” “Title,” “Random”). “Date published” (giảm dần) thường được sử dụng cho danh sách bài viết blog.
  • Order: Chọn “Descending” (mới nhất trước) hoặc “Ascending” (cũ nhất trước).
• Posts per page:
  • Number Input: Đặt số lượng bài viết hiển thị trong block. Cố gắng giữ số lượng hợp lý để tránh ảnh hưởng đến hiệu suất.
• Pagination (Tùy chọn):
  • “Add Pagination” (Nút hoặc Phần): Nếu bạn hiển thị nhiều bài viết hơn mức có thể hiển thị trên màn hình và muốn có liên kết phân trang, hãy bật phân trang.

Bước 7: Tùy chỉnh bố cục Loop (Trong block)

Bây giờ, hãy tùy chỉnh giao diện của từng mục trong loop.

• Chọn một Mục Loop: Nhấp vào một trong các mục trong block Query Loop trên canvas của trình chỉnh sửa.
• Khám phá Các Block Lồng nhau: Bạn sẽ thấy các block bên trong mỗi mục loop như “Post Title,” “Post Excerpt,” “Post Featured Image,” “Post Date,” v.v. Đây là các thành phần cấu tạo nên mỗi mục bài viết trong danh sách.
• Thêm, Xóa, Sắp xếp lại các Block:
  • Thêm: Nhấp vào biểu tượng “+” trong một mục loop để thêm các block khác.
  • Xóa: Chọn một block trong mục loop và xóa nó (dùng các tùy chọn của block).
  • Sắp xếp lại: Kéo và thả các block để thay đổi thứ tự trong mỗi mục loop.
• Phong cách các Block:
  • Cài đặt Thanh bên Block: Chọn bất kỳ block nào trong mục loop và sử dụng các cài đặt trong thanh bên để điều chỉnh kiểu chữ, màu sắc, kích thước ảnh, v.v. Các phong cách này sẽ áp dụng cho loại block đó trong tất cả các mục loop.

Bước 8: Lưu thay đổi và xem trước

• Lưu: Ở góc trên bên phải của Site Editor, nhấn “Save”. Có thể bạn sẽ được yêu cầu xác nhận việc lưu các mẫu hoặc phần mẫu nào nếu bạn đã thay đổi nhiều khu vực.
• Xem trước trên Front-End: Truy cập trang chủ website của bạn (hoặc bất kỳ mẫu nào bạn đã chỉnh sửa) trong trình duyệt để xem danh sách nội dung động của bạn.

Vietnix – Dịch vụ hosting tối ưu tốc độ cao

Vietnix cung cấp các giải pháp hosting hiệu suất cao, giúp tối ưu hóa tốc độ website của bạn. Với hệ thống máy chủ hiện đại và đội ngũ kỹ thuật chuyên nghiệp, dịch vụ của Vietnix đảm bảo tốc độ tải trang nhanh chóng, hiệu suất ổn định và bảo mật tối ưu. Đặc biệt, dịch vụ WordPress hosting của Vietnix được thiết kế để đáp ứng nhu cầu sử dụng WordPress, với hỗ trợ 24/7 và khả năng mở rộng linh hoạt, giúp website của bạn luôn hoạt động mượt mà.

Thông tin liên hệ:

• Website: https://vietnix.vn/
• Hotline: 1800 1093
• Email: sales@vietnix.com.vn
• Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, TP HCM.

Lời kết

Áp dụng WordPress Loop giúp bạn tối ưu hóa việc hiển thị nội dung, mang đến khả năng tùy chỉnh linh hoạt cho các website. Nếu bạn có bất kỳ thắc mắc nào về cách sử dụng hoặc tối ưu WordPress Loop, đừng ngần ngại chia sẻ. Mình luôn sẵn sàng hỗ trợ bạn trong quá trình tìm hiểu và áp dụng kỹ thuật này vào dự án của mình.