Cómo crear un tema sencillo de WordPress

Introducción

Gracias a la realización de nuestras prácticas en la UOC hemos aprendido que WordPress es un sistema de gestión de contenidos (CMS) muy interesante y sencillo de utilizar. A medida que nos hemos ido introduciendo en el uso de este CMS, hemos retocado varios de sus temas. Estos temas son los responsables del aspecto final de una página web hecha con WordPress. Es la parte visual y de diseño (front-end) del espacio web y la verdad es que tiene mucho potencial y es muy versátil. Es por este motivo que nos disponemos a realizar un tema de WordPress desde “cero” y a describir los pasos a seguir para hacerlo en este artículo.

El “cero” está entre comillas porque la plantilla inicial que usaremos será generada por underscores . Esta página web es un sitio que genera plantillas muy básicas de temas de WordPress, esto puede ser muy útil porque proporciona la estructura básica de ficheros de los temas de WordPress y algunas de las funciones para poder empezar a desarrollar un tema propio sin tener que empezar en un archivo en blanco. Es una herramienta muy recomendable ya que puede ahorrar mucho trabajo inicial. El proyecto underscores está desarrollado por un colectivo de profesionales del desarrollo web y está en constante crecimiento por la comunidad. El nombre del tema que se verá en este tutorial será exemple.

Es sencillo de usar: sólo hay que entrar en la página web y rellenar el formulario para el nombre de tu tema y pulsar el botón “Generate”. Si se desea, también hay un desplegable con opciones avanzadas para introducir la autoría del tema, etc.

Underscores descargará a nuestro ordenador un archivo comprimido. Si abrimos este archivo, veremos que hay una serie de archivos PHP, CSS y algunas carpetas. Concretamente, hay un archivo en la raíz que se llama style.css que es donde están definidos los estilos de nuestro tema. El código en este archivo está jerarquizado y bastante bien estructurado y pautado. Cada diseñador tiene su manera de escribir código, pero sí es una buena práctica procurar tenerlo todo lo mejor ordenado posible para que posteriormente, si se tiene que realizar algún cambio o actualización, esto no signifique un problema.

Estilos CSS

Para empezar, una vez instalado el tema en nuestro WordPress, una buena opción es activar la consola del navegador. Esto es muy útil para descubrir qué etiquetas, identificadores y clases tiene nuestra plantilla. Nosotros hemos usado la consola de desarrollador del navegador Google Chrome. Activarla es tan fácil como situar el ratón en cualquier elemento de una página web, hacer clic con el botón derecho y seleccionar la opción “Inspeccionar elemento”.

Si analizamos las etiquetas HTML del código se puede ver que el tema está compuesto a grandes rasgos por la siguiente estructura:

<div id=”page”>

<header id=”masthead”>

<!--contenido del header-->

</header>

<div id=”content”>

<div id=”primary”>

<!--posts y contenidos-->

</div>

<div id=”secondary”>

<!--contenidos de la barra aside-->

</div>

</div>

<footer id=”colophon”>

<!--Contenidos del footer-->

</footer>

</div>

Todo el contenido de la página está dentro de un <div> con el identificador #page. En su interior se encuentran tres contenedores con su identificador asignado: el header con nombre #masthead en la que se encuentra toda la cabecera del sitio web (título, imágenes, menú, etc.), el #content donde se encuentra el contenido de la página en sí y el footer con el nombre #colophon donde se sitúa debajo de la página.

Justo dentro del #content se encuentran dos contenedores <div>; uno que recibe el nombre de #primary donde se encuentran las entradas y contenido textual, imágenes, vídeos de la página y el #secondary donde se encuentran los widgets, barras de búsqueda, etc.

Una vez comprendida la estructura básica de HTML de nuestro tema, meditamos un poco cómo queremos que se visualice toda la información. Por ejemplo, hemos decidido tener un header arriba de todo, tener un contenido central con una barra para widgets a la derecha y finalmente un footer debajo de todo.

Para codificar correctamente esta estructura web es necesario saber un poco de CSS. Editaremos el archivo style.css de nuestro tema y añadiremos las siguientes líneas en el código:


#page {
margin: 0px auto;
width: 1000px;
}


Estas breves líneas centrarán el contenido nuestro tema definiendo una anchura total de la plantilla. Si se desea modificarla se puede hacer perfectamente con el atributo width, que es el que define la anchura de nuestro sitio web en la pantalla.

Después de este paso toca colocar el resto de elementos en su sitio:

#masthead {
margin-bottom: 2%;
}
#primary {
width: 67%;
float: left;
}
#secondary {
margin-left: 3%;
width: 30%;
float:left;
}

#colophon {
margin: 2% 0% 2% 0%;
}

#secondary aside, #primary, footer {
padding: 2%;
}

.menu-categories-container li {
margin: 1em 2% 0 2%
}

Este es el resultado de escribir el código CSS:

Ahora le daremos un poco de color al tema y haremos que las los contenedores <div> tengan las esquinas redondeadas.

El color de fondo del tema también se puede modificar desde el menú de personalización del mismo WordPress. Aún así, en este tutorial lo haremos con CSS. En este caso hemos escogido un verde-azulado (#33bfc4) y el código añadido es el siguiente:

#secondary aside, #primary, footer {
padding: 2%;
/*codigo nuevo*/
background-color: #bcebe3;
border-radius: 5px;
}

.menu-categories-container li {
margin: 1em 2% 0 2%;
/*codigo nuevo*/
background-color: #baebe2;
}

/*Codigo nuevo*/
.menu-categories-container ul {
background-color: #baebe2;
border-radius: 5px;
height: 50px;
}


Resultado:

