Plantilla Listado Personalizable

Vamos a preparar una plantilla cuyos para que nos muestre solamente los temas creados de una sola categoría, aunque como podrás observar mas adelante, se puede hacer de tal manera que no se limite a una sola categoría, si no que puede ser a dos, tres o las que te interese.
Aprenderás lo fácil que es agregar contenido dinámico a tu sitio web creado con Oxygen, combinar datos dinámicos estándar de WordPress con datos dinámicos ACF.(Advanced Custom Fields)
Esta es una buena manera de mantener tu blog organizado, pudiendo ofrecer a tus usuarios un listado, o varios listados en los que poder encontrar de forma fácil y ordenada las entradas o post de tu sitio.
Como siempre, vamos a ir paso a paso y mostrando de forma gráfica.

1- Vamos a Oxygen -> Templates

2 - Añadir Nueva Plantilla

3 - Damos un nombre a la plantilla y seleccionamos Main en el desplegable

4 - Click en Actualizar  y después en "Edit with Oxygen"

5 - Añadimos una nueva sección

6 - Encabezados, textos, imágenes superiores a gusto de cada uno.

7 - Click en Add, escribimos Repeater en el buscador y hacemos click en icono del Repeater. El también se puede llegar al icono desplegando la Pestaña de Grupo Helpers

8 - Con el Repeater seleccionado: Add -> Columns -> y seleccionamos 40 60 (esto también para gustos)

9 - Para tener una referencia visual en el selector Previewing(1), seleccionamos una categoría en la que tengamos por lo menos un post, si es mas de uno mejor (2)

Y ahora es cuando realmente viene la acción y los pasos mas interesantes para conseguir los resultados deseados. Estos pasos son, ni mas ni menos los de indicarle a Oxygen los datos que queremos que nos muestre según nuestras indicaciones.

10 - Seleccionamos la primera columna de la izquierda y añadimos una imagen con lo que nos quedará algo parecido a lo que tenemos en la imagen de guía de la derecha.

11 - Con la imagen seleccionada pulsamos en el botón "data" que indica la flecha amarilla.

12 - Click en "Featured Image"

13 - Se nos abre una ventana en la que nos da la posibilidad de escoger el tamaño y de diferentes formas.

14 - Podemos tranquilamente no cambiar nada y pulsar en INSERT

15 - Con lo que las imágenes predeterminadas de los posts o temas pasarán a ser mostradas en cada una de su respectiva columna.

16 - Seleccionamos la columna superior derecha, y el procedimiento es el mismo que para una imagen, solo que seleccionaremos un encabezado (Heading). Hacemos doble click en el texto y en la parte superior de la ventana de Oxygen de entre las opciones que nos aparecen pulsaremos en "Insert Data".

17 - Se nos abrirá una ventana con múltiples opciones, de estas opciones podemos escoger la que queramos para nuestro diseño, todas serán salidas de texto en nuestra plantilla. En este caso vamos a escoger el título (Title) ya que estamos editando un encabezado y es lo mas adecuado para ello.

18 - Nos mostrará una ventana en la que podremos escoger si queremos que el texto sea un enlace al tema o no. Si queremos que sea un enlace marcaremos la casilla para ello y de seguido pulsar en el botón INSERT

19 - Nos quedará en la columna algo parecido. Y al hacer click en cualquier parte fuera de ese texto nos aparecerá el título de cada tema o post.

20 - Ahora podemos editar tamaño, fuente, etc... del título para dejarlo como queramos, todos los títulos tendrán exactamente la misma fuente, tamaño,....

21 - Repetimos el paso 16 pero ahora metemos un texto en lugar de un Heading, seleccionamos todo el texto y, al igual que anteriormente nos vanos a la parte superior de la ventana del editor y pulsamos en el botón "Insert Data".

22 - Nos volverá a salir la ventana que vemos a la derecha, y aquí, ya sabiendo lo que sabemos ya podemos deducir que es lo que obtendremos al pulsar en uno u otro botón.

  • Content - Todo el contenido del post.
  • Excerpt - Un resumen inicial.
  • Date - La fecha.... etc...
A partir de aquí ya todo irá en función de nuestras necesidades y nuestra imaginación hasta donde queremos o debemos llegar.
Abajo dejamos un vídeo en inglés donde además trabaja con ACF (Advanced Custom Fields).
apartmentmagic-wandsuncloud-checkcogdicestarpaperclipfile-emptyfile-addenterpicturebookbookmarkusersmaprocketthumbs-upcheckmark-circlepointer-right