Danh sách WordPress tất cả các trang

Nếu bạn đã từng muốn liệt kê tất cả các trang bằng cách sử dụng một mẫu trong trang web hoặc chủ đề WordPress của mình, thì có một cách tương đối đơn giản là sử dụng một trong các móc nối của WordPress

Gần đây tôi đã hoàn thành một chủ đề WordPress đáp ứng mới cho Rainbow Glass Studios và khi xây dựng sơ đồ trang web, tôi quyết định chia danh sách các trang thành các danh mục. Khách hàng này không chỉ làm việc bằng cách sử dụng nhiều kỹ thuật, mà họ còn điều hành các lớp học và hội thảo về chế tạo thủy tinh, đồng thời giới thiệu một số tác phẩm của học viên. Tôi có thể đã sử dụng tiêu chuẩn wp_list_pages(); . Thay vào đó, tôi muốn tách các lớp học, kỹ thuật và bài tập của học sinh khỏi các trang 'tiêu chuẩn'. Tất cả các mẫu này đều sử dụng các mẫu khác nhau trong chủ đề trang web, vì vậy tôi cần liệt kê tất cả các trang bằng một mẫu – một vài lần

Cách liệt kê tất cả các trang bằng mẫu trong chủ đề của bạn

Những gì tôi đã làm là tạo các biến thể của mã này (bên dưới) với các tiêu đề để chia nhỏ nội dung. Nó đây rồi

‘meta_key’ => ‘_wp_page_template’,
‘meta_value’ => ‘các lớp. php'
));
foreach($classpages as $classpage){
tiếng vang 'ID). ‘”>’. esc_html($classpage->post_title). ''. ‘
’;
}
?>

Tất cả những gì bạn cần thay đổi là trang lớp/tham chiếu trang lớp và tên của tệp mẫu trang cụ thể của bạn. Các trang tiêu chuẩn sử dụng trang. mẫu php đã được thêm vào sơ đồ trang web theo cách thủ công

Hiển thị hình ảnh nổi bật bên cạnh bài đăng hoặc tiêu đề trang của bạn có thể giúp tạo thêm sự quan tâm trực quan và cung cấp cho khách truy cập của bạn thêm thông tin về nội dung, vì vậy họ có nhiều khả năng nhấp và truy cập các trang đó hơn

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách hiển thị danh sách trang có hình thu nhỏ trong WordPress, từng bước một

Tại sao hiển thị danh sách trang có hình thu nhỏ trong WordPress?

WordPress có hai loại bài đăng khác nhau được gọi là bài đăng và trang

Các trang được sử dụng cho các phần nội dung thường xanh hơn, như các trang “Giới thiệu về chúng tôi”, “Liên hệ với chúng tôi” và “Dịch vụ”, trong khi các bài đăng được sử dụng cho nội dung blog được cập nhật thường xuyên hơn

Các trang quan trọng nhất của bạn thường được liên kết đến từ menu điều hướng chính của bạn, nhưng bạn có thể có nhiều trang hơn mà bạn muốn hiển thị

Bằng cách thêm danh sách trang có hình thu nhỏ, bạn có thể làm cho các liên kết của mình hấp dẫn hơn các liên kết văn bản tiêu chuẩn và cung cấp cho khách truy cập ý tưởng tốt hơn về nội dung của từng trang trên trang web WordPress của bạn

Khi khách truy cập tương tác và quan tâm, họ có khả năng truy cập nhiều trang hơn và ở lại trang web của bạn lâu hơn, điều này khiến họ có nhiều khả năng mua hàng hoặc tham gia danh sách email của bạn hơn

Nói như vậy, hãy xem một số cách khác nhau để bạn có thể hiển thị danh sách trang có hình thu nhỏ trên trang web của mình. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng

Phương pháp 1. Hiển thị danh sách trang có hình thu nhỏ bằng cách thêm mã vào WordPress

Một cách để hiển thị danh sách trang có hình thu nhỏ là thêm mã vào tệp WordPress của bạn

Phương pháp này tiên tiến hơn, nhưng ưu điểm là bạn sẽ có thể sử dụng các mã ngắn có thể tùy chỉnh. Thay vì phải cập nhật danh sách theo cách thủ công bất cứ khi nào bạn xuất bản một trang mới, các mã ngắn sẽ tự động tạo danh sách các trang được cập nhật cho bạn

Nếu trước đây bạn chưa thêm mã vào trang web WordPress của mình, thì bạn có thể xem hướng dẫn dành cho người mới bắt đầu của chúng tôi để dán đoạn mã từ trang web vào WordPress

