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 một tiện ích WordPress vào khu vực tiêu đề của trang web của bạn 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 đề của 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 bạn?

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. Các khu vực được chỉ định này được gọi là sidebars hoặc các khu vực sẵn sàng cho widget.

Một khu vực sẵn sàng tiện ích trong tiêu đề hoặc trước khi 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 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ị nội dung thực sự quan trọng.

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

Thông thường, các chủ đề WordPress thêm thanh 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 tiện ích bên 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ẽ đề cập đến cách thêm một khu vực tiện ích vào trang web WordPress của bạn.

Bước 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 trên 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 chủ đề..

hàm wpb_widgets_init () {

register_sidebar (mảng (
‘tên’ => ‘Khu vực tiện ích tiêu đề tùy chỉnh’,
‘id’ => ‘tùy chỉnh tiêu đề-widget’,
‘trước_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘

‘,
‘after_title’ => ‘

‘,
));

}
add_action (‘widget_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 tiện ích 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.

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

Hãy tiếp tục và thêm một tiện ích văn bản vào khu vực tiện ích 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 các tiện ích trong WordPress để biết hướng dẫn chi tiết về cách thêm tiện ích.

Bước 2: Hiển thị Widget 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.

Đó là vì chúng tôi đã nói với WordPress về nơi hiển thị khu vực widget này.

Hãy để Lừa 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.

<?php

if (is_active_sidebar (‘tùy chỉnh tiêu đề-widget’)): ?>

<?php Dynamic_sidebar (‘tùy chỉnh-tiêu đề-widget’); ?>

<?endif php; ?>

Đừ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 mình.

Tiện ích tiêu đề chưa được chỉnh sửa

Bạn sẽ nhận thấy rằng nó trông hơi không được đánh bóng. Đó là nơi mà 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 widget 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, xem bài đánh giá CSS Hero của chúng tôi.

Nếu bạn không muốn sử dụng một 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 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 nhấp vào tab ‘CSS CSS bổ sung.

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.

Đây là một số CSS mẫu để giúp bạn bắt đầu.

div # tiêu đề-widget-area {
chiều rộng: 100%;
màu nền: # f7f7f7;
viền dưới: 1px solid #eeeeee;
văn bản-align: trung tâm;
}
h2.chw-title {
lề trên: 0px;
văn bản-align: trái;
biến đổi văn bản: chữ hoa;
cỡ chữ: nhỏ;
màu nền: #feffce;
chiều rộng: 130px;
phần đệm: 5px;
}

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

Xem trước tiện ích 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ể muốn xem danh sách 25 tiện ích WordPress hữu ích nhất cho trang web của bạn.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map