Ahora tocaría modificar un poco el aspecto visual de los enlaces, títulos y listas.

En el apartado del CSS de enlaces modificamos los colores a nuestro gusto. Hemos usado los siguientes para el ejemplo:


a {
color: #12849b;
}

a:visited {
color: purple;
}

a:hover,
a:focus,
a:active {
color: #fc71a1;
}

En las líneas 398 a 401 podéis comentar o eliminar este código:


ul, ol {
margin: 0 0 1.5em 3em;
}


Por último añadimos el siguiente fragmento de código en el apartado de tipografía para quitar el subrayado azul de los enlaces, modificar el tamaño de los títulos y eliminar la visualización de tipo lista de los widgets.


h1 a {
text-decoration: none;
color: black;
}

aside h1 {
font-size: 1.5rem;
}

aside a {
text-decoration: none;
}

aside li{
list-style: none;
}

No es necesario escribir el código CSS en un orden concreto, pero es muy importante mantener una coherencia en la estructura del código para que, si en un futuro se necesitan hacer cambios, sea fácil y rápido encontrar las líneas de código que queremos modificar. En el ejemplo de este tutorial hemos añadido todo el código nuevo exceptuando el apartado de enlaces en el que sólo hemos modificado los valores de los atributos que ya estaban definidos por defecto. El resultado de lo modificado queda así:

Menú personalizable

Una vez definida la hoja de estilo de nuestro tema de WordPress, pasaremos a activar el menú personalizable. WordPress da la posibilidad de establecer una imagen desde el menú de personalización dando dos opciones:

• Mostrar una imagen por encima del título.
• Mostrar una imagen por debajo del título.

Para poder realizar estas modificaciones es necesario tener unas nociones básicas de lenguaje PHP, ya que WordPress está construido íntegramente con este lenguaje.

Una imagen por encima del título

Primero nos centraremos en la posibilidad de mostrar una imagen por encima del título. Para esto editaremos el archivo functions.php y accederemos a la línea 118. En esta línea hay un código comentado:

//require get_template_directory() . '/inc/custom-header.php';

Eliminaremos el comentario para que el tema de WordPress pueda incluir la plantilla del header personalizable (custom-header.php).

<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="">
</a>
<?php endif; // End header image check. ?>

Este código lo pegamos en el archivo header.php justo debajo de la etiqueta HTML5

<header id="masthead" class="site-header" role="banner">

Una vez realizados estos cambios sólo nos queda entrar en el gestor de usuario de WordPress y, en la sección de personalización de menú, añadir una imagen. El resultado es el siguiente:

Una imagen por debajo del título

Esta posibilidad requiere realizar algunos cambios más a nuestro código. Necesita que creemos una función en PHP que devuelve un String con el estilo CSS para que la imagen se muestre de fondo de nuestro header.

Partiendo de la base que no se han realizado los cambios anteriores (Una imagen por encima del título); el primer paso es el igual al descrito anteriormente: descomentar la línea 118 del archivo functions.php.

El siguiente paso requiere escribir la siguiente función al final del documento custom-header.php:

if ( ! function_exists( 'exmeple_header_image_background' ) ) :
/**
* Inserts header image as a background image wherever you choose.
*
*/
function exmeple_header_image_background() {

$img = get_custom_header()->url;
return "style=\"background-image:url('" . $img . "');\"";
}
endif; // exmeple_header_image_background

Si os fijáis en la función que acabamos de escribir, hay que tener presente que tiene el nombre exmeple_header_image_background(). Se llama así porque este recibe el nombre de “exemple”. Si el tema que se crea recibe otro nombre, habrá que adaptar el nombre de la función al nombre del tema: nombredetutema_header_image_background().

Ahora tenemos que abrir el archivo header.php y llamar a la función que hemos creado. Para llamar la función usaremos el constructor de lenguaje PHP echo y lo haremos dentro de la etiqueta <header>. Así, el estilo CSS de la imagen se aplicará a toda la cabecera.

<header id="masthead" class="site-header" role="banner" <?php echo exemple_header_image_background()?>>

Además, podemos añadir un border-radius al header para mejorar su aspecto:

#masthead {
margin-bottom: 2%;
/*Código nuevo*/
border-radius: 0 0 5px 5px;
}


Este es el resultado:

Por último, si se quiere modificar el tamaño de la imagen del header o algún otro aspecto que venga por defecto se puede hacer desde el archivo custom-header.php. En este archivo hay una función que recibe el nombre (nombre del theme)_custom_header_setup() en la que están definidos algunos aspectos del header por defecto:

function exemple_custom_header_setup() {
	add_theme_support( 'custom-header', apply_filters( 'exemple_custom_header_args', array(
		'default-image'          => '',
		'default-text-color'     => '000000',
		'width'                  => 1000,
		'height'                 => 250,
		'flex-height'            => true,
		'wp-head-callback'       => 'exemple_header_style',
		'admin-head-callback'    => 'exemple_admin_header_style',
		'admin-preview-callback' => 'exemple_admin_header_image',
	) ) );
}

Y una vez realizados todo el diseño de nuestro tema, es necesario hacer una captura de pantalla del tema y guardar la imagen en la raíz del tema con el nombre screenshot.png. De este modo, en el gestor de temas de WordPress aparecerá la imagen de muestra en el tema para activarlo o desactivarlo.

Esperamos que este artículo os ayude a poder entrar al mundo de WordPress. El tema va adjunto al artículo.

Cita recomendada: ESTEBAN, Gerard y SUELVES, Sergi. Cómo crear un tema sencillo de WordPress. Mosaic [en línea], mayo 2015, no. 127. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n127.1512.