Uso de WordPress para crear un sistema de preguntas frecuentes con tipos de mensajes personalizados

Recientemente trabajé con un cliente mío, que trabaja como consultor profesional en su área de trabajo. Me preguntó si podía implementar un sistema de preguntas y respuestas, o una página de preguntas frecuentes, para ser exactos. Le dije: "Claro, solo podemos crear una página y pegar las preguntas y respuestas allí con un estilo diferente", pero ella dijo que crearía páginas diferentes y categorizaría preguntas y respuestas, y por el hecho de ser más organizada, necesitaba un enfoque diferente.

Con ese fin, le mostraré cómo manejé sus solicitudes con algunas líneas simples de código usando tipos de correos personalizados, taxonomías y códigos cortos.

El tipo de correos personalizados y la taxonomía

¿Qué necesitamos para construir un sistema de preguntas frecuentes?? 

  • Necesitamos campos para preguntas y respuestas..
  • Necesitamos categorías para clasificar y separar diferentes tipos de preguntas y sus respuestas..
  • En nuestro caso, necesitamos un código breve para integrar estos grupos de preguntas o todas las preguntas en una página o publicación..

Vamos a empezar por crear el tipo de mensaje personalizado.

Paso 1: Crear el tipo de publicación personalizada

Naturalmente, vamos a comenzar configurando un tipo de publicación personalizada para nuestros elementos de Preguntas frecuentes. Vamos a crear un nuevo tipo de publicación personalizada con la ayuda de register_post_type () función, pero si desea una GUI para crear su tipo de publicación, puede generarla con la herramienta Generador de tipo de publicación de GenerateWP como lo hice en este ejemplo:

 _x ('Preguntas frecuentes', 'Nombre general del tipo de publicación', 'tuts_faq'), 'singular_name' => _x ('Preguntas frecuentes', 'Nombre singular del tipo de publicación', 'tuts_faq'), 'menu_name' => __ ('Preguntas frecuentes ',' tuts_faq '),' parent_item_colon '=> __ (' Parent Item: ',' tuts_faq '),' all_items '=> __ (' All Items ',' tuts_faq '),' view_item '=> __ (' Ver elemento ',' tuts_faq '),' add_new_item '=> __ (' Agregar nuevo elemento de preguntas frecuentes ',' tuts_faq '),' add_new '=> __ (' Agregar nuevo ',' tuts_faq '),' edit_item '=> __ ('Editar elemento', 'tuts_faq'), 'update_item' => __ ('Actualizar elemento', 'tuts_faq'), 'search_items' => __ ('Buscar elemento', 'tuts_faq'), 'not_found' = > __ ('No encontrado', 'tuts_faq'), 'not_found_in_trash' => __ ('No encontrado en la basura', 'tuts_faq'),); $ args = array (// use las etiquetas arriba de 'labels' => $ labels, // solo necesitaremos el título, el editor Visual y los campos de extractos de nuestro tipo de publicación 'support' => array ('title' , 'editor', 'extracto',), // vamos a crear esta taxonomía en la siguiente sección, pero necesitamos vincular nuestro tipo de publicación ahora 'taxonomies' => array ('tuts_faq_tax'), / / Hágalo público para que podamos verlo en el panel de administración y mostrarlo en el front-end 'public' => true, // muestre el elemento del menú bajo el elemento Pages 'menu_position' => 20, // show archives, si no necesita el shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // enganche en la acción 'init' add_action ('init', 'tuts_faq_cpt', 0); ?>

Propina: Si su proyecto involucrará más tipos de publicaciones personalizadas que pueden ser más complejas que este simple tipo de publicación de preguntas frecuentes, puedo sugerir una herramienta genial llamada SuperCPT que le permite crear nuevos tipos de publicaciones con un código aún más simple. También he escrito un tutorial sobre SuperCPT, puedes verlo aquí.

Paso 2: Creando la taxonomía personalizada

Para separar los diferentes tipos de preguntas (como las preguntas y respuestas de mi cliente sobre el aborto espontáneo y la depresión posparto), vamos a necesitar un sistema de categorías. Como muchos de ustedes ya saben, WordPress proporciona esta funcionalidad con taxonomías personalizadas..

La función esencial aquí es register_taxonomy () pero de nuevo, puede usar la herramienta Generador de taxonomía de GenerateWP si necesita una interfaz gráfica. 

Aquí está el código:

 _x ('Categorías de preguntas frecuentes', 'Nombre general de taxonomía', 'tuts_faq'), 'nombre único' => _x ('Categoría de preguntas frecuentes', 'Nombre singular de taxonomía', 'tuts_faq'), 'nombre de menú' => __ (Preguntas frecuentes Categories ',' tuts_faq '),' all_items '=> __ (' All FAQ Cats ',' tuts_faq '),' parent_item '=> __ (' Parent FAQ Cat ',' tuts_faq '),' parent_item_colon '=> __ ('Cat. De preguntas frecuentes de los padres:', 'tuts_faq'), 'new_item_name' => __ ('Cat. De nuevas preguntas frecuentes', 'tuts_faq'), 'add_new_item' => __ ('Add New FAQ Cat', 'tuts_faq'), 'edit_item' => __ ('Edit FAQ Cat', 'tuts_faq'), 'update_item' => __ ('Update FAQ Cat', 'tuts_faq'), 'separate_items_with_commas' => __ ('Separate items with commas', 'tuts_faq'), 'search_items' => __ ('Buscar elementos', 'tuts_faq'), 'add_or_remove_items' => __ ('Agregar o quitar artículos', 'tuts_faq'), 'Choose_from_most_used' => __ ('Choose de los elementos más utilizados ',' tuts_faq '),' not_found '=> __ (' No encontrado ',' tuts_faq '),); $ args = array (// use las etiquetas arriba de 'labels' => $ labels, // taxonomía debe ser jerárquica para que podamos mostrarla como una sección de categoría 'hierarchical' => true, // nuevamente, haga pública la taxonomía ( como el tipo de publicación) 'public' => true,); // el contenido de la matriz a continuación especifica qué tipos de publicaciones debe vincularse la taxonomía a register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // enganche en la acción 'init' add_action ('init', 'tuts_faq_tax', 0); ?>

¡Eso es! ¡Ahora tiene un tipo de publicación de preguntas frecuentes con una taxonomía llamada "Categorías de preguntas frecuentes" vinculadas entre sí! Verifique su panel de administración y verá el ítem de menú "Categorías de preguntas frecuentes" debajo de "Preguntas frecuentes". 

Al igual que las categorías de publicaciones regulares, puede agregarlas, editarlas o eliminarlas en la página "Categorías de preguntas frecuentes", o puede agregar nuevas categorías mientras escribe un nuevo elemento de preguntas frecuentes..

Paso 3: Creando el [Preguntas más frecuentes] Código corto

Aquí viene la parte divertida: construir el shortcode. (Si has leído mis publicaciones anteriores, sabes que soy un enorme fanático de los códigos cortos de WordPress.) Básicamente, vamos a hacer que los elementos de las preguntas frecuentes se puedan insertar en las publicaciones y páginas. 

Esto es lo que va a pasar:

  • consulta dentro de nuestro nuevo tipo de mensaje personalizado,
  • filtrar sus categorías con un parámetro de código corto,
  • Muestra las preguntas y respuestas como títulos y contenido.,
  • muestre un extracto de la respuesta con un enlace "Más ...", controlado por otro parámetro de código abreviado.

Vamos a empezar a construir el shortcode. Al igual que el código anterior, voy a incluir algunos comentarios útiles:

", // contenido completo o atributo de extracto - por defecto es contenido completo 'extracto' => 'falso',), $ atts)); $ output ="; // establece los argumentos de consulta $ query_args = array (// muestra todas las publicaciones que coinciden con esta consulta 'posts_per_page' => -1, // muestra el tipo de publicación personalizada 'tuts_faq' 'post_type' => 'tuts_faq', // muestra el publicaciones que coinciden con la babosa de la categoría de Preguntas Frecuentes especificada con el atributo del código abreviado 'tax_query' => array ('(taxonomía' => 'tuts_faq_tax', 'campo' => 'babosa', 'términos' => categoría $,)) , // informe a WordPress que no necesita contar el total de filas: este pequeño truco reduce la carga en la base de datos si no necesita la paginación 'no_found_rows' => true,); // obtener las publicaciones con nuestros argumentos de consulta $ faq_posts = get_posts ($ query_args); $ salida. = '
'; // manejar nuestro bucle personalizado foreach ($ faq_posts as $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Más ...', 'tuts_faq'). ''; $ salida. = '
'; $ salida. = '

'. $ faq_item_title. '

'; $ salida. = '
'. $ faq_item_content. '
'; $ salida. = '
'; wp_reset_postdata (); $ salida. = '
'; devuelve $ output; add_shortcode ('faq', 'tuts_faq_shortcode'); ?>

¡Eso es! Ahora tenemos un código corto para integrar nuestras preguntas y respuestas. Puedes darle estilo con los nombres de las clases. tuts-faq, tuts-faq-item, tuts-faq-item-title, y tuts-faq-item-content. Sin embargo, debería estar bien incluso si no incluye un estilo adicional.

Paso 4: envolviendo el código

Dado que estos bits de código no solo tienen que ver con el estilo del front-end sino también con la introducción de nuevas funciones, cuentan como territorio de complementos. Es por eso que debemos guardar el código como un complemento. Y mientras estamos en ello, también debemos vaciar las reglas de reescritura en el momento de la activación y desactivación..

Aquí está el código completo:

[Preguntas más frecuentes] Versión: 1.0 Autor: Barış Ünver Autor URI: http://hub.tutsplus.com/authors/baris-unver Licencia: Dominio público * / if (! Function_exists ('tuts_faq_cpt')) // registrar la función de tipo de publicación personalizada tuts_faq_cpt () // estas son las etiquetas en la interfaz de administración, edítelas como desee $ labels = array ('name' => _x ('FAQs', 'Post Type General Name', 'tuts_faq'), 'singular_name' => _x ('FAQ', 'Post Type Singular Name', 'tuts_faq'), 'menu_name' => __ ('FAQ', 'tuts_faq'), 'parent_item_colon' => __ ('Parent Item:', ' tuts_faq '),' all_items '=> __ (' Todos los elementos ',' tuts_faq '),' view_item '=> __ (' Ver elemento ',' tuts_faq '),' add_new_item '=> __ (' Agregar nuevo elemento de preguntas frecuentes ',' tuts_faq '),' add_new '=> __ (' Add New ',' tuts_faq '),' edit_item '=> __ (' Edit Item ',' tuts_faq '),' update_item '=> __ (' Update Item ',' tuts_faq '),' search_items '=> __ (' Search Item ',' tuts_faq '),' not_found '=> __ (' Not found ',' tuts_faq '),' not_found_in_trash '=> __ (' No se encuentra en la Papelera ',' tuts_faq '),); $ args = array (// use las etiquetas arriba de 'labels' => $ labels, // solo necesitaremos el título, el editor Visual y los campos de extractos de nuestro tipo de publicación 'support' => array ('title' , 'editor', 'extracto',), // vamos a crear esta taxonomía en la siguiente sección, pero necesitamos vincular nuestro tipo de publicación ahora 'taxonomies' => array ('tuts_faq_tax'), / / Hágalo público para que podamos verlo en el panel de administración y mostrarlo en el front-end 'public' => true, // muestre el elemento del menú bajo el elemento Pages 'menu_position' => 20, // show archives, si no necesita el shortcode 'has_archive' => true,); register_post_type ('tuts_faq', $ args);  // enganche en la acción 'init' add_action ('init', 'tuts_faq_cpt', 0);  if (! function_exists ('tuts_faq_tax')) // registrar la función de taxonomía personalizada tuts_faq_tax () // otra vez, etiquetas para el panel de administración $ labels = array ('name' => _x ('FAQ Categories', 'Taxonomy Nombre general ',' tuts_faq '),' singular_name '=> _x (' Categoría de preguntas frecuentes ',' Nombre singular de taxonomía ',' tuts_faq '),' menu_name '=> __ (' Categorías de preguntas frecuentes ',' tuts_faq '),' all_items '=> __ (' Todas las preguntas frecuentes sobre los gatos ',' tuts_faq '),' parent_item '=> __ (' Preguntas frecuentes sobre los padres Cat ',' tuts_faq '),' parent_item_colon '=> __ (' Preguntas frecuentes sobre los padres Cat: ',' tuts_faq '),' new_item_name '=> __ (' New FAQ Cat ',' tuts_faq '),' add_new_item '=> __ (' Add New FAQ Cat ',' tuts_faq '),' edit_item '=> __ (' Edit Preguntas frecuentes Cat ',' tuts_faq '),' update_item '=> __ (' Update FAQ Cat ',' tuts_faq '),' separate_items_with_commas '=> __ (' Separate items with commas ',' tuts_faq '),' search_items '= > __ ('Buscar Artículos', 'tuts_faq'), 'add_or_remove_items' => __ ('Agregar o quitar artículos', 'tuts_faq'), 'Choose_from_most_used' => __ ('Elegir entre los artículos más usados', 'tuts_faq '),' not_found '=> __ (' Not Found ',' tuts_faq '),); $ args = array (// use las etiquetas arriba de 'labels' => $ labels, // taxonomía debe ser jerárquica para que podamos mostrarla como una sección de categoría 'hierarchical' => true, // nuevamente, haga pública la taxonomía ( como el tipo de publicación) 'public' => true,); // el contenido de la matriz a continuación especifica qué tipos de publicaciones debe vincularse la taxonomía a register_taxonomy ('tuts_faq_tax', array ('tuts_faq'), $ args);  // enganche en la acción 'init' add_action ('init', 'tuts_faq_tax', 0);  if (! function_exists ('tuts_faq_shortcode')) function tuts_faq_shortcode ($ atts) extract (shortcode_atts (array (// category slug attribute - por defecto está en blanco 'category' => ", // contenido completo o atributo del extracto - defaults al contenido completo 'extracto' => 'falso',), $ atts)); $ output = "; // establece los argumentos de consulta $ query_args = array (// muestra todas las publicaciones que coinciden con esta consulta 'posts_per_page' => -1, // muestra el tipo de publicación personalizada 'tuts_faq' 'post_type' => 'tuts_faq', // muestra el publicaciones que coinciden con la babosa de la categoría de Preguntas Frecuentes especificada con el atributo del código abreviado 'tax_query' => array ('(taxonomía' => 'tuts_faq_tax', 'campo' => 'babosa', 'términos' => categoría $,)) , // informe a WordPress que no necesita contar el total de filas: este pequeño truco reduce la carga en la base de datos si no necesita la paginación 'no_found_rows' => true,); // obtener las publicaciones con nuestros argumentos de consulta $ faq_posts = get_posts ($ query_args); $ salida. = '
'; // manejar nuestro bucle personalizado foreach ($ faq_posts as $ post) setup_postdata ($ post); $ faq_item_title = get_the_title ($ post-> ID); $ faq_item_permalink = get_permalink ($ post-> ID); $ faq_item_content = get_the_content (); if ($ excerpt == 'true') $ faq_item_content = get_the_excerpt (). ''. __ ('Más ...', 'tuts_faq'). ''; $ salida. = '
'; $ salida. = '

'. $ faq_item_title. '

'; $ salida. = '
'. $ faq_item_content. '
'; $ salida. = '
'; wp_reset_postdata (); $ salida. = '
'; devuelve $ output; add_shortcode ('faq', 'tuts_faq_shortcode'); función tuts_faq_activate () tuts_faq_cpt (); flush_rewrite_rules (); register_activation_hook (__FILE__, 'tuts_faq_activate'); función tuts_faq_deactivate () flush_rewrite_rules (); register_deactivation_hook (__FILE__, 'tuts_faq_deactivate'); ?>

Margen de mejora

Mi cliente estaba feliz con los resultados cuando le mostré cómo usarlo. Pero aquí, podemos ampliar el código con más funcionalidad, como ...

  1. Efecto Acordeón: Si desea que sus secciones de preguntas frecuentes sean más atractivas con algunos efectos de alternancia, puede usar algunos complementos de jQuery excelentes. Si quieres usar la interfaz de usuario de jQuery, hay un increíble tutorial de Shane Osbourne que muestra cómo hacerlo..
  2. Paginación: Si tiene muchas preguntas y respuestas para una categoría y no desea mostrar todos los elementos a la vez, puede limitar el número de publicaciones cambiando el publicaciones por página en la consulta personalizada de nuestro código abreviado, y agregue el código requerido para los enlaces de paginación debajo de la línea con el wp_reset_postdata (); código. Recuerda quitar el 'no_found_rows' => true, línea, aunque - la paginación no funcionará si no eliminas eso!
  3. Pregunta aleatoria: Supongamos que desea mostrar una pregunta y respuesta aleatoria en la página de inicio y desea que cambie cada actualización de la página. Todo lo que necesita hacer es dirigirse a la consulta personalizada, cambiar la publicaciones por página parámetro de -1 a 1 Y añadir otra línea con el código. 'orderby' => 'random', y eres bueno para ir!

Conclusión

Así es como se crea un sistema simple de preguntas frecuentes en WordPress mediante el uso de tipos de publicación personalizados, taxonomías personalizadas y códigos cortos. Espero que hayas disfrutado de este tutorial y puedas utilizarlo en tu próximo proyecto. No olvides compartir el artículo, si te ha gustado.!

¿Tienes alguna idea para mejorar este sistema de preguntas frecuentes? Comparte tus comentarios a continuación!