Cách thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress
Bạn có muốn thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress không?
Hiệu ứng chuyển đổi tìm kiếm cho phép bạn hiển thị biểu tượng tìm kiếm thay vì biểu mẫu. Nhấp vào biểu tượng sẽ hiển thị biểu mẫu tìm kiếm với hình ảnh động trượt ra tinh tế.
Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress.
Hiệu ứng chuyển đổi tìm kiếm trong WordPress là gì?
Hiệu ứng chuyển đổi tìm kiếm là một kỹ thuật thiết kế web để cải thiện trải nghiệm tìm kiếm trên trang web WordPress.
Thay vì hiển thị biểu mẫu tìm kiếm, bạn sẽ hiển thị biểu tượng tìm kiếm. Khi người dùng nhấp vào nó, biểu mẫu tìm kiếm sẽ xuất hiện với hình động trượt.
Biểu mẫu tìm kiếm mặc định của WordPress trông không đẹp lắm. Nhiều chủ đề WordPress hàng đầu đã thay thế biểu mẫu mặc định bằng kiểu của chúng.
Tuy nhiên, nếu chủ đề của bạn vẫn sử dụng biểu mẫu tìm kiếm tĩnh, đơn giản thì bạn có thể sử dụng hướng dẫn này để làm cho nó thân thiện hơn với người dùng.
Như đã nói, chúng ta hãy xem cách dễ dàng thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress.
Lưu ý: Hướng dẫn này dành cho người dùng ở trình độ trung bình và nâng cao vì nó yêu cầu một số hiểu biết cơ bản về HTML/CSS.
Thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress
Để thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress, bạn sẽ cần đặt khối biểu mẫu tìm kiếm hoặc tiện ích trên trang web của mình và sau đó thêm một số mã CSS tùy chỉnh.
Trước tiên, bạn cần đảm bảo rằng có một biểu mẫu tìm kiếm được thêm vào trang web của bạn.
Thêm biểu mẫu tìm kiếm trong chủ đề khối với chỉnh sửa toàn bộ trang web
Nếu bạn đang sử dụng chủ đề khối WordPress mới hơn với tính năng chỉnh sửa trang web đầy đủ thì đây là cách bạn sẽ thêm biểu mẫu tìm kiếm vào trang web của mình.
Chỉ cần truy cập trang Giao diện » Trình chỉnh sửa. Trên màn hình chỉnh sửa, thêm khối 'Tìm kiếm' nơi bạn muốn hiển thị biểu mẫu tìm kiếm.
Sau đó, đừng quên nhấp vào nút ‘Save’ để lưu các thay đổi của bạn.
Thêm biểu mẫu tìm kiếm trong các chủ đề WordPress khác
Đối với các chủ đề WordPress không có tính năng chỉnh sửa trang web đầy đủ, bạn có thể thêm khối tìm kiếm hoặc tiện ích vào thanh bên hoặc bất kỳ khu vực nào có sẵn tiện ích.
Đi tới trang Giao diện » Tiện ích và thêm khối/tiện ích 'Tìm kiếm' vào thanh bên nơi bạn muốn hiển thị biểu mẫu tìm kiếm.
Tiếp theo, bạn cần tìm hình ảnh trong suốt cho biểu tượng tìm kiếm.
Vì mục đích của hướng dẫn này, chúng tôi đang sử dụng hình ảnh này. Nó phù hợp với nền tối (bạn có thể thoải mái sử dụng nó trên trang web của mình).
Nếu bạn cần tạo biểu tượng tìm kiếm của riêng mình thì sẽ rất tuyệt nếu tạo một hình ảnh PNG trong suốt với kích thước không quá 50×50 pixel.
Khi đã có biểu tượng hình ảnh, bạn cần tải nó lên trang web của mình. Đi tới trang Phương tiện » Thêm mới và tải lên hình ảnh biểu tượng tìm kiếm của bạn.
Sau khi tải lên, hãy nhấp vào nút 'Sao chép URL vào khay nhớ tạm', sau đó dán URL này vào trình soạn thảo văn bản đơn giản như Notepad hoặc TextEdit.
Bây giờ mọi thứ đã sẵn sàng, bạn cần thêm một số CSS tùy chỉnh vào trang web WordPress của mình.
Vì mục đích của hướng dẫn này, chúng tôi khuyên bạn nên sử dụng plugin WPCode để lưu CSS tùy chỉnh của mình.
WPCode cho phép bạn dễ dàng thêm các đoạn mã tùy chỉnh vào WordPress. Nó rất dễ sử dụng và mã của bạn sẽ không bị ảnh hưởng bởi các cập nhật chủ đề hoặc khi bạn chuyển sang một chủ đề khác.
Trước tiên, bạn cần cài đặt và kích hoạt plugin WPCode miễn phí. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn cần truy cập trang Đoạn mã trong bảng điều khiển quản trị viên WordPress của bạn. Sau đó, chỉ cần nhấp vào nút ‘Thêm mới’ ở trên cùng.
Trên màn hình tiếp theo, trước tiên, bạn cần cung cấp tiêu đề cho đoạn mã này. Nó có thể là bất cứ thứ gì giúp bạn xác định đoạn mã này.
Sau đó, thay đổi ‘Loại mã’ thành ‘Đoạn mã HTML.’ Chúng tôi sẽ tải CSS tùy chỉnh của mình trong tiêu đề trang web bằng HTML.
Bây giờ, bạn cần dán đoạn mã sau vào hộp ‘Xem trước mã’.
<style type="text/css">
.wp-block-search__inside-wrapper
.wp-block-search__input {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.wp-block-search__inside-wrapper
.wp-block-search__input:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Quan trọng: Đừng quên thay thế /url/to/search-icon.png bằng URL hình ảnh bạn đã sao chép trước đó.
Sau đó, bạn cần chuyển nút chuyển Không hoạt động thành 'Hoạt động' và sau đó nhấp vào nút 'Lưu đoạn trích'.
Bây giờ bạn có thể truy cập trang web của mình để xem biểu mẫu tìm kiếm với hiệu ứng chuyển đổi đang hoạt động.
Khắc phục sự cố Biểu mẫu tìm kiếm Hiệu ứng chuyển đổi
Phương pháp trên sẽ hoạt động với hầu hết các chủ đề WordPress hiện đại sử dụng khối widget.
Tuy nhiên, đối với một số chủ đề, phương pháp này có thể không hoạt động.
Điều này có thể xảy ra nếu biểu mẫu tìm kiếm trong chủ đề WordPress của bạn không có các lớp wp-block-search__inside-wrapper và wp-block-search__input .
Trong trường hợp đó, bạn sẽ cần sử dụng công cụ kiểm tra để tìm ra lớp CSS nào được chủ đề WordPress của bạn sử dụng.
Ví dụ: trong ảnh chụp màn hình bên dưới, chủ đề demo của chúng tôi đang sử dụng các lớp CSS này cho biểu mẫu tìm kiếm.
Bây giờ, bạn có thể sửa đổi mã bên dưới và sử dụng các lớp CSS này để thay thế. Đây là một ví dụ.
<style type="text/css">
.search-wrap input.s {
background-color: transparent;
background-image: url(/url/to/search-icon.png);
background-position: 5px center;
background-repeat: no-repeat;
background-size: 24px 24px;
border: none;
cursor: pointer;
height: 37px;
margin: 3px 0;
padding: 0 0 0 34px;
position: relative;
-webkit-transition: width 400ms ease, background 400ms ease;
transition: width 400ms ease, background 400ms ease;
width: 0;
}
.search-wrap input.s:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
</style>
Đây là giao diện của nó trên trang web thử nghiệm của chúng tôi.
Mẹo bổ sung: Thêm tìm kiếm WordPress tốt hơn cho trang web của bạn
Hiệu ứng chuyển đổi chỉ làm cho biểu mẫu tìm kiếm WordPress của bạn trông đẹp hơn. Nó không ảnh hưởng đến chất lượng kết quả tìm kiếm trên trang web của bạn.
Theo mặc định, WordPress đi kèm với tính năng tìm kiếm rất cơ bản. Tính năng tìm kiếm này chậm, không chính xác và thường hiển thị kết quả trống.
Đây là nơi SearchWP xuất hiện.
Đây là plugin tìm kiếm WordPress tốt nhất trên thị trường và cho phép bạn dễ dàng thay thế tính năng tìm kiếm mặc định bằng một công cụ tìm kiếm mạnh mẽ.
SearchWP tự động thay thế các biểu mẫu tìm kiếm nên bạn không cần chỉnh sửa bất kỳ tệp chủ đề nào. Nó tìm kiếm kết quả phù hợp ở mọi nơi trên trang web của bạn và cải thiện đáng kể chất lượng kết quả tìm kiếm.
Nó cũng đi kèm với tiện ích mở rộng tìm kiếm trực tiếp để hiển thị ngay kết quả khi người dùng nhập truy vấn của họ. Ngoài ra, nó còn có hỗ trợ Thương mại điện tử đầy đủ cho phép bạn tạo trải nghiệm tìm kiếm WooC Commerce thông minh trên cửa hàng trực tuyến của mình.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress. Bạn cũng có thể muốn xem hướng dẫn theo dõi chuyển đổi WordPress của chúng tôi hoặc tìm hiểu cách tìm các bài đăng phổ biến nhất trên trang web của bạn.
Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.