Thêm liên kết vào tiêu đề widget WordPress

2 tháng ago, WordPress Plugin, Views

Tại Sao Nên Thêm Liên Kết Vào Tiêu Đề Widget WordPress?

Trong thiết kế website WordPress, các widget đóng vai trò quan trọng trong việc cung cấp thông tin, điều hướng người dùng và tăng cường trải nghiệm tổng thể. Mặc định, tiêu đề của widget thường chỉ hiển thị dưới dạng văn bản tĩnh. Tuy nhiên, việc thêm liên kết vào tiêu đề widget có thể mang lại nhiều lợi ích đáng kể:

Cải thiện điều hướng: Liên kết tiêu đề widget đến một trang, danh mục hoặc bài viết liên quan giúp người dùng dễ dàng tìm kiếm thông tin chi tiết hơn.
Tăng cường SEO: Liên kết nội bộ giúp bot của công cụ tìm kiếm thu thập thông tin website hiệu quả hơn, có thể cải thiện thứ hạng tìm kiếm.
Nâng cao trải nghiệm người dùng: Cung cấp một con đường rõ ràng để người dùng khám phá nội dung liên quan một cách nhanh chóng và thuận tiện.

Ví dụ, nếu bạn có một widget hiển thị các bài viết phổ biến trong danh mục “Tin tức”, bạn có thể liên kết tiêu đề widget “Tin tức phổ biến” đến trang danh mục “Tin tức”. Điều này cho phép người dùng dễ dàng truy cập tất cả các bài viết trong danh mục đó chỉ bằng một cú nhấp chuột.

Các Phương Pháp Thêm Liên Kết Vào Tiêu Đề Widget

Có nhiều cách để thêm liên kết vào tiêu đề widget WordPress, tùy thuộc vào trình độ kỹ thuật và sở thích của bạn. Dưới đây là một số phương pháp phổ biến:

1. Sử Dụng Plugin

Đây là phương pháp đơn giản nhất, đặc biệt phù hợp với những người không quen thuộc với việc chỉnh sửa code. Có nhiều plugin WordPress miễn phí và trả phí cho phép bạn dễ dàng thêm liên kết vào tiêu đề widget mà không cần viết bất kỳ dòng code nào.

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

Title Link Widget: Cho phép bạn thêm liên kết tùy chỉnh vào tiêu đề của bất kỳ widget nào.
Widget Options: Cung cấp nhiều tùy chọn mở rộng cho widget, bao gồm khả năng thêm liên kết vào tiêu đề.
Custom Sidebars: Cho phép bạn tạo các sidebar tùy chỉnh và gán các widget khác nhau cho từng sidebar. Bạn có thể sử dụng plugin này kết hợp với một plugin khác để thêm liên kết vào tiêu đề widget.

Hướng dẫn sử dụng plugin (ví dụ: Title Link Widget):

Cài đặt và kích hoạt plugin “Title Link Widget”.
Truy cập trang “Widgets” trong trang quản trị WordPress (Appearance > Widgets).
Thêm widget “Title Link Widget” vào sidebar mong muốn.
Nhập tiêu đề widget (Title).
Nhập URL bạn muốn liên kết đến (Link URL).
Nhấn “Save”.

2. Chỉnh Sửa Code Trong File functions.php

Phương pháp này đòi hỏi bạn phải có kiến thức cơ bản về PHP và WordPress. Bạn cần chỉnh sửa file `functions.php` của theme để thêm code tùy chỉnh cho phép bạn thêm liên kết vào tiêu đề widget.

Cảnh báo: Việc chỉnh sửa file `functions.php` có thể gây ra lỗi cho website nếu bạn không cẩn thận. Sao lưu file trước khi thực hiện bất kỳ thay đổi nào.

Ví dụ code:

Đoạn code sau sẽ lọc tiêu đề widget và thêm liên kết nếu một tùy chọn tùy chỉnh được đặt cho widget:


function add_link_to_widget_title($title) {
  global $wp_widget_factory;
  $widget = $wp_widget_factory->widgets[get_class($this)];

  $link = isset($widget->instance['title_link']) ? $widget->instance['title_link'] : '';

  if (!empty($link)) {
    $title = '' . $title . '';
  }

  return $title;
}

add_filter('widget_title', 'add_link_to_widget_title');


function add_title_link_field($instance, $widget) {
  ?>
  
    <label for="get_field_id('title_link'); ?>">
    <input class="widefat" id="get_field_id('title_link'); ?>" name="get_field_name('title_link'); ?>" type="text" value="" />
  
  <?php
}

add_action('in_widget_form', 'add_title_link_field', 10, 2);

function save_title_link_field($instance, $new_instance, $old_instance) {
  $instance['title_link'] = strip_tags($new_instance['title_link']);
  return $instance;
}

add_filter('widget_update_callback', 'save_title_link_field', 10, 3);

Giải thích code:

Hàm `add_link_to_widget_title()` lọc tiêu đề widget và thêm thẻ `` xung quanh nó nếu có một liên kết được cung cấp.

Hàm `add_title_link_field()` thêm một trường nhập liệu vào form widget để người dùng có thể nhập URL liên kết.

Hàm `save_title_link_field()` lưu URL liên kết đã nhập vào database.

Cách sử dụng code:

Mở file `functions.php` của theme.
Dán đoạn code trên vào file.
Lưu file.
Truy cập trang “Widgets” trong trang quản trị WordPress (Appearance > Widgets).
Bạn sẽ thấy một trường “Title Link” trong form widget. Nhập URL bạn muốn liên kết đến vào trường này.
Nhấn “Save”.

3. Sử Dụng Custom Widget

Phương pháp này phù hợp với những người muốn tạo ra các widget tùy chỉnh hoàn toàn. Bạn có thể tạo một widget mới từ đầu và bao gồm chức năng thêm liên kết vào tiêu đề.

Ví dụ đơn giản:


class My_Linked_Title_Widget extends WP_Widget {

  function __construct() {
    parent::__construct(
      'my_linked_title_widget',
      __('My Linked Title Widget', 'textdomain'),
      array( 'description' => __( 'A widget with a linked title', 'textdomain' ), )
    );
  }

  public function widget( $args, $instance ) {
    $title = apply_filters( 'widget_title', $instance['title'] );
    $link = $instance['link'];

    echo $args['before_widget'];
    if ( ! empty( $title ) ) {
        echo $args['before_title'] . '' . $title . '' . $args['after_title'];
    }
    echo $args['after_widget'];
  }


  public function form( $instance ) {
    $title = ! empty( $instance['title'] ) ? $instance['title'] : __( 'New title', 'textdomain' );
    $link = ! empty( $instance['link'] ) ? $instance['link'] : '';
    ?>
    
      <label for="get_field_id( 'title' ); ?>">
      <input class="widefat" id="get_field_id( 'title' ); ?>" name="get_field_name( 'title' ); ?>" type="text" value="" />
    
    
      <label for="get_field_id( 'link' ); ?>">
      <input class="widefat" id="get_field_id( 'link' ); ?>" name="get_field_name( 'link' ); ?>" type="text" value="" />
    
    <?php
  }


  public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['link'] = ( ! empty( $new_instance['link'] ) ) ? strip_tags( $new_instance['link'] ) : '';
    return $instance;
  }

}

function register_my_linked_title_widget() {
    register_widget( 'My_Linked_Title_Widget' );
}
add_action( 'widgets_init', 'register_my_linked_title_widget' );