Bỏ qua đến nội dung chính

Làm thế nào để thêm một widget vào header của blog WordPress của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

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ủ đề WordPress của bạn.

Trong hướng dẫn 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.

chú thí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 trong chủ đề WordPress của bạn và thành thạo một số CSS.

Nhưng trước khi sửa đổi, hãy khám phá 5 WordPress plugin để sao lưu blog của bạn hoặc Làm thế nào để cài đặt một theme WordPress et Làm thế nào nhiều plugins tôi nên cài đặt trên WordPress.

Sau đó, hãy trở lại lý do tại sao chúng ta ở đây.

Tại sao và khi nào bạn cần thêm một widget trên tiêu đề?

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 này được gọi là " sidebars "Hoặc các khu vực của" widget'.

Một khu vực widget trên tiêu đề 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.

Tên miền đặc biệt này được sử dụng trên tất cả các trang web phổ biến để hiển thị thông tin thực sự quan trọng.

Khám phá quá Làm thế nào để thêm các widget tùy chỉnh sau khi đăng trên WordPress

zone widgetisee trong wordpress head

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. Rất ít chủ đề WordPress thêm các khu vực của widget bên trên nội dung hoặc trong tiêu đề.

Chúng tôi cũng khuyên bạn nên khám phá MailChimp hướng dẫn bằng tiếng Pháp: hướng dẫn đầy đủ để tạo ra một bản tin

Đó là lý do tại sao trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm một khu vực widget vào tiêu đề của trang web WordPress của bạn.

Bước 1: Tạo một khu vực widget

Đầ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 thấy một khu vực phụ tùng tùy chỉnh trong " Appearance> Widgets Trên 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 functions.php Chủ đề của bạn.

hàm bpc_widgets_init () {register_sidebar (mảng ('name' => 'Tiện ích khu vực tiêu đề tùy chỉnh', 'id' => 'tùy chỉnh-tiêu đề-widget', 'before_widget' => '<div class = "chw-widget"> ',' after_widget '=>' </ div> ',' before_title '=>' <h2 class = "chw-title"> ',' after_title '=>' </ h2> ',)); } add_action ('widget_init', 'bpc_widgets_init');

Mã này lưu một thanh bên hoặc khu vực widget mới trên chủ đề WordPress của bạn.

Nếu bạn chưa bao giờ cài đặt WordPress cục bộ, hãy khám phá Làm thế nào để cài đặt WordPress cục bộ trên một máy tính / Windows với XAMPP

Bạn có thể đi đến " Appearance> Widgets Và bạn sẽ thấy một khu vực widget mới được đánh dấu " Widget Diện tích Tiêu đề tùy chỉnh '.

vùng widget WordPress mới

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Đi trước và thêm một tiện ích văn bản vào khu vực mới được tạo này và lưu nó.

Cũng thử hướng dẫn của chúng tôi về việc thêm widget.

Bước 2: Hiển thị tiện ích của bạn trong tiêu đề

Nếu bạn truy cập trang web của mình, bạn sẽ không thể thấy tiện ích văn bản bạn vừa thêm.

Bởi vì chúng tôi chưa chỉ cho bạn cách hiển thị các vùng vật dụng tùy chỉnh WordPress.

Đây là những gì chúng tôi sẽ làm trong bước này.

Đây cũng là cho bạn một danh sách Các plugin WordPress quan trọng để tăng thu nhập cho blog của bạn

Bạn sẽ cần chỉnh sửa tập tin header.php Trong chủ đề WordPress của bạn và thêm mã này vào nơi bạn muốn hiển thị các tiện ích.

<? Php if (is_active_sidebar ( 'tùy chỉnh-header-phụ tùng')):?> <Div id = "header-widget khu vực" class = "CHW-widget khu vực widget khu vực" role = "bổ sung"> <? php dynamic_sidebar ( 'tùy chỉnh-header-phụ tùng'); ?> </ Div> <Php endif; ?>

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

Sau đó, bạn có thể truy cập trang web của mình và bạn sẽ thấy tiện ích văn bản trong tiêu đề của mình.

site demo en tête

Kết quả sẽ không nhất thiết phải hấp dẫn nhất. Đó là lý do tại sao bạn sẽ cần CSS để nó hiển thị chính xác.

Bước 3: Tạo kiểu cho các tiêu đề CSS của bạn

Tùy thuộc vào chủ đề WordPress của bạn, bạn sẽ cần thêm mã CSS để kiểm soát cách hiển thị tiêu đề và tiện ích con.

Một trong những cách dễ nhất để làm điều này là sử dụng CSS Hero. Điều này cho phép bạn sử dụng giao diện người dùng trực quan để sửa đổi CSS của chủ đề WordPress.

Chúng tôi cũng khuyên bạn nên khám phá điều này Bạn có thể làm gì với plugin WordPress Yellow Pencil?

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ủ đề WordPress của mình bằng cách truy cập " Ngoại hình »Cá nhân hóa Để tùy chỉnh chủ đề WordPress.

Đọc bài viết của chúng tôi về Các plugin 10 WordPress để cải thiện lưu lượng truy cập của blog

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Điều này sẽ cho phép bạn hiển thị giao diện WordPress Customizer. Bạn sẽ phải bấm vào tab « CSS bổ sung '.

thêm css WorDPress

Tab « Bổ sung CSS Trong " Customizer Cho phép bạn thêm CSS tùy chỉnh trong khi xem các thay đổi trên bản xem trước bên phải.

Vì lý do vốn có của hướng dẫn này, chúng tôi giả định rằng bạn sẽ 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 ví dụ về CSS để giúp bạn bắt đầu:

