Tìm hiểu cách tạo menu cố định cho điều hướng chính của trang web WordPress của bạn! Menu cố định giúp cải thiện trải nghiệm người dùng bằng cách làm cho menu trang web của bạn sẵn có hơn cho khách truy cập trang web. Ngoài ra, nó có thể giúp cải thiện giao diện tổng thể của trang web của bạn. Hãy đi sâu vào nó!

Mục lục

1. Điều hướng đến Trình chỉnh sửa trang

Bước đầu tiên trong quy trình này là điều hướng đến “Trình chỉnh sửa trang” trong khu vực quản trị WordPress. Trình chỉnh sửa trang có sẵn cho “Chủ đề khối” trong WordPress, giả sử bạn đang sử dụng WordPress phiên bản 5.9 trở lên.

Điều hướng đến Trình chỉnh sửa trang web WordPress thông qua Giao diện>Trình chỉnh sửa

Để điều hướng đến Trình chỉnh sửa trang, hãy truy cập Giao diện> Trình chỉnh sửa (mũi tên màu đỏ trong hình trên) từ điều hướng chính trong khu vực Quản trị viên WP.

Nhấp vào Khu vực nội dung trang web chính ở bên phải màn hình

Nhấp vào khu vực nội dung chính ở bên phải màn hình (được viền màu xanh lam nhạt và được biểu thị bằng mũi tên màu xanh lam trong hình ảnh trên). Thao tác này sẽ đưa bạn đến Trình chỉnh sửa khối bên trong Trình chỉnh sửa trang.

Chỉnh sửa mẫu WordPress của bạn bằng cách nhấp vào liên kết tên mẫu trong thanh bên cài đặt trang

Ở phía bên phải, trong tab “Trang”, bạn sẽ thấy một hàng có nhãn “Mẫu” (được viền màu xanh lam trong hình trên). Bấm vào tên/liên kết mẫu (mũi tên màu đỏ). Sau đó, nhấp vào “Chỉnh sửa mẫu” (mũi tên màu xanh lá cây - đôi khi “Chỉnh sửa mẫu” là một liên kết văn bản nhỏ màu xanh bên dưới danh sách thả xuống hiển thị tên mẫu của bạn).

2. Chỉnh sửa mẫu của bạn

Bây giờ bạn sẽ ở trong Trình chỉnh sửa mẫu cho trang chủ trang web của mình. (Nếu bạn chưa đặt trang chủ cho trang web của mình, bạn có thể xem hướng dẫn này về cách thiết lập trang chủ tĩnh cho trang web WordPress của bạn).

Nhấp vào Phần mẫu tiêu đề ở đầu trình chỉnh sửa trang web

Ở đầu mẫu là điều hướng chính cho trang của bạn – còn được gọi là “Tiêu đề” của trang web của bạn. Khi bạn di chuột qua phần tử này, bạn sẽ thấy một hộp màu tím bao quanh nó (mũi tên màu đỏ trong hình trên). Điều này chỉ ra rằng phần tử này là một “mẫu ​​được đồng bộ hóa,” điều đó có nghĩa là việc thực hiện thay đổi đối với một phiên bản của mẫu sẽ áp dụng các thay đổi trên tất cả các phiên bản trên toàn trang web. Nhấp vào khu vực này để chọn mẫu được đồng bộ hóa Tiêu đề.

Nếu đây là thành phần tiêu đề chính của trang web của bạn thì bây giờ bạn sẽ thấy mẫu được đồng bộ hóa có nhãn “Tiêu đề” trên thanh công cụ khối.

3. Thêm tiêu đề của bạn vào nhóm

Nhấp vào Biểu tượng ba dấu chấm của Thanh công cụ khối và nhấp vào Nhóm để nhóm tiêu đề WordPress

Trong thanh công cụ khối cho mẫu Tiêu đề đã chọn, hãy nhấp vào biểu tượng “Tùy chọn” (mũi tên màu đỏ trong hình trên) và chọn “Nhóm” (mũi tên màu xanh lá cây). Điều này sẽ lồng mẫu được đồng bộ hóa vào một khối nhóm.

Khối tiêu đề trang web hiện là khối nhóm

Bạn sẽ nhận thấy thanh công cụ khối hiện có biểu tượng khối nhóm (mũi tên màu xanh lam trong hình trên) và đường viền xung quanh khu vực điều hướng chính hiện có màu xanh lam thay vì màu tím (mũi tên màu đỏ).

Nhấp vào Biểu tượng căn chỉnh trên Thanh công cụ khối và chọn Chiều rộng rộng

