Tùy chỉnh hiển thị archives sidebar WordPress

4 tháng ago, WordPress Themes, Views
Tùy chỉnh hiển thị archives sidebar WordPress

Giới thiệu về Sidebar Archives WordPress

Sidebar Archives là một phần quan trọng trong bố cục của nhiều trang web WordPress. Nó cung cấp cho khách truy cập một cách dễ dàng để duyệt qua các bài viết cũ dựa trên tháng và năm xuất bản. Mặc dù widget Archives mặc định của WordPress rất hữu ích, nhưng nó có thể không phù hợp với thiết kế và chức năng mong muốn của trang web của bạn. May mắn thay, WordPress cung cấp nhiều cách để tùy chỉnh hiển thị sidebar Archives, từ những chỉnh sửa đơn giản bằng CSS đến việc tạo ra các widget tùy chỉnh phức tạp hơn.

Bài viết này sẽ hướng dẫn bạn qua nhiều phương pháp khác nhau để tùy chỉnh sidebar Archives WordPress, giúp bạn tạo ra một trải nghiệm duyệt bài viết cũ hấp dẫn và thân thiện với người dùng hơn.

Các Phương Pháp Tùy Chỉnh Sidebar Archives WordPress

Có nhiều phương pháp khác nhau để tùy chỉnh hiển thị sidebar Archives WordPress. Chúng ta sẽ khám phá các phương pháp phổ biến nhất, từ dễ đến phức tạp hơn:

  • Sử dụng CSS để thay đổi giao diện
  • Sử dụng các plugin Archives tùy chỉnh
  • Tạo widget Archives tùy chỉnh
  • Chỉnh sửa trực tiếp các file theme (phương pháp nâng cao)

Tùy Chỉnh Archives bằng CSS

CSS (Cascading Style Sheets) là một công cụ mạnh mẽ để kiểm soát giao diện của trang web WordPress của bạn. Bạn có thể sử dụng CSS để thay đổi màu sắc, phông chữ, kích thước và bố cục của widget Archives mặc định mà không cần phải chỉnh sửa mã PHP.

Để bắt đầu, bạn cần xác định các class CSS liên quan đến widget Archives. Bạn có thể sử dụng công cụ Developer Tools của trình duyệt (thường được mở bằng phím F12) để kiểm tra mã HTML của widget và xác định các class này.

Ví dụ, widget Archives mặc định thường có một class bao quanh như .widget_archive hoặc .widget-archive. Mỗi mục archive (tháng) thường được bao bọc trong một thẻ li bên trong thẻ ul.

Sau khi bạn đã xác định được các class CSS liên quan, bạn có thể thêm CSS tùy chỉnh vào trang web của mình. Có nhiều cách để thêm CSS tùy chỉnh:

  • Sử dụng trình tùy biến WordPress: Vào “Appearance” -> “Customize” -> “Additional CSS”. Đây là cách dễ nhất và được khuyến nghị cho những thay đổi nhỏ.
  • Sử dụng plugin CSS tùy chỉnh: Có nhiều plugin cho phép bạn thêm CSS tùy chỉnh vào trang web của mình mà không cần chỉnh sửa trực tiếp các file theme.
  • Chỉnh sửa trực tiếp file style.css của theme (không được khuyến nghị): Phương pháp này nên tránh vì những thay đổi của bạn có thể bị mất khi theme được cập nhật.

Dưới đây là một số ví dụ về CSS bạn có thể sử dụng để tùy chỉnh widget Archives:


/* Thay đổi màu nền của widget Archives */
.widget_archive {
  background-color: #f0f0f0;
  padding: 10px;
  border: 1px solid #ccc;
}

/* Thay đổi màu chữ của các liên kết archive */
.widget_archive ul li a {
  color: #007bff;
  text-decoration: none;
}

.widget_archive ul li a:hover {
  text-decoration: underline;
}

/* Thay đổi biểu tượng bullet của danh sách archive */
.widget_archive ul {
  list-style-type: square;
}

Sử Dụng Plugin Archives Tùy Chỉnh

Nếu bạn muốn nhiều tùy chọn tùy chỉnh hơn những gì CSS có thể cung cấp, bạn có thể sử dụng một plugin Archives tùy chỉnh. Có nhiều plugin miễn phí và trả phí có sẵn trên WordPress.org và các trang web khác. Các plugin này thường cung cấp các tính năng bổ sung, chẳng hạn như:

  • Hiển thị số lượng bài viết cho mỗi tháng
  • Sắp xếp các archive theo thứ tự khác nhau (ví dụ: theo số lượng bài viết)
  • Loại trừ các tháng hoặc năm cụ thể
  • Hiển thị các archive dưới dạng dropdown
  • Tạo giao diện hoàn toàn tùy chỉnh cho các archive

Một số plugin Archives phổ biến bao gồm:

  • Simple Yearly Archive
  • Compact Archives
  • Archives Page

Để sử dụng một plugin Archives tùy chỉnh, bạn chỉ cần cài đặt và kích hoạt nó như bất kỳ plugin WordPress nào khác. Sau đó, bạn có thể thêm widget Archives mới do plugin cung cấp vào sidebar của mình. Hầu hết các plugin đều cung cấp các tùy chọn cấu hình trong trang quản trị WordPress để bạn có thể tùy chỉnh hiển thị của các archive.

