Nhiều theme wordpress mặc định không hỗ trợ widget cho header khiến việc tùy biến như chèn hình ảnh quảng cáo gặp khó khăn không được như ý muốn, ở bài này mình sẽ hướng dẫn cách để tạo widget cho header wordpress một cách nhanh chóng qua 3 bước đơn giản.
Khi nào nên cần tạo widget cho header wordpress
Tạo widget cho header khi thiết kế website bằng wordpress giúp chúng ta linh hoạt trong bố cục giao diện, tiện ích này thường được sử dụng trong khu vực header như bên cạnh tay phải logo hay bên dưới thanh menu. Nhiều trang tin tức hiện nay đang sử dụng hình thức chèn quảng cáo này.
Thông thường thì các widget có sẵn của theme chỉ hỗ trợ ở các chân trang và thanh sidebar mà không có ở khu vực header bên trên bài viết hay ngay dưới menu vì vậy đó là lý do mình sẽ hướng dẫn các bạn cách tạo widget cho header wordpress để bạn dễ dàng thao tác hơn.
Các bước tạo widget cho header wordpress
Bước 1 : Tạo một widget area
Còn gọi là tạo một widget trong giao diện ở Appearance (Giao diện) => Widget. Trong trang quản trị admin.
Bằng cách thêm đoạn code sau vào file functions.php của theme mà bạn đang sử dụng.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function wpb_widgets_init() {
register_sidebar( array(
‘name’ => ‘Custom Header Widget Area’,
‘id’ => ‘custom-header-widget’,
‘before_widget’ => ‘
‘after_widget’ => ‘
‘, ‘before_title’ => ‘
‘, ‘after_title’ => ”,
) );
}
add_action( ‘widgets_init’, ‘wpb_widgets_init’ );
|
Đây là đoạn code để tạo một sidebar hay widget mới cho theme của bạn.
Sau khi thêm xong bạn có thể vào Appearance (Giao diện) => Widget để xem đã có widget mới chưa. Như trong đoạn code trên thì tên widget mình thêm là ‘Custom Header Widget Area’.
Bạn hãy thêm một tiện ích vào widget này, ví dụ ở đây mình thêm là tiện ích quảng cáo.
Bước 2 : Đưa widget vừa tạo mới ra ngoài trang web
Sau khi tạo xong bạn chưa thể thấy được nội dung widget ở trang web, chúng ta cần gọi widget ra bằng đoạn code dưới đây.
Mở tập tin header.php trong theme của bạn, và dán đoạn code đưới dây vào trị trí mà bạn muốn hiển thị. Sau đó lưu lại.
|
1
2
3
4
5
6
7
8
|
if ( is_active_sidebar( ‘custom-header-widget’ ) ) : ?>
|
Bây giờ bạn có thể f5 lại trang web và sẽ thấy nội dung widget vừa tạo xuất hiện ở ngoài trang web của bạn.
Bước 3 : Thêm CSS cho tiện ích widget đẹp hơn.
Ở đây mình thêm nội dung của widget là một hình ảnh quảng cáo vì vậy mình sẽ CSS cho hình ảnh này gọn gàng và căn giữa chuẩn bằng đoạn CSS như sau.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
div#header-widget-area {
width: 100%;
background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
text-align: center;
}
h2.chw-title {
margin-top: 0px;
text-align: left;
text-transform: uppercase;
font-size: small;
background-color: #feffce;
width: 130px;
padding: 5px;
}
|
Thêm đoạn code CSS trên vào file style.css hoặc custom CSS của theme ở Appearance (Giao diện) » Customize (Tùy biến) => Chọn Tab Additional CSS và dán đoạn CSS trên vào.
Sau khi thêm xong CSS bạn ra ngoài trang web f5 lại sẽ thấy hình ảnh widget header đã được căn chỉnh chuẩn đẹp mắt hơn.
Bạn có thể tùy chỉnh CSS theo nội dung mà bạn đưa vào, tùy chỉnh theo ý của bạn.
Đến đây hy vọng bạn đã làm được cách tạo widget cho header wordpress của website bạn.
Chúc bạn thành công!