div # header-widget khu vực {width: 100%; background-color: #f7f7f7; border-bottom: 1px #eeeeee rắn; text-align: center; } H2.chw-title {margin-top: 0px; text-align: left; text-transform: hoa; font-size: small; background-color: #feffce; width: 130px; padding: 5px; }

Đây là cách tiện ích tùy chỉnh của chúng tôi sẽ hiển thị trên tiêu đề chủ đề Twenty Seventeen.

chủ đề demo hai mươi mười bảy wordpress

Khám phá thêm một số plugin WordPress cao cấp

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Chú giải công cụ Smart4y

Smart4y Tooltip là một plugin WordPress linh hoạt dành riêng cho việc tạo các chú giải công cụ hiện đại mà không phụ thuộc vào thư viện Javascript. Nó hoàn toàn đáp ứng và cung cấp khả năng chèn nội dung HTML.

Smart4y Tooltip Responsive WordPress Plugin

Trình soạn thảo WYSIWYG của nó sẽ cho phép bạn tạo trực quan từng tooltip mà không cần phải nhập bất kỳ mã nào, nhưng nếu bạn sẵn sàng, bạn luôn có thể làm điều đó.

Khám phá cũng của chúng tôi Các plugin 10 WordPress để đánh giá các bài viết từ Blog của bạn

Các tính năng khác của nó là: Hỗ trợ trang Builder, bố cục khá nhạy, khả năng đặt tham số chung cho tất cả các chú giải công cụ hoặc xác định tham số cụ thể cho từng chú giải công cụ, hỗ trợ cho các hiệu ứng hình ảnh được xác định trước, tính toán vị trí của chú giải công cụ trên cửa sổ đã thay đổi kích thước, tài liệu chi tiết, v.v ...

Tải xuống | Bản demo | Web hosting

2. biện minh

Plugin WordPress Justified là một plugin bộ sưu tập đáp ứng, sắp xếp các hình thu nhỏ của bạn trong một lưới hợp lý bằng jQuery, như trên Flickr.

Justified-Plugin Đối với WordPress-Nhiếp ảnh gia,

Nó mang lại các tính năng sẽ phân biệt phòng trưng bày của bạn với các đối thủ cạnh tranh!

Các tính năng chính của nó là: bố trí đáp ứng, hiệu ứng cầu vượt đặc biệt, phân bổ lưới tự động, một trình soạn thảo shortcode, sự xuất hiện của ehoàn toàn tùy biến, sự hỗ trợ của pngười xem và nhiều người khác ...

Tải về | Bản demo | Web hosting

3. Lịch trình email

plugin WordPress này như tên của nó cho phép bạn lên lịch gửi email xuất bản trên trang web của mình. Nó dựa trên các phần mở rộng của plugin WordPress "Follow My Blog Post". Schedule Emails Follow My Blog Post plugin wordpress

Bây giờ bạn có thể lên lịch xuất bản các email của mình dựa trên giờ, ngày hoặc tuần.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Đọc bài viết của chúng tôi về Các plugin 10 WordPress để sử dụng bản đồ trên trang web của bạn

Nó cung cấp khả năng gửi email kết hợp cho tất cả các thông báo thay vì mỗi email cho mỗi thông báo và cũng cho phép bạn xác định các mẫu email khác nhau cho các email khác nhau, cuối cùng để giúp việc nhận email của bạn dễ tiêu hóa hơn .

Tải về | Bản demo |Web hosting

Tài nguyên đề xuất

Khám phá các tài nguyên được đề xuất khác sẽ đồng hành cùng bạn trong việc tạo và quản lý trang web của bạn.

Kết luận

Thế thôi! Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ giúp bạn thêm một khu vực widget trên tiêu đề của chủ đề WordPress của bạn. Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến.

...

Bài viết này chứa comments 8

  1. salut! Je voudrais savoir si vous avez la possibilité de me dire comment mettre une « boîte d’information » similaire à celle utilisée ici au début de cet article, y compris les boutons cliquables à côté de « Télécharger » et « Feuilles de calcul », la mise en page est très agréable. Je vous remercie!

  2. Thưa ông, tôi đã thử nó. Thật vậy, trang của các widget được xác định bổ sung các widget. Và tôi đã thêm nó. Khi bước 2 không thể nhập mã trong tiêu đề php. Đoán 2, có lỗi gì, thưa ông?

  3. Trong mã đầu tiên được hiển thị, bao gồm việc tạo một vùng widget mới, bắt đầu bằng cách nhập "function", nhưng tôi sẽ nói rằng nó bắt đầu bằng "function". Trong thực tế, mã này có một số lỗi gây ra lỗi khi viết nó. Tôi sẽ đánh giá cao nó đã được sửa chữa.

  4. 🙂 Mọi thứ đều ổn, chỉ có ai trong bảng của họ giải thích nơi để thêm mã vào "functions.php !!! Điều quan trọng! Mọi người đều sử dụng các chủ đề "khác nhau" ...

  5. Xin chào,

    Cảm ơn bạn vì những hỗ trợ này.

    Tôi đã có thể thêm thanh tìm kiếm vào tiêu đề tùy chỉnh. Bởi khuyết điểm, để tùy chỉnh phong cách là phức tạp hơn ...

    Tôi muốn thay đổi kích thước, vị trí (mà nó không lấy tất cả các chiều rộng của tiêu đề) cũng như màu nền.

    Cảm ơn bạn trước.

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
6 cổ phiếu
cổ phiếu1
tweet
Enregistrer5