Sau đó, bạn cần thêm đoạn mã sau vào chức năng của mình. php, trong plugin dành riêng cho trang web hoặc bằng cách sử dụng plugin đoạn mã

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Đoạn mã này sẽ tạo một mã ngắn mà bạn có thể sử dụng để hiển thị danh sách trang của mình với hình thu nhỏ ở bất kỳ đâu trên trang web của bạn

Trước khi sử dụng mã ngắn, bạn cần thêm CSS sau vào trang web của mình để đảm bảo danh sách trang của bạn hiển thị đẹp mắt

Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của chúng tôi về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn

.wpb-page-list{
	display: block;
	margin: 10px 0 35px;
}
.wpb-page-list__item{
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-column-gap: 16px;
	align-items: center;
	text-decoration: none;
	margin: 10px 0;
}
.wpb-page-list__item:hover h4{
	text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
	display: block;
	width: 60px;
	height: 60px;
}
.wpb-post-list__no-image{
	background: #aaa;
}
.wpb-page-list__item h4{
	font-size: 20px;
}
.wpb-page-list__item p {
	font-size: 1rem;
	color: #555;
}

Sau đó, bạn cần thêm mã ngắn sau vào WordPress để thêm danh sách trang của mình

[pagelist]

Mã ngắn này sẽ hiển thị danh sách trang chứa 10 trang mới nhất của bạn, theo thứ tự của ngày xuất bản. Nó sẽ tự động cập nhật khi các trang mới được thêm vào

Nếu bạn muốn giới hạn số trang sẽ hiển thị, thì bạn có thể sử dụng mã ngắn bên dưới

[pagelist limit=3]

Chỉ cần thay '3' bằng số trang bạn muốn hiển thị

Để thêm mã ngắn vào WordPress, hãy mở trang bạn muốn chỉnh sửa rồi nhấp vào nút thêm khối ‘Plus’

Sau đó, tìm kiếm khối 'Shortcode'

Sau đó, nhấp vào khối 'Mã ngắn' để thêm nó vào trang web của bạn và chỉ cần dán mã ngắn ở trên

Khi bạn đã hoàn tất, hãy nhớ nhấp vào 'Lưu' hoặc 'Xuất bản' để lưu các thay đổi của mình

Sau đó, khách truy cập của bạn sẽ có thể xem danh sách trang của bạn với hình thu nhỏ

Bạn cũng có thể sử dụng mã ngắn trong một tiện ích để hiển thị danh sách trang của mình trong thanh bên hoặc chân trang

Hiển thị danh sách trang với các trang web cụ thể

Để hiển thị danh sách trang chỉ có một số trang nhất định, bạn cần thêm mã ngắn sau vào trang web của mình

[pagelist id="20, 10, 35"]

Mã ngắn này sẽ hiển thị các trang cụ thể dựa trên ID trang của chúng. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách tìm ID trang trong WordPress

Hiển thị danh sách với các bài đăng trên blog mới nhất của bạn

Bạn cũng có thể sử dụng mã ngắn để hiển thị danh sách các bài đăng blog mới nhất của mình. Đây có thể là một cách tuyệt vời để tăng số lần xem trang trên các bài đăng trên blog của bạn

Chỉ cần thêm mã ngắn sau vào WordPress

[pagelist type=post]

Đây là cách danh sách của bạn với các bài đăng trên blog mới nhất của bạn sẽ trông như thế nào đối với độc giả của bạn

Thay thế. Bạn cũng có thể sử dụng MonsterInsights để hiển thị danh sách bài đăng có hình thu nhỏ trong các trang của mình và các khu vực tiện ích trang web khác. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách hiển thị các bài đăng phổ biến theo lượt xem trong WordPress

Hiển thị danh sách trang với mọi trang bạn đã xuất bản

Cuối cùng, bạn có thể hiển thị danh sách trang có hình thu nhỏ chứa mọi trang bạn đã xuất bản

Điều này có thể hữu ích nếu bạn muốn tạo một trang lưu trữ hoặc trang sơ đồ trang web HTML cho độc giả của mình. Hình thu nhỏ của bài đăng được thêm vào làm cho nó hấp dẫn hơn so với một danh sách trang đơn giản

Bạn sẽ cần thêm mã ngắn sau vào trang web của mình

[pagelist limit="-1"]

Khi bạn xuất bản các trang mới, danh sách trang của bạn sẽ tự động cập nhật

