Tema Blocksy para WordPress: Companion, cabecera y diseño del blog

Este artículo es una edición localizada del original en japonés. Leer el original en japonés

Blocksy es un tema multifunción y gratuito para WordPress. Casi todos los ajustes se hacen en "Apariencia" (Appearance) → "Personalizar" (Customize), el personalizador, viendo la vista previa, y la cabecera y el pie de página se montan arrastrando y soltando. En este artículo se explica, siguiendo el orden de los ajustes, la instalación del tema y del plugin complementario "Blocksy Companion", los colores y las fuentes que conviene decidir primero, cómo construir la cabecera, los ajustes de visualización del listado del blog y de las páginas de entrada, y la preparación de un tema hijo.

Entender cómo se compone Blocksy

Blocksy se compone de estas tres partes.

• Blocksy (el tema en sí): se obtiene gratis en WordPress.org. Incluye los ajustes de diseño en el personalizador y los constructores de cabecera y pie de página
• Blocksy Companion (plugin gratuito): se encarga de importar los sitios de inicio (datos de demostración) y de añadir extensiones
• Blocksy Pro (de pago): añade elementos extra de cabecera, visualización condicional, funciones de maquetación más detalladas, etc.

Lo razonable es empezar con el tema y Companion y considerar Pro cuando compruebes que las funciones que necesitas no alcanzan con la parte gratuita (la división de funciones y los precios pueden cambiar, así que consúltalos en la información del sitio oficial a octubre de 2026).

Además, Blocksy está construido más cerca de un tema clásico y también es compatible con el editor de bloques. Se maneja en sitios distintos que un tema de bloques, que se monta entero en el editor del sitio ("Apariencia" → "Editor"), así que conviene recordar: "el diseño global, en el personalizador; el contenido de entradas y páginas, en el editor de bloques".

Instalación e incorporación de Companion

1. En "Apariencia" → "Temas" → "Añadir nuevo tema" (Add New Theme), busca "Blocksy", instálalo y actívalo
2. Desde el aviso que aparece tras activarlo, o desde el escritorio de Blocksy que se añade al panel de administración, instala y activa Blocksy Companion

Con WP-CLI se puede instalar así.

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

Si vas a cambiar el tema de un sitio existente, haz antes una copia de seguridad de todo el sitio. Al cambiar de tema, es posible que no se conserven los shortcodes propios del tema anterior, los widgets ni la ubicación de los menús.

Si usar o no un sitio de inicio

Al instalar Companion, desde el escritorio de Blocksy se pueden importar "sitios de inicio" (Starter Sites). Con ellos entran de golpe páginas ya diseñadas, los ajustes del personalizador y los plugins necesarios, de modo que en un sitio nuevo te haces enseguida una idea del resultado final.

Sin embargo, es mejor evitar importarlos en un sitio que ya tiene entradas. Se añaden páginas, imágenes y menús de demostración y además se sobrescriben los ajustes del personalizador, por lo que luego no sabrás hasta dónde llegaba la configuración original. Si lo usas, te recomiendo hacerlo en la fase inicial de un sitio nuevo o probarlo en un entorno de staging y copiar solo los ajustes que necesites.

Ajustes globales que conviene decidir primero

Al abrir "Apariencia" → "Personalizar", aparecen los ajustes de Blocksy. Los nombres de los apartados suelen estar traducidos, aunque pueden cambiar según la versión. Lo primero que toca son estos dos, que afectan a todo el sitio.

Colores (paleta de colores)

En los ajustes de color de los ajustes globales, decide la paleta de colores básicos que usará el sitio. En Blocksy, el color del texto, el de los enlaces, el de los botones, etc. hacen referencia a los colores de esta paleta, así que al cambiar la paleta cambia a la vez toda la combinación de colores del sitio.

Si indicas colores directamente en lugares concretos, cuando quieras cambiar la combinación de colores más adelante tendrás que corregirlos uno por uno. Lo más fácil de mantener es decidir en la paleta y especificar un color individual solo en las partes donde de verdad quieras otro.

Fuentes (tipografía)

En los ajustes de tipografía se deciden la fuente, el tamaño y el interlineado del texto y de los títulos. En un sitio en japonés hay que tener en cuenta que, aunque elijas una fuente latina, no se aplica a los caracteres japoneses. La parte en japonés se muestra con las fuentes del dispositivo del visitante, así que deja la fuente del texto en un valor predeterminado como "fuente del sistema" o indica una fuente compatible con el japonés.

Si cargas una fuente japonesa como fuente web, los archivos son grandes y pueden afectar a la velocidad de carga. Si la usas, limita la variedad de grosores y comprueba el efecto en la velocidad de carga con PageSpeed Insights u otra herramienta.

