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, 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 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.

Ở 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).

Ở đầ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

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.

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 đỏ).

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”

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).

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

Để 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ề”.

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).

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)!

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.

Davies Media Design Bản tin email ứng dụng sáng tạo miễn phí

Đăng ký Bản tin DMD

Đăng ký để nhận hướng dẫn mới, cập nhật khóa học và tin tức mới nhất về các ứng dụng sáng tạo miễn phí yêu thích của bạn!

Bạn đã đăng ký thành công!

Pin It trên Pinterest