Maak een FAQ-accordeon voor WordPress met de gebruikersinterface van jQuery

Een FAQ-sectie maken voor uw WordPress-website is ongelooflijk eenvoudig. We gaan WordPress aangepaste berichttypen gebruiken voor de vragen en antwoorden. Dan zullen we een jQuery UI-accordeon gebruiken om een ​​mooie accordeonwidget voor meerdere browsers te maken. Uiteindelijk zullen we een shortcode toewijzen zodat we onze veelgestelde vragen op elke pagina of post kunnen plaatsen.

We zullen dit creëren:

Stap 1 Maak de map en bestanden aan

1. Maak een nieuwe map binnen je opgeroepen themamap FAQ
2. Binnen in de 'FAQ'map, maak een nieuw bestand met de naam faq.php
3. Maak nog een bestand met de naam faq.js

Stap 2 Neem het faq.php-bestand op

In uw functions.php (bevindt zich in de hoofdmap van uw thema) - include de faq.php bestand dat je bovenaan hebt aangemaakt.

 / * functions.php * / include ('faq / faq.php');

Stap 3 Maak het aangepaste berichttype

1. Om het aangepaste berichttype te registreren, gaan we in de in het actie. We gebruiken een anonieme functie als de tweede parameter om alles ingekapseld op één plek te houden. Dit helpt met de leesbaarheid en onderhoudbaarheid.
2. Opgericht $ labels en $ args zoals hieronder te zien.
3. Aan het einde bellen we register_post_type ('FAQ', $ args)
4. Als u nu naar uw Admin-gebied gaat, ziet u een nieuwe optie in het menu - FAQ (zoals te zien in de afbeelding hieronder)
5. Klik Nieuwe vraag toevoegen en voer een paar vragen en antwoorden in zodat we later iets kunnen gebruiken. Gebruik de titel veld voor de vraag en het veld met de belangrijkste inhoud voor het antwoord. Hiermee kunnen we elk type inhoud in ons antwoord (zoals afbeeldingen en video's) en tekst invoeren.

 / * Registreer het Aangepaste berichttype * / / * faq.php * / add_action ('init', function () $ labels = array ('name' => _x ('FAQ', 'berichttype algemene naam'), 'singular_name' => _x ('Question', 'post type singular name'), 'add_new' => _x ('Nieuwe vraag toevoegen', 'Vraag'), 'add_new_item' => __ ('Nieuwe vraag toevoegen') , 'edit_item' => __ ('Bewerk vraag'), 'new_item' => __ ('Nieuwe vraag'), 'all_items' => __ ('Alle FAQ-vragen'), 'view_item' => __ ('Bekijken Vraag '),' search_items '=> __ (' Zoeken FAQ '),' not_found '=> __ (' Geen veelgestelde vragen gevonden '),' not_found_in_trash '=> __ (' Geen veelgestelde vragen gevonden in de Prullenbak '),' parent_item_colon ' => ", 'menu_name' => 'FAQ'); $ args = array ('labels' => $ labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu '=> true,' query_var '=> true,' rewrite '=> true,' capability_type '=>' post ',' has_archive '=> true,' hierarchical '=> false,' menu_position '=> null,' ondersteunt '=> array (' title ',' editor ',' page-attributes ')); register_post_type (' FAQ ', $ args););

Stap 4 Inclusief jQuery, jQuery UI en faq.js

1. Laad jQuery
2. Laad jQuery gebruikersinterface
3. Laad de stylesheet voor de jQuery UI-bibliotheek
4. Laad ons eigen script faq.js

 add_action ('wp_enqueue_scripts', 'wptuts_enqueue'); functie wptuts_enqueue () wp_register_style ('wptuts-jquery-ui-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/south-street/jquery-ui.css' ); wp_enqueue_style ( 'wptuts-jquery-ui-style'); wp_register_script ('wptuts-custom-js', get_template_directory_uri (). '/faq/faq.js', 'jquery-ui-accordion', ", true); wp_enqueue_script ('wptuts-custom-js');

U zult merken dat we er slechts één gebruikten wp_enqueue_script bellen, omdat het belangrijk is dat de JavaScript-bestanden in volgorde worden geladen, omdat ze afhankelijk zijn van elkaar. omgeving jquery-ui-accordeon als een afhankelijkheid zorgt ervoor dat dit gebeurt.

Stap 5 Stel de shortcode in

Omdat we onze FAQ-accordeon op elke pagina / post willen plaatsen, gaan we een shortcode genereren. Het gebruik van een shortcode betekent dat we alleen hoeven te typen [FAQ] in een bericht / pagina in de WordPress-editor om onze veelgestelde vragen weer te geven.

 add_shortcode ('faq', function () return "Shortcode test";);

Stap 6 Krijg de FAQ Vragen & Antwoorden

We kunnen de gegevens van ons aangepaste berichttype ophalen met behulp van de get_posts () functie.

1. numberposts - Hier kunt u beperken hoeveel FAQ-vragen worden opgehaald
2. orderby en bestellen - Hiermee kunnen we de volgorde van de vragen wijzigen
3. post_type - Dit is hoe we WordPress vertellen om alleen ons aangepaste berichttype op te halen

 add_shortcode ('faq', function () $ posts = get_posts (array ('numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq' )); // array van geretourneerde objecten);

 / * voorbeeld * / echo $ posts [0] -> post_content; // geeft het antwoord van de eerste faq-vraag.

Stap 7 Genereer de markering voor de jQuery UI-accordeon

Dit is de markup die nodig is voor de jQuery UI Accordion:

  
 
Vraag zal hier gaan
 
Het antwoord zal in deze div staan.
 

 $ faq = '
'; // de container, vóór de lus foreach ($ posts als $ post) $ faq. = sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // voltooi door het sluiten van de container retour $ faq;

 add_shortcode ('faq', function () $ posts = get_posts (array (// Haal de Veelgestelde vragen op Custom Post Type 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq',)); $ faq = '
'; // Open de container foreach ($ posts als $ post) // Genereer de markup voor elke vraag $ faq. = Sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // Sluit de containerretour $ faq; // Retourneer de HTML. );

 (function () jQuery ("# ​​wptuts-accordeon"). accordeon ();) ();