Construir la cabecera

Al abrir el apartado de cabecera del personalizador, aparece en la parte inferior de la pantalla el constructor de cabecera. La cabecera se divide en las filas superior, central e inferior, y elementos como el logotipo (el título del sitio), el menú, la búsqueda y los botones se arrastran y colocan a la izquierda, al centro o a la derecha de cada fila.

Lo que más tropiezos causa es que las cabeceras para ordenador y para móvil se configuran por separado. Si cambias la vista del constructor a móvil, aparece una disposición distinta. En el móvil, lo básico es poner el menú dentro de un "off-canvas" que se abre desde el icono de hamburguesa (el disparador). Si configuras solo la de ordenador y publicas, puede ocurrir que en el móvil no aparezca el menú, así que compruébalo en ambas vistas.

Al hacer clic en un elemento, a la izquierda se muestran sus ajustes (tamaño del texto, color, márgenes, etc.). Los propios elementos que se muestran en el menú se crean en "Apariencia" → "Menús" (Menus) y se asignan al elemento de menú de la cabecera.

El pie de página se monta con un constructor de pie de página que sigue la misma lógica. Si quieres cambiar la disposición de las áreas de widgets o del aviso de copyright, edítalo desde el apartado del pie de página.

Visualización del listado del blog y de las páginas de entrada

El personalizador incluye apartados de ajustes para cada tipo de página: listado de entradas (blog), entradas individuales, páginas, etc.

• Listado de entradas: la forma de colocarlas, como tarjetas o lista, el número de columnas por fila, la proporción de la imagen destacada, la longitud del extracto y la información de la entrada que se muestra (fecha, categoría, etc.)
• Entradas individuales: el ancho del área de contenido, si hay barra lateral y dónde, cómo se muestra la zona del título y la visualización de artículos relacionados e información del autor
• Páginas: igual que en las entradas individuales, se configuran el ancho y si hay barra lateral

Lo que más influye en lo legible que resulta una página de entrada es el ancho del texto. Un texto largo en japonés se lee mal si cada línea es demasiado larga, así que si no pones barra lateral, configura un ancho de texto más bien estrecho y comprueba que en el móvil las letras no se vean demasiado pequeñas.

Si quieres cambiar el diseño solo de una entrada concreta, desde los ajustes de Blocksy que aparecen en la barra lateral de la pantalla de edición de la entrada puedes indicar, por ejemplo, quitar la barra lateral solo en esa entrada.

Preparar un tema hijo

Si editas directamente los archivos del tema, los cambios se pierden al actualizarlo. Si solo vas a añadir un poco de CSS, basta con el "CSS adicional" del personalizador. Cuando necesites personalizar PHP o sobrescribir plantillas, crea un tema hijo.

En el sitio oficial de Blocksy se distribuye una plantilla de tema hijo. Si lo creas tú mismo, coloca en wp-content/themes/blocksy-child/ el siguiente style.css,

/*
Theme Name: Blocksy Child
Template: blocksy
*/

y carga los estilos del tema hijo en el functions.php de la misma carpeta.

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

Al cambiar a un tema hijo, los ajustes del personalizador se guardan aparte de los del tema padre, por lo que puede que lo que configuraste en el padre deje de verse. Si tienes instalado Companion, los ajustes del personalizador se pueden trasladar con la función de exportar e importar, así que exportarlos antes de cambiar al tema hijo evita tener que rehacer el trabajo.

Notas de actualización y mantenimiento

Blocksy y Companion se actualizan con frecuencia. Antes de actualizar, haz una copia de seguridad y, después, revisa la cabecera, las páginas de entrada y la visualización en el móvil. Si la visualización se desbarata, vacía la caché de los plugins de caché y de la CDN y vuelve a comprobar. Si usas un plugin de optimización que combina y comprime CSS, puede quedar CSS antiguo y parecer que se ha roto la visualización.

Resumen

• Empieza a usar Blocksy con la combinación del tema y Blocksy Companion y considera Pro cuando sepas qué funciones te faltan
• Usa el sitio de inicio en un sitio nuevo o en un entorno de staging, y en un sitio existente ten cuidado con la sobrescritura de ajustes
• Decide el conjunto con la paleta de colores y la tipografía. Ten en cuenta que las fuentes latinas no afectan al japonés
• El constructor de cabecera es distinto para ordenador y para móvil. Comprueba ambas vistas y, si vas a tocar PHP, usa un tema hijo

• Cómo crear un pie de página personalizado con Blocksy
• Cómo cambiar de tema de WordPress con seguridad

¿Dudas sobre WordPress? Quien publica este sitio está en Japón y responde en japonés. Contacto (en japonés)