I wanna be a wordpress rockstar PARTE IV

Llegó la hora de la verdad: ¿cómo mostrar la información de nuestro post type personalizado? (si no tienes idea de qué estoy hablando, pásate por la PARTE I, PARTE II y PARTE III de esta guía).

Existen múltiples maneras de hacerlo, la manera tradicional es hacerlo a través de funciones de wordpress que no son más que «envoltorios» o wrappers para no realizar consultas «duras» a la base de datos, estas «envolturas», realizan muchas funciones útiles de por medio, como los filtros por url, internacionalización, y en general toda la «magia» de wordpress.

Para nosotros que estamos enfocados en este momento en ser rockstars sin escribir código, no nos vale el método antes mencionado, ya que requiere un conocimiento previo de la gran cantidad de funciones que puedes ver en codex.wordpress.org.

Entonces nos queda tomar una decisión: ¿cómo simplificamos la visualización de contenido personalizado sin usar PHP?; Como ya te vendrás anticipando necesitaremos usar un plugin. Pero no cualquier plugin, uno que realmente nos sirva para mostrar de la mejor manera nuestro contenido.

Tu «content builder» favorito podrá mostrar algunos campos básicos del post type que hemos creado, como el título o el contenido, además de sus taxonomías. Sin embargo, esto no nos sirve para generar una «página» personalizada para nuestras propiedades.

Aquí es donde para continuar con esta guía, tomaré la siguiente decisión que espero que compartas (la cual también justificaré). Usaremos un plugin de pago que forma parte de la suite Toolset, llamado Views. El plugin es algo «caro» en comparación a los precios que usualmente vemos en la red. Sin embargo como rockstar y para llegar a este nivel de personalización, puedes perfectamente cargar el costo de plugin a alguno de tus proyectos, si el costo de tu proyecto no resiste una inversión menor como esta, entonces estás en camino a ser un verdadero rockstar, pero rockstar de kermés  🙂 🙂 🙂

Si estás sólo probando y practicando, puedes usar alguna versión pirateada «descargada de internet sin fines de lucro», que te aseguro existe para versiones de wordpress inferiores a la 4.2.3 (ojo con esto, ya que la última versión de wordpress, introdujo cambios de seguridad que hacen obligatorio actualizar a la versión de views liberada el día de hoy 30/07/2015, por lo que la versión comentada anteriormente deberás instalarla en un wordpress 4.2 o inferior, siempre con fines educacionales 🙂 ).

No me voy a detener en la instalación de Views, ya que es idéntica a la instalación de cualquier plugin, sí me voy a detener un poco en explicar 2 conceptos de «Views» que nos servirán para entender mejor cómo y cuándo crear e intervenir plantillas en nuestro template, ya que Views se jacta de «funcionar» con cualquier template.

Antes de partir con el plugin Views, me detendré un poco en explicarte cómo wordpress muestra el contenido de tu sitio, a través de los distintos archivos de plantilla.

Cuando tu llamas a una dirección en un sitio web de wordpress, en realidad lo que haces es a través de la URL llamar a una sección de contenido de wordpress, que tal como lo vimos anteriormente puede ser un POST (de cualquier tipo), o una TAXONOMY. La estructura del «link» o url, dependerá de lo que hayas configurado en el menú de ajustes sección «Enlaces Permanentes».

Por defecto (y cuando no está mod_rewrite activo en el servidor de webhosting, o cuándo no has configurado el archivo .htaccess) se muestran las URL al estilo http://www.manuelbriones.cl/?p=123, donde el número corresponde al ID del post en la base de datos, así de directo.

Así como puedes llamar a los ID de los posts, también se pueden llamara a las categorías, tags, post personalizados y taxonomías personalizadas; por lo tanto wordpress cuando «recibe» una petición a través de la barra de navegación del usuario, compara con su información almacenada y discierne lo siguiente:

  • ¿Qué me están pidiendo?, puede ser UN POST en específico (con su respectivo ID o slug), o pueden ser VARIOS POST «agrupados» bajo una categoría, un tag (etiqueta), o una taxonomía personalizada (como las nuestras que son Tipos de Contratos y Tipos de Propiedades).
  • Una vez que detecta qué es lo que se está pidiendo, BUSCA de acuerdo a un orden lógico preestablecido por wordpress en la carpeta de tu template, el archivo que más se acerque al contenido que se está solicitando.

La plantilla «comodín» para todo es index.php; un template podría construirse con un mínimo de 3 archivos (index.php, style.css y functions.php), y podría funcionar perfectamente, obviamente no es lo óptimo, pero sirve para explicar el funcionamiento de la visualización del contenido y su posterior aplicación en Views.