Lưu ý rằng điều này có thể thay đổi độ rộng của menu điều hướng chính của bạn. Để điều chỉnh độ rộng, hãy di chuột qua mẫu được đồng bộ hóa Tiêu đề và nhấp để chọn mẫu đó (mũi tên màu đỏ).

Trong thanh công cụ khối cho mẫu được đồng bộ hóa Tiêu đề, hãy nhấp vào biểu tượng “Căn chỉnh” (mũi tên màu xanh lá cây) và thay đổi lại thành chiều rộng mong muốn (mũi tên màu xanh - trong trường hợp của tôi, tôi đã chọn “Chiều rộng rộng”).

Để quay lại khối Nhóm, hãy nhấp vào biểu tượng “Chọn Nhóm” trên thanh công cụ khối Tiêu đề (mũi tên màu hồng).

WordPress đơn giản hóa: Khóa học cách xây dựng trang web mạnh mẽ của Davies Media Design

4. Đặt Nhóm thành “Dính”

Điều hướng đến Thanh bên cài đặt khối WordPress và chọn Chú ý từ danh sách thả xuống vị trí

Với nhóm đã chọn, hãy điều hướng đến tab “Chặn” trong Thanh bên Cài đặt ở bên phải màn hình (mũi tên màu đỏ trong hình trên).

Nhấp vào mục menu có nhãn “Vị trí” (mũi tên màu xanh lá cây). Bây giờ bạn sẽ thấy danh sách thả xuống ở đây có nhãn “Mặc định” (mũi tên màu hồng). Nhấp vào menu thả xuống và chọn tùy chọn “Dính” (mũi tên màu xanh).

Nhấp vào Lưu để lưu các thay đổi trang web WordPress của bạn

Điều hướng lên đầu trình chỉnh sửa và nhấp vào nút “Lưu” (mũi tên màu đỏ), sau đó nhấp vào “Lưu” lần nữa. Bây giờ bạn sẽ có một menu điều hướng chính cho trang web WordPress của mình!

5. Tạo kiểu cho Sticky Menu

Bạn có thể tùy chỉnh/tạo kiểu cho nhiều thành phần của menu cố định mới, nhưng đối với hướng dẫn này, tôi sẽ chỉ thêm nền phía sau khối nhóm để đảm bảo menu trải dài trên toàn bộ chiều rộng của trang web.

Nhấp vào tab Kiểu trong Thanh bên Cài đặt khối WordPress

Để thực hiện việc này, với khối Nhóm được chọn, tôi sẽ điều hướng đến tab “Styles” của Thanh bên Cài đặt (mũi tên màu đỏ trong hình trên).

Trong “Màu sắc”, tôi sẽ nhấp vào tùy chọn “Nền” (mũi tên màu xanh lam), sau đó chọn mẫu màu trắng để đặt màu nền thành màu trắng (mũi tên màu xanh lá cây).

Một lần nữa tôi sẽ nhấp vào “Lưu” hai lần để lưu các thay đổi.

Lưu ý rằng bạn luôn có thể điều chỉnh chiều rộng, chiều cao hoặc khoảng cách của tiêu đề trang web của mình trong phần “Kích thước” bằng cách sử dụng thanh trượt “Phần đệm” và “Lề”.

Xem trước tiêu đề trang web đáng chú ý của bạn trong WordPress bằng cách nhấp vào biểu tượng xem trước

Bạn có thể xem trước trang web của mình bằng cách nhấp vào biểu tượng thiết bị (mũi tên màu đỏ), sau đó nhấp vào “Xem trang web” (mũi tên màu xanh lá cây).

Khi bạn cuộn, Menu cố định của bạn sẽ vẫn ở đầu trang web của bạn

Bạn có thể cuộn trang web của mình và xem menu điều hướng cố định vẫn ở vị trí trên cùng (mũi tên màu xanh lá cây)!

Nhấp vào nút Quay lại để quay lại Trình chỉnh sửa trang web WordPress

Sau khi bạn chỉnh sửa xong menu cố định của mình, hãy nhấp vào nút “Quay lại” ở đầu trình chỉnh sửa (mũi tên màu đỏ). Thao tác này sẽ đưa bạn trở lại trang web bên trong Side Editor.

Để quay lại khu vực Quản trị viên WP, chỉ cần nhấp vào biểu tượng ở góc trên bên trái.

Đó là tất cả cho hướng dẫn này! Nếu bạn thích nó, bạn có thể học WordPress với khóa học chuyên sâu của tôi trên Udemy. Hoặc, bạn có thể kiểm tra miễn phí khác Video hướng dẫn về WordPressBài viết trợ giúp WordPress trên trang web của tôi.