Để hiểu cơ bản Widget trong WordPress là gì? Bạn đừng vội mà hãy đọc bài viết này theo thứ tự từ trên xuống, mọi vấn đề liên quan đến Widget đều được chúng tôi giải thích và có các đoạn code mẫu. Bạn chỉ cần sao chép và nhúng vào để chạy thôi. Đơn giản lắm đúng không?

1. Widget WordPress là gì?

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

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

Ngoài những Widget mặc định được tạo ra sẵn, Widget còn được tạo ra từ theme hoặc plugin wordpress nếu cần thiết. Nhưng tất cả chúng được quản lý tại menu trái trong quản trị: Giao diện > widget

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Chú ý: Nếu sau khi vào khu vực Widget, các bạn không thấy giao diện giống hình trên, nghĩa là các bạn đang sử dụng WordPress phiên bản 5.8 trở lên. Kể từ version này WordPress đã mặc định quản lý Widget dạng Block Editor. Bạn có thể disable Widget Block Editor WordPress bẳng đoạn code sau:

//Thêm đoạn code sau vào functions.php
function wpshare247_theme_support() {
    remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'wpshare247_theme_support' );

2. Widget và Sidebar

2.1 Sidebar wordpress là gì?

Sidebar trong wordpress là những khu vực được tạo ra để gọi những widget. Các sidebar thường thấy trong theme WP là Footer, Sidebar trái, phải … .

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Bạn hoàn toàn có thể tạo nhiều hơn 1 sidebar trong mỗi theme bằng cách, nhúng đoạn code sau vào file functions.php trải qua hàm register_sidebar được WP phân phối sẵn. Chú ý Sidebar chỉ được ĐK thành công xuất sắc khi widgets_init được gọi .

function wpshare247_widgets_init(){
    // Thêm SB footer
    register_sidebar( array(
        'name'          => __( 'Footer', 'text_domain'), // Tên sidebar hiển thị trong admin
        'id'            => 'sidebar-footer', // ID của sidebar không được trùng, dùng để hiển thị SB
        'description'   => __( 'Thêm các widget *[Footer] vào đây', 'text_domain'), // Mô tả cho SB nảy
        'before_widget' => '
', // Bạn có thể thêm Class cho SB vào đây 'after_widget' => '
', 'before_title' => '

', // Thẻ mở để tạo tiêu đề chung cho tất cả các Widget nẳm trong Sidebar này 'after_title' => '

', // Đóng thẻ tiêu đề ) ); // Thêm SB phải register_sidebar( array( 'name' => __( 'Sidebar phải', 'text_domain' ), 'id' => 'sidebar-right', 'description' => __( 'Thêm các widget *[Phải] vào đây', 'text_domain' ), 'before_widget' => '
', 'after_widget' => '
', 'before_title' => '

', 'after_title' => '

', ) ); // Thêm các SB tiếp theo } add_action( 'widgets_init', 'wpshare247_widgets_init' );

Như vậy là sao khi nhúng đoạn code trên vào, bạn hãy kiểm tra lại trong Giao diện > widget xem đã thay đổi những gì nhé.

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Sidebar nào được đăng ký trước sẽ hiển thị trước và ngược lại, để đổi vị trí các SB bạn chỉ cần hoán đổi vị trí các hàm register_sidebar trong đoạn code trên là được. Chú ý là các vị trí này hoàn toàn không ảnh hưởng gì đến hiển thị chúng ngoài giao diện trang chủ chúng ta.

2.2 Mối quan hệ giữa widget và sidebar

Nói về mối quan hệ giữa WG và SB, tất cả chúng ta hoàn toàn có thể hiểu đơn thuần là một khu vườn có nhiều cây. Nghĩa là mỗi SB hoàn toàn có thể chứa một hoặc nhiều hơn những WG, những WG hoàn toàn có thể trùng lặp lại với nhau .

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Vị trí những WG hoàn toàn có thể sắp xếp lại trong cùng một SB, những vị trí này sẽ biến hóa bên ngoài trang chủ sau khi chúng đổi khác. Để biến hóa vị trí những WG bạn chỉ cần nắm kéo và thả chúng, hoặc bạn hoàn toàn có thể chuyển dời một WG từ SB này sang SB khác một cách thuận tiện .

3. Cách sử dụng Widget như thế nào?

Cách sử dụng Widget rất là đơn thuần, tất cả chúng ta chỉ cần nắm kéo và thả chúng vào Sidebar cần hiển thị chúng .

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

4. Cách tạo Widget mới

Trong bài viết này tôi sẽ giúp những bạn tạo ra một Widget đơn thuần nhất, những tùy biến nâng cao sẽ được trình làng trong những bài viết tiếp theo .

Đăng ký Widget

Để ĐK một hay nhiều WG bạn hãy sao chép đoạn code sau thêm chúng vào functions.php. Nhưng thứ nhất bạn hãy tạo cho tôi 1 thư mục tên là ‘ widgets ’ mục tiêu là quản trị hàng loạt những WG sau này .

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Tiếp theo bạn hãy copy toàn bộ nội dung bên dưới và tạo thành 1 file có tên là wpshare247_simple.php nằm trong thư mục widgets nhé. Bạn có thể xem giải thích trong các dòng comment trong đoạn code bên dưới nhé.

 'wpshare247_simple',
                    'description' => esc_html__('Hiển thị thông tin của khách đang truy cập', 'wpshare247'),
                    'customize_selective_refresh' => true
                )
            );
        }
        
        //Hiển thị nội dung Widget lên website
        function widget($args, $instance) {
            $defaults = array('title' => '');
            
            //Gọi giá trị các field đã khai báo trong hàm form()
            $title = $instance['title'];
            //$field_khac = $instance['field_khac']; // gọi thêm các field khác tại dòng này
            
            echo $args['before_widget'];
            ?>
                
                
  • :
''); $instance = wp_parse_args($instance, $defaults); ?>