El orden lógico preestablecido que mencionamos, se resume en esta gráfica publicada en codex.wordpress.org. A lo que wordpress le llama «template hierarchy» (jerarquía de plantilla).

Puede ser un poco complejo de leer por primera vez el gráfico, yo recomiendo leerlo de derecha a izquierda, así se hace más fácil su comprensión, por ejemplo si tenemos UN POST (como lo es este artículo), wordpress en «último lugar» usará index.php, luego si existe un archivo single.php, ese es el que usará, pero si antes de eso existe un single definido específicamente para un post type (como podría ser single-propiedades.php), pues será ese el usará, y si antes de eso existe un single-id.php, donde id es el id del post, pues se usará esa plantilla. ¿Ves que no era tan difícil?.

Ahora tenemos que tener claro que una misma entrada o post, puede visualizarse desde distintas plantillas, por esto he explicado lo anterior, para que tengas la mente abierta a entender que una «propiedad» puede visualizarse directamente a través de una página singular como «single.php» o a través de una personalizada como «single-propiedades.php» o a través de la vista de una taxonomía como «Tipos de Propiedades» o «Tipos de Contratos».

Afortunadamente Views nos facilita tremendamente esta manera, «interviniendo» directamente en las consultas de wordpress para mostrar «porciones de templates» en el momento «exacto».

De esta manera Views nos provee 2 tipos de «Plantillas» que podemos utilizar de distinta manera:

  • Views (a secas)
  • Content Templates

La diferencia entre una y otra, es que una «View» sencilla, permite mostrar contenido que nosotros definamos en cualquier parte, blog, página incluso en un widget a través de un shortcode autogenerado por el plugin. Con esto podemos insertar una vista de propiedades destacadas en el home de nuestro sitio sin mucho esfuerzo.

En el caso de las «Content Templates», son aquellas plantillas que intervienen por completo el contenido de una plantilla, «reemplazando», todo lo que sería «the_content()» por la plantilla definida en Views. Es especialmente útil para configurar los estilos de páginas únicas para nuestros Post Types.

Si tomamos el ejemplo del Post Type propiedades; tenemos un template desarrollado por un tercero, y queremos tener nuestro propio diseño para cada propiedad que vayamos a visualizar.

Sería improcedente crear una página para cada propiedad y en ella insertar el shortcode de una view. Para esto creamos una «Content Template» que nos permitirá definir una misma plantilla para todo el contenido bajo un Post Type o Taxonomy. ¿Demasiado bueno no crees?.

Crear una «View» para insertar en el home de nuestro sitio web

Hasta que llegó el momento: ahora vamos a crear una «View» que nos permita generar un shortcode para pegar en algún lugar de nuestra homepage. Este shortcode a su vez mostrará toda la representación gráfica que generemos de las últimas propiedades en venta o arriendo a través de esta vista.

Esta será la «view» más sencilla que haremos, pero no por eso menos útil ni poderosa.

Vamos al menú de Views, luego a la opción Views y presionamos en el botón Agregar Nueva View.

Llama la atención de inmediato un cuadro de diálogo que nos pregunta qué es lo que queremos mostrar en la nueva «View»:

Captura de pantalla nueva view plugin wordpress

Este cuadro de diálogo, es una especie de asistente para no tener que configurar manualmente todos los parámetros de la vista al ingresar al plugin, sino que carga ciertos parámetros predefinidos para hacer más fácil aún la tarea de crear una view.

Para nuestra homepage, nos viene como anillo al dedo utilizar la tercera opción que es «Mostrar los resultados como una presentación», ya que Views automáticamente genera una vista tipo «carrusel» con las entradas que nosotros indiquemos, dando de inmediato un aspecto dinámico al contenido, y sin casi escribir tags de html ni funciones de javascript.

Marcamos la opción y le damos un nombre descriptivo a la View.

Ahora nos encontramos con la página de configuración de la View, aquí se controlarán todos los parámetros de la vista que estamos generando, desde qué tipo de contenido, hasta la forma en que se va a presentar (en tablas, divs, o como se te antoje).

