Widget là gì? Các thông tin về Widget Wordpress

Widget là gì? Widget đóng vai trò gì trong những trang web được xây dựng từ WordPress. Trong bài viết này tôi sẽ cùng bạn tìm hiểu Widget là gì và định nghĩa widgets, cách quản lí và hướng dẫn cài đặt cũng như sử dụng chi tiết nhất có thể.

WordPress Widgets là gì?

Widget Wordpress là gì?

Khi nhắc đến thiết kế website, bạn thường nghe người ta nhắc rất nhiều về Widgets, nhưng widgets là gì? Nói một cách dễ hiểu thì đây là một tiện ích giúp bạn thiết kế giao diện website dễ dàng hơn, nó làm nhiệm vụ cấu tạo, định hình và chỉnh sửa các yếu tố khác.

Widgets là tiện ích hỗ trợ cho website WordPress

Widgets là tiện ích rất quan trọng trong WordPress giúp tạo lập, xây dựng cũng như sử dụng trang web trở nên dễ dàng hơn.Bạn nên cài đặt các plugin có hỗ trợ Widget liên kết các mạng xã hội khác để dễ quản lý.

Widget wordpress là gì? Cách hiểu đơn giản nhất thì trên giao diện website của WordPress thì widgets tập hợp loạt chức năng trên thanh sidebar, bạn có thể cho hiển thị bài viết mới nhất bằng cách chèn vào widget recent posts. Còn nếu bạn có kiến thức về code và bạn muốn thêm các mã HTML vào thì widget text là lựa chọn không thể bỏ qua.

widgets là nơi tập hợp loạt chức năng trên thanh sidebar

Bạn có thể dễ dàng thêm widgets vào bất kì vị trí nào trên trang web theo bố cục nhất định.Nhưng thường thì người ta sẽ thêm vào vị trí bên phải hoặc bên trái trang web.

Khi bạn đã nắm được widget wordpress là gì, bạn sẽ đến bước tìm cách sử dụng wordpress. Bước này khá đơn giản bạn chỉ cần kéo thả widget vào các khu nhất định trong wordpress là được.

Quản lý widget trong Wordpress

2.1 Widget mặc định là gì? (Available Widgets)

Widget mặc định là những widget có sẵn được them cung cấp. Tùy theo nhu cầu và mục đích xây dựng trang web mà bạn có thể xóa hay tùy chỉnh các widget này.

Các widget mặc định trong wordpress:

Archive: Hiển thị các bài viết trong tháng

Recent Post: Hiển thị bài viết mới nhất

Audio: Trình phát nhạc trên WordPress

Meta: Webmaster login, RSS và link WordPress.org

Calendar: Lịch

Categories:Danh sách categories

Gallery:Thư viện ảnh

Image: Hiển thị 1 bức ảnh

Navigation Menu: Tạo ra trình chuyển hướng

Pages: Danh sách các trang

Recent Comment: Các bình luận mới nhất trên trang

RSS: Hiển thị RSS hay Atom Feed

Search: Thanh tìm kiếm

2.2 Vị trí đặt widget là gì? (Primary widget area)

Có một chỗ riêng dành cho widget trên khung giao diện Wordpress.Thông thường khu vực này sẽ được đặt ở vị trí cuối hoặc ở cột bên phải của trang web.Tuy nhiên bạn cũng có thể dễ dàng đặt widget ở mọi vị trí bạn thích mà không cần phải tuân theo quy định cụ thể gì.

2.3 Widget không sử dụng là gì? (Inactive widgets)

Do nhu cầu của từng bạn và tùy từng mục đích xây dựng trang web khác nhau mà nhiều người có thể sẽ xài những widget khác nhau.Nếu bạn không xài bất cứ widget nào bạn chỉ việc đặt vào khu inactive widgets. Khi bạn có việc cần đến thì bạn chỉ cần kéo widget vào vị trí mong muốn là được, bạn không cần phải tạo widget mới.

Thêm và loại bỏ widget trong WordPress dễ dàng

Cách thêm widget cho wordpress chuẩn

3.1 Thêm widget cho wordpress

Nếu bạn đang cần thêm widget cho wordpress của mình, bạn hãy làm theo các bước sau:

Bước 1: đăng nhập WordPress Dashboard (Tại appearance>Widgets)

Bước 2: Kéo widget vào bất kì chỗ nào mà bạn muốn. Lưu ý là nếu wordpress widget có định dạng là video, bạn hãy chèn link hay upload video trực tiếp lên web tùy ý.

Bước 3: Customize trực tiếp cũng là cách để thêm widgets cho wordpress . Bạn bấm vào nút Customize trên website hoặc vào Appearance trong trang wp-admin để sử dụng chức năng này.

hướng dẫn cách thêm widget vào wordpress

3.2 Xóa widget trong wordpress

Có 2 cách sau đây

