Tin tức
Widget là gì? Tổng hợp tất cả thông tin của Widget cho người mới
Widget là gì? Bạn có thật sự hiểu rõ về Widget. Để tìm hiểu một cách chính xác nhất về Widget. Hãy cùng Mẫu Website 24h khám những thông tin, chi tiết được đề cập dưới bài viết ngay sau đây nhé.
Widget là gì?
Widget (viết tắt của WordPress Widget) là hệ thống cho phép người dùng thiết lập các chuyên mục và thêm nội dung mới vào bài viết của các công cụ trong WordPress. Điều này giúp cũng giúp người đọc dễ dàng tìm kiếm và theo dõi bài viết, vì nó hiển thị nhanh chóng các bài viết mới nhất trên thanh. Người dùng cài đặt các plugin hỗ trợ widget mạng xã hội có thể dễ dàng liên kết trang web của bạn với các mạng xã hội này. Đối với WordPress, sự xuất hiện của Widget là vô cùng quan trọng vì nó giúp tạo và sử dụng một trang web trên nền tảng WordPress.
Trong giao diện trang web WordPress có một tập hợp một số chức năng được sử dụng để chèn vào thanh bên.Nếu bạn muốn chèn mã HTML, bạn nên chọn văn bản tiện ích, và nếu bạn muốn hiển thị các bài viết mới, bạn nên chèn tiện ích bài viết gần đây. Sử dụng tiện ích cũng rất dễ dàng. Người dùng chỉ cần thực hiện các thao tác kéo và thả Widget vào trong một khu vực nhất định trên WordPress. Tiện ích con trong một khu vực xác định (khu vực tiện ích con) trong WordPress. Điểm nổi bật mà bạn có thể thấy là widget có thể dễ dàng thêm vào bất kỳ vị trí nào trên trang web theo một bố cục nhất định (thường thì nó là vị trí bên trái hoặc bên phải trên trang web).
Quản lý Widget trong WordPress
Đối với WordPress thì bất cứ theme nào cũng có Widget mặc định sẵn trước đó. Người dùng có thể tùy thích thêm hoặc xóa Widget dựa vào mục đích sử dụng của họ. Và để xem được các Widget nào mà mình đang sử dụng thì người dùng sẽ nhấp vào thẻ “Appearance”” và chọn Widget. Cũng sẽ tuỳ theo giao diện khác nhau mà cách bố trí và sắp xếp sẽ có một chút khác biệt. Nói tóm lại thì một khu vực Widget sẽ gồm có 3 phần, cụ thể như sau:
Widget mặc định (Available Widgets) là gì?
Available Widget hay Widget mặc định là những Widget đã có sẵn do theme cung cấp. Người dùng có thể xoá đi hay thay đổi vị trí tùy vào yêu cầu sử dụng đối với Các Widget này.
Có một vài Widget mặc định được tạo sẵn trong WordPress như sau:
- Archive: các bài viết trong tháng sẽ được hiển thị.
- Audio: hiển thị trình phát nhạc lên WordPress.
- Calendar: hiển thị lịch.
- Categories: hiển thị danh sách categories.
- Gallery: hiển thị thư viện ảnh.
- Image: hiển thị một bức ảnh.
- Meta: hiển thị webmaster login, RSS, và link WordPress.org.
- Navigation Menu: tạo ra trình chuyển hưởng.
- Pages: tạo danh sách các trang.
- Recent Comment: hiển thị những bình luận mới nhất trên trang WordPress.
- Recent Post: hiển thị các bài viết mới nhất trên WordPress.
- RSS: nơi hiển thị RSS hay Atom feed.
- Search: hiển thị thanh tìm kiếm.
- Tag Cloud: hiển thị post tag.
- Videos: hiển thị các link video từ các nhà cung cấp video lớn.
Đối với những theme dùng miễn phí để mua, số lượng các WordPress Widget cũng được mở rộng và trở nên đa dạng, phong phú hơn. Ngoài những Widget đã có sẵn thì người dùng còn có thể thêm mới các Widget khác vào trang web của mình tuỳ theo mục đích sử dụng.
Vị trí đặt Widget (Primary Widget Area) là gì?
Có một khu vực dành riêng cho các Widget trên trang WordPress . Thông thường, nó sẽ nằm ở cột bên phải (sidebar) hoặc cuối trang (footer). Nhưng cũng có trường hợp Widget được đặt ở phía bên trái trang. Khi đó nội dung chính và các bài viết sẽ nằm ở phía bên phải.
Sẽ không có một quy định cụ thể nào về việc sắp xếp Widget, người dùng có thể đặt Widget ở bất kỳ vị trí nào nếu muốn. Ví dụ, trên theme có 3 vị trí đặt Widget thì bạn có thể đặt widget ở bất kỳ vị trí nào trong 3 vị trí đó đều được.
Widget không sử dụng (Inactive Widget) là gì?
Với một WordPress Widget đã được thêm vào trong web, trường hợp mà người dùng không muốn sử dụng nữa thì bạn sẽ đặt nó vào khu vực này. Hoặc khi nào muốn dùng lại, bạn chỉ việc kéo Widget này lại vị trí mong muốn, mà không phải mất công tạo lại một Widget mới.
Ví dụ như fanpage, khi bạn tạo Widget cho nó, bạn sẽ cần thiết lập đường link, chiều cao, chiều rộng. Nếu bỏ nào phần Inactive Widgets này thì lần sau khi cần dùng lại, bạn sẽ không mất công thiết lập lại các thông tin đó nữa.
Hướng dẫn sử dụng Widget trong WordPress
Mẫu Website 24h sẽ hướng dẫn các bạn một vài thao tác cơ bản để sử dụng Widget, cụ thể như sau:
- Thêm Widget mới vào trong WordPress
- Xóa Widget WordPress
- Thêm Widget vào Sidebar
- Điều chỉnh vị trí trên dưới của Widget
Thêm Widget mới vào trong WordPress
Để thực hiện thêm được Widget mới vào WordPress thì bạn cần thực hiện theo 4 bước cụ thể như sau:
- Bước 1: Đầu tiên bạn hãy đă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: Người dùng thêm mới Widget bằng cách kéo thả và di chuyển chúng vào vị trí mình mong muốn. Đặc biệt, 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 mục đích sử dụng. Trong trường hợp WordPress Widget 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: Sử dụng Customize trực tiếp để thêm mới Widget trên WordPress là phương pháp mới nhưng hiệu quả. Để sử dụng chức năng này, người dùng cần truy cập vào mục Appearance trong trang wp-admin hay nút Customize trên website (sau khi đăng nhập bằng tài khoản admin).
Xóa Widget WordPress
Các bước để xóa Widget ra khỏi thanh Sidebar cũng tương đối đơn giản. Cụ thể có 2 cách để xóa Widget như sau:
- Cách 1:Người dùng kéo Widget muốn xóa ra khỏi Sidebar. Thả ra khu vực Widget hiện có.
- Cách 2: Click vào tiêu đề Widget muốn xóa để mở vùng mở rộng của Widget. Sau đó chọn xóa.
Thêm Widget vào Sidebar
Hiện nay, có rất nhiều cách để thêm widget vào thanh ngang trên giao diện WordPress của bạn. Nhưng với cách đơn giản và cơ bản nhất vẫn là kéo và thả chúng vào thanh ngang.
Một cách khác nữa là WordPress sẽ hiển thị danh sách những thanh ngang để bạn có thể cài đặt các widget này. Việc của bạn là chọn thanh ngang mà bạn muốn thêm widget rồi nhấn nút Thêm widget là xong.
Mỗi widget có sẵn sẽ có một nút Thêm. Nhấn vào nút đó để đi tới màn hình truy cập. Tại đây bạn có thể dễ dàng lựa chọn vào sidebar hoặc vị trí mà bạn muốn đặt widget.
Bạn cũng có thể thêm widget thông qua hiển thị trực tiếp bằng cách đi đến Appearance » Customize.
Điều chỉnh vị trí trên dưới của Widget
Để chỉnh sửa widget trong wordpress hay chỉnh vị trí trên dưới của Widget khi chúng đã vào khu vực mong muốn, người dùng chỉ việc kéo thả lên xuống là xong.
Hướng dẫn tạo Widget tùy chỉnh
Để bắt đầu tạo các widget WordPress tùy chỉnh, bạn cần phải có một số quyết định quan trọng ban đầu:
- Đầu tiên bạn có thể chọn code một widget wordpress tùy chỉnh trong một plugin tùy chỉnh. Điều này có nghĩa là nó sẽ có thể hoạt động với bất kỳ website nào sử dụng plugin này.
- Hoặc bạn chỉ cần đơn giản thêm widget vào file functions.php hoặc là một theme nào đó để nó chỉ hoạt động duy nhất trên theme đó mà thôi.
Widgets API là gì?
Widgets API cho phép bạn code các widget tùy chỉnh trên WordPress. Bạn cần phải dùng lớp WP_Widget từ API để tạo bất kỳ widget tùy chỉnh. Đâ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 cứ 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 cài đặt của widget
Các bước tạo Widget tùy chỉnh
Tiếp theo chúng ta sẽ thực hiện thêm code vào file functions.php của theme hiện đang sử 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. Để thêm mã này vào file functions.php thì bạn có thể sử dụng File Manager, FTP của hosting wordpress hoặc WordPress Editor . Đừ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ị ảnh hưởng.
Tạo function __construct()
Hãy mở bất kỳ 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ẽ sử dụng để xác định 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 thông qua 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ể thay đổi cấu trúc đầu ra cho Widget theo yêu cầu của mình.
Tạo hàm form()
Với hàm form() thì chúng ta vẫn có thể lập trình 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ức năng Widget với hàn update()
Mỗi khi các cài đặt được thay đổi, nếu cần làm mới các Widget thì bạn phải thực hiện chức năng cập nhật.
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 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’ );
Lưu ý, những dòng trên cần được đặt bên ngoài hàm new_widget()
Chúng ta đã khởi tạo hàm chức năng mới là new_register_widget() giúp đăng ký widget. Sử dụng Widget ID trong hàm __construct(). Sau đó, bạn hãy khởi tạo hàm này thông qua việc sử dụng widgets_init để tải những thông tin về widget vào WordPress thông qua phương thức add_action() được xây dựng sẵn. Mã code 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;
}
Kế tiếp, bạn chọn Appearance ở khu vực quản trị WordPress. Sau đó bạn vào mục Widgets sẽ thấy thư mục New Sample Widget trong Available Widgets. Lúc này, bạn đã thành công trong việc tạo ra một widget tùy chỉnh cho mình.
Plugin tạo Widget WordPress
Mẫu Website 24h sẽ gửi đến các bạn một số plugin mà các bạn có thể tham khảo và sử dụng. Hiện nay thì có khá nhiều plugin của WordPress hỗ trợ tạo Widget, cụ thể như sau:
- Flexible Post Widget
- Genesis Featured Widget Amplified
- Advanced Random Post Widget
- Better Recent Post Widgets Pro
Flexible Posts Widget là gì?
Bạn có thể hiển thị với nhiều loại bài viết hơn Với Flexible Posts Widget,. Cũng như thông tin bổ sung về bài viết (tên bài viết, số bình luận, ngày đăng tải, hình thu nhỏ…). Bao gồm khả năng lọc các bài viết dựa vào: types, tags và taxonomies; hay ID của bài viết…
Genesis Featured Widget Amplified là gì?
Đây là một plugin dành riêng cho Genesis Framework. Genesis Featured Widget Amplified plugin cho phép bạn hiển thị nội dung, taxonomies và các tùy chọn linh hoạt để hiển thị nội dung bài viết hoặc đoạn trích. Bạn cũng có thể hiển thị gravatar của tác giả bài viết trên sidebar hoặc các khu vực widget khác khi sử dụng plugin này.
Advanced Random Posts Widget là gì?
Advanced Random Posts Widget là một plugin hoàn toàn miễn phí để hiển thị các bài viết. Nhưng thay vì hiển thị các bài viết mới, nó có khả năng liệt kê các bài viết một cách ngẫu nhiên.
Better Recent Post Widgets Pro là gì?
Better Recent Post Widget Pro là một plugin trả phí, cho phép bạn tạo widget. Bạn có thể hiển thị thêm thông tin về bài viết của mình trong sidebar, bao gồm: tên tác giả của bài viết, ngày đăng tải, số bình luận và các đoạn trích với Plugin này.
Lời kết
Hy vọng những thông tin mà Mẫu Website 24h mang đến cho các bạn về Widget sẽ giúp các bạn có cái nhìn khách quan nhất về Widget, cũng như là bổ sung thêm những kiến thức hay về website. Chúc các bạn thành công.