Cách chèn (tạo) thêm Widget vào vị trí bất kỳ trên WordPress

Trong bài viết này mình chia sẻ đến bạn một thủ thuật hơi bị hay ho, đó là cách chèn (tạo) thêm Widget vào vị trí bất kỳ trên WordPress. Nghe có vẻ giật tít đấy, nhưng không đâu, vì nó khả thi.

Đặt vấn đề về chuyện chèn (tạo) thêm Widget vào vị trí bất kỳ trên WordPress

Nếu mà để chèn một widget vào website theo cách thông thường thì quá đơn giản rồi. Theme nó hỗ trợ bạn chèn widget vào vị trí nào thì chèn thôi chứ có gì đâu :v

Tuy nhiên, không phải theme nào cũng có đầy đủ các vị trí widget mà bạn mong muốn. Thường thường mấy theme miễn phí sẽ rất ít vị trí chèn widget. Nhiều khi muốn chèn cái banner quảng cáo vào Header (phần dầu trang) hoặc bên dưới Footer (chân trang) cũng không biết chèn sao.

Chèn Widget vào vị trí bất kỳ trên WordPress – ảnh minh họa

Giải pháp để chèn (tạo) thêm Widget vào vị trí mong muốn trên website là bạn phải mua bản Pro của theme. Mà cũng không chắc bản Pro đã có vị trí widget bạn ưng ý. Ví dụ như mình thực hành dưới đây là theme Schema Pro, giá cũng 59$ chứ không phải hàng miễn phí. Nhưng nó cũng không có cho mình chèn cái widget trên Header.

Đề xuất: Trường hợp bạn muốn chèn mấy cột widget ở dưới Footer luôn thì tham khảo bài viết Thêm widget 4 cột dưới footer khi theme WordPress không có sẵn.

Như vậy cốt lõi ở đây là nằm ở nhu cầu của bạn, sẽ không có một theme nào đáp ứng vừa ý bạn một cách hoàn toàn về tính năng cũng như hình thức. Do đó, tự bạn phải ngâm cứu, bổ sung thêm thôi nhé. Mình gọi đó là nghịch theme và có cả một chuyên mục Thủ Thuật WordPress  để lưu lại mấy cái mình đã nghịch qua. Bạn có hứng thú thì vào xem thử có “trò” nào dùng được thì lấy về dùng nhen ^ ^

Hướng dẫn cách chèn/ tạo thêm Widget vào vị trí bất kỳ trên website WordPress

Thực ra, không phải vị trí nào trên website WordPress cũng chèn được widget bạn nhé. Thứ nhất là lỗi code theme, thứ hai là có thể làm hỏng bố cục của website. Tuy nhiên, với hướng dẫn bên dưới đây, bạn có thể ứng dụng để chèn được RẤT NHIỀU vị trí trên website WordPress .

Cụ thể hơn một chút, dưới đây mình sẽ thực hiện chèn một cái widget tìm kiếm ngay bên dưới logo của website. Theme sử dụng trong ví dụ này là Schema Pro, bạn dựa vào đó để làm với theme đang dùng nhé !

Bước 01: Bạn copy đoạn code sau, đem dán vào phía dưới cùng trong file functions.php của theme đang dùng.

//THEM WIDGET VAO THEME - CHIA SE BOI HOCBAN.VN
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Custom Header Widget Area',
'id' => 'custom-header-widget',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Bước 02: Trong file header.php bạn chọn một vị trí cần chèn widget. Đối với theme Schema Pro bạn tìm đến dòng bên dưới. Vị trí cần chèn như mình đánh dấu trong hình.

if ( '1' === $mts_options['mts_sticky_nav'] )

Vị trí chèn code hiển thị widget

Bước 03: dán đoạn code dưới đây vào vị trí đã định.

<?php
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
<div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
<?php dynamic_sidebar( 'custom-header-widget' ); ?>
</div>
<?php endif; ?>

Bước 04: Thêm đoạn CSS sau vào trong phần CSS bổ sung. Nếu bạn không hiểu lắm về cách chèn hoặc không biết chèn sao thì nhắn tin mình hướng dẫn cho nhé !

.widget-header {
margin: 1em;
}

Trên Desktop:

.chw-widget {
width: 40%;
margin-left: 30%;
margin-bottom: 2em;
margin-top: -1em;
}

Trên di động, máy tính bản:

.chw-widget {
margin:1em;
margin-top:0em;

Như vậy là việc chèn widget vào header đã hoàn tất rồi, bây giờ vào trong phần quản lý widget sẽ thấy nó có thêm một cái widget mới có tên là Custom Header Widget Aria. Bạn chọn vào nó >> thêm thử một cái widget, ví dụ thanh tìm kiếm như mình làm bên dưới xem sao.

Vị trí chèn widget đã được thêm thành công

LỜI KẾT

Viết kết bài cho có lệ vậy thôi chứ biết bạn có ai đọc đến đây không :v | Chốt lại là bạn làm được thì comment bên dưới để khoe thành tích, nếu có ảnh chụp màn hình thì chèn link ảnh định dạng .jpg | Còn chưa làm được thì cũng comment vấn đề của bạn bên dưới hoặc nhắn tin cho mình qua Facebook để mình chỉ cho nhen !