Hướng dẫn cách tạo Widget WordPress đơn giản nhất 2022

Widget WordPress ai cũng hiểu nó là một block nội dung được đặt trong một khu vực được chỉ định, khu vực này ta thường gọi là Widget Area hoặc Sidebar. Vậy làm sao để hiểu quy trình tạo một Widget ra sao? Ở bài này mình sẽ Hướng dẫn cách tạo Widget WordPress đơn giản nhất 2022.

Widget WordPress là gì?

Widget trong CMS WordPress là những khối (block) chứa nội dung để hiển thị, chúng có thể là chữ, hình ảnh hay bất cứ nội dung nào bạn muốn. Widget sẽ xuất hiện được nhiều khu vực (Sidebar), bạn có thể gọi chúng bất cứ khi nào cần.

Widget được quản lý ở đâu?

Ngoài những Widget mặc định xuất hiện lần đầu sẵn, Widget còn xuất hiện lần đầu từ theme hoặc plugin wordpress nếu như quan trọng. nhưng toàn bộ chúng được quản lý tại menu trái trong quản trị: bố cục và giao diện > Widget

WordPress cũng cho phép các developer tạo các Widget tùy chỉnh của riêng họ.

Nhiều theme và plugin WordPress cao cấp đi kèm với các Widget tùy chỉnh riêng mà bạn có thể chèn vào thanh bên.

Ví dụ: bạn sẽ thêm form liên lạc, form đăng nhập tùy chỉnh hoặc media vào thanh bên mà không cần viết bất kỳ dòng code nào.

Hãy xem cách để tạo các Widget tùy chỉnh trong WordPress ở video chỉ dẫn phía dưới.

Hướng dẫn cách tạo Widget WordPress đơn giản

Nếu như bạn đang học code trong WordPress, bạn có thể cần tạo môi trường phát triển cục bộ/ môi trường dev. bạn sẽ thiết lập WordPress trên máy tính của mình (Mac hoặc Windows).

Có một vài cách để thêm code Widget tùy chỉnh của bạn trong WordPress.

Cách good đặc biệt là bạn tạo plugin dành riêng cho Web và dán code Widget vào đấy.

Bạn cũng có khả năng dán vào file theme functions.php. thế nhưng, sẽ chỉ khả dụng khi theme đó đang hoạt động.

Một công cụ khác mà bạn sẽ dùng là plugin Code Snippets cho phép bạn đơn giản thêm code tùy chỉnh vào Trang Web WordPress của mình.

Trong bài chỉ dẫn này, chúng tôi sẽ tạo Widget đơn giản để chào đón các người truy cập.

Tạo Widget WordPress căn bản

WordPress đi kèm với một class Widget WordPress đã được tích hợp sẵn. Mỗi Widget WordPress mới sẽ mở rộng lớp Widget WordPress.

Có 18 phương pháp được nói đến dành cho các deverloper có thể được dùng với class WP Widget này.

Thế nhưng, trong bài hướng dẫn này, chúng tôi sẽ tập trung vào những phương pháp sau.

• __construct (): đây chính là phần chúng ta tạo ID Widget, tiêu đề và miêu tả.
• Widget: đây chính là nơi xác định đầu ra được tạo bởi Widget.
• form: là nơi tạo form với các tùy chọn Widget con phụ trợ.
• Thay đổi và bổ sung: đây chính là phần sẽ lưu các tùy chọn Widget trong database.

Hãy nghiên cứu đoạn code sau, nơi chúng ta đã vận dụng bốn phương pháp này bên trong class WP_Widget.

// Creating the Widget

class wpb_widget extends WP_Widget {
// The construct part
function __construct() {
}

// Creating Widget front-end
public function Widget( $args, $instance ) {
}

// Creating Widget Backend
public function form( $instance ) {
}

// Updating Widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
}
// Class wpb_widget ends here
}
Đoạn code cuối cùng là để đăng ký Widget con và tải vào lên WordPress.
function wpb_load_widget() {
register_widget( ‘wpb_widget’ );
}
add_action( ‘widgets_init’, ‘wpb_load_widget’ );

Bây giờ, ghép tất cả các đoạn code vào nhau để tạo một Widget WordPress cơ bản.

Bạn có thể sao chép và dán đoạn code sau vào file plugin tùy chỉnh hoặc file theme functions.php.

// Creating the Widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(

// Base ID of your Widget
‘wpb_widget’,

// Widget name will appear in UI
__(‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Widget description
array( ‘description’ => __( ‘Sample Widget based on WPBeginner Tutorial’, ‘wpb_widget_domain’ ), )
);
}

// Creating Widget front-end

public function Widget( $args, $instance ) {
$title = apply_filters( ‘widget_title’, $instance[‘title’] );

// before and after Widget arguments are defined by themes
echo $args[‘before_widget’];
if ( ! empty( $title ) )
echo $args[‘before_title’] . $title . $args[‘after_title’];

// This is where you run the code and display the output
echo __( ‘Hello, World!’, ‘wpb_widget_domain’ );
echo $args[‘after_widget’];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ ‘title’ ] ) ) {
$title = $instance[ ‘title’ ];
}
else {
$title = __( ‘New title’, ‘wpb_widget_domain’ );
}
// Widget admin form
?>
<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
}

// Updating Widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the Widget
function wpb_load_widget() {
register_widget( ‘wpb_widget’ );
}
add_action( ‘widgets_init’, ‘w

Sau khi thêm đoạn code trên, truy cập vào Appearance » Widgets. Bạn sẽ nhận thấy Widget WPBeginner mới trong danh sách các Widget có sẵn. Bạn cần kéo và thả Widget này vào thanh bên.

Widget này chỉ có một trường để điền, bạn có thể thêm văn bản của mình và nhấp vào nút Save để lưu trữ các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem.

Bây giờ hãy review lại các đoạn code trên.

Đầu tiên, chúng tôi đăng ký wpb_widget và tải Widget tùy chỉnh của chúng tôi. Sau đó, chúng tôi sẽ xác định xem Widget đó sẽ làm gì và cách hiển thị back-end của Widget đó.

Cuối cùng, chúng tôi đã xác định cách xử lý các thay đổi được thực hiện đối với Widget con.

Bây giờ có một số điều mà bạn có thể muốn hỏi. Ví dụ: mục đích của wpb_text_domain là gì?

WordPress sử dụng gettext để xử lý bản dịch và bản local. wpb_text_domain này và __e yêu cầu gettext cung cấp một chuỗi để dịch.

Nếu bạn đang tạo Widget con tùy chỉnh cho theme của mình, bạn có thể thay thế wpb_text_domain bằng miền văn bản của theme.

(Nguồn: Tổng hợp)

Lời tổng kết

Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.

ATPWeb – XÂY DỰNG NGÔI NHÀ ONLINE

• Hotline: 0707 6666 56
• Fanpage: ATP Web
• Gmail: info@atpweb.vn
• Website: https://atpweb.vn/