Hiển thị recent posts dạng drop-down WordPress

2 tháng ago, WordPress Themes, Views

Giới thiệu: Hiển thị Recent Posts Dạng Drop-down trong WordPress

Trong WordPress, việc hiển thị danh sách các bài viết gần đây (recent posts) là một yêu cầu phổ biến. Có nhiều cách để thực hiện điều này, từ việc sử dụng các widget mặc định, plugin chuyên dụng, đến việc tự viết code. Một phương pháp thú vị và gọn gàng là hiển thị recent posts dưới dạng một dropdown select box. Điều này giúp tiết kiệm không gian trên trang web của bạn, đặc biệt là trong sidebar hoặc footer, đồng thời mang lại trải nghiệm người dùng (UX) tốt hơn, đặc biệt trên các thiết bị di động.

Bài viết này sẽ hướng dẫn bạn các bước để hiển thị recent posts dưới dạng dropdown trong WordPress, bao gồm cả việc sử dụng plugin và tự viết code PHP trong theme của bạn. Chúng ta sẽ xem xét các ưu điểm và nhược điểm của từng phương pháp để bạn có thể lựa chọn cách phù hợp nhất với nhu cầu và trình độ kỹ thuật của mình.

Lợi ích của việc sử dụng Drop-down cho Recent Posts

Hiển thị recent posts dạng dropdown mang lại nhiều lợi ích so với các phương pháp truyền thống như list (danh sách) hoặc grid (lưới):

Tiết kiệm không gian: Dropdown chỉ chiếm một khoảng không gian nhỏ ban đầu và mở rộng khi cần thiết.
Trải nghiệm người dùng tốt hơn trên di động: Dropdown dễ dàng điều hướng trên màn hình nhỏ so với danh sách dài.
Dễ dàng tùy chỉnh: Bạn có thể dễ dàng tùy chỉnh giao diện của dropdown thông qua CSS.
Thân thiện với SEO: Dropdown không ảnh hưởng tiêu cực đến SEO nếu được triển khai đúng cách.

Sử dụng Plugin để hiển thị Recent Posts dạng Drop-down

Đây là cách dễ nhất và nhanh nhất để thêm dropdown recent posts vào website WordPress của bạn. Có nhiều plugin miễn phí và trả phí có sẵn trong thư viện plugin WordPress.

Các bước thực hiện:

Đăng nhập vào trang quản trị WordPress của bạn.
Đi tới “Plugins” -> “Add New”.
Tìm kiếm plugin “Recent Posts Dropdown” (hoặc các plugin tương tự).
Cài đặt và kích hoạt plugin.
Truy cập “Appearance” -> “Widgets” và kéo widget “Recent Posts Dropdown” vào vị trí mong muốn (ví dụ: Sidebar).
Cấu hình các tùy chọn của widget, chẳng hạn như số lượng bài viết hiển thị, tiêu đề, v.v.
Lưu lại các thay đổi.

Một số plugin gợi ý:

Recent Posts Widget With Thumbnails
Display Posts
Recent Posts Slider

Mỗi plugin có các tùy chọn cấu hình khác nhau. Hãy đọc kỹ hướng dẫn của plugin để biết cách sử dụng nó một cách hiệu quả nhất.

Tự viết Code PHP để tạo Drop-down Recent Posts

Nếu bạn muốn kiểm soát hoàn toàn giao diện và chức năng của dropdown recent posts, bạn có thể tự viết code PHP. Cách này đòi hỏi bạn phải có kiến thức cơ bản về PHP và WordPress theme development.

Các bước thực hiện:

Mở file functions.php của theme bạn đang sử dụng. (Cảnh báo: Nên sử dụng child theme để tránh mất các thay đổi khi theme chính được cập nhật).
Thêm đoạn code sau vào file functions.php:


function my_recent_posts_dropdown() {
  $args = array(
    'numberposts' => 10, // Số lượng bài viết hiển thị
    'post_status' => 'publish' // Chỉ hiển thị các bài viết đã publish
  );
  $recent_posts = wp_get_recent_posts( $args );
  if ( $recent_posts ) {
    echo '';
    echo '-- Chọn bài viết --';
    foreach ( $recent_posts as $post ) {
      echo '' . $post['post_title'] . '';
    }
    echo '';
  }
}

