Crea una FAQ Fisarmonica per WordPress con l'interfaccia utente di jQuery

Creare una sezione FAQ per il tuo sito Web WordPress è incredibilmente semplice. Utilizzeremo i tipi di post personalizzati di WordPress per le domande e le risposte. Quindi utilizzeremo una fisarmonica UI jQuery per creare un bel widget per fisarmonica cross-browser. Alla fine assegneremo uno shortcode in modo che possiamo inserire le nostre FAQ in qualsiasi pagina o messaggio.

Lo creeremo:

Passaggio 1 Creare la directory e i file

1. Crea una nuova cartella all'interno della cartella dei temi chiamata FAQ
2. Dentro il 'FAQ'cartella, crea un nuovo file chiamato faq.php
3. Crea un altro file chiamato faq.js

Passaggio 2 Includere il file faq.php

Nel tuo functions.php (situato nella directory principale del tuo tema) - include il faq.php file che hai creato in alto.

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

Passaggio 3 Creare il tipo di post personalizzato

1. Per registrare il tipo di messaggio personalizzato, ci collegheremo al dentro azione. Stiamo utilizzando una funzione anonima come secondo parametro per mantenere tutto incapsulato in un unico punto. Questo aiuta con la leggibilità e la manutenibilità.
2. Impostare $ etichette e $ args come visto di seguito.
3. Alla fine chiamiamo register_post_type ('FAQ', $ args)
4. Ora se vai nella tua area di amministrazione vedrai una nuova opzione nel menu - FAQ (come si vede nell'immagine qui sotto)
5. Clic Aggiungi una nuova domanda e inserisci alcune domande e risposte in modo da avere qualcosa su cui lavorare più tardi. Utilizzare il titolo campo per la domanda e il campo del contenuto principale per la risposta. Questo ci consente di inserire qualsiasi tipo di contenuto nella nostra risposta (come immagini e video) e testo.

 / * Registra il tipo di messaggio personalizzato * / / * faq.php * / add_action ('init', function () $ labels = array ('name' => _x ('FAQ', 'nome del tipo generico'), 'singular_name' => _x ('Question', 'post type singular name'), 'add_new' => _x ('Aggiungi nuova domanda', 'Domanda'), 'add_new_item' => __ ('Aggiungi nuova domanda') , 'edit_item' => __ ('Modifica domanda'), 'new_item' => __ ('Nuova domanda'), 'all_items' => __ ('Tutte le domande frequenti'), 'view_item' => __ ('Visualizza Domanda '),' search_items '=> __ (' Cerca FAQ '),' not_found '=> __ (' Nessuna FAQ trovata '),' not_found_in_trash '=> __ (' Nessuna FAQ trovata nel Cestino '),' parent_item_colon ' => ", 'menu_name' => 'FAQ'); $ args = array ('labels' => $ labels, 'public' => true, 'public_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,' supporta '=> array (' title ',' editor ',' page-attributes ')); register_post_type (' FAQ ', $ args););

Passaggio 4 Includere jQuery, jQuery UI e faq.js

1. Carica jQuery
2. Carica l'interfaccia utente di jQuery
3. Carica il foglio di stile per la libreria dell'interfaccia utente jQuery
4. Carica il nostro script personalizzato faq.js

 add_action ('wp_enqueue_scripts', 'wptuts_enqueue'); function 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-stile jQuery'); wp_register_script ('wptuts-custom-js', get_template_directory_uri (). '/faq/faq.js', 'jquery-ui-accordion', ", true); wp_enqueue_script ('wptuts-custom-js');

Noterai che ne abbiamo usato solo uno wp_enqueue_script chiamata, perché è importante che i file JavaScript vengano caricati in ordine in quanto dipendono l'uno dall'altro. Ambientazione jquery-ui-fisarmonica come dipendenza fa in modo che questo accada.

Passaggio 5 Configurare lo Shortcode

Perché vogliamo essere in grado di mettere le nostre FAQ sulla fisarmonica su qualsiasi pagina / post, genereremo uno shortcode. Usare un shortcode significa che dobbiamo solo digitare [FAQ] all'interno di qualsiasi post / pagina nell'editor di WordPress per visualizzare le nostre domande frequenti.

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

Passaggio 6 Ottieni domande e risposte su FAQ

Possiamo ottenere i dati dal nostro tipo di post personalizzato utilizzando il get_posts () funzione.

1. numberposts - Qui puoi limitare quante domande frequenti vengono recuperate
2. ordinato da e ordine - Ci consente di modificare l'ordine delle domande
3. post_type - Questo è il modo in cui diciamo a WordPress di recuperare solo il nostro tipo di post personalizzato

 add_shortcode ('faq', function () $ posts = get_posts (array ('numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq' )); // array di oggetti restituiti);

 / * esempio * / echo $ post [0] -> post_content; // mostrerà la risposta dalla prima domanda faq.

Passaggio 7 Genera il markup per la fisarmonica UI jQuery

Questo è il markup necessario per la fisarmonica UI jQuery:

  
 
La domanda andrà qui
 
La risposta sarà in questo div.
 

 $ faq = '
'; // il contenitore, prima del ciclo foreach ($ post come $ post) $ faq. = sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // termina chiudendo il container return $ faq;

 add_shortcode ('faq', function () $ posts = get_posts (array (// Ottieni le FAQ Custom Post Type 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq',)); $ faq = '
'; // Apri il contenitore foreach ($ post come $ post) // Genera il markup per ogni domanda $ faq. = Sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // Chiudi il contenitore restituisce $ faq; // Restituisce l'HTML. );

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