Cách tạo header WordPress mà không cần plugin
Header là phần duy nhất mà mọi khách truy cập website đều thấy, và thường là phần mà giao diện giấu sau một màn hình cài đặt với chín tùy chọn. Trong Canvas, header là một bản ghi bạn xây dựng từ các khối trong trình chỉnh sửa, nên hướng dẫn này là một bản dựng, không phải chuyến tham quan các ô chọn.
Bước 1: Header là gì trong Canvas
Header là một bản ghi, được liệt kê trong quản trị WordPress như một trang và được chỉnh sửa trong cùng trình soạn thảo khối. Chính quyết định duy nhất này giúp bạn bỏ plugin header khỏi hệ thống của mình.
Các giao diện khác xây dựng header ở nơi khác. Blocksy và Astra đều đặt trình tạo header trong Customizer, một bảng cài đặt bên cạnh trang web, tách biệt với trình chỉnh sửa nơi bạn viết trang. Bài so sánh Blocksy của chúng tôi đặt hai cách tiếp cận cạnh nhau.
Cách lồng nhau
Một bản ghi header chứa một Header Root. Root chứa một Header Container, phần này quyết định header là dạng hộp, toàn chiều rộng, hoặc dạng này ở một điểm ngắt và dạng kia ở nơi khác. Container chứa các Header Zones, và mỗi zone là một ô trong hàng header. Logo nằm ở một ô, điều hướng ở ô tiếp theo, còn biểu tượng tìm kiếm và giỏ hàng nằm ở ô cuối.
Tổng cộng có 22 khối thuộc nhóm header, và bạn sẽ dùng khoảng bốn hoặc năm khối trên một trang web thông thường. Phần còn lại có đó để dùng khi bạn cần ô tìm kiếm cửa hàng, liên kết chọn ngôn ngữ hoặc khối giờ mở cửa ở góc trang.
Đây không phải là một trình chỉnh sửa riêng. Nếu bạn chỉnh sửa trang trong WordPress, bạn cũng có thể chỉnh sửa header, và các thao tác hoàn tác, cài đặt khối cùng phím tắt đều áp dụng như vậy.
Bước 2: Tạo bản ghi header
Mở danh sách Headers trong menu Canvas và thêm một bản ghi mới. Bạn có hai điểm khởi đầu thực tế.
Bắt đầu từ một mẫu bố cục
Chèn một mẫu khối header, bạn sẽ nhận được các khối thông thường đã được sắp xếp sẵn, sẵn sàng để sắp xếp lại, đổi tên hoặc xóa. Header là danh mục mẫu khối lớn nhất trong sản phẩm, trên tổng số 183 mẫu khối, nên thường sẽ có thứ gì đó gần với hình dạng bạn muốn. Đây là cách nhanh nhất và cũng là cách nên chọn khi xây dựng lần đầu.
Bắt đầu từ một bản demo
Nếu bạn đã nhập một trong 88 trang web demo, phần header của nó đã là một bản ghi trên trang web của bạn. Hãy mở và chỉnh sửa, hoặc nhân bản và thử nghiệm trên bản sao. Chỉnh sửa một header đang hoạt động giúp bạn hiểu cấu trúc nhanh hơn so với bắt đầu từ một khung trống.
Đặt cho bản ghi một tên thể hiện mục đích của nó, chẳng hạn Header chính hoặc Header trang đích. Bạn sẽ có ba header như vậy trong vòng một tháng, và tên gọi là cách duy nhất để phân biệt chúng.
Bước 3: Bố trí các vùng
Các vùng lo phần bố cục, nên bạn hầu như không phải xử lý các lớp căn chỉnh.
- Đẩy một vùng ra sát mép. Vùng trái cho logo, vùng giữa cho menu, vùng phải cho các thao tác là cách bố trí mà đa số trang web cuối cùng đều dùng.
- Gom các thành phần liên quan lại với nhau. Biểu tượng tìm kiếm, giỏ hàng và một nút trong cùng một vùng sẽ tạo thành một cụm, được giãn cách như một nhóm.
- Sắp xếp lại theo từng breakpoint. Vùng đứng thứ ba trên máy tính để bàn có thể đứng đầu trên điện thoại, mà không cần thêm một bản ghi header thứ hai.
- Giới hạn một vùng theo nhóm thiết bị. Yêu cầu vùng bỏ qua các thiết bị không đủ chỗ cho nó, và không cần phải ẩn bằng CSS sau đó.
- Thêm class riêng cho một vùng khi bạn muốn truy cập vùng đó từ một stylesheet của riêng mình.
Xây bố cục cho máy tính trước và giữ nguyên cho đến khi đưa đủ các phần vào. Quyết định về bố cục sẽ dễ hơn nhiều khi nội dung thực tế đã nằm trong hàng.
Bước 4: Thêm các thành phần
Bây giờ, hãy điền các vùng. Mỗi vùng là một khối, và mỗi khối đều có bảng cài đặt chứa các tùy chọn mà khối đó hỗ trợ.
- Header Logo. Logo của bạn, với tệp riêng cho trạng thái cố định khi cuộn và trạng thái nền tối, nên header trong suốt đặt trên ảnh tối không cần cách xử lý tạm.
- Header Navigation. Menu chính, với menu thả xuống và bảng mega menu. Khối này hiển thị menu WordPress, nên bạn vẫn quản lý menu ở nơi bạn thường làm.
- Header Search. Một biểu tượng mở ra ô nhập, hoặc một ô nhập luôn hiển thị, tùy theo thiết kế.
- Header Button. Nút kêu gọi hành động, với các tùy chọn kích thước, kiểu dáng và liên kết thông thường. Một nút thuyết phục, ba nút thì gây nhiễu.
- Header Cart. Giỏ hàng WooCommerce hiển thị số lượng mặt hàng và bản tóm tắt thả xuống, dành cho cửa hàng.
- Header Icon Link, Header Social và Header Info. Một số điện thoại, một hàng liên kết mạng xã hội, một khối nhỏ thông tin liên hệ, địa chỉ hoặc giờ mở cửa.
Mega menu, khi danh sách không còn đủ
Mega menu là một bản ghi riêng, được thiết kế bằng các khối và hiển thị bởi khối Mega menu, nên một mục menu mở ra một bảng toàn chiều rộng gồm các cột, hình ảnh và nút. Mega Menu Column giữ bảng đó trên lưới. Hãy dùng khi một danh mục thực sự có cấu trúc, đừng dùng để làm một website nhỏ trông bận rộn.
Bước 5: Dính, trong suốt và các bố cục đặt sẵn
Hành vi được quyết định bởi các bộ thiết lập sẵn, tức là nhóm thiết lập bố cục mà bạn áp dụng chỉ với một cú nhấp rồi tinh chỉnh. Chọn hành vi bạn muốn, sau đó thay đổi bất cứ điều gì bạn thích.
- Trong suốt. Không có nền, nên mọi thứ nằm phía sau header sẽ hiển thị xuyên qua. Kết hợp với biến thể logo tối hoặc sáng để logo chữ luôn rõ ràng.
- Bán trong suốt. Nền mờ, giúp hình ảnh phía sau vẫn nhìn thấy được và chữ vẫn dễ đọc. Thường là lựa chọn an toàn hơn so với một bức ảnh nhiều chi tiết.
- Nổi, và nổi bán trong suốt hoặc nổi nhỏ, nơi header nằm trong trang với khoảng cách xung quanh, cách xa mép cửa sổ.
- Toàn chiều rộng, dính cố định. Trải rộng toàn bộ khung nhìn và được ghim lại khi trang cuộn.
- Dính khi cuộn lên. Phần này rời khỏi đầu trang khi khách truy cập cuộn xuống và quay lại khi họ cuộn ngược lên, giúp các trang dài có thêm không gian.
Các cài đặt trên toàn trang web đứng sau chúng
Tùy chọn header là phần lớn nhất trong Tùy chọn giao diện, với 94 trên tổng số 533 trường, và chúng chứa những thiết lập không thuộc riêng về một bản ghi nào: header mặc định, hành vi dính (sticky), chiều cao, khoảng cách và breakpoint trên thiết bị di động. Khi nhập bản demo, tất cả đều được điền sẵn, và bạn chỉ cần thay đổi những mục bạn quan tâm.
Bước 6: Header trên điện thoại
Phần lớn lưu lượng truy cập đến từ điện thoại, nên hãy kiểm tra điều này trước tiên. Tin tốt là đây vẫn là cùng một bản ghi.
- Sắp xếp lại thay vì xây lại. Chuyển logo vào giữa, đặt nút bật/tắt menu bên trái và nút gọi bên phải, tất cả chỉ bằng cách sắp xếp thứ tự vùng.
- Bỏ những gì không vừa. Chỉ hiển thị thông tin liên hệ hoặc hàng mạng xã hội trên màn hình lớn. Nhồi chúng vào điện thoại không giúp ích được ai.
- Giữ vùng chạm đủ lớn. Nút menu và biểu tượng điện thoại là hai thứ người dùng nhắm tới khi đang đi bộ.
- Đặt điểm ngắt một cách có chủ đích. Chiều rộng mà tại đó menu thu gọn là một cài đặt, nên menu dài có thể thu gọn sớm hơn menu ngắn.
- Cân nhắc dùng bảng bên cho menu trên di động. Bảng bên là một khung trượt ra từ mép màn hình, có chỗ cho menu đầy đủ, ô tìm kiếm và một nút.
Kiểm tra trong trình chỉnh sửa trước khi xuất bản. Canvas hiển thị header trong vùng chỉnh sửa bằng cùng đoạn mã dùng để hiển thị cho khách truy cập, nên bạn có thể xem bố cục trên điện thoại ngay trong lúc thiết kế.
Bước 7: Gán cho toàn bộ trang web hoặc theo từng trang
Một bản ghi không có tác dụng gì cho đến khi có thứ gì đó trỏ tới nó. Có hai cấp độ, và chúng hoạt động giống nhau với mọi phần khung giao diện.
Mặc định toàn trang web
Đặt header mặc định trong Tùy chọn giao diện và mọi trang đều sẽ dùng header đó. Làm tương tự với thanh trên cùng, thiết kế tiêu đề trang và footer. Đây là thiết lập giúp trang mới trông đúng ngay khi bạn xuất bản.
Ghi đè theo từng trang
Bất kỳ trang riêng lẻ nào cũng có thể ghi đè bất kỳ thiết lập nào trong số này từ cài đặt riêng của trang. Một trang đích chiến dịch sẽ dùng header trong suốt và không có thanh trên cùng; trang liên hệ vẫn giữ kiểu tiêu chuẩn. Không cần sao chép gì để làm điều này, và không ai phải nhớ gì sau đó, vì phần ghi đè nằm ngay trên trang mà nó ảnh hưởng.
Thanh trên cùng
Thanh trên cùng là một mục riêng với các khối riêng: số điện thoại, giờ mở cửa, bộ chuyển đổi ngôn ngữ, thông báo. Khối Header Topbar đặt thanh này phía trên hàng header. Vì tách biệt, thông báo ngày lễ thay đổi trên toàn bộ trang mà không cần mở header.
Nguồn
Khi hướng dẫn này mô tả nội dung nằm ngoài chính Canvas, đây là các trang chính thức có tài liệu về nội dung đó.
- Màn hình Menu trong Giao diệnwordpress.org · Nơi các menu WordPress được tạo và gán cho các vị trí mà giao diện cung cấp
- Hiểu Tiêu chí thành công 2.5.8: Kích thước mục tiêu (Tối thiểu)w3.org · Vì sao vùng chạm cần kích thước tối thiểu 24 x 24 pixel CSS
Bước tiếp theo
Hai hướng dẫn về lý do header quyết định các vấn đề rộng hơn, và chính trình tạo header.
Câu hỏi thường gặp
FAQ đầy đủ trả lời các thắc mắc còn lại, và tài liệu giải thích chi tiết mọi cài đặt.
Bạn có cần một header riêng cho thiết bị di động không?
Thường thì không cần, vì một bản ghi header Canvas tự thích ứng với điện thoại. Các vùng được sắp xếp lại theo từng điểm ngắt và mỗi vùng có thể được giới hạn theo nhóm thiết bị, nên một bản ghi có thể căn giữa logo trên điện thoại, ẩn thông tin liên hệ và chuyển menu vào sau một nút bật/tắt. Chỉ tạo bản ghi thứ hai khi bạn thực sự muốn một thiết kế khác, chứ không phải để sửa bố cục.
Một trang có thể có header khác nhau không?
Có, mọi trang Canvas đều có thể có header riêng. Header, thanh trên cùng, Tiêu đề trang và footer đều có mặc định toàn site cùng phần ghi đè cho từng trang, nên một trang đích chiến dịch có thể dùng header trong suốt phủ lên ảnh, trong khi mọi trang khác vẫn giữ header tiêu chuẩn.
Đây là khu vực widget hay menu?
Header Canvas không thuộc loại nào trong hai loại đó: nó là một bản ghi bạn chỉnh sửa trong trình chỉnh sửa khối, giống hệt một trang, còn logo, điều hướng, tìm kiếm, giỏ hàng và nút bên trong đều là các khối có bảng cài đặt riêng. Menu WordPress của bạn vẫn là menu WordPress; khối Header Navigation sẽ hiển thị menu đó.
Điều gì xảy ra với header của tôi khi giấy phép hết hạn?
Website của bạn tiếp tục hiển thị đúng như hiện tại. Tạm dừng là dịch vụ: cập nhật, nhập bản demo, CanvasAI Engine và chỉnh sửa các khối cao cấp sẽ dừng cho đến khi bạn gia hạn, và có thời gian ân hạn 14 ngày nếu kiểm tra giấy phép không kết nối được máy chủ của chúng tôi.
Xây dựng website tiếp theo của bạn với Canvas
Dù là người mới bắt đầu, freelancer hay agency, bạn đều có cùng khối và cùng bản demo. Hãy bắt đầu với một website, rồi xây dựng bao nhiêu website tùy nhu cầu trên cùng một giấy phép.