Bạn đã thấy biểu tượng tìm kiếm chuyển đổi trên nhiều trang web phổ biến? Hãy xem List25 dự án chị em của chúng tôi để xem một ví dụ. Ý tưởng là hiển thị một biểu tượng tìm kiếm đơn giản và khi người dùng nhấp vào nó, các biểu mẫu tìm kiếm sẽ trượt ra, còn được gọi là hiệu ứng chuyển đổi. Đó là một hiệu ứng gọn gàng cũng tiết kiệm không gian và cho phép người dùng tập trung vào nội dung. Chưa kể, điều này là lý tưởng cho các chủ đề đáp ứng với thiết bị di động. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm hiệu ứng chuyển đổi tìm kiếm trong WordPress Themes.
Ghi chú: Hướng dẫn này dành cho người dùng trung cấp có kiến thức thực tế về thẻ mẫu WordPress, HTML và CSS. Người dùng cấp độ mới bắt đầu được khuyến khích thực hành đầu tiên trên máy chủ cục bộ.
Hiển thị mẫu tìm kiếm WordPress
WordPress thêm các lớp CSS mặc định vào HTML được tạo bởi các thẻ mẫu khác nhau trong một chủ đề. Sử dụng mẫu thẻ chủ đề WordPress để hiển thị mẫu tìm kiếm. Bạn có thể tạo hai biểu mẫu tìm kiếm khác nhau, một cho các chủ đề HTML4 và một cho các chủ đề được hỗ trợ HTML5. Nếu chủ đề của bạn có dòng add_theme_support (‘html5, mảng (‘ hình thức tìm kiếm)) trong tệp tin.php, thẻ mẫu này sẽ tạo ra một mẫu tìm kiếm HTML5. Nếu không, nó sẽ tạo ra mẫu tìm kiếm HTML4.
Một cách khác để tìm ra hình thức mà chủ đề của bạn tạo ra là bằng cách xem mã nguồn của biểu mẫu tìm kiếm.
Đây là thẻ mẫu biểu mẫu get_search_form () sẽ được hiển thị khi chủ đề của bạn không có hỗ trợ HTML5:
Và đây là cách nó sẽ tạo ra cho một chủ đề có hỗ trợ HTML5.
Vì mục đích của hướng dẫn này, chúng tôi sẽ sử dụng mẫu tìm kiếm HTML5. Nếu chủ đề của bạn tạo biểu mẫu tìm kiếm HTML4, hãy thêm dòng mã này vào tệp tin.php của chủ đề:
add_theme_support('html5', array('search-form'));
Khi bạn đã chắc chắn rằng biểu mẫu tìm kiếm của bạn đang tạo biểu mẫu HTML5, bước tiếp theo là đặt biểu mẫu tìm kiếm nơi bạn muốn hiển thị với hiệu ứng chuyển đổi.
Thêm hiệu ứng chuyển đổi vào mẫu tìm kiếm WordPress
Điều đầu tiên bạn sẽ cần là một biểu tượng tìm kiếm. Chủ đề Twenty Thirteen mặc định trong WordPress đi kèm với một biểu tượng nhỏ rất đẹp và chúng tôi sẽ sử dụng nó trong hướng dẫn của chúng tôi. Tuy nhiên, hãy thoải mái tạo ảnh của bạn trong Photoshop hoặc tải xuống từ web. Chỉ cần đảm bảo tệp có tên search-icon.png.
Bây giờ bạn cần tải biểu tượng tìm kiếm này vào thư mục hình ảnh của chủ đề. Kết nối với trang web của bạn bằng ứng dụng khách FTP như Filezilla và mở thư mục chủ đề của bạn.
Bây giờ đây là bước cuối cùng và quan trọng nhất. Bạn cần thêm CSS này vào biểu định kiểu của chủ đề:
.site-header .search-form {
position: absolute;
right: 200px;
top: 200px;
}
.site-header .search-field {
background-color: transparent;
background-image: url(images/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;
}
.site-header .search-field:focus {
background-color: #fff;
border: 2px solid #c3c0ab;
cursor: text;
outline: 0;
width: 230px;
}
.search-form
.search-submit {
display:none;
}
Điều quan trọng cần ghi nhớ về CSS này là các hiệu ứng chuyển tiếp CSS3 cho phép chúng ta dễ dàng tạo hiệu ứng chuyển đổi. Cũng lưu ý rằng bạn vẫn sẽ phải điều chỉnh vị trí của biểu tượng tìm kiếm và biểu mẫu theo thiết kế chủ đề của bạn.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm hiệu ứng chuyển đổi tìm kiếm vào chủ đề WordPress của bạn. Bạn nghĩ gì về hình thức tìm kiếm chuyển đổi? Chúng tôi đang thấy ngày càng nhiều trang web sử dụng hiệu ứng này. Để lại nhận xét và câu hỏi của bạn trong các bình luận bên dưới hoặc tham gia với chúng tôi trong cuộc trò chuyện trên Google+.
