Ya tenemos nuestro entorno de desarrollo WordPress completamente instalado y funcional. Ahora ya nos queda instalar el tema base Underscores y comenzar a modificar sobre él hasta llegar al resultado que nos interese. Este es el último artículo de esta tutorial, dado que está completamente instalado el sistema, no necesitamos ningún tipo de configuración adicional, ni es necesario interactuar con nuestro Ubuntu. Yo por mi parte, y como puedes ver en el sitio, ya he introducido todos los cambios para dejar un sitio funcional, y cumple con todas las expectativas que quería.

Underscores

Ante todo, ¿que es Underscores?…, Underscores es un tema base a utilizar como punto de partida de tu propio tema.

El primer paso que debemos realizar es dirigirnos a la página de Uderscores escribir el nombre de nuestro futuro tema y descargar el archivo comprimido .zip que instalaremos directamente en nuestra área de producción de WordPress

Una vez lo hemos descargado, lo instalamos en nuestro WordPress como haríamos con cualquier otro tema, y comenzaremos a modificarlo directamente en Netbeans.

En mi caso, he llamado al tema ejemplo. Abrimos el archivo style.css que se encuentra en el directorio de nuestro tema,

Fíjate que la hoja de estilo descargada, ya tiene el nombre de nuestro tema como es preceptivo.

Nada mas instalar el tema ejemplo, lo que nos vamos a encontrar al visitar nuestro sitio es algo como lo que puedes ver en la siguiente imagen,

Decepcionante, ¿no?, vamos a realizar algunos retoques para que la cosa quede algo mas vistosa y con lo que podamos empezar a trabajar.

El layout

Tampoco me quiero extender demasiado, porque esto ya roza otros aspectos, pero si que indico como he modificado el layout del tema, para que veas lo sencillo que se convierte en actualizar y modificar el sistema para llegar a lo que pretendemos.

Lo primero ha sido darle colores a las diferentes partes de la página para que sepamos donde nos encontramos y los nombres que le asigna Underscores:

El layout que he utilizado es de dos columnas, una con el contenido de la página que será del 70% y otra, donde se ubican los widgets es del 30%. La disposición es la que puedes ver en la siguiente imagen,

¿Cual es el código?

body{
    background-color: #ccc;   
    padding: 48px;
    padding: 3rem;
}
#page{
    max-width: 1000px;
    margin: 0 auto;
    background-color: #e8be74;
    padding: 3rem;
}
#masthead{
    width:100%;
    background-color: #afa;
    padding: 16px;
    padding: 1rem;
}
.site-branding{
    width:50%;
    margin: 0 auto;
    border: #000;
    border-style: solid;
    border-width: 1px;
    background-color: #ff0;
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
}
.site-branding>h1,
.site-branding>p{
    text-align: center;
}
#primary {
   float: left;
   padding: 16px;
   padding: 1rem;
   width: 70%;
   background-color: #06B9FD;
}
#secondary{
    float: right;
    padding: 16px;
    padding: 1rem;
    width: 30%;
    background-color: #fff9c0;
}
#colophon{
    background-color: #f66;
    padding: 16px;
    padding: 1rem;
}

La comodidad de editar en casa

El asunto es que conforme vamos modificando nuestro documento style.css en NetBeans, podemos ir viendo el resultado directamente en nuestro explorador de internet.

Conclusiones

Dejo pendiente para un artículo posterior como configurar nuestro WordPress en Ubuntu para que sea multisitio, con el que podremos tener varios temas funcionando en paralelo, y poder hacer diferentes desarrollos.

Igualmente, escribiré algunos artículos adicionales sobre los distintos elementos que he ido añadiendo en mi tema de WordPress, para conseguir el resultado actual.

Más información,

• Underscores