WordPress práctico: Creación básica de temas

Personalización de las páginas con listados

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Ahora que ya sabemos cómo hacer que WordPress pueda distinguir en qué tipo de página estamos cuando el navegador entra en ella, vamos a aprovecharlo modificando con SASS algunos estilos en las páginas con listados de contenidos.

Transcripción

Voy, en este vídeo, a hacer un pequeño ejemplo de cómo podemos personalizar las páginas que tienen listados de elementos, o sea, hasta ahora, en realidad casi siempre hemos trabajado sobre single, y hemos hecho modificaciones sobre la plantilla content, con lo cual esa plantilla content, se hereda a lo largo del resto de la página y, por tanto, pues todo tiene un mismo aspecto. Hemos explicado ya, también, un poco diferentes técnicas para hacer personalizaciones sobre elementos concretos, y ahora voy un poco a aplicarlas. Voy a hacer dos cosas distintas. Voy a trabajar sobre este listado de elementos y voy a hacer que aparezcan con una línea y que, por otro lado, no tengan tanto espacio; son 2 pequeños detalles pero que van a servir un poco para ejemplificar de lo que he estado hablando previamente. Para poder hacer esas modificaciones, necesito abrir el archivo correcto. Voy a ir poco a poco, y voy a ir explicando qué decisiones tomo. Tengo archive.php, o sea archive.php. Dentro de él estoy haciendo que se cargue todo el loop en el que se van mostrando los contenidos. En ese loop me viene indicada la plantilla que voy a utilizar, todo esto lo he estado haciendo siempre desde el código, pero también podría haberlo hecho, por supuesto, utilizando plugins. Dentro de estos templates, pues aquí veo todos los que se están aplicando y en concreto, veo que, efectivamente, estoy utilizando ese content, sería otra forma distinta de elegir sobre quién tengo que hacer modificaciones Este content que está guardado dentro de template-parts, admite que yo haga cambios sobre él, sobre su código, entonces, esta es una de las opciones para trabajar aquí dentro por ejemplo, dentro de content yo estoy preguntando si es simple o si es una página múltiple, con varios elementos. Bueno, pues puedo añadir, entonces, aquí esa línea de la que estaba hablando, hay diferentes formas de añadir una línea. En principio, voy a cerrar la etiqueta php, Voy a abrir una segunda etiqueta php, y entre ambas voy a añadir un pequeño div, que es el que me va a servir para pintar esa línea, así de una manera más o menos automática. Así que para ello voy a crear una clase y a esa clase pues, por ejemplo, la voy a llamar linea. Ahora toca tomar una decisión, ¿dónde añado los estilos para esta línea en concreto?, porque bueno, ahí hay un poco que decidir, hay muchos sitios distintos donde podría aplicarlos. Como esto va a ser para trabajar con los posts de las páginas de varios elementos, puedo irme a site, dentro de site a primary y aquí tengo _posts-and-pages. Bien, pues es un buen sitio donde podría añadirlo, esto es algo completamente subjetivo, lo que sí que es importante es que cuando vayamos desarrollando nuestros propios sitios, procuremos siempre que el archivo que elijamos para un tipo concreto de contenidos, sea siempre el mismo, para que luego sea fácil hacer modificaciones sobre ese tema. Bien, pues sobre ese div que tiene la clase línea, le he aplicado un poco de borde, con el mismo color que tiene el resto del tema para las líneas y para los rótulos y tal, y luego, por último, pues le estoy pidiendo que tenga un podo de padding en la parte de abajo. Con este padding, lo que conseguiré será hacer que quede un poco separada la línea del contenido que lleva debajo. Tendré, ahora, que recargar la página, bueno, ni siquiera, ya está todo perfectamente creado. Y aquí vemos cómo parece esa línea y cómo aparece separado. Dentro del post en concreto, vemos que ya no me parece esa línea, o sea estoy personalizando, efectivamente, esta página de resultados. Pero también tengo que cambiar más cosas, voy a tener que cambiar este margen que tiene la etiqueta h2. Puedo hacerlo de varias maneras, pero me interesa también utilizar cosas que ya hemos aplicado, dentro de esta carpeta inc, dentro del archivo extras.php, aquí he añadido que se cree la clase listado, para el caso de que no sea una página de un solo elemento, bueno, pues entonces puedo copiar esa clase listado, y también puedo aplicarla, puedo decir que para esa clase listado para la etiqueta h2, en ese caso pues que el margen sea distinto, que tengo margen, por ejemplo, de 5 píxeles arriba y abajo, y ninguno a derecha e izquierda. Voy a escribir correctamente este código. Y ahora cuando cargue la página, pues aquí vemos, ya tengo personalizado el listado. En realidad, utilizando este listado, este sistema, para hacerlo más bonito, puedo añadirle la etiqueta body delante. Bien, pues como decía utilizando el sistema del body.listado, y luego lo que quiera, puedo hacer todo tipo de cambios, que el color de fondo para esta página de listas de elementos pues que sea distinto, que los elementos que lo componen, también tengan otro aspecto, que salgan utilizando menos espacio del total, bueno cualquier cosa. Resumiendo, hemos visto cómo hacer modificaciones sobre páginas que tienen listados de resultados, tanto sobre su estructura, como también utilizando las clases aplicadas sobre la etiqueta body.

WordPress práctico: Creación básica de temas

Aprende a dar un nuevo aspecto a tu página de WordPress, creando un tema desde cero usando como base las plantillas Underscore y dándole aspecto a nuestro gusto.

4:16 horas (48 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:11/08/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.