wordpress添加媒体_如何在WordPress中添加jQuery FAQ手风琴

wordpress添加媒体

Recently one of our users asked us if there was a way for them to add a FAQ accordion on their WordPress site. There are many plugins available that allows you to add a frequently asked questions or FAQs section in WordPress. In this article we will show you how to add a jQuery FAQ accordion in your WordPress site.

最近，我们的一位用户问我们是否可以在他们的WordPress网站上添加FAQ手风琴。 有许多可用的插件，可让您在WordPress中添加常见问题或常见问题解答部分 。 在本文中，我们将向您展示如何在WordPress网站中添加jQuery FAQ手风琴。

什么是手风琴？ (What is Accordion?)

In web design, accordion is a term used for a user interface design pattern that has tabs or content blocks which collapse or expand upon user interaction. Each tab has content below them which expands when the user clicks on the menu item. In simple terms, it is like a menu that expands when you click on it. We have used a similar effect on our free WordPress blog setup page. Below is a screenshot of a sample accordion.

在Web设计中，手风琴是用于用户界面设计模式的术语，该模式具有在用户交互时折叠或扩展的选项卡或内容块。 每个选项卡下都有内容，当用户单击菜单项时，这些内容会展开。 简而言之，它就像一个菜单，单击后会展开。 我们在免费的WordPress博客设置页面上使用了类似的效果。 下面是示例手风琴的屏幕截图。

影片教学 (Video Tutorial)

演示地址

If you don’t like the video or need more instructions, then continue reading.

如果您不喜欢该视频或需要更多说明，请继续阅读。

添加jQuery FAQ手风琴 (Adding a jQuery FAQ Accordion)

Before you can add a jQuery FAQ accordion, you need to make sure that you have a FAQ section. Start with adding a FAQ section by following our tutorial on how to add a FAQ section in WordPress.

在添加jQuery FAQ手风琴之前，需要确保您具有FAQ部分。 按照我们有关如何在WordPress中添加FAQ部分的教程开始，添加FAQ部分 。

Now let’s go ahead with adding the jQuery FAQ accordion. WordPress comes with the jQuery library however it does not have jquery themes. We will load that from Google CDN and queue these scripts in WordPress. We will also create a shortcode that displays our frequently asked questions. Most importantly we will do all that by creating a WordPress plugin.

现在，让我们继续添加jQuery FAQ手风琴。 WordPress带有jQuery库，但是它没有jquery主题。 我们将从Google CDN加载该文件，并将这些脚本排入WordPress。 我们还将创建一个显示我们常见问题的简码。 最重要的是，我们将通过创建WordPress插件来完成所有这些工作。

Create a folder on your desktop and name it my-accordion. Open Notepad or any other text editor of your choice. Create a file called my-accordion.php and paste this code inside it:

在桌面上创建一个文件夹，并将其命名为my-accordion。 打开记事本或您选择的任何其他文本编辑器。 创建一个名为my-accordion.php的文件，并将以下代码粘贴到其中：

<?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');

After saving your changes to that file, open a new blank file. Save it as accordion.js. Next paste this code inside it and save the file:

将更改保存到该文件后，打开一个新的空白文件。 将其保存为accordion.js 。 接下来，将此代码粘贴到其中并保存文件：

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

Now we have our plugin ready to upload. Open your FTP Client and upload my-accordion folder to /wp-contnt/plugins/ directory in your WordPress website. Next, you need to activate the plugin by going to your plugin’s screen in the WordPress admin area.

现在，我们可以准备上传插件了。 打开FTP客户端，然后将my-accordion文件夹上载到WordPress网站中的/ wp-contnt / plugins /目录。 接下来，您需要通过转到WordPress管理区域中的插件屏幕来激活插件。

用手风琴添加一个FAQ页面 (Adding a FAQ page with Accordion)

To display these FAQs in an accordion format, you need to create a new page. Go to Pages » Add New. Give your page a title, e.g. FAQs and in the page edit area enter this shortcode:

要以手风琴格式显示这些常见问题解答，您需要创建一个新页面。 转到页面»添加新内容 。 给页面起一个标题，例如常见问题解答，并在页面编辑区域中输入以下短代码：

[faq_accordion]

[faq_accordion]

Save and Publish your page, and preview it. You will see your FAQs displayed in a nice accordion menu.

保存并发布您的页面，然后对其进行预览。 您会在一个漂亮的手风琴菜单中看到您的FAQ。

改变手风琴的样式和颜色 (Changing Style and Colors of Your Accordion)

For colors and styling this FAQ Accordion uses jQuery UI Themes hosted on Google. It is basically a style sheet, and if you prefer you can download and put it on your own website. jQuery website has a jQuery UI themes section with a few ready to use themes. As you can see that we have used the humanity theme in our plugin. You can replace it with any of the available themes such as smoothness, cupertino, etc. You can also create or modify these themes on Themeroller.

对于颜色和样式，此FAQ手风琴使用Google托管的jQuery UI主题。 它基本上是样式表，如果您愿意，可以下载并将其放在自己的网站上。 jQuery网站上有一个jQuery UI主题部分，其中有几个随时可以使用的主题。 如您所见，我们在插件中使用了人性化主题。 您可以将其替换为任何可用的主题，例如平滑度，cupertino等。也可以在Themeroller上创建或修改这些主题。

We hope this article helped you add a jQuery FAQ Accordion on your WordPress website. For feedback and questions please leave a comment below.

我们希望本文能帮助您在WordPress网站上添加jQuery FAQ手风琴。 对于反馈和问题，请在下面发表评论。

翻译自: https://www.wpbeginner.com/wp-tutorials/how-to-add-jquery-faq-accordion-in-wordpress/

wordpress添加媒体