Cómo agregar filtros de publicación a su sitio de WordPress fácilmente

Una solicitud frecuente con la que me encuentro es la capacidad de permitir que los usuarios filtren u ordenen las publicaciones en el front-end de su sitio web.

¿Quizás los usuarios quieran ver las publicaciones en orden alfabético, o tal vez ver solo las publicaciones con miniaturas? Esto ya tiene sentido para publicaciones regulares, pero puede ser aún más significativo en el caso de productos, fotos u otros tipos de contenido.

En el proyecto de fin de semana de WordPress de hoy, le daré un resumen rápido de cómo puede implementar una función como esta en el tema Twenty Fifteen. ¡Pongamos manos a la obra!

• Crear un tema hijo
• Creación de controles
• Modificación de la consulta
• Formularios más inteligentes
• Comportamiento de WordPress
• Conclusión

Crear un tema hijo

Como siempre, necesitas un tema hijo. Tenemos una guía de temas secundarios aquí mismo en WPMU DEV, le recomiendo que la lea si no está familiarizado con los temas secundarios.

Creación de controles

Agreguemos tres controles: uno para ordenar las publicaciones, otro para establecer la dirección de clasificación y otro para mostrar solo las publicaciones con miniaturas.

El primer paso es copiar el index.php del tema principal en nuestro tema secundario.

Abra el archivo index.php en su tema hijo y pegue el siguiente código HTML debajo del contenedor principal (que debería estar en la línea 20):

Y así es como se ve en el front-end:

Como podéis ver nos falta un poco de estilismo. Resolvamos eso agregando algunos estilos a la hoja de estilo:

Una reacción que escucho con frecuencia de los recién llegados a la programación es: "¿cómo supo que estos son los estilos que harán que se mezcle con el tema?"

La solución es bastante simple: hago trampa. Utilizo las herramientas de desarrollo en Chrome para inspeccionar los elementos regulares del artículo. En este caso, me permitió ver cómo los elementos obtienen su sombra de caja y sus márgenes y simplemente apliqué estas reglas a mi propio elemento.

Modificación de la consulta

Seleccionemos "ordenar por título", "ascendente" y "publicaciones con miniaturas" y enviar el formulario. En realidad, debería ver un cambio sin hacer nada en el código.

Para ver por qué, inspeccionemos la URL. Debería ser algo como esto:

 http://tudominio.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed

Los fragmentos de información se pueden recuperar en nuestros scripts PHP usando la variable $_GET . WordPress ya sabe lo que significan los parámetros order y orderby y los usa en la consulta predeterminada. Como resultado, si solo necesitamos ordenar y ordenar la dirección, en realidad ya hemos terminado.

Todo eso es genial, pero de nuevo, ¿cómo supe esto? Podría haber usado "order_by" como parámetro en lugar de "orderby". En este caso WordPress no capta nuestras intenciones. Eché un vistazo a la documentación de WP_Query en el Codex de WordPress, donde hay un montón de parámetros, muchos de los cuales se pueden usar en las URL.

Ahora, implementemos nuestro parámetro de miniatura de publicación. Una publicación tiene una miniatura si tiene metadatos con la clave _thumbnail_id asociada. Tendremos que modificar nuestra consulta para asegurarnos de que esto se tenga en cuenta. Hagamos esto ahora con query_posts() .

Pegue el siguiente código sobre la función get_header() en la parte superior del archivo:

Fusionamos los parámetros de la consulta original con nuestro propio parámetro nuevo, lo que da como resultado un conjunto diferente de publicaciones. Nuestro formulario ahora funciona pero no recuerda nuestras selecciones. Arreglemos eso reescribiendo nuestro formulario y usando algo de PHP.

Formularios más inteligentes

Además de listar todas las opciones del orden por selector necesitamos una forma de indicar cuál está seleccionada. Si hiciéramos esto sin un bucle, se vería así:

¿Entiendes algo de eso? ¡No te culpo! Dentro de cada opción estamos comprobando si el valor actualmente seleccionado es igual al valor de la opción. Si es así, mostramos la propiedad seleccionada. Hagamos esto mucho más limpio con un bucle:

Esto es un poco más largo, pero solo porque tenemos tres opciones. Este es un formato mucho mejor para administrar cualquier tipo de selección. Extendamos esto a todo el formulario:

Todo listo. El formulario ahora debería recordar nuestras selecciones basadas en las variables $_GET en la URL.

Comportamiento de WordPress

¿Recuerdas que mencioné que sé usar "order" y "orderby" porque miré la documentación de WP_Query? Esta es una buena práctica, pero puede conducir a resultados inesperados. Encuentre el slug de una categoría que tenga, digamos que esta categoría es "wordpress".

Ahora use la siguiente URL: http://yourwebsite.com/?category_name=wordpress. Debería ver el archivo de su categoría, enumerando todas sus publicaciones de WordPress. Esto está bien, pero tenemos dos problemas:

Si tiene activados los enlaces permanentes bonitos (que debería), la página se ha redirigido a una nueva URL, muy probablemente http://yourwebsite.com/category/wordpress. Nuestros filtros no estarán visibles porque el archivo archive.php maneja esta vista, no index.php . Además, nuestro nombre de categoría no se pasa como un parámetro de URL, por lo que necesitaremos usar algunos trucos adicionales para que nuestros filtros funcionen.

La forma abreviada de hacer que esto funcione es no usar deliberadamente los mismos parámetros que usa WordPress. Puede pasar el nombre de la categoría usando el parámetro catname en la URL ya que WordPress no se dará cuenta de esto. Luego puede enviar esto a la consulta usando el nombre de parámetro correcto. Algo como esto:

La alternativa sería usar una función en lugar de mostrar nuestro formulario en index.php tal como está. Debería detectar la categoría de la consulta de WordPress y mostrar la selección actual en función de eso.

Conclusión

Agregar sus propios filtros no es tan difícil, pero requiere un poco de manipulación. En nuestro caso, es posible que desee asegurarse de que se elimine la paginación cuando el orden se establece en aleatorio. Podría ser reemplazado por un botón de "mostrar más aleatoriedad", que simplemente vuelve a cargar la página.

Con suerte, este artículo le ha dado los conceptos básicos de cómo puede lograr esto por sí mismo y podrá crear los filtros que necesita.

• proyectos de wordpress de fin de semana