Cách hiển thị bài viết gần đây dưới dạng thả xuống đơn giản

Lượt xem
Home

Việc hiển thị bài viết gần đây dưới dạng thả xuống là một tính năng mạnh mẽ giúp nâng cao trải nghiệm người dùng và tối ưu hóa giao diện của website. Thay vì chỉ hiển thị danh sách các bài viết gần đây liên tục, tính năng này cho phép bạn tạo một giao diện sáng sủa, tiết kiệm không gian và giúp người đọc dễ dàng truy cập vào nội dung mới nhất. Trong bài viết này, hãy cùng Vietnix khám phá cách triển khai hiển thị bài viết gần đây dưới dạng thả xuống trong WordPress và những lợi ích mà tính năng này mang lại.

Tại sao cần hiển thị bài viết gần đây dưới dạng thả xuống?

WordPress đi kèm với một widget bài viết gần đây tích hợp sẵn mà bạn có thể thêm vào bất kỳ vùng sidebar hoặc widget có sẵn nào. Widget này đơn giản chỉ hiển thị danh sách các bài viết gần đây và bạn có thể chọn số lượng bài viết mình muốn hiển thị. Nhưng nếu muốn hiển thị nhiều hơn 5-10 bài viết, thì danh sách sẽ chiếm rất nhiều không gian trong sidebar.

Một số người dùng WordPress có thể cần một cách gọn gàng để hiển thị các bài viết gần đây. Trong trường hợp đó, sử dụng danh sách thả xuống hoặc danh sách có thể thu gọn có thể giúp bạn tiết kiệm không gian.

Tại sao cần hiển thị bài viết gần đây dưới dạng thả xuống?
Tại sao cần hiển thị bài viết gần đây dưới dạng thả xuống?

Cách hiển thị bài viết gần đây dưới dạng thả xuống trong WordPress thủ công

Phương pháp này sử dụng hàm wp_get_recent_posts tích hợp sẵn. Tất cả những gì bạn cần làm là sao chép và dán code sau vào file functions.php của theme hoặc một plugin cụ thể của trang web:

function wpb_recentposts_dropdown() { 
$string .= '<select id="rpdropdown">
            <option  value="" selected>Select a Post</option>';
 
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
 
$recent_posts = wp_get_recent_posts($args);
    foreach( $recent_posts as $recent ){
        $string .= '<option value="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</option> ';
    }
 
$string .= '</select>
            <script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
            window.open( this.options[ this.selectedIndex ].value, "_self" );
            };
            </script>';
 
return $string;
} 
add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');

Bây giờ bạn có thể sử dụng shortcode [rp_dropdown] trong bài viết, trang và widget văn bản của WordPress, điều này sẽ trông như sau:

image 1729
Cách hiển thị bài viết gần đây dưới dạng thả xuống đơn giản 61

Phương pháp trên chỉ liệt kê các bài viết gần đây của bạn dưới dạng một danh sách thả xuống. Một cách khác để tiết kiệm không gian là thêm một danh sách các bài viết gần đây có thể thu gọn lại khi người dùng nhấp vào. Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Collapse-O-Matic. Plugin hoạt động ngay sau khi bạn cài đặt và bạn không cần cài đặt hay cấu hình thêm. Nếu bạn gặp khó khăn trong quá trình thao tác, có thể tham khảo video sau đây từ Vietnix:

Video hướng dẫn cài đặt plugin của Vietnix

Plugin này đơn giản cho phép bạn hiển thị bất kỳ thứ gì trong một menu thu gọn bằng cách sử dụng một shortcode. Trước khi sử dụng plugin này, chúng ta cần một cách dễ dàng để hiển thị các bài viết gần đây ở bất kỳ đâu bạn muốn. Đơn giản thêm code sau vào file functions.php của theme hoặc một plugin cụ thể cho trang web:

function wpb_recentposts() { 
 
$string .= '<ul>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
    foreach( $recent_posts as $recent ){
        $string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a></li> ';
    }
$string .= '</ul>';
return $string;
} 
add_shortcode('recentposts', 'wpb_recentposts');
add_filter('widget_text','do_shortcode');

Đoạn code này cho phép bạn hiển thị một danh sách các bài viết gần đây bằng cách sử dụng shortcode [recentposts]. Bây giờ chúng ta sẽ thêm shortcode vào shortcode của Collapse-O-Matic để tạo danh sách các bài viết gần đây có thể thu gọn lại. Chỉ cần thêm shortcode như sau:

[expand title="Recent Posts"][recentposts][/expand]

Bạn có thể thêm shortcode này trong một widget văn bản, bài viết hoặc trang. Đây là cách website hiển thị trên trang thử nghiệm:

recentposts collapsible
Cách hiển thị bài viết gần đây dưới dạng thả xuống đơn giản 62

Như vậy là bạn đã có thể dễ dàng thực hiện hiển thị bài viết gần đây dưới dạng thả xuống. Ngoài nội dung trong bài, có thể bạn quan tâm:

Nếu bạn đang tìm kiếm một giải pháp hosting chất lượng cao để phát triển trang web hoặc blog cá nhân dựa trên nền tảng WordPress, dịch vụ WordPress Hosting của Vietnix là sự lựa chọn hoàn hảo dành cho bạn. WordPress Hosting tại Vietnix là một dịch vụ tối ưu hóa riêng biệt cho các trang web vận hành trên mã nguồn WordPress, với một loạt các tính năng ưu việt bao gồm:

  • Tải trang nhanh chóng, chỉ dưới 1 giây, nhờ ổ cứng NVMe cực nhanh và công nghệ LiteSpeed Enterprise.
  • Hỗ trợ tư vấn tăng tốc độ trang web bởi các chuyên gia WordPress 24/7.
  • An toàn dữ liệu đảm bảo với hệ thống backup tự động 4 lần mỗi ngày và khả năng phục hồi nhanh.
  • Sự ổn định của website được bảo đảm bởi cơ sở hạ tầng tiên tiến và công nghệ Firewall anti DDoS do Vietnix phát triển.
  • Tạo website WordPress dễ dàng chỉ với một cú click chuột qua WordPress Toolkit.
  • Tặng kèm bộ sưu tập theme và plugin WordPress bản quyền cực kỳ giá trị, bao gồm Rank Math SEO ProElementor Pro, Divi,…

Đăng ký ngay để trải nghiệm dịch vụ tốt nhất và hưởng những ưu đãi hấp dẫn.

Lời kết

Vietnix hy vọng nội dung bài viết trên đã giúp bạn hiểu rõ hơn về cách hiển thị bài viết gần đây dưới dạng thả xuống. Đồng thời, bạn cũng có thể xem thêm các nội dung bài viết khác có chủ đề liên quan như làm thế nào để hiển thị ngày cập nhật cuối cùng của bài đăng trên WordPress hoặc 2 cách hiển thị ngày tương đối trong WordPress đơn giản, nhằm tối ưu cho bài viết tốt hơn. Chúc bạn thành công!

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (115 bình chọn)

Hoàng Vui

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận