Cách thêm tiện ích WordPress vào tiêu đề trang web của bạn

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.

Add a WordPress widget to your site's header

Lưu ý: Đây là hướng dẫn trình độ trung cấp. Bạn sẽ cần thêm mã vào các tệp chủ đề WordPress của mình và viết CSS .

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.

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.

The header section on the popular List25 website

Thông thườ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ện »Tiệ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ủ đề của bạn.

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’.

Custom header widget area

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

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 tiêu đề mới tạo của mình.

Đó là bởi vì chúng tôi vẫn chưa cho WordPress biết vị trí 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 chỉnh sửa tệp header.php trong chủ đề của mình 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.

	
	

Đừng quên lưu các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình và bạn sẽ thấy khu vực tiện ích tiêu đề của bạn.

Unstyled header widget

Bạn sẽ nhận thấy rằng nó trông hơi không được đánh bóng. Đó là nơi bạn sẽ cần CSS để làm cho nó trông đẹp hơn.

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

Tùy thuộc vào chủ đề của bạn, bạn sẽ cần thêm CSS để kiểm soát cách khu vực tiện ích tiêu đề và từng tiện ích 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 giao diện người dùng trực quan để thay đổi CSS của bất kỳ chủ đề WordPress nào. Để biết thêm chi tiết, hãy xem bài đánh giá CSS Hero của chúng tôi.

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ện »Tùy chỉnh .

Thao tác này sẽ khởi chạy giao diện tùy biến chủ đề WordPress. Bạn sẽ cần nhấp vào tab ‘CSS bổ sung’.

Adding custom CSS to a WordPress theme

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

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

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

Đây là cách khu vực tiện ích tiêu đề tùy chỉnh của chúng tôi trông trên chủ đề Twenty Seventeen mặc định.

Preview of header widget

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 .

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 tiện ích WordPress vào tiêu đề trang web của bạn. Bạn cũng có thể muốn xem danh sách 25 widget WordPress hữu ích nhất của chúng tôi cho trang web của bạn .

.

Bạn cũng có thể thích