Sidebar trên wordpress

WordPress sidebar

Để thêm một Widget mới vào WordPress, quý khách cần thực hiện theo 4 bước sau

  • Bước 1: Đăng nhập vào trình WordPress dashboard trên trang quản lý.
  • Bước 2: Trong mục Appearance, chọn vào phần Widgets.
  • Bước 3: quý khách thêm mới Widget bằng cách kéo thả chúng vào vị trí mình mong muốn. đặc thù, bạn có thể đặt Widget vào vị trí phía bên trái, bên phải hay phía dưới trang tùy theo nhu cầu dùng. Trong trường hợp Widget WordPress có định dạng là video. người dùng có thể upload video trực tiếp lên trang web hay chèn link tùy ý.
  • Bước 4: Một phương pháp khác để thêm mới Widget trên WordPress là dùng Customize trực tiếp. Để dùng tính năng này, người mua cần truy cập vào mục Appearance trong trang wp-admin hay nút Customize trên mẫu mã website giá tốt.

Để xóa Widget, bạn cũng dùng chuột kéo thả nó ra khỏi vị trí

Wordpress sidebar

Hoặc là Click vào tiêu đề Widget muốn xóa để mở vùng lan rộng ra của Widget. Sau đó chọn xóa.

ngoài ra, để điều chỉnh vị trí trên dưới của widget thì khi các widget đã vào khu vực mong muốn, bạn có thể chỉnh vị trí trên dưới của chúng bằng cách kéo thả lên xuống.

Widget API

Widgets API cho phép bạn code các widget tùy chỉnh trên WordPress. Để tạo bất kỳ widget tùy chỉnh, bạn cần phải dùng lớp WP_Widget từ API. Đây là lớp cơ sở cung cấp hơn 20 hàm cơ bản để bạn có thể code. Trong đó, có 4 hàm cơ bản nhất mà bất kỳ một widget nào cũng cần để hoạt động:

  • __construct() : hàm khỏi tạo
  • widget() : đầu ra của widget
  • form() : định nghĩa các cài đặt của widget trong Admin Dashboard
  • update() : cập nhật các thiết lập của widget

Wp widget

Sau đây chúng ta sẽ thêm code vào file functions.php của theme hiện đang dùng nhưng bạn có thể làm việc này trong bất kỳ plugin tùy chỉnh nào. Bạn có thể dùng File Manager, FTP của hosting hoặc WordPress Editor để thêm mã này vào file functions.php. Đừng quên tạo bản sao lưu file functions.php ở một nơi nào khác trước khi bạn thực hiện thêm widget. Điều này đảm bảo rằng nếu việc thêm Widget không thành công, theme của bạn cũng không bị thúc đẩy.

Tạo function __construct()

Hãy mở bất cứ trình soạn thảo văn bản nào trong máy tính của bạn. Tạo lớp mở rộng của lớp cơ sở WP_Widget như sau:

class new_widget extends WP_Widget 
//Insert functions here

Đầu tiên trong danh sách là phương thức xây dựng. Chúng ta sẽ dùng để xác minh một ID là tên của widget như cách nó xuất hiện trong phần UI và phần mô tả:

function __construct() 

parent::__construct(

// widget ID

'new_widget',

// widget name

__('My Sample Widget', ' new_widget_domain'),

// widget description

array( 'description' => __( 'My Widget Tutorial', 'new_widget_domain' ), )

);

Cấu hình đầu ra của widget()

Chúng ta chuyển sang chỉnh sửa cách hiển thị của widget. Phần đầu giao diện của widget trông như thế nào sẽ được thực hiện phê chuẩn các hàm widget():

public function widget( $args, $instance ) 

$title = apply_filters( 'widget_title', $instance['title'] );

echo $args['before_widget'];

//if title is present

if ( ! empty( $title ) )

echo $args['before_title'] . $title . $args['after_title'];

//output

echo __( 'Hello World!', 'new_widget_domain' );

