Organizando la salida por pantalla

Estoy de acuerdo con quienes penséis que lo que se veía por pantalla con la primera plantilla que desarrollé en el anterior artículo de esta serie era un completo desastre. En este artículo vamos a ordenar los diferentes elementos de nuestra web.

Vamos a editar nuestro fichero style.css y, de paso, lo comentamos.

Decíamos que el fichero style.css era uno de los dos archivos imprescindibles de una plantilla, junto con index.php. De hecho, en el anterior artículo sólo incluimos las 8 primeras líneas. Estas líneas son las que describen el tema de WordPress que tenemos activo o queremos activar.

A partir de ahí hemos añadido unas líneas que nos van a ubicar los diferentes elementos que aparecen en pantalla

Primero vemos un comentario, para saber qué vamos a hacer:

Es un comentario, ya que va entre los caracteres /* y */, por lo que no se procesará. Sólo sirve para explicar qué queremos hacer, o cualquier otra cosa que se nos ocurra. Un consejo: no escatiméis en el uso de los comentarios, os servirán en un futuro para saber qué pretendíais en el momento de desarrollar el código. Sigamos:

Con #main estamos haciendo referencia a una parte del código html que hemos marcado con id=”main” (fichero index.php). Con ello estamos indicando qué queremos hacer con ese bloque de código. En este caso main se refiere al cuerpo central donde se muestran todos los posts de nuestra web WordPress.

Estamos indicando que se posicione (float) a la izquierda (left), que ocupe un ancho (width) del 70%, y que el márgen derecho (margin-right) se mueva a la izquierda de la pantalla (-100%), para que toda la pantalla quede a disposición del siguiente elemento.

La barra lateral la hemos marcado como id=”barraLateral” en el archivo sidebar.php, y le decimos que se posicione a la izquierda (float: left), con un márgen izquierdo del 75% (margin-left: 75%) y que tenga un ancho del 25% (width: 25%).

Finalmente la sección footer (archivo footer.php) le indicamos (clear: left) que baje hasta que su borde superior esté por debajo del borde inferior de cualquier elemento flotado a la izquierda. Como los anteriores los hemos flotado (float) a la izquierda (left), aquí empleamos esta instrucción.

Empleo del css en el tema

Para que estas instrucciones de estilo funcionen en el tema, debemos insertar una línea de código en el archivo header.php, que finalmente quedará así:

Este archivo, y sus diferentes posibilidades, lo trataremos más adelante. Ahora, vamos a ver un par de pequeños ejercicios que podemos intentar hacer.

Ejercicio 1

Vamos a intentar cambiar la ubicación de la barra lateral, desplazándola a la izquierda de la pantalla.

El resultado sería el siguiente:

Ejercicio 2

¿Se puede hacer lo mismo flotando los elementos a izquierda y derecha?

Sí, como se puede comprobar a continuación:

En fin, hasta aquí llegamos con este artículo. En el próximo, veremos el fichero index.php, como funciona el famoso ‘loop‘ (bucle) de WordPress, y empezaremos a estudiar diferentes etiquetas de plantillas de WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *