Maquetando WordPress¶

Aunque en la actualidad contamos con el FSE, muchos temas, y sobretodo a medida, se siguen haciendo como hace unos años. Es por ello que es más que interesante que conozcáis cuáles son las maneras de añadir estilos en CSS a WordPress.

Usando el Personalizador del Tema¶

Las versiones recientes de WordPress incluyen en Apariencia > Personalizar, una opción para agregar código CSS.

Al igual que todas las otras opciones de esta pantalla se pueden ver los cambios realizados inmediatamente en la parte derecha de la pantalla, para tener los cambios de manera permanente se tienen que guardar usando el botón publicar.

A tener en cuenta

El código CSS que coloques aquí sólo será para este theme especifico, al cambiar de theme este código no tendrá efecto.

Usando un Child Theme para agregar CSS¶

Si tienes un theme al cual quieres hacer modificaciones que no sólo implican cambios en diseño a través de CSS, podrías evaluar hacer un tema hijo o child theme, y tener la flexibilidad de cambiar incluso archivos .php.

Te recomiendo visitar este enlace para entender cómo se realiza correctamente un child theme.

Usando un archivo CSS adicional¶

Si tu theme usa algún Framework como Genesis, en el cual los themes ya son temas hijos, y quieres agregar código CSS a través de un archivo, lo recomendable en este caso sería agregar un archivo CSS personalizado adicional a tu theme.

Puedes usar el siguiente código en tu archivo functions.php.

functions.php

add_action( 'wp_enqueue_scripts', 'custom_enqueue_styles');

function custom_enqueue_styles() {
    wp_enqueue_style( 'custom-style', 
                      get_stylesheet_directory_uri() . '/css/custom.css', 
                      array(), 
                      wp_get_theme()->get('Version')
                    );
}

En el código anterior

Usamos el hook¹ wp_enqueue_scripts para poner en cola un nuevo script
Dentro de la función a la que hace referencia el hook usamos wp_enqueue_style
Usamos el texto custom-style como identificador
Hacemos referencia al archivo custom.css que esta dentro de la carpeta css
El parámetro array(), indica si hay alguna dependencia, en caso de haberla la dependencia se cargará antes
Finalmente definimos la versión, que será la versión del theme

Cuidado

Es posible que igualmente el theme hijo se actualice, en tal caso tendrías que volver a añadir el código en el archivo functions.php, otra opción sería que uses un plugin de Snippets para agregar código sin perder los cambios al actualizar.

Usando un plugin¶

Como opción final tenemos el uso de un plugin para agregar CSS, hay varios que podrías evaluar sin embargo uno de los más livianos es: Simple Custom CSS and JS. Tras instalarlo verás en el menú de Apariencia un enlace adicional de CSS Personalizado, también aparecerá la misma opción en el Personalizador del theme (similar a lo que vimos en la opción 1).

A tener en cuenta

La ventaja de este tipo de plugins es que conserva los cambios aún si se cambia de theme.

¿Cuál es la manera correcta?¶

Como verás existen diferentes formas de agregar estilos CSS a tu sitio web, selecciona la que más te convenga, lo principal es no perder los cambios CSS que agregas cuando realices actualizaciones del theme o de WordPress. Si vas a realizar un gran número de cambios, añadir un fichero extra siempre es la mejor opción.

El uso de los child themes siempre es interesante si queremos actualizar al padre sin perder nuestros cambios.

Actividades¶

A tener en cuenta para las actividades

Se trata de documentar y mostrar todo el proceso. Para ello haremos uso, en este apartado de underscore o Air-light. Al ser un starter theme² no hará falta hacer uso del child theme. En estas actividades realizaremos todas las actividades sobre el fichero style.css que consideremos.

AC 411 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC1/ 3p). Haz una instalación limpia de WordPres, instala el starter theme y crea 6 entradas de blog, una página de contacto y una de quienes somos.
Creando un tema propio

Para crear un tema simplemente crea una nueva carpeta en la siguiente ruta: wp-content/themes/, coloca tu nombre, sin espacios, en la carpeta. Dentro de esta carpeta, crea además los archivos : style.css y functions.php, que son los archivos mínimos necesarios para crear correctamente el tema.

El style.csses clave, ha de rellenarse con la siguiente información:
```
/*
Theme Name:   Twenty Seventeen
Theme URI:    http://misitio.com/twenty-seventeen/
Description:  Theme para modificaciones varias
Author:       Mi nombre
Author URI:   http://misitio.com
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:  twenty-seventeen
*/
```
Donde:
- Theme Name: nombre del tema
- Theme URI: opcional, la url de la documentación y demo del tema.
- Descripción, Author, Author URI: son opcionales pero se recomienda colocarlas.
- Template: este parámetro te indica el nombre de la carpeta del tema.
- Version: versión del tema hijo, importante para el control de cambios.
- License, License URI: si se quieres hacer alguna variación a la licencia.
- Tags: si harás variaciones en la funcionalidad del theme, puedes agregar otro tag.
- Text-Domain: si tus cambios implican agregar texto traducible.
PR 412 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC2/ 5p). Con el contenido anterior, maqueta, justificando todas las decisiones que tomes, la home. La home únicamente contendrá los últimos post creados. Has de adjuntar capturas del responsive.
PR 413 (RA1 / CE1a CE1c CE1d CE1f CE1i / IC2/ 5p). Con el contenido anterior, maqueta, justificando todas las decisiones que tomes, un post (ha de tener al menos dos imágenes y cinco párrafos). Has de adjuntar capturas del responsive.

Los hooks son unos "lugares" o "ubicaciones" que están repartidos a lo largo y ancho de WordPress, en los que podemos añadir nuestro código, o modificar el existente. ↩
Un starter theme es un theme que se usa de base. Normalmente los desarrolladores de themes, siempre usan un starter theme para desarrollar sus propios themes. ↩