Cách thêm hiệu ứng chuyển đổi tìm kiếm vào WordPress

Bạn đã thấy biểu tượng tìm kiếm thiết bị 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 vào các chủ đề WordPress.

Tìm kiếm hiệu ứng chuyển đổi trong hành động

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ề các mẫu WordPress, HTML và CSS. Người dùng 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ộ.

Xem mẫu tìm kiếm WordPress

WordPress thêm các lớp CSS tiêu chuẩn 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 chủ đề WordPress để hiển thị các hình thức 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’, ma trận (‘mẫu tìm kiếm’)) trong tệp features.php, thẻ mẫu này sẽ tạo ra một mẫu tìm kiếm HTML5. Mặt khác, nó 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 đang tạo là bằng cách xem mã nguồn cho biểu mẫu tìm kiếm.

Đây là mẫu mẫu get_search_form () sẽ xuất hiện khi chủ đề của bạn không có hỗ trợ HTML5:

Đây là một hình thức chung cho một chủ đề với HTML5.

Để có hướng dẫn tốt nhất, hãy sử dụng mẫu HTML5 bên dưới. Họ có một chủ đề chung ở dạng HTML4, tổng hợp và một dòng mã và chức năng lưu trữ. Chủ đề:

add_theme_support (‘html5’, mảng (‘mẫu tìm kiếm’));

Khi bạn đã đảm bảo rằng biểu mẫu tìm kiếm của bạn tạo ra 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 thiết bị vào mẫu tìm kiếm WordPress

Điều đầu tiên bạn 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 phải 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 với một ứ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ủ đề:

tiêu đề .site .search-form {
 vị trí: tuyệt đối;
 phải: 200px;
 đầu trang: 200px;
 }
 
 .site-header .search-field {
 màu nền: trong suốt;
 hình nền: url (hình ảnh / tìm kiếm-icon.png);
 vị trí nền: trung tâm 5px;
 lặp lại nền: không lặp lại;
 kích thước nền: 24px 24px;
 biên giới: không có;
 con trỏ: con trỏ;
 chiều cao: 37px;
 lề: 3px 0;
 đệm: 0 0 0 34px;
 vị trí: tương đối;
 -webkit-quá trình chuyển đổi: chiều rộng dễ dàng 400ms, dễ dàng nền 400ms;
 chuyển tiếp: chiều rộng dễ dàng 400ms, nền 400ms dễ dàng;
 chiều rộng: 0;
 }
 
 .site-header .search-field: tập trung {
 màu nền: #fff;
 viền: 2px solid # c3c0ab;
 con trỏ: văn bản;
 Đề cương: 0;
 chiều rộng: 230px;
 }
 .Form tìm kiếm
 .search-submit {
 không trưng bày;
 }

Điều quan trọng cần ghi nhớ với 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 cần đ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 hoá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 trao đổ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 cuộc trò chuyện trên Google+.