Cách 1: Kéo widget mà bạn không muốn ra khỏi sidebar và thả vào khu vực widget hiện có.

Cách 2:Bấm vào tiêu đề Widget muốn xóa để mở rộng Widget rồi chọn xóa là được.

xóa widget trong wordpress rất dễ làm

3.3 Thêm widget vào sidebar

Thêm widget cho wordpress vào thanh ngang trên giao diện wordpress, bạn chỉ cần làm theo hướng dẫn sau:

Kéo thả vào thanh ngang

Thông thường trong wordpress hiển thị danh sách những thanh ngang để bạn dễ thao tác khi cài đặt các widget. Chọn thanh ngang mà bạn muốn thêm sau đó bấm nút thêm vậy là bạn đã hoàn thành.

Mỗi widget trong WordPress đều có nút thêm, bạn chỉ cần nhấn vào nút để tới màn hình truy cập. Tại đây hãy chọn vị trí đặt widget mà bạn muốn, cách tạo widget cho wordpress này rất dễ thực hiện.

Có nhiều cách để thêm widget vào wordpress trên sidebar.

4.Tùy chỉnh widget trong wordpress

Trong một plugin tùy chỉnh, bạn có thể code Widget Wordpress tùy chỉnh.Và nó có thể hoạt động trên mọi web có sử dụng plugin này.

Hay bạn chọn thêm Widget vào file functions.php hoặc là một theme nào bất kì nào đó. Sau đó nó hoạt động trên mỗi theme đó mà thôi.

4.1 Widget API là gì

Widget API cho phép bạn có thể code các widget tùy chỉnh, bạn sẽ cần đến lớp WP_Widget từ API khi muốn tạo widget tùy chỉnh nào. Lớp WP_Widget là cơ sở cung cấp đến hơn 20 hàm cơ bản giúp bạn code. 4 hàm cơ bản và thông dụng nhất mà bạn cần lưu tâm đó là:

__construct(): hàm khởi tạo

widget(): đầu ra của Widget

update(): cập nhật các cài đặt của Widget

form(): định nghĩa các cài đặt của Widget trong Admin Dashboard

4.2 Tạo Widget tùy chỉnh

Khi tạo widget cho wordpress, bạn cần thêm code vào file functions.php của theme đang dùng.Bạn có thể thực hiện điều này với bất kỳ plugin nào.

Khi đã thêm code vào file functions.php, bạn có thể dùng linh hoạt Wordpress editor hoặc file manager.

Tôi khuyên bạn nên tạo một bản sao lưu(backup) file function.php ở một nơi khác trước khi thêm widget để tránh trường hợp bị lỗi hoặc xung đột không mong muốn.

Tạo function __construct()

Trên window, bạn có thể chọn bất kì trình soạn thảo văn bản nào sau đó bạn copy paste những dòng code sau vào trình soạn thảo văn bản để tạo class mở rộng cho lớp WP_Widget:

class new_widget extends WP_Widget {

//Insert functions here

}

Bạn sẽ dùng để xác định một ID là tên của Widget như cái cách nó hiện diện trong phần mô tả và phần UI.

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()

Bạn cần thực hiện bước chỉnh sửa cách hiển thị của Widget. Việc thực hiện thông qua các hàm widget () sẽ quyết định phần giao diện Widget như thế nào.

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'];

}

Hàm form() để code cho 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

}

Cập nhật chỉnh sửa nội dung với hàm update():

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 thêm chức năng đăng ký Widget với WordPress

function new_register_widget() {

register_widget( 'new_widget' );

}

add_action( 'widgets_init', 'new_register_widget' );

Giờ hãy khởi tạo hàm new_register_widget() giúp đăng ký widget, bạn hãy sử dụng Widget ID trong _construct(). Tiếp theo bạn khởi tạo hàm này thông qua widgets_init để tải thông tin của widget vào wordpress thông qua add_action(). Mã code tùy chỉnh sẽ 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;

}

Sau khi đã hoàn thành bạn chọn tiếp appearance ở khu vực của wordpress.Tiếp theo chọn New sample trong Available Widgets. Vậy là bạn đã thành công tạo ra một widget.

Với những người thiết kế website bằng wordpress, việc bạn thêm widget cho wordpress là cần thiết để bắt kịp các xu hướng của các trang website mua bán ngày nay.Việc thêm widget cho wordpress cũng giúp trang web của bạn ngày một hoàn thiện hơn, tối ưu trải nghiệm của cả bạn và người dùng. Mong rằng những thông tin trong bài viết “widget là gì” này sẽ giúp ích cho các bạn khi thêm widget vào wordpress.

CÔNG TY TNHH TRUYỀN THÔNG VIỆT NHÂN

► Add: 155 An Dương Vương – P. An Lạc – Quận Bình Tân – TP. HCM

► Hotline: 0902.006.808 - 0902.006.808

► Email: support@vietnhan.co - vietnhansoft@gmail.com

► Website: Vietnhan.co