Thêm widget vào header website WordPress

3 tháng ago, WordPress Themes, Views

Tại sao nên thêm Widget vào Header WordPress?

Header là phần quan trọng nhất của một trang web WordPress. Nó thường chứa logo, menu điều hướng và đôi khi là thanh tìm kiếm. Việc thêm widget vào header có thể cải thiện trải nghiệm người dùng và tăng tính năng cho trang web của bạn. Dưới đây là một số lý do:

Nâng cao tính tương tác: Bạn có thể thêm widget như hộp tìm kiếm, nút chia sẻ mạng xã hội hoặc biểu mẫu đăng ký email trực tiếp vào header, giúp người dùng dễ dàng tương tác hơn.
Cải thiện điều hướng: Bổ sung các liên kết nhanh đến các trang quan trọng hoặc danh mục sản phẩm phổ biến, giúp người dùng dễ dàng tìm thấy thông tin họ cần.
Tăng cường quảng bá: Chèn banner quảng cáo hoặc thông báo quan trọng trực tiếp vào header, thu hút sự chú ý của khách truy cập ngay lập tức.

Các phương pháp thêm Widget vào Header WordPress

Có nhiều cách để thêm widget vào header WordPress, từ sử dụng theme hỗ trợ sẵn, sử dụng plugin, đến chỉnh sửa code trực tiếp. Dưới đây là một số phương pháp phổ biến:

Sử dụng Theme có Hỗ trợ Widget Header

Một số theme WordPress được thiết kế đặc biệt để hỗ trợ các khu vực widget trong header. Đây là cách dễ nhất để thêm widget nếu theme của bạn hỗ trợ tính năng này.

Kiểm tra Theme Options: Truy cập bảng điều khiển WordPress của bạn, sau đó vào Appearance -> Customize. Tìm kiếm các tùy chọn liên quan đến header hoặc widget.
Tìm Widget Areas: Nếu theme của bạn hỗ trợ, bạn có thể thấy một hoặc nhiều khu vực widget trong header. Ví dụ: “Header Right”, “Header Top”, hoặc tương tự.
Thêm Widget: Vào Appearance -> Widgets. Kéo và thả các widget bạn muốn vào khu vực widget header. Lưu các thay đổi.

Ví dụ, một số theme phổ biến như Astra, OceanWP, và GeneratePress thường cung cấp tính năng này.

Sử dụng Plugin để Thêm Widget vào Header

Nếu theme của bạn không hỗ trợ widget header, bạn có thể sử dụng plugin để thêm chức năng này. Có rất nhiều plugin miễn phí và trả phí có thể giúp bạn làm điều này.

Plugin “Header Footer Code Manager”

Plugin này cho phép bạn chèn code vào header, footer, hoặc bất kỳ vị trí nào trên trang web của bạn. Bạn có thể sử dụng nó để chèn HTML, CSS, hoặc JavaScript code để tạo một widget tùy chỉnh.

Cài đặt và kích hoạt Plugin: Tìm kiếm “Header Footer Code Manager” trong kho plugin WordPress, cài đặt và kích hoạt nó.
Thêm Snippet mới: Vào HFCM -> Add New Snippet.
Cấu hình Snippet:
- Đặt tên cho snippet.
- Chọn Header trong phần Display on.
- Chọn Entire Site hoặc các trang cụ thể bạn muốn hiển thị widget.
- Nhập HTML, CSS, và JavaScript code cho widget của bạn vào ô Snippet/Code.
Lưu và kích hoạt Snippet: Đảm bảo snippet được kích hoạt (Status là Active). Lưu các thay đổi.

Ví dụ, để thêm một hộp tìm kiếm đơn giản, bạn có thể sử dụng HTML code sau:

<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label>
        <span class="screen-reader-text">Tìm kiếm:</span>
        <input type="search" class="search-field" placeholder="Tìm kiếm …" value="" name="s" title="Tìm kiếm:" />
    </label>
    <input type="submit" class="search-submit" value="Tìm kiếm" />
</form>

Plugin “Insert Headers and Footers”

Plugin này tương tự như “Header Footer Code Manager”, nhưng nó đơn giản hơn và tập trung vào việc chèn code vào header và footer.

Cài đặt và kích hoạt Plugin: Tìm kiếm “Insert Headers and Footers” trong kho plugin WordPress, cài đặt và kích hoạt nó.
Truy cập Settings: Vào Settings -> Insert Headers and Footers.
Chèn Code: Nhập HTML, CSS, và JavaScript code cho widget của bạn vào ô Scripts in Header.
Lưu các thay đổi: Lưu các thay đổi.

Chỉnh sửa File Theme (functions.php và header.php)

Đây là phương pháp phức tạp nhất và đòi hỏi bạn phải có kiến thức về PHP, HTML, và CSS. Tuy nhiên, nó cho phép bạn tùy chỉnh hoàn toàn vị trí và cách hiển thị widget.

