Friday, April 19, 2024

Cách thêm tiện ích WordPress vào tiêu đề website (phần 1)

Cách thêm tiện ích WordPress vào tiêu đề website

Bạn có muốn thêm tiện ích WordPress vào vùng tiêu đề của trang web của mình không? Các widget cho phép bạn dễ dàng thêm các khối nội dung vào các phần được chỉ định trong chủ đề của mình. Trong bài viết này, chúng tôi 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 và khi nào bạn cần một tiện ích tiêu đề trên trang web của mình?

Các widget 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 mình. Các khu vực được chỉ định này được gọi là thanh bên hoặc khu vực sẵn sàng cho tiện ích con.

Khu vực sẵn sàng của tiện ích con trong tiêu đề hoặc trước 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 kỳ thứ gì bạn muốn.

Cách thêm tiện ích WordPress vào tiêu đề website
Cách thêm tiện ích WordPress vào tiêu đề website

Khu vực cụ thể này được gọi là ‘Dưới màn hình đầu tiên’ và tất cả các trang web phổ biến đều sử dụng nó để hiển thị những thứ thực sự quan trọng.

Các chủ đề WordPress thêm các thanh bên bên cạnh nội dung hoặc trong khu vực chân trang. Không có nhiều chủ đề WordPress thêm các khu vực sẵn sàng cho tiện ích phía 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 vùng widget vào tiêu đề trang web WordPress của bạn.

Bước 1. Tạo vùng tiện ích tiêu đề

Đầu tiên, chúng ta cần 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 của mình trên trang Giao diệnTiện ích 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' => '',
		'after_widget'  => '',
		'before_title'  => '

‘, ‘after_title’ => ‘

‘, ) ); } 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 chủ đề

Bây giờ bạn có thể truy cập trang Appearance » Widgets. Và bạn sẽ thấy một khu vực widget mới có nhãn ‘Khu vực widget Header Tùy chỉnh’.

 

Cách thêm tiện ích WordPress vào tiêu đề website
Cách thêm tiện ích WordPress vào tiêu đề website

Hãy tiếp tục và thêm một widget văn bản vào vùng widget mới tạo này và lưu nó. Xem hướng dẫn của chúng tôi về cách thêm và sử dụng widget trong WordPress để biết hướng dẫn chi tiết về cách thêm widget.

Bước 2: Hiển thị tiện ích con ở tiêu đề tùy chỉnh của bạn

Hiện tại bạn sẽ không thể thấy tiện ích văn bản vừa thêm vào tiện ích tiêu đề mới tạo của bạn.

Đó là bởi vì bạn vẫn chưa cho WordPress biết vị trí hiển thị khu vực widget này.

Bước này AnNhiên sẽ hướng dẫn các bạn làm nhé.

Bạn sẽ cần chỉnh sửa tệp header.php trong chủ đề của mình. 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.

Đừng quên rằng là phải lưu lại các bước đã làm luôn nhé.
Cách thêm tiện ích WordPress vào tiêu đề website
Cách thêm tiện ích WordPress vào tiêu đề website

Ngay đây bạn sẽ thấy nó không được đánh bóng đúng không? Bây giờ sẽ đi CSS để nó trong đẹp hơn nhé 😀

Bước 3: Tạo kiểu cho Khu vực tiện ích tiêu đề của bạn bằng CSS

Để làm điều này dễ dàng thì sử dụng plugin CSS Hero. Nó cho phép bạn sử dụng giao diện người dùng trực quan để thay đổi CSS của bất kỳ chủ đề WordPress nào.

Nếu bạn không muốn sử dụng plugin, thì bạn có thể thêm CSS tùy chỉnh vào chủ đề của mình. Bằng cách truy cập trang Giao diệnTùy chỉnh -> “CSS bổ sung” .

Cách thêm tiện ích WordPress vào tiêu đề website
Cách thêm tiện ích WordPress vào tiêu đề website

Tab CSS bổ sung trong tùy biến cho phép bạn thêm CSS tùy chỉnh và xem trực tiếp ngay bên phả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;
    }
Cách thêm tiện ích WordPress vào tiêu đề website
Cách thêm tiện ích WordPress vào tiêu đề website

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ề cách thêm các kiểu tùy chỉnh vào các Widget WordPress .

Xem Thêm >>>> Kiến thức về WordPress

GGADS 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ảm ơn bạn đã đọc bài viết này! Các bạn có thắc mắc gì xin để lại câu hỏi, An Nhiên sẽ giải đáp nhanh nhất có thể.

Xin chân thành cảm ơn!

5/5 - (1 vote)
46,788FansLike

Bài Viết Mới