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 701.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 một 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 trong các phần được chỉ định của 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 trình độ trung cấp. 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 mình. Các 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 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 tiện ích phía 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 khu vực tiện ích con

Trước hết, chúng ta cần tạo một vùng widget tùy chỉnh. Bước này sẽ cho phép bạn xem khu vực tiện ích con tùy chỉnh trong " Giao diện> Tiện ích 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.

function bpc_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', '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 tìm hiểu 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 " Giao diện> Tiện ích 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.


 
 
 
 

Đừ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.

trang demo trong tâm trí

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ị vùng 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. Cái sau 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

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

thêm css WorDPress

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]

Tab « Bổ sung CSS Trong " Customizer Cho phép bạn thêm CSS tùy chỉnh của mì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 để 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 chuyên dùng để 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 đáp ứng

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, một bố cục khá nhạy, khả năng xác định các tham số chung cho tất cả các chú giải công cụ hoặc xác định các thông số cụ thể cho từng chú giải công cụ, hỗ trợ 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, vv….

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, ngoại hình 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 gọi của nó cho phép bạn lập lịch xuất bản e-mail trên trang web của mình. Nó là một phần của các plugin của plugin WordPress "Theo dõi bài đăng trên blog của tôi". Lên lịch gửi email Theo dõi blog của tôi Đăng plugin wordpress

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

Đọ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

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]

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

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

Tài nguyên đề xuất

Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.

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. Chào! Tôi muốn biết nếu bạn có cơ hội cho tôi biết cách đặt "hộp thông tin" tương tự như hộp được sử dụng ở đây ở đầu bài viết này, bao gồm các nút có thể nhấp bên cạnh "Tải xuống" và "Bảng tính", bố trí là rất tốt đẹp. Cảm ơn bạn!

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

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

  4. 🙂 Mọi thứ đều ổn, chỉ có điều không ai trong lời khuyên của họ giải thích nơi thêm mã vào “functions.php !!! " Nó 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 biết cách thêm thanh tìm kiếm của mình vào tiêu đề được cá nhân hóa. Mặt khác, để cá nhân hóa phong cách thì phức tạp hơn ...

    Tôi muốn thay đổi kích thước, vị trí (không chiếm toàn bộ chiều rộng của tiêu đề) cũng như màu nền.

    Merci d'avance.

Để 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