Lưu file functions.php.
Để hiển thị dropdown ở một vị trí cụ thể trong theme của bạn, hãy sử dụng hàm my_recent_posts_dropdown() trong file template tương ứng (ví dụ: sidebar.php, footer.php). Ví dụ:


<?php my_recent_posts_dropdown(); ?>

Giải thích code:

wp_get_recent_posts(): Hàm này lấy danh sách các bài viết gần đây từ database.
numberposts: Xác định số lượng bài viết cần lấy.
post_status: Xác định trạng thái của bài viết (ví dụ: ‘publish’, ‘draft’).
get_permalink(): Hàm này trả về URL của một bài viết cụ thể.
onchange="if (this.value) window.location.href=this.value": Javascript này chuyển hướng người dùng đến URL của bài viết được chọn trong dropdown.

Tùy chỉnh Drop-down Recent Posts bằng CSS

Bạn có thể tùy chỉnh giao diện của dropdown recent posts bằng CSS. Bạn có thể thêm CSS trực tiếp vào file style.css của theme hoặc sử dụng Customizer (Appearance -> Customize -> Additional CSS).

Ví dụ:


select[name="recent-posts"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  appearance: none; /* Loại bỏ kiểu mặc định của trình duyệt */
  background-image: url('data:image/svg+xml;utf8,<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right .75rem top 50%;
  background-size: 16px 12px;
}

select[name="recent-posts"]:focus {
  outline: none;
  border-color: #66afe9;
  box-shadow: 0 0 5px rgba(102, 175, 233, .5);
}

Đoạn CSS trên sẽ:

Đặt chiều rộng của dropdown là 100%.
Thêm padding và border.
Bo tròn các góc.
Thay đổi kích thước font chữ.
Loại bỏ kiểu mặc định của dropdown và thêm mũi tên custom.
Thay đổi màu border và thêm shadow khi dropdown được focus.

Bạn có thể tùy chỉnh các thuộc tính CSS khác để phù hợp với thiết kế của website của bạn.

Sử dụng Custom Walker để tùy biến sâu hơn

Nếu bạn muốn tùy biến cấu trúc HTML của dropdown, bạn có thể sử dụng Custom Walker. Custom Walker cho phép bạn thay đổi cách WordPress tạo ra menu và các thành phần HTML khác. Việc sử dụng Custom Walker là một kỹ thuật nâng cao và đòi hỏi bạn phải có kiến thức sâu về WordPress theme development.

Tuy nhiên, trong trường hợp này, việc sử dụng Custom Walker có thể không cần thiết vì chúng ta chỉ cần hiển thị danh sách các bài viết gần đây dưới dạng dropdown. Tùy chỉnh CSS và sử dụng các bộ lọc (filters) của WordPress có thể đủ để đáp ứng hầu hết các yêu cầu tùy biến.

Ưu điểm và Nhược điểm của từng Phương pháp

Sử dụng Plugin:

Ưu điểm: Dễ dàng, nhanh chóng, không cần code.
Nhược điểm: Phụ thuộc vào plugin, có thể ảnh hưởng đến hiệu suất, hạn chế về tùy biến.

Tự viết Code PHP:

Ưu điểm: Kiểm soát hoàn toàn, linh hoạt, tối ưu hiệu suất.
Nhược điểm: Đòi hỏi kiến thức PHP, cần bảo trì code, có thể gây lỗi nếu không cẩn thận.

Kết luận

Hiển thị recent posts dưới dạng dropdown là một cách hiệu quả để tiết kiệm không gian và cải thiện trải nghiệm người dùng trên website WordPress của bạn. Bạn có thể sử dụng plugin để thực hiện một cách nhanh chóng và dễ dàng, hoặc tự viết code PHP để có toàn quyền kiểm soát và tùy biến. Hãy lựa chọn phương pháp phù hợp nhất với nhu cầu và trình độ kỹ thuật của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa