Thủ thuật WP

Cách thêm một Accordion câu hỏi thường gặp về jQuery trong WordPress

Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi liệu có cách nào để họ thêm một accordion Câu hỏi thường gặp trên trang web WordPress của họ hay không. Có rất nhiều plugin có sẵn cho phép bạn thêm phần câu hỏi thường gặp hoặc câu hỏi thường gặp trong WordPress. Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách thêm một accordion Câu hỏi thường gặp về jQuery vào trang web WordPress của bạn.

Có thể bạn quan tâm :

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 khối nội dung thu gọn hoặc mở rộng khi người dùng tương tác. 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 menu. Nói một cách dễ hiểu, 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 đàn accordion mẫu.

An accordion menu for FAQs

Đăng ký WPBeginner

Thêm một Accordion Câu hỏi thường gặp về jQuery

Trước khi có thể thêm accordion Câu hỏi thường gặp về jQuery, bạn cần đảm bảo rằng bạn có phần Câu hỏi thường gặp. Bắt đầu với việc thêm phần Câu hỏi thường gặ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 Câu hỏi thường gặp trong WordPress.

Bây giờ chúng ta hãy tiếp tục với việc thêm accordion jQuery FAQ. WordPress đi kèm với thư viện jQuery tuy nhiên nó không có các chủ đề jquery. Chúng tôi sẽ tải nó từ Google CDN và xếp các tập lệnh này vào hàng đợi trong WordPress. Chúng tôi cũng sẽ tạo một mã ngắn hiển thị các câu hỏi thường gặp của chúng tôi. Quan trọng nhất là chúng tôi sẽ làm tất cả những điều đó bằng cách tạo một plugin WordPress.

Tạo một thư mục trên màn hình của bạn và đặt tên là my-accordion. 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 có tên my-accordion.php và dán mã này vào bên trong nó:

<?php
/** 
Plugin Name: WPBeginner's FAQ Accordion
Description: A jQuery powered Accordion for FAQs based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/
function accordion_shortcode() { 

// Registering the scripts and style
wp_register_style('wpb-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/humanity/jquery-ui.css', false, null);
wp_enqueue_style('wpb-jquery-ui-style');
wp_register_script('wpb-custom-js', plugins_url('/accordion.js', __FILE__ ), array('jquery-ui-accordion'), '', true);
wp_enqueue_script('wpb-custom-js');

// Getting FAQs from WordPress FAQ Manager plugin's custom post type questions
$posts = get_posts(array(  
'posts_per_page' => 10,
'orderby' => 'menu_order',
'order' => 'ASC',
'post_type' => 'question',
));
	
// Generating Output 
$faq  .= '<div id="accordion">'; //Open the container
foreach ( $posts as $post ) { // Generate the markup for each Question
$faq .= sprintf(('<h3><a href="">%1$s</a></h3><div>%2$s</div>'),
$post->post_title,
wpautop($post->post_content)
);
}
$faq .= '</div>'; //Close the container
return $faq; //Return the 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 trống mới. Lưu nó dưới dạng accordion.js . Tiếp theo, dán mã này vào bên trong nó và lưu tệp:

jQuery(document).ready(function() {
jQuery("#accordion").accordion();
})();

Bây giờ chúng tôi đã có sẵn plugin của mình để tải lên. Mở FTP Client của bạn và tải thư mục my-accordion lên / wp-contnt / plugins / trong trang web WordPress của bạn. Tiếp theo, bạn cần kích hoạt plugin bằng cách chuyển đến màn hình plugin của bạn trong khu vực quản trị WordPress.

Thêm trang Câu hỏi thường gặp với Accordion

Để hiển thị các Câu hỏi thường gặp này ở định dạng đàn accordion, bạn cần tạo một trang mới. Đi tới Trang »Thêm mới . Đặt tiêu đề cho trang của bạn, ví dụ như Câu hỏi thường gặp và trong khu vực chỉnh sửa trang, hãy 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ác Câu hỏi thường gặp của mình được hiển thị trong một menu đàn accordion đẹp mắt.

Thay đổi kiểu dáng và màu sắc của Accordion của bạn

Đối với màu sắc và kiểu dáng, FAQ Accordion này sử dụng Chủ đề giao diện người dùng jQuery được lưu trữ trên Google. Về cơ bản, nó là một biểu định kiểu, và nếu muốn, bạn có thể tải xuống và đặt nó trên trang web của riêng mình. Trang web jQuery có phần chủ đề giao diện người dùng jQuery với một số chủ đề sẵn sàng sử dụng. Như bạn có thể thấy rằng chúng tôi đã sử dụng chủ đề nhân văn trong plugin của mình. Bạn có thể thay thế nó bằng bất kỳ chủ đề có sẵn nào như mượt mà, cupertino,… Bạn cũng có thể tạo hoặc sửa đổi các chủ đề này trên Themeroller.

jQuery UI Themes

Chúng tôi hy vọng bài viết này đã giúp bạn thêm Accordion Câu hỏi thường gặp về jQuery trên trang web WordPress của mình. Mọi thông tin phản hồi và thắc mắc vui lòng để lại bình luận bên dưới.

Free Download Cách thêm một Accordion câu hỏi thường gặp về jQuery trong WordPress :

Trong khi chờ đợi, vui lòng nhấn vao quảng cáo phía trên để tác giả có phí duy trì website , xin cám ơn ^^^

In the meantime, please click on the ad so that the author has a website maintenance fee, very very very thank you ^^^ !!!!

Join our official telegram group and channel for latest updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Vui lòng tắt extension, các ứng dụng chặn quảng cáo trước khi truy cập !!!!! Please disable extensions, ad blocking applications before accessing!!!!!