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

22/03/2022

0 44 3 minutes read

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ẻ với các bạn một thủ thuật hay, đó là cách chèn (tạo) thêm Widget vào một vị trí bất kỳ trên WordPress. Nghe có vẻ giống như một tiêu đề, nhưng không phải vậy, bởi vì nó có thể xảy ra.

Nội dung

Câu hỏi về cách chèn (tạo) thêm Widget vào vị trí bất kỳ trên WordPress

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

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

Chèn Widget vào bất kỳ đâu trên WordPress – hình minh họa

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

Lời đề nghị: Trường hợp bạn muốn chèn thêm một số cột widget bên dưới Footer thì có thể tham khảo bài viết Thêm tiện ích 4 cột dưới chân trang khi chủ đề WordPress không khả dụng.

Vậy cốt lõi ở đây nằm ở nhu cầu của bạn, sẽ không có theme nào làm bạn hài lòng hoàn toàn về tính năng cũng như ngoại hình. Do đó, bạn phải tự ngâm và bổ sung. Tôi gọi nó là chơi với các chủ đề và có cả một danh mục Thủ thuật WordPress để lưu những cái tôi đã chơi qua. Các bạn quan tâm thì vào xem có “game” nào dùng được không, tải về dùng nhé ^ ^

Hướng dẫn cách chèn / tạo thêm Widget ở mọi vị trí trên website WordPress

Trên thực tế, không phải mọi vị trí trên trang web WordPress của bạn đều có thể chèn các widget. Đầu tiên là lỗi mã chủ đề, thứ hai có thể làm hỏng bố cục của trang web. Tuy nhiên, với hướng dẫn dưới đây, bạn có thể áp dụng để chèn NHIỀU vị trí trên trang web WordPress của mình.

Cụ thể hơn một chút, bên dưới mình sẽ chèn một widget tìm kiếm ngay bên dưới logo của website. Chủ đề được sử dụng trong ví dụ này là Schema Pro, bạn có thể sử dụng chủ đề đó để làm việc với chủ đề bạn đang sử dụng!

Bước 01: Sao chép mã sau và dán vào cuối tệp functions.php của chủ đề.

//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 tệp header.php, bạn chọn một vị trí để chèn tiện ích. Đối với chủ đề Schema Pro, bạn tìm thấy dòng bên dưới. Vị trí cần chèn như tôi đã đánh dấu trong hình.

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

Vị trí chèn mã hiển thị widget

Bước 03: Dán đoạn mã dưới đây vào vị trí được chỉ định.

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

Bước 04: Thêm CSS sau vào phần CSS bổ sung. Nếu bạn chưa hiểu rõ về cách chèn hoặc không biết cách chèn, hãy gửi tin nhắn cho tôi và tôi sẽ hướng dẫn bạn!

.widget-header {
margin: 1em;
}

Trên Máy tính để bàn:

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

Trên thiết bị di động và máy tính bảng:

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

Như vậy là đã hoàn thành việc chèn widget vào tiêu đề, lúc này trong phần quản lý widget, bạn sẽ thấy nó có một widget mới tên là Tiện ích con tiêu đề tùy chỉnh Aria. Bạn chọn vào đó >> thêm tiện ích, ví dụ như thanh tìm kiếm như mình làm bên dưới.

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

ĐỐI TƯỢNG

Viết đến cuối bài vậy thôi, nhưng không biết có ai đã đọc đến đây chưa: v | Cuối cùng nếu 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 vào ảnh định dạng .jpg | Nếu bạn chưa làm được, hãy 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 bạn nhé!

4,4 / 5 – (8 phiếu bầu)

Marketing online

Thông tin thêm

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

#Cách #chèn #tạo #thêm #Widget #vào #vị #trí #bất #kỳ #trên #WordPress
[rule_3_plain] #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.
MỤC LỤC NỘI DUNG1 Đặt vấn đề về chuyện chèn (tạo) thêm Widget vào vị trí bất kỳ trên WordPress2 Hướng dẫn cách chèn/ tạo thêm Widget vào vị trí bất kỳ trên website WordPress3 LỜI KẾT
Đặ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 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 !