Bỏ qua đến nội dung chính

Làm thế nào để thêm một công cụ tìm kiếm toàn màn hình trên WordPress

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ị]

Các trang web phổ biến như Wired sử dụng công cụ tìm kiếm toàn màn hình. Khi người dùng nhấp vào biểu tượng tìm kiếm, công cụ tìm kiếm sẽ mở ra và bao phủ toàn bộ màn hình, điều này có thể cải thiện trải nghiệm người dùng trên thiết bị di động. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm công cụ tìm kiếm toàn màn hình vào WordPress.

fullscreensearch

Công cụ tìm kiếm toàn màn hình đang trở thành xu hướng vì nó cải thiện đáng kể trải nghiệm tìm kiếm cho người dùng di động. Vì màn hình di động rất nhỏ, việc cung cấp lớp phủ toàn màn hình giúp người dùng viết và tìm kiếm trang web của bạn dễ dàng hơn.

Thực hành quá trình tạo một công cụ ở chế độ toàn màn hình có thể hơi phức tạp, vì nó yêu cầu một số mã. Đây là lý do tại sao quá trình đã được đơn giản hóa thông qua một plugin đơn giản.

Thêm công cụ tìm kiếm toàn màn hình vào WordPress

Điều đầu tiên cần làm là cài đặt và kích hoạt plugin Lớp phủ Tìm kiếm Toàn màn hình của WordPress. Các plugin Searh Overlay trên toàn màn hình WordPress hoạt động mà không cần cấu hình, và nó không có thông số cấu hình. Bạn chỉ cần truy cập trang web của mình và nhấp vào hộp tìm kiếm để xem plugin đang hoạt động.

fullscreensearchoverlay

Điều quan trọng cần lưu ý là plugin này tương thích với các chức năng tìm kiếm mặc định của WordPress. Nó cũng hoạt động tốt với SearchWP, là một plugin cao cấp giúp cải thiện tìm kiếm mặc định của WordPress.

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í]

Thật không may, plugin này không hoạt động với Google Custom Search.

Tùy chỉnh công cụ tìm kiếm ở chế độ toàn màn hình

Lê Plugin Lớp phủ tìm kiếm toàn màn hình WordPress đi kèm với bảng kiểu riêng. Để thay đổi giao diện của công cụ tìm kiếm, bạn sẽ cần chỉnh sửa tệp CSS của plugin hoặc sử dụng! Điều quan trọng là ngôn ngữ CSS.

Trước tiên, bạn sẽ cần kết nối với trang web của mình bằng ứng dụng FTP. Khi bạn đã đăng nhập, bạn cần tìm thư mục CSS của plugin. Bạn sẽ tìm thấy nó qua đường dẫn sau:

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

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]

Bạn sẽ tìm thấy một tập tin toàn màn hình-search.css bên trong thư mục của " css". Sau đó tải tập tin về máy tính của bạn.

Sau khi bạn mở tệp và bạn có thể thực hiện các thay đổi đối với nó. Ví dụ: chúng tôi muốn thay đổi nền và phông chữ cho trang demo của chúng tôi.


Trong đoạn mã này, chúng tôi vừa thay đổi màu nền ở dòng 62 và thêm màu phông chữ ở dòng 150. Nếu bạn giỏi CSS, hãy thoải mái thay đổi nó. các cài đặt khác theo ý bạn.

Sau khi hoàn tất, bạn có thể tải tệp lên từ thư mục CSS thông qua FTP. Bây giờ bạn có thể thấy những thay đổi bằng cách truy cập trang web của mình.

fullscreensearchwp

Lưu ý quan trọng:

Nếu bạn đang sử dụng trong chủ đề của riêng mình thì tốt nhất nên sử dụng thẻ! Important để các bản cập nhật plugin không hoàn tác các thay đổi.

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]

Theo các nhà phát triển và nhà tư vấn, bạn cũng có thể đổi tên plugin và coi nó là một phần của chủ đề của bạn.

Đó là tất cả ! Chúng tôi hy vọng bài viết này sẽ giúp bạn thêm công cụ tìm kiếm toàn màn hình vào trang web WordPress của mình. Bạn vui lòng để lại ý kiến ​​và đề xuất của bạn trong khu vực dành riêng.

Bài viết này chứa comments 0

Để 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
2 cổ phiếu
cổ phiếu2
tweet
Enregistrer