VietNetwork.Vn

Bạn có muốn thêm tiện ích WordPress vào vùng tiêu đề trang web của mình không?

Các widget cho phép bạn thêm các khối nội dung vào các phần cụ thể của giao diện một cách dễ dàng, nhưng không phải mọi giao diện đều bao gồm một khu vực widget tiêu đề.

Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng thêm tiện ích WordPress vào tiêu đề trang web của bạn.

Tại sao phải thêm một tiện ích tiêu đề vào trang web WordPress của bạn?

Tiêu đề trang web của bạn là một trong những thứ đầu tiên mà khách truy cập sẽ thấy khi truy cập trang web WordPress của bạn. Bằng cách thêm tiện ích WordPress vào tiêu đề của mình, bạn có thể tối ưu hóa khu vực này để giúp thu hút sự chú ý của người đọc.

Hầu hết các tiêu đề trang web sẽ bao gồm một biểu trưng tùy chỉnh và một menu điều hướng để giúp khách truy cập tham quan trang web của bạn.

Bạn cũng có thể thêm tiện ích con tiêu đề bên trên hoặc bên dưới khu vực này để làm nổi bật nội dung hữu ích, quảng cáo biểu ngữ, ưu đãi trong thời gian giới hạn, biểu mẫu một dòng, và hơn thế nữa.

Hầu hết các giao diện WordPress đều có các khu vực sẵn sàng cho tiện ích trong khu vực thanh bên và chân trang của trang web, nhưng không phải mọi giao diện đều thêm các khu vực sẵn sàng cho tiện ích trong tiêu đề.

Lưu ý: Nếu giao diện của bạn không có khu vực tiêu đề sẵn sàng cho tiện ích, thì bây giờ bạn có thể tạo các giao diện WordPress hoàn toàn tùy chỉnh từ đầu mà không cần bất kỳ biết cách viết mã nào.

Nhưng trước tiên, hãy xem cách thêm một tiện ích WordPress vào tiêu đề trang web của bạn trong giao diện hiện có của bạn. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

• Thêm tiện ích tiêu đề WordPress trong cài đặt giao diện WordPress
• Thêm tiện ích tiêu đề WordPress bằng cách thêm mã vào WordPress

Phương pháp 1: Thêm một tiện ích WordPress vào Tiêu đề trang web của bạn trong Cài đặt giao diện WordPress

Nhiều giao diện WordPress tốt nhất bao gồm một khu vực tiện ích tiêu đề mà bạn có thể tùy chỉnh theo ý thích của mình.

Trước tiên, bạn sẽ muốn xem giao diện WordPress hiện tại của mình có hỗ trợ vùng tiện ích WordPress trong tiêu đề hay không.

Bạn có thể tìm thấy điều này bằng cách đi tới tùy biến giao diện WordPress hoặc khu vực tiện ích con trong bảng quản trị WordPress của bạn. Để thực hiện việc này, hãy điều hướng đến Appearance >> Customize và xem liệu có tùy chọn để chỉnh sửa tiêu đề hay không.

Trong ví dụ này, giao diện Astra miễn phí có một tùy chọn được gọi là 'Header Builder'. Mình sẽ hướng dẫn bạn cách sử dụng tính năng này trong Astra, nhưng hãy nhớ rằng tính năng này trông sẽ khác nhau tùy thuộc vào giao diện bạn đang sử dụng.


Nếu bạn nhấp vào đây, nó sẽ đưa bạn đến màn hình để chỉnh sửa tiêu đề của bạn và thêm các widget.

Ở cuối màn hình, bạn hoàn toàn có thể tùy chỉnh tiêu đề, cùng với các vùng trên và dưới tiêu đề. Chỉ cần di chuột qua một trong các khu vực trống và nhấp vào biểu tượng 'Plus'.


Thao tác này sẽ đưa ra một menu bật lên, nơi bạn có thể chọn 'Widget 1'.

Có các tùy chọn bổ sung để chọn, nhưng bạn sẽ cần chọn một trong các tùy chọn 'Widget' để làm cho tiện ích con tiêu đề sẵn sàng.


Để thêm vùng tiện ích con vào tiêu đề của bạn, hãy nhấp vào hộp 'Widget 1' nằm trong phần tùy biến tiêu đề.

Thao tác này sẽ đưa ra tùy chọn để thêm một widget.


Tiếp theo, nhấp vào biểu tượng khối thêm 'Plus' ở menu bên trái.

Thao tác này sẽ hiển thị một cửa sổ bật lên nơi bạn có thể chọn một tiện ích con để thêm vào tiêu đề của mình.


Bạn có thể tiếp tục tùy chỉnh tiêu đề của mình và thêm nhiều tiện ích tùy thích.