Cảnh báo: Trước khi chỉnh sửa bất kỳ file theme nào, hãy sao lưu theme của bạn để tránh mất dữ liệu nếu có lỗi xảy ra. Nên sử dụng child theme để tránh mất các thay đổi khi theme gốc được cập nhật.

Bước 1: Tạo Child Theme

Nếu bạn chưa có child theme, hãy tạo một child theme bằng cách sau:

Tạo một thư mục mới trong wp-content/themes/ với tên như your-theme-child (thay your-theme bằng tên theme bạn đang sử dụng).
Tạo một file style.css trong thư mục child theme với nội dung sau:

/*
 Theme Name:   Your Theme Child
 Theme URI:    http://example.com/your-theme-child/
 Description:  Your Theme Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     your-theme
 Version:      1.0.0
*/

@import url("../your-theme/style.css");

Thay your-theme bằng tên theme bạn đang sử dụng. Kích hoạt child theme trong Appearance -> Themes.

Bước 2: Chỉnh sửa functions.php

Thêm đoạn code sau vào file functions.php của child theme để đăng ký một khu vực widget mới trong header:

function your_theme_register_header_widget() {
    register_sidebar( array(
        'name'          => __( 'Header Widget Area', 'your-theme' ),
        'id'            => 'header-widget-area',
        'description'   => __( 'Widget area in the header', 'your-theme' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'your_theme_register_header_widget' );

Thay your-theme bằng tên theme của bạn. Điều này tạo ra một khu vực widget mới với ID là header-widget-area.

Bước 3: Chỉnh sửa header.php

Mở file header.php của child theme và thêm đoạn code sau vào vị trí bạn muốn hiển thị widget:

<div id="header-widget-container">
    <?php if ( is_active_sidebar( 'header-widget-area' ) ) : ?>
        <?php dynamic_sidebar( 'header-widget-area' ); ?>
    <?php endif; ?>
</div>

Đoạn code này kiểm tra xem khu vực widget header-widget-area có widget nào không, và nếu có, nó sẽ hiển thị các widget đó.

Bước 4: Thêm Widget vào khu vực mới

Vào Appearance -> Widgets. Bạn sẽ thấy khu vực widget mới “Header Widget Area”. Kéo và thả các widget bạn muốn vào khu vực này. Lưu các thay đổi.

Lưu ý quan trọng khi chỉnh sửa code

Luôn sao lưu file trước khi chỉnh sửa.
Sử dụng child theme để tránh mất các thay đổi khi theme gốc được cập nhật.
Kiểm tra kỹ code trước khi lưu. Một lỗi nhỏ có thể làm hỏng trang web của bạn.

Ví dụ về các Widget phổ biến trong Header

Dưới đây là một số ví dụ về các widget phổ biến mà bạn có thể thêm vào header:

Hộp tìm kiếm: Cho phép người dùng tìm kiếm nội dung trên trang web của bạn.
Nút mạng xã hội: Liên kết đến các trang mạng xã hội của bạn.
Biểu mẫu đăng ký email: Thu hút người dùng đăng ký nhận bản tin của bạn.
Thông báo quan trọng: Hiển thị thông báo về các chương trình khuyến mãi, sự kiện, hoặc thông tin quan trọng khác.
Menu điều hướng phụ: Cung cấp các liên kết nhanh đến các trang quan trọng.

Tối ưu hóa Widget Header cho Mobile

Khi thêm widget vào header, hãy đảm bảo rằng nó hiển thị tốt trên các thiết bị di động. Điều này có nghĩa là widget phải có kích thước phù hợp và không làm cho header quá lớn hoặc lộn xộn.

Bạn có thể sử dụng CSS media queries để điều chỉnh kích thước và vị trí của widget trên các thiết bị khác nhau. Ví dụ:

@media (max-width: 768px) {
    #header-widget-container {
        display: none; /* Ẩn widget trên màn hình nhỏ */
    }
}

Hoặc bạn có thể thay đổi kích thước của widget để nó vừa vặn với màn hình nhỏ:

@media (max-width: 768px) {
    .search-form .search-field {
        width: 100%;
    }
}

Kết luận

Thêm widget vào header WordPress là một cách tuyệt vời để cải thiện trải nghiệm người dùng và tăng tính năng cho trang web của bạn. Có nhiều phương pháp khác nhau để thực hiện việc này, từ sử dụng theme hỗ trợ sẵn, sử dụng plugin, đến chỉnh sửa code trực tiếp. Hãy chọn phương pháp phù hợp nhất với kỹ năng và nhu cầu của bạn. Nhớ luôn sao lưu dữ liệu trước khi thực hiện bất kỳ thay đổi nào.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa