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

Artículo escrito por:
  • WordPress
  • Actualizado: Feb 09, 2017

Hemos visto mucho antes 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, demostración y descarga

manifestación

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

Pero aparte de eso nuestro principal logro será el comprensión de WordPress Tipos de correos personalizados, códigos cortos, interacciones con el complemento JS / jQuery externo. Con esta idea, puedes crear muchas cosas basadas en otros complementos locos que puedes encontrar, este es solo el punto de partida para ti, querido Padawan.

So Aquí puedes encontrar la demo jQuery API para el componente que usaremos, pero lo realmente genial es el código que se usa para generar ese componente (PHP).

Ah, y por supuesto que puedes encontrar el archivos de plugin para descargar aquí también para que pueda instalarlo en su sitio WP.

Calentamiento - archivo de complemento y tipo de mensaje personalizado

En primer lugar, necesitamos 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 simplemente conectarse 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és 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 se puede desenchufar si lo desea.

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

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

Tenga en cuenta que el nombre del archivo debe ser único para que cuando alguien instale su complemento (incluso usted mismo) no haya 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 principio de su archivo de complementos (justo después de <? Php):

meta_01

Lo que significa:

  • Nombre del complemento: el bonito nombre que se mostrará en la interfaz de los complementos de wp-admin>
  • 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 la interfaz de wp-admin> plugins. Mantenlo simple para que los usuarios recuerden para qué sirve
  • Autor / Autor URI: la persona / compañía 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

01-plugin-created

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 algo bueno, si algo estuviera mal ahora mismo verías un error. Vamos a pasar 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 que 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. ¿Lo tengo? Bien, esto te ahorrará muchos problemas hasta que podamos usar OOP (tal vez en el próximo tutorial).

La hechicería 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 de wp-admin. Así que WP sabrá la forma correcta de llamar a nuestros artículos.
  • admite: este le dice lo que puede ver en wp-admin> Preguntas 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".

admin-faq

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

Espera, eso es todo? Sí. 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 dejar el wp-admin, agregue algunos datos ficticios (algunas preguntas frecuentes con al menos categorías 2).

Front-End - WP x interacción jQuery

Ahora es el momento de ver algo de acción y usaremos Elemento de acordeón jQuery UI para esto.

jQuery UI tiene prácticamente las mismas ventajas que jQuery:

  • Muchos desarrolladores trabajando en ello.
  • Código de navegador cruzado y listo para dispositivos móviles
  • Bien documentada
  • Juega bien con WP (WP en sí los usa)

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

Hay 2 enfoques para esto:

  1. Las malas etiquetas <script> / <style> puras en tu wp_head
  2. El bonito 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 punto de nuestro código, inclúyelo en la página". De esta manera, WP puede comprobar 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 agradable chat en código?

Usando la función enqueue:

enqueue_02

El shortcode

Y ahora volvemos a la wp-admin. Tenemos los elementos de las preguntas frecuentes y la biblioteca para diseñar los elementos como queremos, ¿qué más falta? Bueno, tenemos que 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. El código corto es algo que agrega en su campo de contenido (para páginas, publicaciones, CPT, etc.) y WP realmente buscará una función para ejecutarlo. Hay tipos 2 de códigos cortos:

  1. [autocierre] - Me gusta las etiquetas <hr /> o <br /> este tipo de código abreviado simplemente llama a una función en algún momento: este es nuestro tipo
  2. [empaquetado] Contenido [/ empaquetado]: esta es como las etiquetas <p> </p> o <div> </div> y en realidad 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]

Guarda y visita esa página y mira qué pasa ...

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

Agregue esto en su archivo de plugin:

shortcode_02

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

Genial, ¿eh? Ahora puedes ver que se está ejecutando y el cielo es el límite para ti ahora. Lo que hace ese código es simplemente decirle a WP que hay un shortcode 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, necesitaremos lograr esta estructura para que se cree el panel de jQuery UI:

api_02

Y para eso crearemos un WP Query, carga nuestros artículos de preguntas frecuentes y sus contenidos. Reemplace la función de código corto con este:

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 a los 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”]
  • orden: ASC o DESC (DESC es la opción predeterminada) [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 (agregar opciones de exclusión con not_in)
  • Buscar (genial si quieres dar a los usuarios la posibilidad de buscar a través de ellos)
  • Campo personalizado (ya que los elementos de las preguntas frecuentes los tienen, puede usarlos para cargar elementos con campos y valores personalizados específicos)

Ahora es tu turno

Esto es solo un punto de partida para usted, como puede ver. Todos podemos aprender muchas otras cosas interesantes para mejorar este sencillo plugin, aquí hay algunas sugerencias para que profundices más:

  • Diseño Responsive
  • Creación de widgets
  • Plugin activar / desactivar ganchos
  • Internacionalización
  • programación orientada a objetos
  • 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?

Acerca de Rochester Oliveira

Soy un diseñador web y empresario de Itajubá (MG), Brasil. Me encanta escribir sobre temas oscuros y hacer cosas interesantes.