Phương pháp 2. Hiển thị danh sách trang có hình thu nhỏ bằng Trình chỉnh sửa khối WordPress

Một cách khác để hiển thị danh sách trang trong WordPress là sử dụng trình chỉnh sửa khối WordPress

Ghi chú. Khi sử dụng phương pháp này, danh sách trang của bạn sẽ cần được tạo và cập nhật theo cách thủ công, vì các trang mới sẽ không được thêm tự động sau khi chúng được xuất bản

Để thực hiện việc này, hãy mở trang bạn muốn chỉnh sửa

Sau đó, nhấp vào biểu tượng thêm khối 'Cộng' để mở menu khối

Sau đó, tìm kiếm 'Cột' trong hộp tìm kiếm

Sau đó, chọn khối 'Cột'

Thao tác này sẽ hiển thị danh sách các khối cột có sẵn

Chọn khối cột '30/70'. Chúng tôi sẽ sử dụng cột bên trái cho hình ảnh thu nhỏ và cột bên phải cho tiêu đề trang và tóm tắt ngắn gọn

Sau đó, nhấp vào biểu tượng thêm khối 'Cộng'

Sau đó, chọn khối ‘Hình ảnh’ để thêm hình ảnh nổi bật của bạn. Điều này cung cấp cho bạn tùy chọn tải lên một hình ảnh mới hoặc chọn một hình ảnh từ thư viện phương tiện của bạn

Nếu bạn muốn liên kết hình ảnh của mình, hãy nhấp vào biểu tượng ‘Chèn liên kết’

Sau đó, chỉ cần thêm URL trang của bạn

Khi bạn đã thêm hình ảnh của mình, hãy nhấp vào biểu tượng thêm khối 'Cộng' ở cột bên phải

Sau đó, tìm kiếm khối 'Tiêu đề' và nhấp vào khối đó để thêm vào trang của bạn

Tiếp theo, nhập tiêu đề trang của bạn và đánh dấu nó

Sau đó, nhấp vào biểu tượng 'Liên kết' để thêm liên kết đến trang

Bạn có thể chọn mở liên kết trên cùng một trang hoặc trong tab mới bằng cách nhấp vào nút bật hoặc tắt

Nếu bạn muốn thêm văn bản bên dưới tiêu đề của mình, thì chỉ cần nhấp lại vào biểu tượng 'Thêm khối' và chọn khối 'Đoạn văn'

Sau đó, chỉ cần gõ vào vùng văn bản có sẵn

Để thêm nhiều mục hơn vào danh sách của bạn bằng cách sử dụng định dạng bạn vừa tạo, hãy nhấp vào khối cột và chọn menu ba chấm ‘Tùy chọn’

Sau đó, chọn tùy chọn 'Sao chép' từ danh sách thả xuống

Điều này sẽ tự động tạo một bản sao của cột

Tất cả những gì bạn cần làm là làm theo các bước tương tự như trên để thay đổi hình ảnh, tiêu đề và văn bản

Sau khi bạn thực hiện xong các thay đổi đối với danh sách trang của mình, hãy đảm bảo nhấp vào nút 'Cập nhật' hoặc 'Xuất bản' ở đầu trang

Giờ đây, khách truy cập của bạn sẽ thấy danh sách trang hấp dẫn hơn với hình thu nhỏ của bài đăng

Ghi chú. Có sẵn một khối khác được gọi là khối 'Danh sách trang' cho phép bạn thêm danh sách trang không có hình thu nhỏ

Tuy nhiên, phương pháp thủ công ở trên là cách duy nhất để thêm danh sách có hình thu nhỏ bằng trình chỉnh sửa khối

Nếu bạn đang tìm cách tạo các trang hoàn toàn tùy chỉnh cũng bao gồm danh sách trang có hình thu nhỏ, thì bạn có thể sử dụng plugin SeedProd để thực hiện việc này bằng trình tạo kéo và thả. Để biết thêm chi tiết, hãy xem hướng dẫn của chúng tôi về cách tạo trang tùy chỉnh trong WordPress

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách dễ dàng hiển thị danh sách trang có hình thu nhỏ trong WordPress. Bạn cũng có thể muốn xem chuyên gia của chúng tôi chọn phần mềm trò chuyện trực tiếp tốt nhất cho doanh nghiệp nhỏ và hướng dẫn của chúng tôi về cách đăng ký tên miền

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook

Chức năng Wp_list_pages trong WordPress là gì?

Chức năng Get_Pages trong WordPress là gì?

Trang mẹ và trang con trong WordPress là gì?