SÄ hÀr lÀgger du till ett vanligt FAQ-dragspel i WordPress

An accordion menu for FAQs

Nyligen frÄgade en av vÄra anvÀndare oss om det fanns ett sÀtt för dem att lÀgga till ett FAQ-dragspel pÄ deras WordPress-webbplats. Det finns mÄnga plugins tillgÀngliga som lÄter dig lÀgga till en vanlig frÄga eller FAQs avsnitt i WordPress. I den hÀr artikeln visar vi dig hur du lÀgger till ett jQuery FAQ-dragspel pÄ din WordPress-webbplats.

Vad Àr dragspel?

I webbdesign Àr dragspel en term som anvÀnds för ett designmönster för anvÀndargrÀnssnitt som har flikar eller innehÄllsblock som kollapsar eller expanderar vid anvÀndarinteraktion. Varje flik har innehÄll under sig som expanderar nÀr anvÀndaren klickar pÄ menyalternativet. Enkelt uttryckt Àr det som en meny som expanderar nÀr du klickar pÄ den. Vi har anvÀnt en liknande effekt pÄ vÄr gratis WordPress-blogginstÀllningssida. Nedan visas en skÀrmdump av ett dragspel.

Videohandledning

Prenumerera pÄ WPBeginner

Om du inte gillar videon eller behöver fler instruktioner, fortsÀtt lÀsa.

LĂ€gga till ett vanligt FAQ-dragspel

Innan du kan lÀgga till ett dragspel med jQuery FAQ mÄste du se till att du har en FAQ-sektion. Börja med att lÀgga till en FAQ-sektion genom att följa vÄr handledning om hur du lÀgger till en FAQ-sektion i WordPress.

LÄt oss nu gÄ vidare med att lÀgga till dragspel för jQuery FAQ. WordPress kommer med jQuery-biblioteket men det har inte jquery-teman. Vi laddar det frÄn Google CDN och köer dessa skript i WordPress. Vi kommer ocksÄ att skapa en kortkod som visar vÄra vanliga frÄgor. Viktigast av allt kommer vi att göra allt detta genom att skapa ett WordPress-plugin.

Skapa en mapp pĂ„ skrivbordet och ge den namnet my-dragspel. Öppna Anteckningar eller nĂ„gon annan textredigerare du vĂ€ljer. Skapa en fil som heter my-accordion.php och klistra in den hĂ€r koden i den:


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

NÀr du har sparat Àndringarna i den filen öppnar du en ny tom fil. Spara det som accordion.js. Klistra sedan in den hÀr koden i den och spara filen:


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

Nu har vi vĂ„rt plugin redo att ladda upp. Öppna din FTP-klient och ladda upp min dragspel-mapp till / wp-contnt / plugins / katalog pĂ„ din WordPress-webbplats. DĂ€refter mĂ„ste du aktivera plugin genom att gĂ„ till pluginens skĂ€rm i WordPress-adminomrĂ„det.

LĂ€gga till en FAQ-sida med dragspel

För att visa dessa vanliga frÄgor i dragspelformat mÄste du skapa en ny sida. GÄ till Sidor »LÀgg till nya. Ge din sida en titel, t.ex. vanliga frÄgor och ange denna kortkod i sidredigeringsomrÄdet:

[faq_accordion]

Spara och publicera din sida och förhandsgranska den. Du kommer att se dina vanliga frÄgor i en trevlig dragspelmeny.

Ändra stil och fĂ€rger för ditt dragspel

För fÀrger och styling anvÀnder denna vanliga FAQ Accordion jQuery UI-teman som finns pÄ Google. Det Àr i grunden ett formatmall, och om du föredrar kan du ladda ner och lÀgga det pÄ din egen webbplats. jQuery webbplats har en jQuery UI teman avsnitt med nÄgra fÀrdiga att anvÀnda teman. Som du kan se att vi har anvÀnt mÀnsklighetstemat i vÄrt plugin. Du kan ersÀtta den med nÄgon av de tillgÀngliga teman som jÀmnhet, cupertino, etc. Du kan ocksÄ skapa eller Àndra dessa teman pÄ Themeroller.

jQuery UI-teman

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till ett jQuery FAQ-dragspel pÄ din WordPress-webbplats. För feedback och frÄgor vÀnligen lÀmna en kommentar nedan.