Để 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?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?
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ẽ hiển thị đượ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 đượ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 > widgetGiao diện > widget
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: 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 các widget. Các sidebar thường thấy trong theme WP là Footer, Sidebar trái, phải….
Bạ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 thông qua hàm register_sidebar được WP cung cấp sẵn. Chú ý Sidebar chỉ được đăng ký thành công 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é.Giao diện > widget xem đã thay đổi những gì nhé.
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.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, chúng ta có thể hiểu đơn giản là một khu vườn có nhiều cây. Nghĩa là mỗi SB có thể chứa một hoặc nhiều hơn các WG, các WG có thể trùng lặp lại với nhau.
Vị trí các WG có thể sắp xếp lại trong cùng một SB, các vị trí này sẽ thay đổi bên ngoài trang chủ sau khi chúng thay đổi. Để thay đổi vị trí các WG bạn chỉ cần nắm kéo và thả chúng, hoặc bạn có thể di chuyển một WG từ SB này sang SB khác một cách dễ dàng.
3. Cách sử dụng Widget như thế nào?
Cách sử dụng Widget hết sức đơn giản, chúng ta chỉ cần nắm kéo và thả chúng vào Sidebar cần hiển thị chúng.
4. Cách tạo Widget mới
Trong bài viết này tôi sẽ giúp các bạn tạo ra một Widget đơn giản nhất, các tùy biến nâng cao sẽ được giới thiệu trong các bài viết tiếp theo.
Đăng ký Widget
Để đăng 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 trước tiên bạn hãy tạo cho tôi 1 thư mục tên là ‘widgets’ mục đích là quản lý toàn bộ các WG sau này.
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 widgetsnhé. 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.php nằm trong thư mục widgetsnhé. Bạn có thể xem giải thích trong các dòng comment trong đoạn code bên dưới nhé.
- :