Sau khi hoàn tất, hãy đảm bảo nhấp vào nút 'Publish' để lưu các thay đổi của bạn.


Bây giờ bạn có thể xem khu vực tiêu đề của mình với tiện ích con hoặc các tiện ích con mà bạn đã thêm.


Không sử dụng Astra?

Một cách khác để xem giao diện của bạn đã có tiện ích tiêu đề WordPress hay chưa là điều hướng đến Appearance >> Widgets trong bảng quản trị WordPress của bạn.

Sau đó, hãy xem liệu có một phần tiện ích con có nhãn 'Header' hoặc thứ gì đó tương tự hay không.


Nếu có, sau đó chỉ cần nhấp vào biểu tượng khối thêm 'Plus' để hiển thị menu widget.

Sau đó, bạn có thể thêm bất kỳ tiện ích nào bạn thích bằng cách nhấp vào nó.


Đảm bảo rằng bạn nhấp vào nút 'Update' để lưu các thay đổi của bạn vào khu vực tiện ích con tiêu đề. 

Phương pháp 2: Thêm một tiện ích WordPress vào tiêu đề trang web của bạn bằng cách thêm mã vào WordPress

Nếu giao diện WordPress của bạn hiện không có vùng tiện ích WordPress trong tiêu đề, thì bạn sẽ cần phải thêm nó theo cách thủ công bằng cách thêm mã vào WordPress.

Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của mình về cách sao chép và dán mã trong WordPress.

Sau đó, bạn có thể thêm đoạn mã sau vào tập tin functions.php của mình, trong một plugin dành riêng cho trang web hoặc bằng cách sử dụng một plugin đoạn mã.

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 thanh bên mới hoặc một khu vực sẵn sàng cho tiện ích con cho giao diện của bạn.

Nếu bạn đi tới Appearance >> Widgets, thì bạn sẽ thấy một khu vực tiện ích mới có nhãn 'Custom Header Widget Area'.


Bây giờ, bạn có thể thêm các widget của mình vào khu vực mới này. Để biết thêm chi tiết, hãy xem hướng dẫn của mình về cách thêm và sử dụng các widget trong WordPress.

Tuy nhiên, tiện ích con tiêu đề của bạn sẽ không hiển thị trực tiếp trên trang web của bạn. Mình sẽ hướng dẫn bạn cách thực hiện điều đó tiếp theo.

Hiển thị tiện ích con tiêu đề tùy chỉnh của bạn trong WordPress

Bây giờ bạn đã tạo khu vực tiện ích tiêu đề, bạn cần cho WordPress biết vị trí hiển thị nó trên trang web của bạn.

Để làm điều này, bạn cần chỉnh sửa tập tin header.php của giao diện. Sau đó, bạn cần thêm mã sau vào nơi bạn muốn tiện ích con hiển thị.

<?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; ?>
Mã này sẽ thêm khu vực tiện ích bạn đã tạo trước đó vào khu vực tiêu đề trang web của bạn.

Bây giờ, bạn có thể truy cập blog WordPress của mình để xem trực tiếp khu vực tiện ích tiêu đề của bạn.


Tạo kiểu cho Khu vực tiện ích con tiêu đề WordPress của bạn bằng cách sử dụng CSS

Tùy thuộc vào giao diện của bạn, bạn cũng có thể cần thêm CSS vào WordPress để kiểm soát cách hiển thị khu vực widget tiêu đề và từng widget bên trong nó. Nếu bạn không biết CSS, bạn có thể sử dụng một plugin như CSS Hero để thay thế.

Để tìm hiểu thêm, hãy xem hướng dẫn của mình về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn.

Tiếp theo, điều hướng đến Appearance >> Customizev trong bảng điều khiển quản trị WordPress của bạn.

Thao tác này sẽ hiển thị bảng tùy biến giao diện WordPress. Bạn cần nhấp vào tab 'Additional CSS'.


Điều này cho phép bạn thêm CSS bổ sung trực tiếp vào giao diện của mình và xem các thay đổi trong thời gian thực.

Dưới đây là một số mã 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;
        padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }
Chỉ cần thêm mã CSS vào hộp 'Additional CSS'.


Khi bạn đã hoàn tất việc thêm CSS của mình, hãy đảm bảo nhấp vào nút 'Publish' để lưu các thay đổi của bạn.

Đây là giao diện của tiện ích tiêu đề tùy chỉnh với các thay đổi CSS trực tiếp.


Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm tiện ích WordPress vào tiêu đề trang web của mình. Bạn cũng có thể muốn xem hướng dẫn của mình về cách chọn lưu trữ WordPress tốt nhất và các chuyên gia chọn phần mềm trò chuyện trực tiếp tốt nhất cho doanh nghiệp nhỏ.