Cómo crear un complemento simple de preguntas frecuentes para WordPress

Ya hemos visto muchos consejos y herramientas de blogs. Bueno, hoy aprenderemos cómo crear una buena herramienta para tu blog: un complemento de página de preguntas frecuentes. Pero lo más importante no es solo el complemento en sí, sino lo que puede hacer con este principio. Aprenderá cómo almacenar cualquier tipo de datos en su sitio WP y cómo integrarlo con bibliotecas externas (como jQuery UI) creando componentes personalizados para su sitio. Empecemos!

La idea, demo & Descargar

manifestación

Nuestro objetivo aquí es crear un complemento que se pueda usar para muchas cosas, pero que se adapte bastante bien a las páginas de preguntas frecuentes.

Pero aparte de eso, nuestro principal logro será la comprensión de los tipos de publicaciones personalizadas de WordPress, códigos cortos, interacciones con el complemento externo JS / jQuery. Con esta idea, podría crear muchas cosas basadas en otros complementos locos que pueda encontrar, este es solo el punto de partida para usted, querido Padawan.

Entonces, aquí puede encontrar la demostración de la API jQuery para el componente que usaremos, pero lo realmente genial es el código que se usa para generar ese componente (PHP).

Calentamiento: archivo de complemento y tipo de publicación personalizada

En primer lugar, debemos crear un tipo de publicación personalizada para almacenar nuestros datos..

Los tipos de publicaciones personalizadas son una gran parte de la magia de WP, le permite crear un nuevo tipo de datos (como publicaciones, páginas, archivos adjuntos …) para que pueda llamarse y manipularse utilizando las funciones de WP. Esto puede parecer simple para los principiantes, pero solo los programadores PHP de antaño (¿sigue siendo una cosa?) Saben lo difícil que fue conectar y almacenar datos en su base de datos. Por no hablar de crear dinámicamente nuevos tipos de datos, esto es sutil pero permite una gran flexibilidad en nuestro código.

Para que tengamos esto, necesitamos un complemento, pero probablemente ya esté familiarizado con este concepto. Los complementos son como los bloques de Lego para WordPress, agregan o transforman la funcionalidad actual utilizando algún código que se puede conectar fácilmente (¡duh!) O también desconectar si lo desea.

Para crear un complemento de manera que WP lo reconozca, necesita 2 cosas:

  1. Cree un archivo dentro de su wp-content / plugins /
  2. Agregue metadatos al comienzo de ese archivo para que WP pueda entender de qué se trata

Tenga en cuenta que el nombre del archivo debe ser único, de modo que cuando alguien instale su complemento (incluso usted mismo) no habrá conflictos con los complementos actuales. En nuestro caso para una mejor organización, agregaremos una nueva carpeta con el nombre faq-whsr, y dentro de ella un archivo llamado faq-whsr.php.

Ahora para la metada, simplemente agregue algo como esto al comienzo de su archivo de complementos (justo después <?php):

meta_01

Lo que significa:

  • Nombre del complemento: el bonito nombre que se mostrará en su wp-admin > interfaz de complementos
  • URI del complemento: si desea agregar un enlace a la página de su complemento (documentos, ejemplos, página de ventas)
  • Descripción: este es el pequeño párrafo que se muestra en su wp-admin > interfaz de complementos. Hazlo simple para que los usuarios recuerden para qué sirve
  • Autor / Autor URI: la persona / empresa que creó el complemento y un enlace para créditos
  • Licencia: para que los usuarios sepan lo que pueden / no pueden hacer con su complemento

Ok, ahora tenemos nuestro complemento creado, agregamos algunos metadatos relevantes. Tan pronto como guarde su archivo de complemento, debería poder verlo en su interfaz wp-admin

Vamos a activarlo y ver qué pasa.

Espera nada? Bueno, eso es bueno, si algo estuviera mal en este momento verías un error. Pasemos a nuestra creación de tipo de publicación personalizada ahora.

En nuestro caso, el CPT es un elemento de preguntas frecuentes, pero puede crear libros, videos, testimonios, etc. Lo importante a tener en cuenta aquí es: los nombres de las funciones deben ser únicos. Repita conmigo ahora: los nombres de las funciones deben ser únicos, los nombres de las funciones deben ser únicos. ¿Entendido? Bien, esto te ahorrará muchos problemas hasta que podamos usar OOP (tal vez en el próximo tutorial).

La magia se realiza con este código:

cpt

Y esto es lo que significan las partes relevantes:

  • $ labels – es una matriz con las etiquetas y el texto para diferentes secciones de su área wp-admin. Entonces WP sabrá la forma correcta de llamar a nuestros artículos
  • admite: este le dice lo que puede ver en el wp-admin > Preguntas más frecuentes > nueva pantalla En nuestro caso, tendremos el título, el editor (el cuadro de contenido principal), el autor, las revisiones y los campos personalizados (en caso de que los desee).
  • taxonomías: aquí le dice a WP qué taxonomías están permitidas (categorías, etiquetas o taxonomías personalizadas)
  • register_post_type (‘faq_whsr ‘, $ args): esto le dice a WP” Oye, crea un nuevo tipo de publicación personalizada con el ID como faq_whsr usando los argumentos de $ args “.

Guárdalo y aguanta la respiración. Debería ver ahora una nueva sección en su menú principal de wp-admin

Espera, eso es todo? Si. Ese fragmento crea toda la funcionalidad CPT. Si no encuentra esto genial, espere a que se enfríe en la siguiente sección.

Antes de abandonar wp-admin, agregue algunos datos ficticios (algunas preguntas frecuentes con al menos 2 categorías).

Front-End: interacción WP x jQuery

Ahora finalmente es hora de ver algo de acción y usaremos el elemento jQuery UI Accordion para esto.

jQuery UI tiene más o menos las mismas ventajas que jQuery:

  • Muchos desarrolladores trabajando en ello
  • Código cruzado y listo para dispositivos móviles
  • Bien documentada
  • Funciona bien con WP (el propio WP los usa)

La pregunta ahora es: ¿cómo lo llamamos??

Hay 2 enfoques para esto:

  1. El mal puro / tags en tu wp_head
  2. El buen wp_enqueue

No perderemos demasiado tiempo con el enfoque incorrecto hoy, pero el bueno básicamente es decirle a WP “Hola amigo, necesitaremos jQuery UI en algún momento de nuestro código, inclúyalo en la página”. De esta forma, WP puede verificar si alguien más lo ha incluido o si ha incluido una versión diferente y evitar muchos problemas con las bibliotecas duplicadas. Ok, cómo traducir ese lindo chat en código?

Usando la función enqueue:

enqueue_02

El shortcode

Y ahora volvemos a la wp-admin. Tenemos los elementos de preguntas frecuentes y tenemos la biblioteca para diseñar los elementos como queramos, ¿qué más falta? Bueno, necesitamos llamar a los artículos.!

Tenemos muchas opciones para esto, pero la más fácil para este caso es crear un código corto. Shortcode es algo que agrega en su campo de contenido (para páginas, publicaciones, CPT …) y WP realmente buscará una función para ejecutarlo. Hay 2 tipos de códigos cortos:

  1. [autocerrado] – Me gusta etiquetas o
    este tipo de shortcode solo llama a una función en algún momento: este es nuestro chico
  2. [envuelto] Contenido [/ envuelto] – Este es como etiquetas

    o y realmente puede transformar su contenido, o usar el contenido como argumentos.

Veamos cómo funciona entonces. Cree una nueva página en su wp-admin y agregue este código allí:

[faq-whsr]

Guarde y visite esa página y vea qué sucede …

Es broma, no hará nada, ¿verdad? Bueno, eso es porque todavía no hemos creado una función para ello..

Agregue esto en su archivo de complemento:

shortcode_02

Ahora actualiza tu página y prometo que sucederá algo realmente genial.

Genial, ¿eh? Ahora puedes ver que se está ejecutando y que el cielo es el límite para ti ahora. Lo que ese código hace es decirle a WP que hay un código corto que se llama [faq-whsr] y si WP lo encuentra, WP debería ejecutar una función en ese punto de la página.

En nuestro caso, tendremos que lograr esta estructura para que se cree el panel jQuery UI:

api_02

Y para eso crearemos una consulta WP, cargaremos nuestros elementos de preguntas frecuentes y sus contenidos. Reemplace la función shortcode con esta:

shortcode-basic_02

Ok, ahora se llamarán a tus preguntas frecuentes. Lo que hemos hecho es llamar a wp_query para llamar a nuestro tipo de publicación personalizada, y luego pasarlo al código de retorno para que WP los muestre a todos siguiendo la estructura deseada.

Está bien pero falta algo, ¿verdad? ¿Qué hay de algunas opciones allí? Bueno, podemos agregar opciones para un shortcode, veamos cómo crear algunos argumentos WP_Query en nuestro shortcode:

shortcode-final_02

De esta manera, puede llamar elementos utilizando los siguientes argumentos (puede combinar tantos como desee):

  • cat – Id. de categoría (múltiple agregado como matriz) [faq-whsr cat = 1]
  • category_name – nombre de categoría [faq-whsr category_name = ”food”]
  • order – ASC o DESC (DESC es el valor predeterminado) [faq-whsr order = ”ASC”]
  • orderby – cambia los criterios para ordenar artículos [faq-whsr orderby = ”title”]
  • posts_per_page – cambia el número de elementos cargados [faq-whsr posts_per_page = 5]

Pero como dije, el cielo es el límite para ti, mi amigo. Aquí hay algunas opciones para WP_Query que podría implementar y usar:

  • Autor
  • Categoría (agregando opciones de exclusión con not_in)
  • Buscar (genial si quieres darles a los usuarios la posibilidad de buscar a través de ellos)
  • Campo personalizado (dado que los elementos de preguntas frecuentes los tienen, puede usarlos para cargar elementos con campos y valores personalizados específicos)

Ahora es tu turno

Este es solo un punto de partida para usted, como puede ver. Todos podemos aprender muchas otras cosas interesantes para mejorar este simple complemento, aquí hay algunas sugerencias para que profundice:

  • Diseño de respuesta
  • Creación de widgets
  • Complemento activar / desactivar ganchos
  • Internacionalizacion
  • OOP
  • Poner en cola solo si es necesario (para ciertas páginas)

¡No olvides dejar tus pensamientos en los comentarios! Y este es nuestro desafío para usted: ¿es posible aplicar una opción de “elemento predeterminado” para el shortcode (de modo que cuando se cargue la página se abrirá otro elemento, que no es el primero)? Como lo harias?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me