Trong Widget mẫu trên tôi chỉ tạo 1 trường widget đơn thuần là text field, bạn hoàn toàn có thể tìm hiểu thêm trọn bộ Field Widget từ cơ bản đến nâng cao tại đây => https://quangcao24h.net/chia-se-bo-field-widget-giup-ban-thiet-ke-website-wordpress-nhanh-hon
Việc quan trọng nhất là khai báo với WordPress rằng tôi muốn ĐK một WG mới bằng đoạn code bên dưới, hãy nhúng chúng vào file functions.php, kì tích sẽ Open .

function wpshare247_register_widgets(){
    //Khai báo widget mới
    $file = realpath(dirname(__FILE__)).'/widgets/wpshare247_simple.php';
    require_once($file);
    register_widget('wpshare247_simple');
    
    //Hãy tiếp tục khai báo thêm các WG khác như bên dưới
    /*$file = realpath(dirname(__FILE__)).'/widgets/wpshare247_simple_2.php';
    require_once($file);
    register_widget('wpshare247_simple_2');*/
    
}
add_action('widgets_init', 'wpshare247_register_widgets');

Sau dòng code này Widget đã được tạo trong quản trị, chúng ta sẽ thấy nó xuất hiện với tên vừa khai báo trên “* [Trái] Thông tin truy cập” sở dĩ tôi thêm dấu * vào trước tên Widget để nó hiển thị lên trên, bởi WordPress sẽ sắp xếp các WG theo chữ cái.

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Ok fine, bây giờ chỉ cần kéo chúng vào các Sidebar và sử dụng thôi.

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Có thể giúp ích được cho bạn nhiều hơn: Chia sẻ bộ Field Widget WS247 giúp bạn Thiết kế Website WordPress giống mẫu 99% trong thời gian ngắn nhất Xem tại đây

5. Cách gọi Sidebar vào các template

Tại mục 2.1 chúng ta đã tạo ra các Sidebar, vậy để chúng hiển thị ra ngoài website chúng ta thì làm cách nào. SB wordpress sẽ hiển thị bất cứ đâu nếu bạn gọi chúng, trong ví dụ này tôi sẽ gọi vào footer.php nhé. Mở file footer.php

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Tiếp theo nhúng đoạn code sau vào vị trí bạn muốn hiển thị, chú ý hàm dynamic_sidebar nhé



    

sidebar-footer là ID của Sidebar được đăng ký mục 2.1

Và tác dụng như hình bên dưới

Bài 08 – Hướng dẫn cách tạo mới Widget đơn giản trong WordPress

Như vậy tôi vừa hướng dẫn bạn cách thêm một Widget đơn thuần nhất vào WordPress. Widget là một phần không hề thiếu trong mã nguồn mở này, thế mạnh của nó cũng nằm ở WG, nếu bạn học wordpress thành thạo, tích hợp thêm tùy biến nâng cao những Widget nữa, việc phong cách thiết kế web bằng WordPress sẽ chẳng khi nào gây khó dễ được bạn .

Xem Video Cách tạo mới Widget trong WordPress

5

/

5
(
5
bầu chọn
)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *