Dicen que es importante causar una buena primera impresión. Cuando los visitantes llegan a tu sitio web, las primeras impresiones empiezan arriba — en la cabecera de la página.
Los desarrolladores de temas para WordPress no están obligados a incluir una plantilla de cabecera, pero es raro que un sitio no tenga una. Desde los inicios de la web, «cabecera» ha sido el término utilizado para referirse a un bloque de HTML que encapsula los elementos esenciales que los visitantes esperan encontrar en la parte superior de las páginas. Esto suele incluir:
- Marca: Puede incluir el nombre del sitio y, con frecuencia, un logotipo. El uso de color, imágenes o vídeo en la cabecera puede reforzar esa marca.
- Navegación principal: Si tu sitio web tiene más de una página, los visitantes probablemente buscarán un menú de navegación cerca de la parte superior de cada página.
- Navegación secundaria: La navegación secundaria podría ser cualquier enlace independiente de la ubicación actual del usuario en la jerarquía del menú primario. Piensa en un botón de «inicio de sesión» e iconos que enlacen a cuentas de redes sociales o a un carrito de la compra.
- Búsqueda: Si tu sitio web admite búsquedas, el cuadro de entrada de búsqueda no tiene por qué estar en la cabecera, pero desde luego los visitantes no lo buscarán en el pie de página.
El CMS WordPress puede generar dinámicamente componentes como las cabeceras combinando el marcado de las plantillas temáticas con el contenido que se encuentra en una base de datos — como enlaces a un logotipo y entradas de menú — e inyectarlos en cada página.
El ecosistema de temas de WordPress ofrece una rica selección de diseños para casi cualquier sitio web. Con miles de temas para elegir en varios marketplaces, elegir el mejor para tu objetivo puede ser desalentador.
Pero cuando finalmente selecciones e instales un tema, se espera que personalices al menos algunos componentes — como la cabecera — para estampar tu marca en el sitio y hacerlo tuyo.
Veamos cómo hacerlo.
Bloques vs clásico: Historia de dos temas
La forma de personalizar la cabecera de tu sitio de WordPress viene determinada por cómo se construyó el tema (y, a veces, por cuánta personalización quieras hacer). Hay tres formas de modificar la cabecera de un sitio nativo de WordPress:
- Utilizando el Editor del sitio: WordPress 5.0 introdujo un editor de bloques para el contenido del sitio web conocido como Gutenberg. Con el lanzamiento de WordPress 5.9, el concepto de bloque se extendió a la personalización del tema y se convirtió en una opción sólida para la edición completa del sitio. El Editor de Sitios y la posibilidad de construir las distintas partes del tema de un sitio web con componentes basados en HTML aportaron una flexibilidad sin precedentes a la personalización nativa de WordPress.
- Usar el Personalizador de WordPress: No pretendemos hacerte sentir viejo, pero los temas que solo pueden modificarse utilizando el Personalizador, en su día revolucionario, y los widgets asociados se denominan temas «clásicos». A pesar del nombre que suena retro, todavía se siguen lanzando nuevos temas de estilo clásico, sumándose a los miles que ya existen en el mercado. En comparación con el Editor de Sitios y los temas de Bloques, el Personalizador y los temas Clásicos ofrecen menos opciones para la personalización del encabezado.
- Editar directamente los archivos del tema: Tú (o alguien a quien pidas ayuda) necesitarás conocimientos básicos de PHP para editar el código de los archivos de los temas clásicos de WordPress, pero es una solución cuando el Personalizador no puede ofrecerte lo que necesitas para la cabecera de tu sitio.
Lo que no vamos a tratar aquí es la personalización de cabeceras en constructores de páginas de WordPress de terceros como Divi o cualquier otro plugin diseñado específicamente para gestionar cabeceras (y pies de página) de sitios web. Podría merecer la pena explorar estos plugins si tu única opción requiere editar directamente los archivos del tema y quieres evitar la programación PHP.
Cómo editar la cabecera de un tema de bloques
Si has utilizado Gutenberg para crear contenido, sabrás que WordPress incluye una gran colección de bloques que puedes colocar en las páginas para componer cualquier cosa, desde encabezados, párrafos y listas hasta medios, navegación y formularios. Hay una clase de bloques que realizan tareas similares a los widgets de los temas clásicos, como generar enlaces a las últimas publicaciones y comentarios, mostrar una nube de etiquetas o insertar un calendario.
Se pueden combinar varios bloques, darles estilo y guardarlos como patrones. También puedes añadir estos componentes a las partes de un tema de WordPress que ayudan a definir el diseño de una página, incluidas las cabeceras.
Al igual que los bloques individuales, las partes de las plantillas pueden definirse en archivos HTML. Los temas de bloques son fáciles de personalizar porque la información que describe esas modificaciones se guarda en la base de datos de WordPress y se aplica a los distintos componentes cuando se genera una página.
Por tanto, cuando hablamos de «editar» un encabezado en un tema de bloques, rara vez estamos hablando de editar un archivo almacenado en un directorio de temas de WordPress.
Bajo el capó: Un encabezado de tema de bloques
Inspeccionar el HTML que hay detrás de una parte de la plantilla, como un encabezado, ayuda a explicar lo que ocurre cuando personalizas un tema.
Vamos a utilizar el tema Seedlet para este tutorial porque está disponible como Seedlet (Bloques) y el más antiguo Seedlet (Clásico). Seedlet (Bloques) utiliza el tema Blockbase como padre, y éste es todo el contenido del archivo header.html en los directorios del tema Seedlet:
<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->La mayor parte de la magia que hay detrás de los bloques de WordPress ocurre en los comentarios HTML. Los comentarios pueden pasar información de estilo y otras directivas durante la construcción de la página. El HTML anterior añade algo de espaciado vertical a nuestro encabezado predeterminado, pero la acción principal es la petición de incluir un patrón en el tema Blockbase que (una vez que se añade .html ) se encuentra en el archivo header-centered.html.
El directorio para las partes de la plantilla dentro del tema Blockbase incluye estos archivos relacionados con una cabecera:
header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.htmlPor ejemplo, el archivo header-rounded-logo.html incluye un comentario HTML que añade una clase CSS para el recorte circular de la imagen del logotipo. Si nos interesara ese enfoque, podríamos editar nuestro archivo Seedlet header.html para incluir header-rounded-logo.html en lugar de header-centered.html. Pero no tenemos que hacerlo porque podemos aplicar esa parte de plantilla en el Editor de Sitios de WordPress y dejar intactos los archivos del tema en el disco duro.
Usar el Editor de Sitios para personalizar una cabecera
Con un tema en bloque activo en nuestro sitio web, podemos acceder al Editor de Sitios en el panel de administración de WordPress seleccionando Apariencia > Editor:
La vista inicial en el Editor de Sitios es un diseño de página completa que incluirá la cabecera, el pie de página y cualquier otra parte de la plantilla ya añadida por el desarrollador del tema. Podemos hacer clic en el área de la cabecera para empezar a editar inmediatamente.
Abajo, nuestra cabecera incluye un marcador de posición para un logotipo y ya muestra el nombre del sitio y la navegación principal (que ahora consiste sólo en «Sobre nosotros» y «Página de muestra»). Si añadimos un eslogan a la información básica de nuestro sitio, también aparecerá aquí.
Estos elementos de identidad del sitio ya aparecen en nuestra cabecera porque la parte de la plantilla header-centered.html mencionada anteriormente incluye estos comentarios:
<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->La navegación principal está generada por este comentario:
<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->Añadamos nuestro logotipo:
- Selecciona el marcador de posición del logotipo.
- Haz clic en el botón Añadir medios.
- Elige tu logotipo en la biblioteca multimedia de WordPress o súbelo desde el disco.
Personalizar la cabecera de un sitio web añadiendo un logotipo es una tarea tan común que incluso la mayoría de los temas clásicos de WordPress simplifican el trabajo en el Personalizador. Así que vamos a añadir un bloque que no está ya previsto en la plantilla: un menú secundario cerca de la parte superior de la página con la entrada: Tienda.
En primer lugar, activamos la visualización del Insertador de Bloques haciendo clic en el icono situado cerca de la esquina superior izquierda del Editor de Sitios:
Con el Insertador de Bloques activo:
- Busca el bloque de navegación (puedes buscarlo).
- Arrastra el bloque hasta el margen superior de la cabecera.
Ahora, editamos el bloque de navegación creando un enlace personalizado (separado de la navegación principal) que muestre el texto Tienda y tenga la URL de nuestro subdominio de comercio electrónico:
Por defecto, todo en esta parte de la plantilla de cabecera está centrado en la página. Queremos que el enlace Tienda flote a la derecha. Para ello:
- Haz clic en el nuevo bloque de navegación.
- Haz clic en el icono Cambiar justificación de elementos de la barra de herramientas.
- Selecciona Justificar elementos a la derecha.
Aquí tienes la cabecera terminada:
Cómo modificar la cabecera de un tema clásico con el Personalizador
Cuando se lanzó la primera versión del Personalizador de temas en 2012, junto con WordPress 3.4, supuso un salto adelante para ayudar a los administradores a modificar el aspecto de sus sitios web sin programar.
El Personalizador se ha mejorado significativamente desde entonces, pero una cosa sigue siendo cierta: el desarrollador de un tema determina lo que se puede y lo que no se puede personalizar con la herramienta. Eso contrasta con la libertad que tienen los propietarios de sitios con el Editor de Sitios basado en bloques.
Usar el Personalizador de temas de WordPress
Cuando un tema clásico compatible con el Personalizador está activo en un sitio, accede a él en el panel de administración de WordPress seleccionando Apariencia > Personalizar.
En el menú principal del Personalizador, seleccionamos Identidad del Sitio para acceder a los componentes personalizables de la cabecera:
En la sección Identidad del Sitio de este tema, podemos añadir o cambiar un logotipo y editar el título del sitio y cualquier eslogan. (El título del sitio y el eslogan se rellenan inicialmente mediante entradas en la página Configuración General del panel de administración).
Este tema también coloca la navegación principal del sitio en la cabecera. También hay un lugar para la navegación en el pie de página y para un menú de enlaces a redes sociales. El Personalizador te permite elegir qué menú quieres asignar a cada una de estas ubicaciones — si es que quieres asignar alguno — pero las ubicaciones en sí son esencialmente fijas.
Tras hacer clic en el botón Seleccionar Logotipo resaltado arriba, podemos elegir un logotipo de la biblioteca multimedia de WordPress o subir uno nuevo desde el disco.
Abajo, con un logotipo colocado, el Personalizador nos permite eliminar la imagen o sustituirla por otra:
Bajo el capó: ¿Qué puede personalizar el Personalizador?
Entonces, ¿cómo determina el Personalizador si podemos subir un logotipo y dónde debe colocarse una vez lo hayamos hecho?
Comienza con esta entrada en el script functions.php del tema:
/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
'custom-logo',
array(
'height' => 240,
'width' => 240,
'flex-width' => false,
'flex-height' => false,
)
);Ese bloque de código activa el botón Seleccionar Logotipo en la pestaña Identidad del Sitio del Personalizador, junto con su enlace a las funciones de la Biblioteca Multimedia.
A continuación, dentro del código PHP utilizado para construir la cabecera del sitio, se añade este breve fragmento de código en el lugar donde debe aparecer el logotipo:
<div class="site-logo"><?php the_custom_logo(); ?></div>Resultado:
Cambiar la cabecera de WordPress editando los archivos del tema
Arriba, cuando personalizamos la cabecera en un tema de bloques utilizando el Editor de Sitios, añadimos un menú secundario con un enlace a la Tienda. Teníamos libertad para colocar ese bloque de navegación donde quisiéramos dentro de nuestra cabecera. Nuestra versión clásica del tema no tiene ninguna ubicación reservada para dicho menú, así que tendremos que editar el código PHP relacionado con la cabecera para realizar el cambio.
Podríamos simplemente abrir el archivo de tema apropiado y añadir manualmente el HTML para nuestro menú secundario, pero eso sería poco previsor. Más adelante, puede que queramos actualizar el texto de nuestro enlace de compra (¿Comprar ahora?), cambiar su URL o añadir otro elemento a ese menú (¿Iniciar sesión?).
Queremos añadir una nueva navegación a la cabecera que esté registrada en el Personalizador, permitiendo cambiar el contenido del menú secundario en el editor de menús de WordPress sin tener que volver al código del tema.
Antes de empezar: Haz una copia de seguridad
Profundizar en el código PHP de tu tema clásico de WordPress para personalizar la cabecera de tu sitio suele describirse como editar el archivo header.php. Este es el caso en muchos temas, pero otros pueden combinar varios archivos para construir una única cabecera.
Antes de realizar cambios en los archivos del tema, haz copias de seguridad. Aquí te explicamos cómo hacer copias de seguridad y cómo restaurarlas.
Incluso con copias de seguridad, puedes tener problemas cuando una actualización de un tema de terceros sobrescriba tus cambios. Tus modificaciones podrían desaparecer del sitio hasta que puedas restaurar los archivos del tema modificado a partir de una copia de seguridad. Por eso te recomendamos encarecidamente que crees un tema hijo sólo para tus archivos modificados y que pruebes las actualizaciones en un sitio staging de WordPress.
Editar una cabecera de WordPress en un tema clásico
Nuestro tema clásico de muestra tiene un lugar reservado en la cabecera para la navegación principal. En el Personalizador, podemos seleccionar el menú de WordPress que queremos asignar a esa ubicación. En nuestro caso, ese menú se llama «Menú principal».
También hay ubicaciones en el tema para la navegación por el pie de página y los enlaces sociales, pero puedes ver a continuación que no están habilitadas actualmente:
Si echamos un vistazo al script functions.php del tema, veremos dónde se hace referencia por primera vez a esas ubicaciones de los menús:
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);A continuación, añadimos a ese bloque una entrada para registrar nuestro nuevo menú «Navegación secundaria»:
// This theme uses wp_nav_menu()
register_nav_menus(
array(
'primary' => __( 'Primary Navigation', 'seedlet' ),
'secondary' => __( 'Secondary Navigation', 'seedlet' ),
'footer' => __( 'Footer Navigation', 'seedlet' ),
'social' => __( 'Social Links Navigation', 'seedlet' ),
)
);Cuando volvamos al Personalizador, la nueva opción Navegación Secundaria aparecerá en el área Ubicaciones del Menú:
Podemos dar un nombre a nuestro menú (Menú Secundario) y empezar a añadirle enlaces. Como hicimos con el Editor del Sitio en el tema basado en bloques, crearemos una entrada para Tienda.
De vuelta en el archivo del tema para la cabecera, añadimos algo de código que confirme que el menú de navegación secundario existe y que tiene al menos una entrada en la lista de enlaces. A continuación, analizamos el contenido del menú y lo mostramos:
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations = get_nav_menu_locations();
$menu_id = $locations[ $location_name ];
$menu_obj = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
array(
'theme_location' => 'secondary',
'menu_class' => 'menu-wrapper',
'container_class' => 'secondary-menu-container',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<button id="secondary-open-menu" class="button open">
<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
</button>
<?php endif; ?>
</div>Ahora, nuestra cabecera incluye nuestro enlace Tienda (resaltado en rojo a continuación) en nuestra ubicación preferida para la navegación secundaria.
Con este enfoque, podemos cambiar el texto de anclaje utilizado para nuestro enlace Tienda — o incluso añadir elementos de menú adicionales a la navegación secundaria — simplemente editando nuestro menú Navegación secundaria en el panel de administración de WordPress.
Resumen
Si quieres modificar la cabecera de tu sitio de WordPress sin recurrir a plugins de terceros o constructores de páginas, los temas basados en bloques proporcionan una flexibilidad casi ilimitada en combinación con el Editor de Sitios. El Editor de Sitios te permite colocar una variedad de bloques prácticamente en cualquier lugar del diseño de una página. Las modificaciones que hagas en las definiciones de los bloques y en el estilo se almacenan en la base de datos de WordPress, evitando la necesidad de modificar los archivos del tema en el disco.
El Personalizador, que hemos utilizado durante más de una década para gestionar temas clásicos, permite realizar cambios en los elementos que el desarrollador de un tema ha identificado y registrado como «personalizables». Los cambios que quieras hacer fuera de ese ámbito pueden requerir la edición de los archivos del tema y — casi con toda seguridad — unos conocimientos básicos del lenguaje de programación PHP.
¿Buscas una forma mejor de crear sitios de WordPress? Echa un vistazo a DevKinsta, basado en Docker, una suite de desarrollo local gratuita utilizada por 60,000+ desarrolladores, diseñadores web y freelancers.
Steve Bonisteel es un Editor Técnico de Kinsta que comenzó su carrera de redactor como periodista de prensa escrita, persiguiendo ambulancias y camiones de bomberos. Lleva tratando temas relacionados con la tecnología de Internet desde finales de la década de 1990.
Deja una respuesta