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

Bạn có muốn thêm tiện ích WordPress vào khu vực 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 bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm tiện ích WordPress vào tiêu đề trang web của bạn.

Thêm một tiện ích WordPress vào tiêu đề trang web của bạn

Ghi chú: Đây là một hướng dẫn cấp trung gian. 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 bạn. Những khu vực được chỉ định được gọi là barras Khu vực bên hoặc phụ tùng sẵn sàng.

Bạn có thể sử dụng một khu vực sẵn sàng tiện ích trong tiêu đề hoặc trước nội dung để hiển thị quảng cáo, bài viết gần đây hoặc bất cứ điều gì bạn muốn.

Khu vực đặc biệt này được gọi là Bên dưới nếp gấp và tất cả các trang web phổ biến sử dụng nó để hiển thị những điều thực sự quan trọng.

Phần tiêu đề trên trang web List25 phổ biến

Chủ đề WordPress thường thêm barras 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 widget vào nội dung hoặc tiêu đề.

Đó là lý do tại sao trong bài viết này, chúng tôi sẽ đề cập đến cách thêm một khu vực widget vào tiêu đề trang web WordPress của bạn.

Anh ấy đã qua 1. Tạo một khu vực widget 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 widget tùy chỉnh của bạn trong Ngoại hình »Widgets trang 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 tin.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 khu vực sẵn sàng cho widget cho chủ đề của bạn.

Bây giờ bạn có thể đi đến Ngoại hình »Widgets và bạn sẽ thấy một khu vực tiện ích mới có nhãn khu vực tiện ích Tiêu đề tùy chỉnh Tiêu đề.

Khu vực tiện ích tiêu đề tùy chỉnh

Đi trước và thêm một tiện ích văn bản vào khu vực widget mới được 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.

Anh ấy đã qua 2- Hiển thị tiện ích 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 bạn vừa thêm vào tiện ích tiêu đề mới được tạo.

Điều này là do chúng tôi chưa cho WordPress biết nơi 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 họ và bạn sẽ thấy khu vực widget tiêu đề.

Tiện ích tiêu đề cách điệu

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.

Anh ấy đã qua 3: Thiết kế khu vực widget tiêu đề 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 hiển thị khu vực tiện ích tiêu đề và từng tiện ích trong đó.

Cách dễ nhất để 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 đánh giá CSS Hero của chúng tôi.

Nếu bạn không muốn sử dụng plugin, 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 Ngoại hình »Tùy chỉnh trang.

Điều này sẽ khởi chạy giao diện tùy biến chủ đề WordPress. Bạn sẽ cần phải nhấp vào tab CSS Bổ sung CSS.

Thêm CSS tùy chỉnh vào chủ đề WordPress

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

Vì mục đí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.

Dưới đây là một số ví dụ CSS để 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à khu vực tiện ích tiêu đề tùy chỉnh của chúng tôi trông giống như trong chủ đề Twenty Seventeen mặc định.

Xem trước widget tiêu đề

Bạn có thể cần điều chỉnh CSS để phù hợp với chủ đề của bạn. Hãy xem hướng dẫn của chúng tôi về cách thêm kiểu tùy chỉnh vào 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ể xem danh sách 25 tiện ích WordPress hữu ích nhất cho trang web của bạn.

Nếu bạn thích bài viết này, đăng ký kênh của chúng tôi YouTube để xem video hướng dẫn WordPress. Bạn cũng có thể tìm thấy chúng tôi tại Twitter và Facebook.