echo $args['after_widget'];

Ở đây ta lấy ví dụ suất “Hello World!” là đầu ra của Widget. Bạn có thể đổi thay cấu trúc đầu ra cho Widget theo nhu cầu của mình.

Tạo hàm form()

Chúng ta sẽ lập trình cho widget bằng cách dùng hàm form()

public function form( $instance ) 

if ( isset( $instance[ 'title' ] ) )

$title = $instance[ 'title' ];

else

$title = __( 'Default Title', 'new_widget_domain' );

?>

<p>

<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />

</p>

<?php

Cập nhật công dụng widget với hàm update()

Chúng ta phải thực hiện công dụng cập nhật để làm mới các widget mỗi khi các thiết lập được chuyển đổi.

public function update( $new_instance, $old_instance ) $instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;

Bạn cần bổ sung thêm tác dụng đăng ký widget với WordPress

function new_register_widget() 

register_widget( 'new_widget' );



add_action( 'widgets_init', 'new_register_widget' );

Lưu ý các dòng trên phải được đặt bên ngoài hàm new_widget()

Chúng ta đã khởi tạo hàm tính năng mới là new_register_widget() giúp đăng ký widget. Dùng widget ID trong hàm __construct(). Sau đó, khởi tạo hàm này bằng cách dùng widgets_init để vận tải các thông báo về widget vào wordpress phê chuẩn phương thức add_action() được xây dựng sẵn. Cuối cùng, mã code của widget tủy chỉnh cho WordPress sẽ giống như sau:

function new_register_widget() 

register_widget( 'new_widget' );

add_action( 'widgets_init', 'new_register_widget' );

class new_widget extends WP_Widget 

function __construct() 

parent::__construct(

// widget ID

'new_widget',

// widget name

__('My Sample Widget', ' new_widget_domain'),

// widget description

array( 'description' => __( 'My Widget Tutorial', 'new_widget_domain' ), )

);



public function widget( $args, $instance ) 

$title = apply_filters( 'widget_title', $instance['title'] );

echo $args['before_widget'];

//if title is present

if ( ! empty( $title ) )

echo $args['before_title'] . $title . $args['after_title'];

//output

echo __( 'Hello World!', 'new_widget_domain' );

echo $args['after_widget'];



public function form( $instance ) 

if ( isset( $instance[ 'title' ] ) )

$title = $instance[ 'title' ];

else

$title = __( 'Default Title', 'new_widget_domain' );

?>

<p>

<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />

</p>

<?php



public function update( $new_instance, $old_instance ) 

$instance = array();

$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

return $instance;



Bây giờ, đến khu vực quản trị WordPress chọn phần Appearance. Sau đó vào mục Widgets. Bạn sẽ thấy một widget có tên là New Sample Widget trong Available Widgets. Chúc mừng, bạn đã tạo được một widget tùy chỉnh cho riêng mình. tuy nhiên, đây chỉ là những bước cơ bản. Một widget hoàn thiện bao gồm nhiều chức năng đòi hỏi công nghệ lập trình của bạn. Vì thế bạn nên phân tích qua các Plugins hỗ trợ tạo Widget.

Để có thể thông minh cho wordpress của bạn, có thể dùng các công cụ thay đổi widget khác cho wordpress tại các plugin cần thiết cho wordpress

Sau bài viết này, mong rằng bạn có thể hiểu hơn về widget trong WordPress cũng như các thay đổi cơ bản để làm sao xây dựng một website ưng ý trên nền tảng WordPress, chúc bạn thành công.

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

Widget wordpress yêu thích trên nền tảng Wordpress - Sidebar trên wordpress theo sở thích

Lê Trương Tấn Lộc (sieutocviet.net)

Có hơn 4 năm thực chiến Laravel 8 năm thực chiến trong quản lý web site tư vấn giải pháp Seo top, Marketing tối ưu nhất cho công ty.
Hiện là leader kinh doanh tại Siêu Tốc Việt.