Hướng dẫn Tạo và Hiển thị Widget trong Header cho Website WordPress

Bạn muốn bổ sung một quảng cáo hoặc hiển thị danh sách bài viết mới nhất trong khu vực Header. Tuy nhiên, Theme WordPress bạn đang sử dụng lại không hỗ trợ bạn thực hiện thao tác này. Trong bài viết này, WP Beginner sẽ gợi ý cho bạn một cách nhanh chóng và dễ dàng nhất giúp bạn có thể bổ sung nhanh chóng một Widget vào khu vực Header trên Website WordPress của bạn.

I. KHAI BÁO TẠO THÊM MỘT KHU VỰC CHỨA WIDGET TRONG WORDPRESS

Bước 1: Để hiển thị Widget trong trang quản trị WordPress, bạn cần mở và chỉnh sửa tệp functions.php bằng cách chọn Appearance ở thanh Menu trái » Editor. Trong giao diện Edit Themes, bạn chọn Theme Functions (functions.php) nằm phía bên phải màn hình.

Bước 2: Dán đoạn mã dưới đây vào tệp functions.php để khai báo thêm Widget cho Theme WordPress bạn đang sử dụng:

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

» Nhấn Update File để cập nhật thêm hàm bạn vừa bổ sung vào functions.php.

Sau khi thực hiện xong thao tác này, bạn sẽ thấy hiển thị thêm một khu vực chứa Widget bạn vừa tạo có tên Custom Header Widget Area xuất hiện trong phần quản lý Widget trên WordPress (Appearance » Widgets)

Bước 3: Bạn kéo thả một Widget vào khu vực Custom Header Widget Area. Tuy nhiên, lúc này trên trang giao diện người dùng sẽ chưa xuất hiện Widget đó. Chúng ta cần phải thực hiện bước tiếp theo.

II. HIỂN THỊ CUSTOM HEADER WIDGET AREA

Bước 1: Lựa chọn Appearance trong thanh Menu trái » Editor » Trong màn hình Edit Themes, bạn chọn Theme Header (header.php). Sau đó dán đoạn mã dưới đây vào vị trí bạn muốn hiển thị Widget trong Header:

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




» Nhấn Update File để cập nhật thay đổi trong tệp header.php.

Giờ, Widget đã xuất hiện trong trang giao diện người dùng:

Như bạn thấy, chúng ta sẽ cần chỉnh sửa thêm để Widget được hiển thị đẹp mắt hơn bằng cách thêm đoạn mã CSS của Theme WordPress này.

III. THÊM MỚI ĐOẠN MÃ CSS ĐỊNH DẠNG HIỂN THỊ WIDGET

Bước 1: Bạn có thể sử dụng Plugin CSS Hero, hoặc các Plugin khác để thêm mới đoạn mã CSS. Hoặc, nếu bạn không muốn sử dụng Plugin, bạn có thể chọn Appearance » Customize » Additional CSS.

Bước 2: Dán đoạn mã dưới đây vào phần Additional CSS:

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

» Nhấn Save & Publish để lưu lại đoạn mã CSS trên.

Giờ, hãy tận hưởng thành quả của bạn:

(Nguồn: WP Beginner)

 


Ngôn ngữ

Chuyên mục Tùy biến giao diện WordPress

Theo dõi Youtube

 

TÌM KIẾM

Chuyên mục Thủ thuật WordPress

Hải sản Vân Đồn

 

Chào mừng bạn đến với chuyên mục

giới thiệu và cung cấp các mặt hàng

hải sản của Vân Đồn. Hải sản Vân Đồn

- Quảng Ninh | Tươi ngon, bổ dưỡng

và đảm bảo với giá cả phải chăng.

» Xem trang....