Nota especial para temas que soportan Bootstrap (¿no sabes lo que es Bootstrap?, visita http://www.getbootstrap.com para más información): Views soporta utilizar sus grillas y presentaciones utilizando los estilos propios de Bootstrap (col, row, etc), sin embargo debes indicarle a Views en el menú configuración del mismo cuál es la versión de Bootstrap que está soportada por tu template.

La primera sección de la página de configuración de la view, se refiere directamente al tipo de contenido que se mostrará a través de esta vista, como ya lo habíamos creado anteriormente, seleccionamos nuestro post type propiedades.

Captura crear view usando plugin Toolset views

 

Al presionar un tipo de entrada, se habilitan las opciones de consulta a esta información, aquí podríamos definir sólo propiedades en arriendo, o en venta, o en base a algún otro parámetro que nosotros establezcamos. Para los efectos de esta primera View, no utilizaremos ningún filtro, sino que sólo mostraremos las entradas de este post type (las propiedades) ordenadas por fecha, desde la más reciente a la más antigua:

Seleccion de filtro para post type personaliado en Views

 

Posteriormente, Views nos mostrará las opciones de paginación de los datos; la paginación es necesaria cuando tienes «más información que mostrar», y qué mejor que gestionarlo automáticamente, si dejamos las opciones por defecto de la transición automática, podemos elegir el tipo de transición (efecto), la duración y la cantidad de resultados por página que hará automáticamente Views.

En este caso, si tenemos 10 propiedades que mostrar, habrán 2 especies de slides de propiedades con 5 por cada «slide», con un efecto de desvanecimiento que dura medio segundo.Selección paginación post type personalizado wordpress

 

El resto de las secciones que vienen más abajo, permiten controlar la manera en que se muestra la información de esta vista al usuario (qué se muestra y dónde se muestra).

La primera sección se refiere a los «filtros»; los filtros en views se refiere a todos los controles que permiten realizar la paginación (saltar de una página de resultados de propiedades a otra), y los filtros de búsqueda si es que se han creado (nosotros no lo hemos hecho esta vez).

Cada «shortcode» especial que aparece en estas secciones, es para deliminar los contenidos, en el contenido por defecto, cualquier cosa que pongamos dentro del shortcode «[wpv-filter-controls][/wpv-filter-controls]», es lo que se mostrará en la sección de filtros de la vista.

Nosotros no agregaremos nada, pero si quieres experimentar, basta con posicionarte entre ambos bloques (el de inicio y el de cierre) y presionar el botón «Controles de Paginación», para utilizar algunas de las opciones que entrega el asistente.

Captura de pantalla filtros de Views de Toolset

 

La siguiente sección es una de las más importantes, y es la que controla el contenido completo de la Vista, es decir qué cosas vamos a mostrar de nuestro post type propiedades.

En esta sección se denomina «Resultado de bucle», ya que todo lo que se encuentre dentro de «<wpv-loop></wpv-loop>» se repetirá tantas propiedades tengamos, con un límite de 5 por «página» gracias a la configuración de paginación previa.

Si se fijan, por defecto sólo viene un shortcode que llama a una «view-template», esto se introdujo en las nuevas versiones de Views, ya que antes no existía; esta view-tempalte, simplemente es una plantilla adicional que se refleja en el contenido un par de líneas más abajo en el navegador. Se creó para poder reutilizar «plantillas» entre views. (suena algo complicado de entender, pero en la práctica verás que es sencillo, se creó con el fin de no tener que reescribir HTML común entre varias Views (es como «la view de la view» 😛 )).

Esta «view-template», lo único que muestra en este momento, es un link represtando por su shortcode de views «[wpv-post-link]» (puedes agregar y quitar información usando el botón Campos y Vistas, quien genera automáticamente este tipo de shortcodes especiales de views).

Como nosotros queremos mostrar algo más elaborado, con estilo y con los campos que necesitemos, vamos a eliminar de <wpv-loop> el llamado a la view-template y en su lugar presionaremos el botón «Asistente de Bucle», quien nos permitirá generar automáticamente una estructura de HTML que nos haga escribir lo mínimo con la mejor presentación posible.

Al presionar el botón se nos pregunta qué estilo queremos usar; como para esta prueba, estamos utilizando un template no-bootstrap (twentyfifteen), no nos aparecerán las grillas con estilos de bootstrap, sino que nos ofrece una cuadrícula basada en tablas. La escogemos y presionamos en la cantidad de columnas que necesitamos, luego presionamos en siguiente para continuar con la selección de los campos requeridos.

Una vez seleccionados nuestros campos, ya estamos en condiciones de guardar y utilizar nuestra view. ¿te animas a hacerlo sin ayuda?, una pista es que en el editor WYSIWYG de páginas y entradas, ahora aparece un icono de una «V» que te permitirá seleccionar sin mucho esfuerzo los shortcodes disponibles de tus Views.

Si te gustó y crees necesario hacer más entregas de este tutorial, estaré esperando tu comentario.

 

Por mbrionesc

Desarrollador por esencia, creador de aplicaciones y soluciones basadas "en la nube", luego de años trabajando para terceros tras bambalinas, trabajo mis ideas y proyectos a través de BPL.cl