Bạn có muốn tạo một menu điều hướng nổi cố định trong WordPress không?
Menu điều hướng trên cùng có các liên kết đến các phần quan trọng nhất trên trang web của bạn. Bằng cách làm cho menu này dính, nó sẽ ở trên màn hình khi người dùng cuộn trang xuống để nó luôn ở trong tầm tay dễ dàng.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm menu điều hướng nổi dính vào trang web WordPress của bạn.
Menu điều hướng nổi dính là gì?
Menu điều hướng dính hoặc nổi là menu ‘dính’ vào đầu màn hình khi người dùng cuộn xuống. Điều này có nghĩa là menu luôn hiển thị trên màn hình.
Thông thường, menu điều hướng trên cùng trong WordPress chứa các liên kết đến các phần quan trọng nhất trên trang web của bạn. Bằng cách làm cho menu này dính, khách truy cập có thể nhấp vào các liên kết đó bất kỳ lúc nào mà không cần phải cuộn.
Đây là một trải nghiệm người dùng tốt, có thể giúp tăng số lần xem trang và giảm tỷ lệ thoát trong WordPress .
Nếu bạn điều hành một cửa hàng trực tuyến thì menu điều hướng trên cùng có thể có liên kết đến giỏ hàng của khách hàng, danh mục sản phẩm và tìm kiếm sản phẩm. Bằng cách làm cho menu trên cùng hấp dẫn, bạn thường có thể giảm tỷ lệ bỏ qua giỏ hàng và nhận được nhiều doanh thu hơn.
Một số chủ đề WordPress tốt nhất có hỗ trợ tích hợp cho các menu điều hướng cố định. Như đã nói, bạn nên kiểm tra cài đặt chủ đề của mình bằng cách đi tới Chủ đề » Tùy chỉnh trong bảng điều khiển WordPress và tìm kiếm bất kỳ cài đặt nào có nhãn ‘Menu’.
Nếu không chắc chủ đề của mình có hỗ trợ menu cố định hay không, thì bạn có thể kiểm tra tài liệu của chủ đề hoặc thậm chí liên hệ với nhà phát triển để được trợ giúp. Để biết thêm thông tin, vui lòng xem hướng dẫn của chúng tôi về cách yêu cầu hỗ trợ WordPress đúng cách và nhận nó .
Nếu chủ đề của bạn không có hỗ trợ tích hợp cho menu cố định, thì hãy xem cách bạn có thể dễ dàng tạo menu điều hướng nổi cố định trong bất kỳ chủ đề WordPress hoặc cửa hàng WooCommerce nào. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển đến phương pháp bạn muốn sử dụng.
- 1: Thêm Menu điều hướng nổi dính của bạn bằng cách sử dụng plugin (Được khuyến nghị)
- 2: Thêm thủ công Menu điều hướng nổi cố định (Không có plugin)
1: Thêm Menu điều hướng nổi dính của bạn bằng cách sử dụng plugin (Được khuyến nghị)
Cách dễ nhất để thêm menu điều hướng cố định trong WordPress là sử dụng Sticky Menu (hoặc Bất kỳ thứ gì!) trên Scroll . Plugin này cho phép bạn làm cho bất kỳ yếu tố nào trở nên hấp dẫn, bao gồm cả menu.
Trước tiên, bạn cần cài đặt và kích hoạt plugin. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, hãy đi tới Cài đặt »Menu dính (hoặc Bất kỳ thứ gì!) .
Để bắt đầu, bạn cần lấy ID CSS của menu điều hướng mà bạn muốn làm cho dính bằng cách sử dụng công cụ kiểm tra của trình duyệt .
Chỉ cần truy cập trang web của bạn và di chuột qua menu điều hướng. Sau đó, chỉ cần nhấp chuột phải và chọn ‘Kiểm tra’ từ trình đơn của trình duyệt.
Thao tác này sẽ mở một bảng điều khiển mới bên trong trình duyệt, nơi bạn có thể xem mã nguồn của menu điều hướng.
Bạn cần tìm dòng mã liên quan đến menu hoặc tiêu đề trang web của bạn. Nó sẽ trông giống như thế này:
|
1 2 3 4 5 6 7 8 9 |
<pre class="wp-block-syntaxhighlighter-code"> <nav id="site-navigation" class="main-navigation" role="navigation"> <div class="wpcode-syntax-footer"> <div class="wpcode-syntax-code-footer-left">Hosted with ❤️ by <strong><a href="https://wpcode.com" target="_blank">WPCode</a></strong></div> <div class="wpcode-syntax-code-footer-right"> <svg width="65" height="16" viewBox="0 0 65 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M38.0415 7.99972C38.0415 6.44437 38.4062 5.38018 39.128 4.59879C39.8499 3.80995 40.8769 3.42297 42.1941 3.42297C42.8117 3.42297 43.4071 3.54949 43.9206 3.80251C44.4564 4.05553 44.8582 4.39786 45.1782 4.82204C45.2452 4.9039 45.2601 4.99321 45.2601 5.09739C45.2601 5.2239 45.2155 5.31321 45.1336 5.39507C45.0517 5.47693 44.9624 5.52158 44.8359 5.52158C44.6871 5.52158 44.5829 5.4546 44.4936 5.35042C44.2555 5.03042 43.9429 4.75507 43.5113 4.53925C43.1094 4.32344 42.6555 4.21925 42.1643 4.21925C41.1224 4.21925 40.3336 4.53925 39.7755 5.17925C39.2248 5.81925 38.942 6.68995 38.942 7.96995C38.942 9.30948 39.2173 10.2025 39.7531 10.7979C40.2889 11.3932 41.0927 11.7132 42.1643 11.7132C42.6331 11.7132 43.0573 11.6313 43.4889 11.4379C43.8908 11.2444 44.2331 10.9913 44.4936 10.6267C44.5755 10.5225 44.6871 10.4555 44.8359 10.4555C44.9624 10.4555 45.0517 10.5002 45.1336 10.582C45.2155 10.6639 45.2601 10.7755 45.2601 10.8797C45.2601 10.9616 45.2378 11.0509 45.1782 11.1327C44.8806 11.5569 44.4713 11.8993 43.9206 12.1523C43.3699 12.4053 42.7894 12.5318 42.1717 12.5318C40.8322 12.5318 39.8052 12.1523 39.0982 11.4006C38.3987 10.6788 38.0415 9.59228 38.0415 7.99972Z" fill="#1F2937"></path><path d="M46.9268 11.7654C46.4356 11.237 46.1826 10.4258 46.1826 9.36164C46.1826 8.29745 46.4208 7.50862 46.9045 6.98024C47.3956 6.45187 48.0803 6.19141 48.9733 6.19141C49.8663 6.19141 50.551 6.44443 51.0422 6.98024C51.5333 7.50862 51.764 8.29745 51.764 9.36164C51.764 10.4258 51.5259 11.237 51.0422 11.7654C50.551 12.2937 49.8663 12.5765 48.9733 12.5765C48.1026 12.5765 47.418 12.3012 46.9268 11.7654ZM47.0608 9.36164C47.0608 10.9765 47.7008 11.7877 48.9808 11.7877C50.2608 11.7877 50.9008 10.9765 50.9008 9.36164C50.9008 7.74676 50.2608 6.93559 48.9808 6.93559C47.6933 6.93559 47.0608 7.76908 47.0608 9.36164Z" fill="#1F2937"></path><path d="M52.583 9.3839C52.583 7.25553 53.476 6.31786 55.2472 6.31786C55.6491 6.31786 56.0137 6.39972 56.3337 6.57088C56.6537 6.74204 56.9067 6.93553 57.0556 7.18855V3.84716C57.0556 3.72065 57.1002 3.63135 57.1821 3.54949C57.2639 3.46762 57.3532 3.42297 57.4798 3.42297C57.6063 3.42297 57.6956 3.46762 57.7774 3.54949C57.8593 3.63135 57.9039 3.72065 57.9039 3.84716V9.95693C57.9039 10.8053 57.6658 11.4453 57.1821 11.8918C56.7132 12.3383 56.0732 12.569 55.2844 12.569C54.4137 12.569 53.7291 12.2937 53.2602 11.7579C52.8137 11.2369 52.583 10.4481 52.583 9.3839ZM53.4314 9.3839C53.4314 10.9988 54.0491 11.81 55.3067 11.81C55.8425 11.81 56.2667 11.6611 56.5867 11.3411C56.9067 11.0211 57.0556 10.5746 57.0556 9.95693V8.25274C57.0332 8.23042 57.0109 8.18576 56.9886 8.12623C56.9663 8.05925 56.9067 7.97739 56.7951 7.85088C56.6909 7.72437 56.5793 7.59786 56.4528 7.48623C56.3263 7.38204 56.1551 7.29274 55.9616 7.21088C55.7458 7.12902 55.5374 7.08437 55.2993 7.08437C54.6816 7.08437 54.2351 7.27786 53.8928 7.67972C53.5802 8.08158 53.4314 8.57274 53.4314 9.3839Z" fill="#1F2937"></path><path d="M58.9312 9.36193C58.9312 8.3424 59.1693 7.55356 59.653 7.00286C60.1367 6.45216 60.8065 6.16937 61.6772 6.16937C62.0195 6.16937 62.3395 6.21402 62.5925 6.29588C62.8679 6.37774 63.106 6.48937 63.2772 6.63821C63.4484 6.78705 63.6195 6.93588 63.746 7.12937C63.8725 7.30054 63.9842 7.49402 64.0437 7.7024C64.1107 7.91821 64.1479 8.08193 64.1925 8.25309C64.2372 8.42426 64.2372 8.59542 64.2372 8.76658C64.2372 8.89309 64.2372 8.99728 64.2372 9.06426C64.2372 9.13123 64.2149 9.21309 64.1702 9.31728C64.1479 9.42147 64.0884 9.48844 63.9991 9.53309C63.9172 9.57774 63.8279 9.60007 63.7014 9.60007H59.8316C59.8316 10.2624 60.0028 10.7908 60.3674 11.1777C60.7321 11.5573 61.2232 11.7731 61.8409 11.7731C62.1832 11.7731 62.4809 11.7284 62.7116 11.6243C62.9498 11.5201 63.2028 11.3936 63.4335 11.2001C63.5153 11.1331 63.6046 11.1182 63.6716 11.1182C63.7758 11.1182 63.8651 11.1629 63.947 11.2224C64.0139 11.3043 64.0512 11.3936 64.0512 11.4977C64.0512 11.6019 64.0065 11.7136 63.9023 11.7954C63.8205 11.8773 63.6865 11.9889 63.5377 12.0931C63.3888 12.1973 63.1507 12.2866 62.8307 12.3908C62.5107 12.495 62.1684 12.5396 61.8037 12.5396C60.8884 12.5396 60.1814 12.2866 59.6902 11.7508C59.1916 11.2522 58.9312 10.4484 58.9312 9.36193ZM59.8093 8.87077H63.3888C63.3888 8.61774 63.3665 8.37961 63.307 8.17123C63.2623 7.95542 63.1805 7.76937 63.0539 7.57588C62.9274 7.3824 62.7563 7.23356 62.5181 7.12937C62.28 7.02519 62.0046 6.95821 61.6846 6.95821C61.1116 6.95821 60.68 7.12937 60.3377 7.4717C60.0251 7.80658 59.8316 8.27542 59.8093 8.87077Z" fill="#1F2937"></path><path d="M19.229 4.18977C19.229 3.97395 19.3109 3.78791 19.4671 3.63907C19.616 3.49023 19.8095 3.40837 20.0253 3.40837C20.2188 3.40837 20.3899 3.47535 20.5164 3.57954C20.643 3.68372 20.7323 3.81023 20.7695 3.94419L22.3248 9.51814L23.8355 3.96651C23.8802 3.79535 23.962 3.66884 24.1109 3.56465C24.2597 3.46047 24.4085 3.41581 24.5574 3.41581C24.7285 3.41581 24.8774 3.46047 25.0039 3.56465C25.1304 3.66884 25.242 3.79535 25.2792 3.96651L26.7899 9.51814L28.3453 3.92186C28.3899 3.79535 28.4718 3.66884 28.5983 3.55721C28.7248 3.45302 28.8737 3.38605 29.0895 3.38605C29.3053 3.38605 29.4764 3.45302 29.6253 3.60186C29.7741 3.7507 29.8411 3.92186 29.8411 4.13023C29.8411 4.21209 29.8188 4.3014 29.7964 4.36093L27.5118 11.9591C27.4671 12.1079 27.3853 12.2567 27.2364 12.3386C27.1099 12.4428 26.9611 12.4874 26.7899 12.4874C26.6188 12.4874 26.4699 12.4428 26.3434 12.3386C26.2169 12.2344 26.1276 12.1079 26.0904 11.9367L24.5574 6.4893L23.0244 11.9963C22.9797 12.1674 22.8755 12.294 22.749 12.3981C22.6225 12.5023 22.4513 12.547 22.2802 12.547C22.109 12.547 21.9602 12.5023 21.8337 12.3981C21.7071 12.294 21.5955 12.1674 21.5583 12.0186L19.2737 4.42791C19.2513 4.36093 19.229 4.27907 19.229 4.18977Z" fill="#1F2937"></path><path d="M30.9351 11.8101V4.18967C30.9351 3.97386 31.0169 3.81014 31.1509 3.6613C31.2997 3.51246 31.4932 3.4306 31.709 3.4306H34.2467C35.0802 3.4306 35.7425 3.6613 36.2485 4.13014C36.762 4.59898 37.0374 5.27618 37.0374 6.15432C37.0374 7.04735 36.7844 7.70967 36.2709 8.17851C35.7574 8.64735 35.0802 8.87805 34.269 8.87805H32.4978V11.8176C32.4978 12.0334 32.4309 12.2194 32.282 12.3683C32.1332 12.5171 31.962 12.5841 31.7239 12.5841C31.4858 12.5841 31.322 12.5022 31.1732 12.3534C31.002 12.1897 30.9351 12.0185 30.9351 11.8101ZM32.4755 7.48642H34.1202C34.5444 7.48642 34.8644 7.35991 35.1025 7.12177C35.3406 6.89107 35.4448 6.54874 35.4448 6.12456C35.4448 5.70037 35.3406 5.35805 35.1025 5.12735C34.8644 4.89665 34.5444 4.78502 34.1425 4.78502H32.4978V7.48642H32.4755V7.48642Z" fill="#1F2937"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.3916 15.9999H1.64367C0.720884 15.9999 -0.000976562 15.278 -0.000976562 14.3627V1.63709C-0.000976562 0.721738 0.720884 -0.00012207 1.64367 -0.00012207H14.3916C15.3069 -0.00012207 16.0362 0.721738 16.0362 1.63709V14.3627C16.0362 15.278 15.3069 15.9999 14.3916 15.9999ZM3.96553 13.0231C3.88367 13.0231 3.77205 13.0008 3.69019 12.9785C3.30321 12.8296 3.11716 12.4055 3.266 12.0185L6.61484 3.44546C6.76367 3.06592 7.18786 2.87244 7.57484 3.02127C7.96181 3.17011 8.14786 3.5943 7.99902 3.98127L4.66507 12.5543C4.56088 12.852 4.26321 13.0231 3.96553 13.0231ZM8.76554 11.9366C8.91437 12.0855 9.10786 12.1524 9.30135 12.1524C9.49484 12.1524 9.68833 12.0855 9.83716 11.9366L12.4567 9.33941C12.9255 8.87058 12.9255 8.08174 12.4567 7.6129L9.83716 4.99337C9.56181 4.69569 9.09298 4.69569 8.7953 4.99337C8.49763 5.26872 8.49763 5.73755 8.7953 6.03523L11.2065 8.46127L8.77298 10.8873C8.46042 11.1701 8.46042 11.6389 8.76554 11.9366Z" fill="#1F2937"></path></svg> <a href="https://library.wpcode.com/use-snippet/" target="_blank">1-click Use in WordPress</a> </div> </div></pre> |
Nếu bạn đang gặp khó khăn trong việc tìm mã, hãy di chuột qua các dòng mã khác nhau trong bảng ‘Kiểm tra’. Trình duyệt sẽ tô sáng menu điều hướng khi bạn tìm đúng mã, như bạn có thể thấy trong hình ảnh sau.
Trong trường hợp này, CSS ID của menu điều hướng là site-navigation.
Sau khi bạn có thông tin này, hãy quay lại bảng điều khiển WordPress của bạn và thêm nó vào trường ‘Phần tử dính (Bắt buộc)’.
Bạn cũng sẽ cần thêm một ký tự băm (#) khi bắt đầu, do đó, site-navigation trở thành #site-navigation.
Sau đó, nhấp vào nút ‘Lưu thay đổi’ ở cuối trang để lưu các thay đổi của bạn.
Bây giờ, nếu bạn truy cập trang web WordPress của mình và cuộn, menu sẽ ở trên cùng.
Đôi khi, menu cố định có thể chồng lên một số nội dung mà bạn không muốn ẩn.
Nếu điều này xảy ra, thì bạn cần xác định khoảng cách giữa đầu màn hình và menu điều hướng cố định bằng cách nhập một số vào trường ‘Khoảng cách giữa đầu trang…’.
Menu cố định có thể gây ra sự cố cho các thiết bị có màn hình nhỏ hơn, chẳng hạn như thiết bị di động. Với ý nghĩ đó, bạn nên kiểm tra phiên bản di động của trang web WordPress của mình từ máy tính để bàn .
Nếu bạn không hài lòng với giao diện của menu thì bạn có thể ‘bỏ dính’ nó cho người dùng di động bằng cách tìm trường sau: ‘Không dính phần tử khi màn hình nhỏ hơn’.
Tại đây, nhập ‘780px.’
Có một số cài đặt khác để khám phá, nhưng đây là tất cả những gì bạn cần để tạo một menu điều hướng cố định đang hoạt động.
Khi bạn hài lòng với cách thiết lập menu điều hướng, hãy nhấp vào ‘Lưu Thay đổi’ để lưu cài đặt của bạn.
2: Thêm thủ công Menu điều hướng nổi cố định (Không có plugin)
Một phương pháp khác là thêm mã CSS tùy chỉnh vào chủ đề của bạn. Nếu bạn mắc lỗi viết mã, thì điều này có thể gây ra nhiều lỗi WordPress phổ biến , vì vậy nó không được khuyến nghị cho người mới bắt đầu.
Nếu trước đây bạn chưa thêm mã vào trang web của mình, thì hãy xem hướng dẫn của chúng tôi về cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn .
Trước tiên, bạn cần truy cập Giao diện »Tùy chỉnh để khởi chạy tùy biến chủ đề WordPress.
Tiếp theo, nhấp vào ‘CSS bổ sung’ trong menu bên trái và thêm mã CSS sau:
Thao tác này sẽ tạo menu điều hướng có nền đen. Nếu bạn muốn một màu khác, hãy thay đổi mã hex bên cạnh background. Ví dụ: sử dụng background: #ffffffsẽ cung cấp cho bạn nền menu màu trắng. Nếu bạn không chắc nên sử dụng mã hex nào, thì bạn có thể xem tài nguyên chẳng hạn như mã màu HTML .
Bạn cũng sẽ cần thay thế #site-navigationbằng CSS ID của menu điều hướng. Để tìm mã này, chỉ cần làm theo quy trình tương tự được mô tả ở trên.
Sau khi thêm mã của bạn, hãy nhấp vào nút ‘Xuất bản’ ở đầu màn hình. Bây giờ, nếu bạn truy cập blog hoặc trang web WordPress của mình, bạn sẽ thấy menu điều hướng nổi dính đang hoạt động.
Tùy thuộc vào chủ đề của bạn, đôi khi menu điều hướng có thể xuất hiện bên dưới tiêu đề trang thay vì bên trên.
Trong trường hợp này, menu điều hướng cố định có thể xuất hiện quá gần với tiêu đề và tiêu đề của trang web hoặc thậm chí chồng lên nó.
Nếu điều này xảy ra, thì bạn sẽ cần thêm lề vào khu vực tiêu đề bằng cách sử dụng CSS sau:
Chỉ cần thay thế site-brandingbằng lớp CSS của khu vực tiêu đề của bạn. Để có được thông tin này, chỉ cần sử dụng công cụ ‘Kiểm tra’ trên trình duyệt của bạn và làm theo quy trình tương tự được mô tả trong Phương pháp 1.
Bây giờ, hãy xuất bản các thay đổi của bạn và menu điều hướng sẽ không còn chồng lên vùng tiêu đề nữa.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm menu điều hướng nổi cố định vào trang web WordPress của mình. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách tăng lưu lượng truy cập blog của bạn và so sánh của chúng tôi về các plugin xây dựng trang WordPress tốt nhất .
