Thông tin liên hệ

Quốc Trần - Quận Gò Vấp, TP. Hồ Chí Minh

Liên hệ hỗ trợ 0906891294 Zalo
Mạng xã hội
Cách tạo Widget WordPress bài viết nổi bật đơn giản
Avatar
Cá Mập
  • 29/01/2022
  • Hướng dẫn

Widget là gì ?

Widget WordPress được gọi tắt Widget là một hệ thống công cụ của WordPress cho phép thêm các nội dung mới, định hình danh mục các bài viết. Qua đó hiển thị những bài viết mới nhất lên các thanh để người đọc dễ dàng tìm kiếm và theo dõi các bài viết.

Cách sử dụng Widget cũng đặc biệt đơn giản. Người dùng chỉ cần kéo thả Widget vào trong một khu vực nhất định trên WordPress. Khu vực này thường được gọi là khu vực widget. Chi tiết cách tạo Widget sẽ được hướng dẫn cụ thể hơn ở phía dưới.

Trong WordPress, 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êm hay xóa Widget tùy vào mục đích sử dụng của mỗi người. Để xem các Widget mà mình đang sở hữu, người dùng nhấp vào thẻ Appearance và chọn Widgets.

Tùy theo từng giao diện khác nhau mà cách bố trí, sắp xếp các Widget có sự khác biệt. Nhưng nói chung, một khu vực Widget đều bao gồm 3 phần chính như sau: Available Widgets (Widget mặc định), Primary Widget Area (Vị trí đặt Widget), và Inactive Widgets (Widget không hoạt động).

Hôm này mình sẽ hướng dẫn các bạn cách tạo widget wordpress cho bài viết nổi bật đơn giản mà không dùng plugin, chỉ cần làm theo các bước hướng dẫn của mình dưới đây nhé.

Đầu tiên bạn cần có plugin ACF ( Advanced Custom Fields ) download ở link bên dưới:

Cách tạo widget wordpress

Cách 1 : Tạo trường Checkbox nổi bật cho bài viết với ACF

Bước 1 : Tạo trường Checkbox nổi bật cho bài viết với ACF

Đầu tiên, bạn vào cài đặt Plugin ACF sau đó -> Chọn Add New để tạo field mới. Sau đó làm theo như ảnh sau đó save

Kết quả hiện thị trong bài viết như sau:

Chi Tietacf - thành quả đầu tiên trong cách tạo widget wordpress của bạn

Bước 2 : Dùng code bên dưới gắn vào file function.php

class bai_viet_noi_bat extends WP_Widget { function __construct(){ $widget_ops = array('description' => 'Bài viết nổi bật'); $control_ops = array('width' => 300, 'height' => 300); parent::__construct(false,$name='Bài viết nổi bật',$widget_ops,$control_ops); } function form($instance){ global $wpdb; //Defaults $instance = wp_parse_args( (array) $instance, array('title'=>'','numbershow'=>'') ); $title = htmlspecialchars($instance['title']); $numbershow = htmlspecialchars($instance['numbershow']); ?> <p><label for="<?php echo $this->get_field_id('title'); ?>">Tiêu đề </label> <input type="text" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>" style="width:100%" value="<?php echo $title; ?>"> </p> <p><label for="<?php echo $this->get_field_id('numbershow'); ?>">Số lượng bài viết: </label> <input type="text" name="<?php echo $this->get_field_name('numbershow'); ?>" id="<?php echo $this->get_field_id('numbershow'); ?>" style="width:100%" value="<?php echo $numbershow; ?>"> </p> <?php } /*Saves the settings. */ function update($new_instance, $old_instance){ $instance = $old_instance; $instance['title'] = stripslashes($new_instance['title']); $instance['numbershow'] = stripslashes($new_instance['numbershow']); return $instance; } function widget($args, $instance) { global $wpdb,$post, $product; extract($args); $title= empty($instance['title']) ? '' : $instance['title']; $numbershow= empty($instance['numbershow']) ? '' : $instance['numbershow']; echo $before_widget; if ( ! empty( $instance['title'] ) ) { echo $args['before_title'] . apply_filters( 'widget_title', $instance['title'] ). $args['after_title']; } ?> <div class="news__feature widget-post"> <ul> <?php $args = array( 'post_type' => 'post', 'posts_per_page' => $numbershow, 'post_status' => 'publish', 'meta_query' => array( array( 'key' => 'feature_post', 'value' => '1', 'compare' => '==' // not really needed, this is the default ) ) ); $wp_query = new WP_Query( $args ); $i=1; if ( $wp_query->have_posts() ) : while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?> <li> <a href="<?php the_permalink(); ?>" class="plain"> <div class="box-image"> <?php the_post_thumbnail('full'); ?> </div> <div class="box-text text-left"> <h5 class="post-title is-large "><?php the_title(); ?></h5> </div> </a> </li> <?php $i++;endwhile; wp_reset_postdata(); endif; ?> </ul> </div> <?php echo $after_widget; ?> <?php } }// end class register_widget('bai_viet_noi_bat');

Bước 3 : Dán code css bên dưới vào file style.css

.widget .widget-title {	font-size: 18px;	font-weight: 600;	text-transform: initial;	color: black;	letter-spacing: 0;	background-color: #FED201;	border-radius: 8px 8px 0 0;	display: block;	padding:15px; } aside.widget {	background: #FFFFFF;	box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25);	border-radius: 8px; } aside.widget ul li {	padding: 0 15px; } aside.widget ul li a {	color: #222;	font-size: 14px;	font-weight: 500; } aside.widget ul li a:hover {	color: #fed203; } .widget-post ul li {	padding: 15px !important; border-bottom: 1px solid #eee; } .widget-post ul li a { width: 100%; -js-display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; } .widget-post ul li .box-image {	width: 45%;	padding-right: 15px; } .widget-post ul li .box-image img {	height: 60px;	object-fit: cover; } .widget-post ul li h5 {	font-weight: 600;	font-size: 14px; }

Đến đây, bạn đã thành công bước đầu trong cách tạo widget wordpress rồi. Sau khi dán code xong bạn có thể vào widget để kéo thả vị trí thả widget mà bạn muốn hiện thị ở trên web ở mục Giao diện -> Widget

Cách tạo widget wordpress cho bài viết nổi bật
thành quả cách tạo widget wordpress

Cách 2: Tạo bài viết tùy chọn với ACF Relationship ( Updating…)

Xong rồi save lại xem kết quả thôi . Chúc các bạn thành công nếu có câu hỏi vui lòng comment bên dưới nhé!

5/5 - (1 bình chọn)
Avatar
Cá Mập

Cá Mập code lập trình wordpress, chia sẽ kiến thức, thủ thuật về web wordpress. Liên hệ làm việc 0906 891 294 ( Phone, Zalo )