Creați o acordeon de întrebări frecvente pentru WordPress Cu jQuery UI

Crearea unei secțiuni de întrebări frecvente pentru site-ul dvs. WordPress este incredibil de simplă. Vom folosi WordPress Custom Post Types pentru întrebări și răspunsuri. Apoi vom folosi un acordeon jQuery UI pentru a face un frumos widget acordeon încrucișat în browser. În cele din urmă, vom atribui un cod scurt, astfel încât să putem pune întrebările frecvente pe orice pagină sau postare.

Vom crea acest lucru:

Pasul 1 Creați directorul și fișierele

1. Creați un dosar nou în dosarul tematic numit FAQ
2. În interiorul 'FAQ', creați un fișier nou numit faq.php
3. Creați un alt fișier numit faq.js

Pasul 2 Includeți fișierul faq.php

În tine functions.php (aflat în directorul rădăcină al temei) - includeți faq.php fișierul pe care l-ați creat în partea de sus.

 / * funcții.php * / include ('faq / faq.php');

Pasul 3 Creați tipul de post particularizat

1. Pentru a înregistra tipul de post particularizat, vom cârga în init acțiune. Folosim o funcție anonimă ca al doilea parametru pentru a păstra totul încapsulat într-un singur loc. Acest lucru ajută la lizibilitatea și mentenabilitatea.
2. Înființat $ etichete și $ args după cum se vede mai jos.
3. La final suntem register_post_type ('FAQ', $ args)
4. Acum, dacă intrați în zona de administrare, veți vedea o nouă opțiune în meniu - FAQ (după cum se vede în imaginea de mai jos)
5. Clic Adăugați o nouă întrebare și introduceți câteva întrebări și răspunsuri, astfel încât să avem ceva de lucrat mai târziu. Folosește titlu câmpul pentru întrebare și câmpul de conținut principal al răspunsului. Acest lucru ne permite să introduceți orice tip de conținut în răspunsul nostru (cum ar fi imagini și videoclipuri), precum și textul.

 / * Înregistrează tipul de post particularizat * / / * faq.php * / add_action ('init', funcția () $ labels = array ('name' => 'add_new' => _x ('Întrebare'), 'add_new_item' => __ ("Adăugați o nouă întrebare") , 'new_item' => __ ('Noua întrebare'), 'all_items' => __ ('Întrebări frecvente' "Not_found" => __ ("Nu găsiți întrebări frecvente"), "not_found_in_trash" => __ ("Nu găsiți întrebări frecvente în coșul de gunoi"), "parent_item_colon" => "," nume_menu "=> 'Întrebări frecvente'); $ args = array ('etichete' => etichete $, '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, suporta '=> array (' title ',' editor ',' page-attributes ');) register_post_type (' FAQ ', $ args););

Pasul 4 Includeți jQuery, jQuery UI și faq.js

1. Încărcați jQuery
2. Încărcați interfața utilizator jQuery
3. Încărcați foaia de stil pentru biblioteca jQuery UI
4. Încărcați scriptul personalizat faq.js

 add_action ('wp_enqueue_scripts', 'wptuts_enqueue'); funcția 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-ui stil jQuery'); "wpt_register_script ('wptuts-custom-js', get_template_directory_uri () '/faq/faq.js', 'jquery-ui-accordion', true);

Veți observa că am folosit doar unul wp_enqueue_script apel, deoarece este important ca fișierele JavaScript să fie încărcate în ordine deoarece sunt dependente una de cealaltă. reglaj jquery-ui-acordeon ca o dependență asigură acest lucru.

Pasul 5 Configurați codul scurt

Pentru că vrem să putem pune Accordionul nostru cu întrebări frecvente pe orice pagină / post, vom genera un scurtcod. Folosirea unui shortcode înseamnă că trebuie doar să tastăm [FAQ] în orice post / pagină din Editorul WordPress pentru a afișa întrebările noastre frecvente.

 add_shortcode ('faq', funcția () return "Test de cod scurt";);

Pasul 6 Obțineți Întrebări frecvente Întrebări și răspunsuri

Putem obține datele din tipul nostru de post personalizat folosind get_posts () funcţie.

1. numberposts - Aici puteți limita câte întrebări cu întrebări frecvente sunt preluate
2. orderby și Ordin - Ne permite să schimbăm ordinea întrebărilor
3. post_type - Acesta este modul în care îi spunem lui WordPress să ne aducă doar tipul de post personalizat

 add_shortcode ('faq', funcția () $ posturi = get_posts (array ('numberposts' => 10, 'orderby' => 'menu_order', 'order' => )); // array de obiecte returnate);

 / * exemplu * / echo $ posturi [0] -> post_content; // va scoate răspunsul de la prima întrebare faq.

Pasul 7 Generați marcajul pentru acordeonul jQuery UI

Acesta este marcajul necesar pentru jordanul jQuery:

  
 
Întrebarea va merge aici
 
Răspunsul va fi în acest div.
 

 $ faq = '
„; // containerul, înainte de buclă foreach ($ postări ca $ post) $ faq. = sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
„; // finalizează închiderea recipientului retur $ faq;

 add_shortcode ('faq', function () $ posturi = get_posts (array (// Obțineți tipul de postare personalizată FAQ 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'post_type' => 'faq',)); $ faq = '
„; // Deschiderea foreach-ului containerului ($ posturi ca $ post) // Generarea marcajului pentru fiecare intrebare $ faq. = Sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
„; // Închideți returul recipientului $ faq; // Returnați codul HTML. );

 (funcția () jQuery ("# ​​wptuts-acordeon"). acordeon ();) ();