Cree un acordeón de preguntas frecuentes para WordPress con jQuery UI

Crear una sección de preguntas frecuentes para su sitio web de WordPress es increíblemente simple. Vamos a usar WordPress Custom Post Types para las preguntas y respuestas. Luego usaremos un acordeón jQuery UI para crear un buen widget de acordeón para varios navegadores. Finalmente, le asignaremos un código breve para que podamos poner nuestras preguntas frecuentes en cualquier página o publicación..

Estaremos creando esto:

Paso 1 Crear el directorio y los archivos

1. Crea una nueva carpeta dentro de tu carpeta de tema llamada Preguntas más frecuentes
2. Dentro de 'Preguntas más frecuentes'carpeta, crea un nuevo archivo llamado faq.php
3. Crea otro archivo llamado faq.js

Paso 2 Incluye el archivo faq.php

En tus funciones.php (ubicado en el directorio raíz de su tema) - incluya la faq.php archivo que creaste en la parte superior.

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

Paso 3 Crear el tipo de publicación personalizada

1. Para registrar el tipo de publicación personalizada, vamos a enganchar en el en eso acción. Estamos utilizando una función anónima como segundo parámetro para ayudar a mantener todo encapsulado en un solo lugar. Esto ayuda con la legibilidad y mantenibilidad..
2. Preparar $ etiquetas y $ args como se ve abajo.
3. Al final llamamos register_post_type ('FAQ', $ args)
4. Ahora, si vas a tu área de administración, verás una nueva opción en el menú - Preguntas más frecuentes (como se ve en la imagen de abajo)
5. Hacer clic Añadir nueva pregunta e ingrese algunas preguntas y respuestas para que tengamos algo con qué trabajar más adelante. Utilizar el título campo para la pregunta, y el campo de contenido principal para la respuesta. Esto nos permite ingresar cualquier tipo de contenido en nuestra respuesta (como imágenes y videos) así como texto.

 / * Registre el tipo de publicación personalizada * / / * faq.php * / add_action ('init', function () $ labels = array ('name' => _x ('FAQ', 'Post type general name'), 'singular_name' => _x ('Question', 'post type singular name'), 'add_new' => _x ('Add New Question', 'Question'), 'add_new_item' => __ ('Add New Question') , 'edit_item' => __ ('Editar pregunta'), 'new_item' => __ ('Nueva pregunta'), 'all_items' => __ ('Todas las preguntas frecuentes'), 'view_item' => __ ('Ver Pregunta '),' search_items '=> __ (' Search FAQ '),' not_found '=> __ (' No se encontraron FAQ '),' not_found_in_trash '=> __ (' No se encontraron FAQ en la Papelera '),' 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,' capacity_type '=>' post ',' has_archive '=> true,' hierarchical '=> false,' menu_position '=> null,' admite '=> array (' título ',' editor ',' atributos de página ')); register_post_type (' FAQ ', $ args););

Paso 4 Incluye jQuery, jQuery UI y faq.js

1. Cargar jQuery
2. Cargar jQuery UI
3. Cargue la hoja de estilo para la biblioteca de jQuery UI
4. Cargue nuestro script personalizado faq.js

 add_action ('wp_enqueue_scripts', 'wptuts_enqueue'); función 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');

Notarás que solo usamos uno wp_enqueue_script llamada, porque es importante que los archivos de JavaScript se carguen en orden, ya que dependen unos de otros. Ajuste jQuery-ui-acordeón como una dependencia se asegura de que esto suceda.

Paso 5 Configurar el código corto

Debido a que queremos poder poner nuestro acordeón de preguntas frecuentes en cualquier página / publicación, vamos a generar un código corto. Usar un shortcode significa que solo tenemos que escribir [Preguntas más frecuentes] dentro de cualquier publicación / página en el editor de WordPress para mostrar nuestras preguntas frecuentes.

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

Paso 6 Obtenga las preguntas frecuentes Preguntas y respuestas

Podemos obtener los datos de nuestro tipo de publicación personalizada utilizando el get_posts () función.

1. numeración - Aquí puede limitar el número de preguntas frecuentes que se recuperan.
2. orden por y orden - Nos permite cambiar el orden de las preguntas.
3. tipo de mensaje - Así es como le decimos a WordPress que solo obtenga nuestro tipo de publicación personalizada

 add_shortcode ('faq', function () $ posts = get_posts (array ('numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq' )); // matriz de objetos devueltos);

 / * ejemplo * / echo $ posts [0] -> post_content; // emitirá la respuesta de la primera pregunta de preguntas frecuentes.

Paso 7 Generar el marcado para el acordeón jQuery UI

Este es el marcado necesario para el jQuery UI Accordion:

  
 
La pregunta irá aquí
 
La respuesta estará en esta div..
 

 $ faq = '
'; // el contenedor, antes del bucle foreach ($ se publica como $ post) $ faq. = sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // terminar cerrando el contenedor return $ faq;

 add_shortcode ('faq', function () $ posts = get_posts (array (// Obtenga el FAQ Tipo de mensaje personalizado 'numberposts' => 10, 'orderby' => 'menu_order', 'order' => 'ASC', 'post_type' => 'faq',)); $ faq = '
'; // Abra el contenedor foreach ($ posts como $ post) // Genere el marcado para cada pregunta $ faq. = Sprintf (('
% 1 $ s
% 2 $ s
'), $ post-> post_title, wpautop ($ post-> post_content));  $ faq. = '
'; // Cerrar el contenedor return $ faq; // Devolver el HTML. );

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