Tạo Widget Archives Tùy Chỉnh

Nếu bạn muốn hoàn toàn kiểm soát hiển thị của sidebar Archives, bạn có thể tạo một widget Archives tùy chỉnh. Điều này đòi hỏi một số kiến thức về PHP, HTML và CSS, nhưng nó cho phép bạn tạo ra một giao diện độc đáo và phù hợp với nhu cầu cụ thể của trang web của bạn.

Để tạo một widget Archives tùy chỉnh, bạn cần thực hiện các bước sau:

  1. Tạo một file PHP mới cho widget của bạn (ví dụ: my-custom-archive-widget.php).
  2. Định nghĩa một class widget mới kế thừa từ class WP_Widget.
  3. Trong class widget, bạn cần định nghĩa các phương thức sau:
    • __construct(): Khởi tạo widget.
    • widget(): Hiển thị nội dung của widget.
    • form(): Tạo form quản trị cho widget.
    • update(): Lưu các thiết lập của widget.
  4. Đăng ký widget trong file functions.php của theme.

Dưới đây là một ví dụ đơn giản về một widget Archives tùy chỉnh:


<?php
/**
 * Custom Archive Widget
 */
class My_Custom_Archive_Widget extends WP_Widget {

  /**
   * Sets up the widgets name etc
   */
  public function __construct() {
    $widget_ops = array(
      'classname' => 'my_custom_archive_widget',
      'description' => 'A Custom Archive Widget',
    );
    parent::__construct( 'my_custom_archive_widget', 'My Custom Archive', $widget_ops );
  }

  /**
   * Outputs the content of the widget
   *
   * @param array $args
   * @param array $instance
   */
  public function widget( $args, $instance ) {
    echo $args['before_widget'];
    if ( ! empty( $instance['title'] ) ) {
      echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ) . $args['after_title'];
    }
    wp_get_archives( array( 'type' => 'monthly', 'format' => 'html' ) );
    echo $args['after_widget'];
  }

  /**
   * Outputs the options form on admin
   *
   * @param array $instance The widget options
   */
  public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : esc_html__( 'New title', 'text_domain' );
    ?>
    <p>
      <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php esc_attr_e( 'Title:', 'text_domain' ); ?></label>
      <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
    </p>
    <?php
  }

  /**
   * Processing widget options on save
   *
   * @param array $new_instance The new options
   * @param array $old_instance The previous options
   *
   * @return array
   */
  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

    return $instance;
  }
} // class My_Custom_Archive_Widget

// register My_Custom_Archive_Widget widget
function register_my_custom_archive_widget() {
  register_widget( 'My_Custom_Archive_Widget' );
}
add_action( 'widgets_init', 'register_my_custom_archive_widget' );

Lưu file này (ví dụ: my-custom-archive-widget.php) và sau đó thêm dòng sau vào file functions.php của theme:


require get_template_directory() . '/my-custom-archive-widget.php';

Bây giờ bạn sẽ thấy widget “My Custom Archive” trong danh sách các widget có sẵn. Bạn có thể kéo và thả nó vào sidebar của mình. Widget này sẽ hiển thị các archive hàng tháng, giống như widget Archives mặc định, nhưng bạn có thể tùy chỉnh nó hơn nữa bằng cách chỉnh sửa mã PHP của widget.

Chỉnh Sửa Trực Tiếp Các File Theme (Nâng Cao)

Phương pháp này là nâng cao và chỉ nên được sử dụng bởi những người có kinh nghiệm chỉnh sửa mã PHP của WordPress. Nó liên quan đến việc chỉnh sửa trực tiếp các file theme để thay đổi cách hiển thị sidebar Archives.

Để thực hiện việc này, bạn cần xác định file theme chịu trách nhiệm hiển thị sidebar. File này thường là sidebar.php hoặc một file tương tự. Sau đó, bạn cần tìm đoạn mã trong file này chịu trách nhiệm hiển thị widget Archives. Đoạn mã này có thể sử dụng hàm wp_get_archives() để lấy danh sách các archive.

Bạn có thể chỉnh sửa đoạn mã này để thay đổi cách hiển thị các archive. Ví dụ, bạn có thể thay đổi định dạng của các liên kết archive, thêm các class CSS tùy chỉnh, hoặc thêm các tính năng bổ sung.

**CẢNH BÁO:** Chỉnh sửa trực tiếp các file theme có thể gây ra các vấn đề cho trang web của bạn nếu bạn không cẩn thận. Luôn sao lưu các file trước khi chỉnh sửa và sử dụng một theme con để tránh mất các thay đổi của bạn khi theme được cập nhật.

Kết luận

Tùy chỉnh sidebar Archives WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và phù hợp với thiết kế của trang web của bạn. Cho dù bạn chọn sử dụng CSS đơn giản, plugin Archives tùy chỉnh, tạo widget tùy chỉnh hay chỉnh sửa trực tiếp các file theme, có rất nhiều cách để tạo ra một sidebar Archives độc đáo và hấp dẫn.

Hãy thử các phương pháp khác nhau và tìm ra phương pháp phù hợp nhất với nhu cầu và kỹ năng của bạn. Chúc bạn thành công!

Related Topics by Tag
, , , ,

..