Làm thế nào để thêm một Widget WordPress vào Header trên website của bạn

Bạn có muốn thêm tiện ích WordPress vào khu vực tiêu đề của trang web của mình không? Tiện ích cho phép bạn dễ dàng thêm khối nội dung vào các phần được chỉ định trong chủ đề của bạn. Trong bài này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm một widget WordPress vào tiêu đề trang web của bạn.

Thêm Widget WordPress vào thẻ tiêu đề

>>> Hiển thị chủ đề ở cuối trang

Tiện ích cho phép bạn dễ dàng thêm các khối nội dung vào một khu vực được chỉ định trong chủ đề WordPress của bạn. Những khu vực được chỉ định này được gọi là các thanh bên hoặc các khu vực có sẵn tiện ích.

Khu vực sẵn sàng của tiện ích trong tiêu đề hoặc trước khi nội dung có thể được sử dụng để hiển thị quảng cáo, bài viết gần đây hoặc bất cứ điều gì bạn muốn.

Thêm quảng cáo adsenae vào thẻ header

Thông thường, các chủ đề WordPress thêm các thanh bên cạnh nội dung hoặc trong khu vực chân trang. Không nhiều chủ đề WordPress thêm các khu vực sẵn sàng để tiện ích bên trên nội dung hoặc trong tiêu đề.
Đó là lý do tại sao trong bài viết này, chúng tôi sẽ giới thiệu cách thêm một khu vực widget vào tiêu đề trang web WordPress của bạn.

Bước 1. Tạo vùng Widget Header

Trước tiên, chúng ta cần phải tạo một khu vực widget tùy chỉnh. Bước này sẽ cho phép bạn xem khu vực tiện ích tùy chỉnh trên trang Appearance »Widgets trong bảng điều khiển WordPress của bạn.
Bạn sẽ cần thêm mã này vào tệp functions.php của chủ đề.

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’ );

Mã này đăng ký một sidebar mới hoặc một khu vực sẵn sàng widget cho chủ đề của bạn.
Bây giờ, bạn có thể vào trang Appearance »Widgets, và bạn sẽ thấy một khu vực widget mới có nhãn ‘Custom Header Widget Area’.

Bước 2: Hiển thị Widget Tiêu đề Tuỳ chỉnh của bạn

Nếu bạn truy cập trang web của mình ngay bây giờ, bạn sẽ không thể thấy tiện ích văn bản mà bạn vừa thêm vào tiện ích con của tiện ích con vừa tạo.
Đó là bởi vì chúng tôi vẫn chưa nói với WordPress nơi hiển thị khu vực widget này.
Hãy làm điều đó trong bước này.
Bạn sẽ cần phải chỉnh sửa tệp header.php trong chủ đề của bạn và thêm mã này vào nơi bạn muốn hiển thị khu vực tiện ích tùy chỉnh của mì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; ?>

Đừng quên lưu thay đổi của bạn. Giờ đây, bạn có thể truy cập vào trang web của mình và bạn sẽ thấy khu vực tiện ích của phần đầu.

Bước 3: Dán Khu vực Tiện ích Header của bạn bằng CSS

Tùy thuộc vào chủ đề của bạn, bạn sẽ cần phải thêm CSS để kiểm soát cách vùng phụ tùng của phần đầu và mỗi widget bên trong nó được hiển thị.
Cách dễ dàng hơn để làm điều này là sử dụng plugin CSS Hero. Nó cho phép bạn sử dụng một giao diện người dùng trực quan để thay đổi CSS của bất kỳ chủ đề WordPress.
Nếu bạn không muốn sử dụng plugin, sau đó bạn có thể thêm tùy chỉnh css vào chủ đề của mình bằng cách truy cập vào Hình thức »Tùy chỉnh trang.
Thao tác này sẽ khởi chạy giao diện tùy biến WordPress theme. Bạn sẽ cần phải nhấp vào tab ‘Thêm CSS’.

Tab CSS bổ sung trong trình chỉnh sửa chủ đề cho phép bạn thêm CSS tùy chỉnh của mình trong khi xem những thay đổi xuất hiện trong bản xem trước trực tiếp.

wordpress in header

Vì lợi ích của hướng dẫn này, chúng tôi giả định bạn sẽ chỉ sử dụng khu vực này để thêm một tiện ích để hiển thị quảng cáo biểu ngữ hoặc tiện ích con trình đơn tùy chỉnh.

Dưới đây là một số CSS mẫu để giúp bạn bắt đầu.

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;
}

headerwidget

>>> 6 thủ thuật chỉnh sửa WordPress bạn nên thử

Bạn có thể cần điều chỉnh CSS để phù hợp với chủ đề của mình. Hãy xem hướng dẫn của chúng tôi về làm thế nào để thêm phong cách tùy chỉnh cho các vật dụng WordPress.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm một tiện ích WordPress vào tiêu đề của trang web của bạn.

About the author: TopDev.info

Thích chia sẻ kinh nghiệm, nghiện cà phê và chè mạn pha đặc. Âm nhạc thích dân ca và nhạc trữ tình.

Related Posts

1 Comment

  1. Chào bác ạ. bác cho em hỏi là muốn widge t này chỉ hiển thị trên trang chủ thôi thì làm như nào ạ. em thank bác nhiều ạ

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *