Widget là các khối trong wordpress. Tiếp tục với chuyên mục WordPress Development bài viết sau ChuanSeoWeb sẽ hướng dẫn bạn cách thêm widget cho wordpress, cách tạo widget wordpress mà không cần dùng plugin. Bạn sẽ đăng ký được một khu vực widget area mới, biết cách cách tạo widget wordpress nhỏ để thêm vào khu vực widget area đã được khởi tạo. Với widget area có thể là sidebar, có thể là footer. Tùy vào mục đích bạn sử dụng mà bạn muốn nó hiển thị ở đâu. Bài viết dưới đây mình sẽ hướng dẫn chi tiết hơn.
Có thể bạn quan tâm: Code hiển thị sản phẩm theo category mới nhất
Widget wordpress là gì
Widget WordPress là một công cụ gồm các khối trong WordPress. Ở phiên bản mới 5.8 của WordPress Widget hiện giờ cách sử dụng có hơi khác một chút. Khi nó cho phép chỉnh sửa dạng khối dạng Gutenberg. Giúp dễ dàng chỉnh sửa hơn. Với Widget trong wordpress bạn dễ dàng thêm các dữ liệu như hình ảnh, danh sách cách chuyên mục, các bài viết mới nhất, …
Widget giúp cho việc tùy chỉnh website của bạn đơn giản hơn. Dễ dang tùy chỉnh các dữ liệu hơn, tùy vào cách bố trí khu vực Widget area của bạn. Việc sử dụng widget cũng khá đơn giản bạn bạn chỉ cần kéo thả các khối vào trong widget area. Ở phiên bản WordPress 5.8 bạn có rất nhiều khối để lựa chọn. Ngoài các khối ở phiên bản trước ở phiên bản mới này có thêm các khối Gutenberg giống như bạn soạn thảo một bài viết. Nên việc bạn biết cách thêm widget cho wordpress là rất cần thiết nếu bạn là một wordpress developer.
Cách thêm widget cho wordpress (register widget wordpress)
Việc cách thêm widget cho wordpress ở đây là mình khởi tạo hay đăng ký một widget area. Giống như một widget sidebar, widget footer, … Widget area là khu vực để bạn kéo thả các khối để bạn thả vào. Sau đây mình sẽ hướng dẫn bạn cách thêm widget cho wordpress. Bạn thêm đoạn code sau vào file function.php trong theme của bạn.
function chuanseowweb_widgets_init() {
register_sidebar(
array(
'name' => __( 'Footer CSW', 'ntl-csw' ),
'id' => 'footer-csw',
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<p class="widget-title">',
'after_title' => '</p>',
)
);
}
add_action( 'widgets_init', 'chuanseowweb_widgets_init' );Mình giải thích chút các tham số có trong hàm register_sidebar () giúp bạn tạo ra widget area.
- name: đây là tên của widget are hiển thị cho quản trị viên dễ theo dõi.
- id: Tham số này là để chỉ ra wiget area. Nó phải là duy nhất không được trùng với widget area nào.
- before_widget, after_widget: lần lượt là các thẻ mở và thẻ đóng của cả khối widget lớn
- before_title, after_title: lần lượt là thẻ mở và đóng của tiêu đề widget.
Sau khi thêm đoạn code treen vào file function.php. Bạn sẽ tạo ra được widget area và dễ dàng thêm các khối vào trong nó.
Để hiển thị widget area này bạn dùng hàm dynamic_sidebar(). Bạn sử dụng đoạn code sau để hiển thị widget area vào nới bạn muốn. Ở đây mình tạo ra một widget area là footer nên mình sẽ viết đoạn code này vào file footer.php
<?php
if ( is_active_sidebar( 'footer-csw' ) ) {
?>
<div class="widget-column footer-widget">
<?php dynamic_sidebar( 'footer-csw' ); ?>
</div>
<?php
}
?>Có thể bạn quan tâm: Hiển thị bài viết cùng chuyên mục trong wordpress
Cách tạo widget wordpress (Widget Item)
Sau khi bạn đã thêm được widget area thành công. Tiếp theo mình sẽ hướng dẫn bạn cách thêm cách tạo widget wordpress hay các khối widget item. Trong phần này mình sẽ hướng dẫn bạn cách tạo widget wordpress lấy danh sách các bài viết cùng chuyên mục, bài viết liên quan với bài viết hiện tại.
Đầu tiên trong theme của bạn bạn tạo thư mực widget. Trong thư mục này bạn tạo file đặt tên là: class-widget-csw-post-realted.php. Trong file này bạn dán đoạn code sau vào:
<?php
class csw_widget_post_related extends WP_Widget {
function __construct() {
$widget_ops = array(
'classname' => 'widget-post-related',
'description' => __( 'Widget này lấy ra danh sách các bài viết liên quan', 'ntl-csw' ),
'customize_selective_refresh' => true,
);
parent::__construct( 'csw_wg_post_related', __( 'Bài viết liên quan csw', 'ntl-csw' ), $widget_ops );
}
public function widget( $args, $instance ) {
$title = $instance['title'];
$number_post = $instance['number_post'];
$title = ! empty( $title ) ? $title : esc_html__( 'Bài viết liên quan', 'ntl-csw' );
$number_post = ! empty( $number_post ) ? (int)$number_post : 5;
$hierarchical = ! empty( $instance['hierarchical'] ) ? '1' : '0';
echo $args['before_widget'];
if ( $title ) {
echo $args['before_title'] . $title . $args['after_title'];
}
$cat = get_the_category();
if( $cat ){
$agrs_cat = array(
'cat' => $cat[0]->term_id
);
}else{
$agrs_cat = array();
}
$args_base=[
'post_type' => 'post',
'posts_per_page' => $number_post,
'order' => 'desc',
];
$args = array_merge($args_base, $agrs_cat);
$blog = new \WP_Query($args);
?>
<div class='csw-related-post'>
<?php
if($blog->have_posts()) {
while($blog->have_posts()) {
$blog->the_post();
$thumbnail_url = wp_get_attachment_image_url(get_post_thumbnail_id() , 'full' );
?>
<div class="csw-item">
<?php if($thumbnail_url) { ?>
<div class="csw-media">
<a href="<?php echo get_the_permalink() ?>">
<img alt="<?php echo get_the_title() ?>" src="<?php echo esc_url($thumbnail_url) ?>" >
</a>
</div>
<?php } ?>
<div class="csw-content">
<div class="post-title">
<h2 class="post-title">
<a href="<?php echo get_the_permalink() ?>"><?php echo get_the_title() ?></a>
</h2>
</div>
<div class="post-time">
<span><?php echo get_the_time( get_option( 'date_format' )) ?></span>
</div>
<div class="post-excerpt">
<p><?php echo get_the_excerpt() ?></p>
</div>
<div class="reade-more">
<a href="<?php echo get_the_permalink()?>"><?php esc_html_e('Đọc thêm', 'ntl-csw') ?></a>
</div>
</div>
</div>
<?php
}
}
wp_reset_postdata(); ?>
</div>
<?php
echo $args['after_widget'];
}
public function form( $instance ) {
$default = array(
'title' => '',
'number_post' => 5,
);
$instance = wp_parse_args( (array) $instance, $default );
?>
<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Tiêu Đề:', 'ntl-csw' ); ?></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( $instance['title'] ); ?>" /></p>
<p><label for="<?php echo $this->get_field_id( 'number_post' ); ?>"><?php _e( 'Số bài viết:', 'ntl-csw' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'number_post' ); ?>" name="<?php echo $this->get_field_name( 'number_post' ); ?>" type="text" value="<?php echo esc_attr( $instance['number_post'] ); ?>" /></p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['number_post'] = sanitize_text_field( $new_instance['number_post'] );
return $instance;
}
}
function chuanseoweb_load_widget_post_realted() {
register_widget( 'csw_widget_post_related' );
}
add_action( 'widgets_init', 'chuanseoweb_load_widget_post_realted' );Tiếp theo bạn trong file function.php của theme bạn require file vừa tạo trên vào nhé:
require( get_template_directory() . '/widget/class-widget-csw-post-realted.php' );Mình giải thích qua một chút về các hàm trong class của file trên:
- WP_Widget: Đây là class của core WordPress. Class của mình mới tạo là csw_widget_post_related kế thừa từ class đó để có thể sử dụng được các phương thức trong class core của wordpress đó.
- __construct: đây là hàm khởi tạo. Bất kể khi nào khởi tạo đối tượng từ class csw_widget_post_related thì hàm __construct này sẽ được chạy đầu tiên.
- widget: Hàm này hiển thị các bài viết ra ngoài cho người dùng xem. Bạn có thể tùy chỉnh html theo ý mình tại đây.
- form: Hàm này giúp bạn tạo ra các setting trong widget
- update: Giúp lưu các giá trị của setting trong widget.
Bạn kiểm tra trong Giao diện -> Widget bạn bấm vào khối xem nó đã hiện ra khối có tên là Bài viết liên quan csw chưa.
Có thể bạn quan tâm: Cách tao shortcode wordpress mới nhất 2021
Sau khi đã tạo được widget item rồi và nó đã hiện ra ngoài trang cho người dùng xem rồi. Tiếp theo bạn cần css cho nó để nó dễ nhìn hơn. Bạn sử dụng đoạn code css mình đã chuẩn bị sẵn sau để thêm vào file css trong theme:
.csw-related-post .csw-item {
display: flex;
flex-wrap: wrap;
}
.csw-related-post .csw-item:not(:last-child) {
margin-bottom: 50px;
}
.csw-related-post .csw-item .csw-media {
width: 220px;
padding: 0 20px 0 0;
}
.csw-related-post .csw-item .csw-content {
width: calc(100% - 220px);
}
.csw-related-post .csw-item .csw-content .post-title {
font-size: 20px;
line-height: 25px;
color: #222;
margin: 0 0 5px 0;
}
.csw-related-post .csw-item .csw-content .post-title a {
font-size: 20px;
line-height: 25px;
color: #222;
}
.csw-related-post .csw-item .csw-content .post-title a:hover {
color: #f00;
}
.csw-related-post .csw-item .csw-content .post-time {
margin: 0 0 10px 0;
}
.csw-related-post .csw-item .csw-content .post-time span {
font-size: 15px;
line-height: 20px;
}
.csw-related-post .csw-item .csw-content .post-excerpt {
margin-bottom: 20px;
}
.csw-related-post .csw-item .csw-content .post-excerpt p {
margin: 0 0 10px 0;
font-size: 17px;
line-height: 24px;
color: #666;
}
.csw-related-post .csw-item .csw-content .reade-more a {
font-size: 17px;
line-height: 20px;
font-weight: 600;
color: #fff;
padding: 11px 24px 12px 23px;
display: inline-flex;
align-items: center;
background: #222;
}
.csw-related-post .csw-item .csw-content .reade-more a:hover {
background: #f00;
}Sau khi thêm đoạn mã css trên thì bạn sẽ được giao diện bên ngoài tương đối dễ nhìn. Nếu tỉ mỉ hơn bạn có thể css thêm cho đẹp hơn.
Kết Luận
Qua bài viết trên mình đã hướng dẫn bạn cách thêm widget cho wordpress mới nhất ở bản WordPress 5.8. Mình hy vọng sẽ giúp ích cho bạn. Nếu có thắc mắc hay câu hỏi gì bạn để lại bình luận bên dưới. Cám ơn bạn đã quan tâm bài viết.
