7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Creando un plugin de WordPress personalizado de "búsqueda por categoría"

Scroll to top
Read Time: 18 mins

Spanish (Español) translation by Andrea Jiménez (you can also view the original English article)

Con una cantidad cada vez mayor de contenido creado en tu sitio de Wordpress, tus usuarios inevitablemente necesitarán buscar en tu sitio para encontrar ese artículo útil específico de hace mucho tiempo. Para ayudar a reducir los resultados de la búsqueda, te mostraré cómo codificar un plugin que le permita al usuario buscar según la categoría.

Este tutorial incluye un screencast disponible para los miembros de Tuts+ Premium.

El primer paso en el desarrollo de nuestro plugin es decidir el conjunto de características que tendrá, además de la cantidad de personalización disponible. Queremos que nuestro plugin tenga las siguientes características y permita la personalización completa del usuario:

  1. Reconfigura la búsqueda según la categoría seleccionada
  2. Lista desplegable de categorías
  3. Capacidad de ocultar categorías sin publicaciones de la lista
  4. Capacidad de excluir categorías secundarias de la lista
  5. Opción para desactivar nuestro estilo incorporado
  6. Capacidad de excluir categorías específicas de la lista
  7. Capacidad de usar valores personalizados en el cuadro de búsqueda
  8. Capacidad de utilizar un valor personalizado para la selección "En todas las categorías"

Creación del esqueleto para el plugin

Antes de que podamos hacer algo con nuestro plugin, primero necesitamos construir el esqueleto para que el plugin funcione. Comenzaremos creando una nueva carpeta en el directorio "plugins" de Wordpress (/wp-content/plugins) y la titularemos "search-by-category" (por convención, todas las carpetas de plugins deben estar todas en minúsculas y usar guiones en lugar de espacios para que al enlazar a archivos en las URL de la carpeta sean fácilmente legibles por el ojo humano). Crea un nuevo archivo PHP en la carpeta titulada "sbc.php", este archivo servirá como base para toda nuestra estructura de plugins. Después, rellena el plugin con la información de Wordpress requerida para que aparezca en nuestro panel WP-Admin.


Configurar la página Opciones

Ya que Wordpress está reconociendo nuestro plugin, podemos comenzar nuestro desarrollo. Lo primero que tenemos que hacer es configurar una página de Opciones para que podamos dejar que el usuario configure nuestro plugin a su gusto. Cómo funciona esto es un proceso de tres pasos:

Primero creamos una clase para que todas nuestras configuraciones operen dentro.

En segundo lugar, ejecutamos una función para crear la página de configuración.


Configuración de la personalización

Ya que tenemos nuestra página de configuración, podemos comenzar a agregar nuestras opciones de configuración para que las apliquemos más adelante en el plugin. Para mostrar nuestra página de configuración tendremos que crear una nueva función llamada "config_page()" la cual rellenaremos con el resto del código de nuestra sección de administración. Primero, escribiremos el HTML para todas nuestras secciones.

Notarás que ya estamos usando PHP para hacer referencia a las variables: $search_text, $focus, $hide_empty, $exclude_child, $sbc_style y $raw_excluded_cats (en la función "wp_category_checklist"). Crearemos y expandiremos estas variables en el siguiente paso.


Screencast completo


Agregar nuestras opciones a la base de datos

Ya que la página de administración está en funcionamiento, podemos comenzar a usarla para agregar opciones a la base de datos. Para hacer esto, simplemente crearemos una variable antes de "if ( ! class_exists( 'SBC_Admin' ) ) {" y luego usa la función de Wordpress "add_option('entry-title','value')" para insertarla en la tabla de wp_options de la base de datos. Esta es la lista de las variables que usaremos en nuestro plugin:

  • $focus: el texto predeterminado que el espectador ve en la lista desplegable de selección
  • $hide_empty: verdadero o falso, elimina categorías con 0 publicaciones del menú desplegable
  • $excluded_cats: una matriz separada por comas de las categorías excluidas
  • $raw_excluded_cats: matriz de las categorías excluidas
  • $search_text: el texto predeterminado en el cuadro de búsqueda del formulario
  • $exclude_child: verdadero o falso, elimina las categorías secundarias del menú desplegable
  • $sbc_style: verdadero o falso, usa la hoja de estilo SBC personalizada

Ya que tenemos nuestros valores predeterminados establecidos y agregados a la base de datos, podemos usar la función "get_option('entry-title')" de Wordpress en nuestra función config_page para que nuestros valores se reflejen dentro de los formularios.

Ahora que nuestra página Opciones está usando los datos de la base de datos, configuraremos el proceso de actualización. Para empezar, iniciaremos una nueva instrucción if comprobando si nuestro botón enviar está configurado. Después compararemos nuestro wpnonce para verificar que el usuario visitó la página antes de intentar actualizar las opciones. Luego ejecutaremos otra instrucción if para verificar y asegurarnos de que la corriente pueda cambiar la configuración ejecutando la función WP "current_user_can ('manage_options')", si no puede, entonces eliminaremos el script.

Ahora actualizaremos las variables que definimos anteriormente con el valor de entrada del formulario. Dado que estamos usando casillas de verificación para la lista de categorías excluidas, la mejor manera de obtener el retorno que queremos de ella es declarar otra instrucción if y verificar que "post_category" (el id dado a la lista por la función WP) está configurado. Si está presente, entonces tomaremos su forma sin procesar y colocar de nuevo en la variable "$raw_excluded_cats" de antes para que las casillas de verificación permanezcan marcadas. También usaremos esos mismos valores de retorno para crear una matriz "bonita" separada por comas para su uso posterior agregando un valor extra al inicio de la matriz (esto es una solución para un problema técnico más adelante en otra función) y luego implosionar la matriz.

Debido a la naturaleza misma de las casillas de verificación, solo tienen un valor de retorno si están marcadas, por lo que debemos escribir una captura para cuando no estén marcadas. Para hacer esto, usaremos una declaración if simple que verifique si nuestras variables están vacías (ya que no hay un valor de retorno del formulario para llenarlo), si está vacío, configuramos el valor en "0" (falso).

Ahora nuestro último paso es actualizar la base de datos con nuestros nuevos valores utilizando la función de Wordpress "update_option('entry-title','new-value')". También ajustaremos los valores que estamos insertando en la base de datos con la función mysql_real_escape_string() para ayudar a prevenir cualquier inyección de SQL.


Nuestro código hasta ahora:


Crear el formulario

Ahora que tenemos nuestro back-end todo configurado y listo para implementar, es hora de comenzar a escribir el formulario del front-end que todos los visitantes verán y usarán. Para que nuestro usuario pueda colocar nuestro formulario en el lugar que quiera de su sitio, encerraremos nuestro formulario dentro de una nueva función titulada "sbc()" colocada justo fuera de nuestra declaración de la clase. Los primeros bytes de código que necesitamos agregar son declarar un $wp_query global y $post para que podamos tener acceso a esas funciones si lo queremos más adelante, pero para nuestros propósitos no los necesitaremos. El siguiente paso es volver a obtener los valores de nuestras variables de la base de datos.

Una vez que hayamos hecho eso, podemos crear otra variable llamada "$list" con su valor siendo la función WP wp_dropdown_categories($settings) (lee más sobre esta función aquí). Esa variable "$settings" es donde se aplica la mayor parte de nuestra personalización.

Ya que la lista desplegable del formulario está configurada, podemos crear otra variable, "$form" que sostendrá nuestro formulario HTML a través de un preprocesador de hipertexto. Luego haremos eco de nuestra nueva variable $form.


Agregar el estilo personalizado

Anteriormente le dimos al usuario la opción de usar nuestro estilo personalizado para el formulario. Si dejaron esta opción habilitada en el menú de configuración, necesitamos agregar nuestra hoja de estilo al encabezado. La forma más fácil de hacerlo es crear una nueva instrucción if comprobando que nuestra variable "$sbc_style" sea verdadera (en nuestro código: 1). Dentro de esa comprobación, agregaremos una nueva función "style_insert()" que repite la URL de nuestra hoja de estilos. También en el if (pero fuera de la función), escribiremos en una nueva acción para "wp_head" para agregarla en nuestra función "style_insert()".

En cuanto a nuestro estilo, crea un nuevo archivo llamado sbc-style.css rellénalo con:

En Safari notarás que el triángulo descendente estándar falta en nuestro cuadro desplegable, esto se debe a que usamos -khtml-appearance: none en el menú desplegable para evitar que safari obligue a su tema "nieve". Una forma de solucionar esto es usar un carácter HTML para simular el triángulo, y resulta que hay uno muy similar llamado "∇ Nabla". Usaremos una combinación de espacios, espacios de no separación y este nabla en la configuración desplegable para solucionar este problema.


Devolver los resultados de la búsqueda

Una vez que tenemos nuestro formulario listo y funcionando, finalmente podemos comenzar a obtener los resultados de búsqueda que buscamos para nuestros visitantes. Para empezar, crearemos una nueva función llamada return_only_selected_category(), en la que crearemos una nueva instrucción if comprobando que nuestro botón de envío de búsqueda está configurado. Dentro de eso necesitamos crear un nuevo $wp_query global. A continuación, tomaremos el retorno de categoría seleccionado y lo colocaremos en una variable llamada $desired_cat. En caso de que el usuario seleccionara la opción para todas las categorías, necesitamos ejecutar una comprobación para el valor "*" y restablecerlo a "".

Ahora necesitamos crear otra variable, $excluded, cuyo valor es la función WP get_categories(). Agregaremos 2 argumentos a esta función. El primero es "hide_empty=false" para que todas las categorías se incorporen a la lista, y el segundo es "exclude={$desired_cat}" para que cualquier categoría de la que el usuario quiera ver las publicaciones se elimine de la lista.

Una vez configurada esa variable, finalmente podemos hacerla para que solo los mensajes de la categoría seleccionada aparezcan en los resultados. Para este efecto, modificaremos las variables de consulta para que Wordpress elimine publicaciones de todas las categorías que enumeramos (y da la casualidad de que tenemos una variable llena de categorías para excluir).

Al agregar un guión delante de la lista de categorías, le estamos diciendo a Wordpress que las elimine de la consulta. Un método muy eficaz para nosotros. Ahora lo único que queda por hacer es agregar un nuevo filtro WP para "pre_get_posts" agregando nuestra nueva función.


Cómo insertar nuestro formulario


Nuestro código terminado

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.