Gần đây một trong những người dùng của chúng tôi đã hỏi chúng tôi nếu có một cách để họ thêm một Câu hỏi thường gặp về trang web WordPress của họ. Có nhiều plugin có sẵn cho phép bạn thêm các câu hỏi thường gặp hoặc phần Hỏi đáp trong WordPress. Trong bài này chúng tôi sẽ giới thiệu cho các bạn cách thêm một accordion FAQ jQuery trong trang WordPress của bạn.
Accordion là gì?
Trong thiết kế web, accordion là một thuật ngữ được sử dụng cho một mẫu thiết kế giao diện người dùng có các tab hoặc các khối nội dung bị sụp đổ hoặc mở rộng theo sự tương tác của người dùng. Mỗi tab có nội dung bên dưới chúng sẽ mở rộng khi người dùng nhấp vào mục trình đơn. Nói một cách đơn giản, nó giống như một menu mở rộng khi bạn nhấp vào nó. Chúng tôi đã sử dụng một hiệu ứng tương tự trên trang thiết lập blog WordPress miễn phí của chúng tôi. Dưới đây là ảnh chụp màn hình của một chiếc accordion mẫu.
Bổ sung một Accordion Hỏi đáp jQuery
Trước khi bạn có thể thêm một Horde accordion jQuery, bạn cần phải chắc chắn rằng bạn có một phần FAQ. Bắt đầu bằng cách thêm phần Hỏi đáp bằng cách làm theo hướng dẫn của chúng tôi về cách thêm phần Hỏi đáp trong WordPress.
Bây giờ chúng ta hãy tiếp tục với việc thêm các accordion jQuery FAQ. WordPress đi kèm với thư viện jQuery tuy nhiên nó không có chủ đề jquery. Chúng tôi sẽ tải tệp đó từ Google CDN và xếp hàng đợi các tập lệnh này trong WordPress. Chúng tôi cũng sẽ tạo một mã ngắn hiển thị những câu hỏi thường gặp của chúng tôi. Quan trọng nhất chúng tôi sẽ làm tất cả điều đó bằng cách tạo một plugin WordPress.
Tạo một thư mục trên desktop của bạn và đặt tên cho nó là accordion của tôi. Mở Notepad hoặc bất kỳ trình soạn thảo văn bản nào khác mà bạn chọn. Tạo một tệp tin được gọi là my-accordion.php và dán mã này bên trong nó:
10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'câu hỏi',
));
/ / Sản lượng đầu ra
$ faq. = ''; // Mở hộp chứa
foreach ($ bài đăng dưới dạng $ post) {// Tạo ra đánh dấu cho mỗi câu hỏi
$ faq. = sprintf ((' % 1 $ s
% 2 $ s '),
$ post-> post_title,
wpautop ($ post-> post_content)
);
}
$ faq. = ''; / / Đóng container
trả về $ faq; / / Trả lại HTML.
}
add_shortcode ('faq_accordion', 'accordion_shortcode');
Sau khi lưu các thay đổi của bạn vào tệp đó, hãy mở một tệp tin trống mới. Lưu nó như accordion.js . Tiếp theo dán mã bên trong và lưu tệp:
jQuery (document) .ready (function () {
jQuery ("# accordion") accordion ();
}) ();
Bây giờ chúng tôi có plugin của chúng tôi đã sẵn sàng để tải lên. Mở FTP Client của bạn và tải lên thư mục accordion của tôi vào thư mục / wp-contnt / plugins / trong trang web WordPress của bạn. Tiếp theo, bạn cần phải kích hoạt plugin bằng cách vào màn hình plugin của bạn trong khu vực quản trị WordPress.
Thêm trang Hỏi đáp với Accordion
Để hiển thị những Câu Hỏi Thường Gặp này ở dạng đàn accordion, bạn cần phải tạo một trang mới. Đi đến Trang »Thêm mới . Đặt tiêu đề của trang của bạn, ví dụ: Câu hỏi thường gặp và trong khu vực chỉnh sửa trang nhập mã ngắn này:
[faq_accordion]
Lưu và Xuất bản trang của bạn, và xem trước nó. Bạn sẽ thấy Câu hỏi thường gặp của bạn được hiển thị trong một trình đơn đàn accordion đẹp.
Thay đổi kiểu dáng và màu sắc của chiếc Accordion
Đối với màu sắc và kiểu dáng này Accordion Hỏi đáp sử dụng các Giao diện Giao diện jQuery được lưu trữ trên Google. Về cơ bản nó là một phong cách, và nếu bạn thích bạn có thể tải về và đặt nó trên trang web của riêng bạn. trang web jQuery có phần chủ đề giao diện jQuery với một vài chủ đề sẵn sàng sử dụng. Như bạn thấy, chúng tôi đã sử dụng chủ đề nhân loại trong plugin của chúng tôi. Bạn có thể thay thế nó với bất kỳ chủ đề có sẵn như smoothness, cupertino, vv Bạn cũng có thể tạo hoặc sửa đổi các chủ đề trên Themeroller.
Chúng tôi hy vọng bài viết này đã giúp bạn thêm một Câu Hỏi Thường Gặp về jQuery trên trang web WordPress của bạn. Để có phản hồi và câu hỏi xin vui lòng để lại một bình luận dưới đây.