Cómo personalizar la cabecera de WordPress 【Paso a Paso】

---

En WordPress, la cabecera no cambia, sigue siendo la parte superior del sitio web, como en cualquier otra web que no esté hecha con WordPress.

En la cabecera sueles encontrar el logotipo o marca de la web, los menús para que puedas navegar por las páginas más importantes de la web, los accesos de login (si los tiene), así como información de contacto.

La cabecera suele ser fija en la página principal del sitio y también en el resto de las páginas y entradas, aunque esto ya es opcional.

---

Qué es la cabecera de WordPress y cómo puedes personalizarla paso a paso

TABLA DE CONTENIDOS

• Qué es la cabecera de WordPress
• Cómo personalizar la cabecera desde WordPress
• Cómo editar la cabecera de WordPress desde el archivo header.php (sólo para expertos)
• Cómo usar cabeceras distintas en las páginas de WordPress

---

Qué es la cabecera de WordPress

La cabecera o header es, como su nombre indica, lo primero que nos encontramos al acceder a una web, lo que está en el encabezamiento del sitio, es lo que antes carga y por lo general, en lo primero que nos fijamos y por supuesto, una de las partes que componen una web.

Cómo personalizar la cabecera desde WordPress

Las cabeceras en WordPress se pueden personalizar, de una forma más o menos sencilla, desde el propio panel de administrador en WordPress.

Esto podemos hacerlo desde el menú Apariencia >> Temas y desde ahí, tienes que buscar la opción de Personalizar en la plantilla que quieras editar.

Hay que tener en cuenta que, dependiendo del theme que estés utilizando, tendrás más o menos opciones de personalización o la forma de hacer cambiará un poco.

Nosotros estamos utilizando el theme Twenty Twenty-Two, que es el más reciente de los themes diseñados por el equipo de WordPress, en el momento de escribir este artículo.

Si no te aparece la opción de Personalizar o ni tan si quiera la de Apariencia, es porque no tiene los permisos necesarios.

Si no eres el administrador, tendrás que hablar con él para que te de permisos de edición, ya que no todos los usuarios tienen permisos para editar la plantilla. Si eres el administrador, no tendrás ningún problema con esto.

Al acceder a la personalización del sitio, veremos 2 partes bien diferenciadas.

A la derecha, una plantilla del sitio que estemos utilizando en este momento y en la parte izquierda, las distintas opciones que puedes seleccionar para su edición.

Recuerda que esto puede cambiar según la plantilla que usemos, por ejemplo, en Twenty Twenty-Two lo veremos así:

Mientras que en el tema Twenty Nineteen, la personalización del sitio sería algo así:

Si quieres modificar el texto de la cabecera, tan sólo tienes que seleccionarlo y editarlo directamente en la plantilla.

También podemos cambiar el tamaño del texto, el color, la tipografía, etc., de la misma forma que hacemos habitualmente en el editor de WordPress.

Y por supuesto, puedes utilizar las paletas de colores que nos ofrecen las nuevas opciones de editor de WordPress.

Para modificar o crear nuevos menús, puedes abrir el menú de vista para ver la estructura y el número de los elementos.

Puedes crear un nuevo menú o gestionar los menús que ya estén creados y usando las opciones del editor, cambiar tamaños, colores, tipografías, etc.

Como verás, personalizar la cabecera de WordPress es bastante práctico e intuitivo si usas el menú de Personalizar, pero las opciones de personalización están limitadas por la plantilla que estemos utilizando y eso puede ser un problema en algunos casos.

Por este motivo, no es la única forma de personalizar la cabecera de WordPress y en la siguiente sección vamos a verlo.

Cómo editar la cabecera de WordPress desde el archivo header.php (sólo para expertos)

Si necesitamos una capacidad de edición mayor, podemos editar la cabecera de WordPress de otra forma.

Hay que tener en cuenta que lo que hacemos desde el menú Personalizar de WordPress, en realidad es editar un archivo llamado header.php.

Desde el archivo header.php veremos el código HTML tal y como es, sin ningún apoyo gráfico, como tenemos en el área de personalización de WordPress.

Si no tienes ninguna experiencia en editar HTML y CSS, no te recomendamos para nada que edites la cabecera de esta forma y si lo haces, ten siempre una copia de seguridad del archivo sin modificar, para que puedas restaurarlo de forma rápida en caso de desastre.

Puedes editar el archivo header.php de WordPress de varias formas, por ejemplo, en el theme que estamos probando, lo encontraremos en el menú de Opciones (los 3 puntos verticales) y entrando en el Editor de código.

Aunque en la mayoría de los themes, todavía lo podrás encontrar en Apariencia >> Editor de archivos de temas y luego buscado Cabecera del tema (header.php).

Si tienes acceso al hosting, también puedes descargar el archivo header.php para editarlo de forma local.

Para esto debes acceder al Administrador de Archivos y acceder a la carpeta wp-content/themes y acceder a la carpeta del theme que quieres editar.

Una vez dentro, no te costará encontrar el archivo header.php para descargarlo o editarlo de forma online.

En cualquier caso, sólo verás código, así que ten cuidado si quieres editarlo directamente sobre el archivo y recuerda realizar copias de seguridad del archivo antes de tocar nada.

Cómo usar cabeceras distintas en las páginas de WordPress

Si lo que estás pensando es crear cabeceras distintas en cada página de WordPress, también puedes hacerlo, aunque esto es algo un poco más complejo.

Si eres desarrollador o tienes acceso a un profesional, lo puede hacer de forma fácil, pero si no es así puedes hacerlo con un plugin para editar caberas en WordPress.

Header Footer Code Manager

Con el plugin Header Footer Code Manager podemos genera caberas distintas para cada una de las páginas o entradas de WordPress que queramos.

No sólo sirve para las cabeceras, también puedes usarlo para los pies de páginas, ya que el proceso es el prácticamente el mismo.

Es muy versátil y puedes añadir códigos HTML, CSS o JavaScript en las cabeceras. Puedes seleccionar en qué páginas o entradas se muestre o determinar que sólo aparezcan en navegadores de escritorios, dispositivos móviles, etc.

Eso sí, tendrás que añadir los códigos directamente, ya que no dispone de un editor propio.

ElementsKit Elementor

Si quieres algo más visual puedes optar por una opción como ElementsKit Elementor, que se trata de un plugin que añade funcionalidades al famoso editor de sitios Elementor.

Con este plugin puedes crear las cabeceras desde cero o editar algunas plantillas prestablecidas, todo con la facilidad de arrastrar y soltar los elementos que necesites para crear la cabecera.

Eso sí, si queremos usar una cabecera distinta en distintos sitios de nuestro WordPress, tendremos que pasar por la opción de pago del plugin, ya que en la gratuita sólo se puede editar el header de toda la web.

Aun así, si quieres un editor visual para crear el header de WordPress de manera visual, es una buena opción.

Qué Incluir en la Cabecera de WordPress

La cabecera es una de las primeras cosas que los visitantes ven cuando llegan a tu sitio web.

Por eso, es importante que esté bien diseñada y sea funcional. Aquí te dejamos algunas ideas sobre qué elementos incluir en la cabecera de tu sitio WordPress para que sea atractiva y útil.

Logotipo y Nombre del Sitio

El logotipo y el nombre de tu sitio son fundamentales para la identidad de tu marca. Asegúrate de que estén bien visibles y en alta calidad. Un logotipo claro y nítido ayudará a que tu sitio se vea profesional.

Menú de Navegación

Un menú de navegación bien estructurado es clave para una buena experiencia de usuario. Organiza tus páginas más importantes en un menú desplegable para que los visitantes encuentren fácilmente lo que buscan.

Barra de Búsqueda

Incluir una barra de búsqueda en la cabecera permite a los usuarios encontrar rápidamente el contenido que necesitan. Es especialmente útil para sitios con mucho contenido.

Iconos de Redes Sociales

Los iconos de redes sociales en la cabecera facilitan que los visitantes te sigan en tus perfiles sociales. Colócalos en un lugar visible pero que no distraiga demasiado del contenido principal.

Botones de Llamada a la Acción (CTA)

Botones como "Contáctanos", "Suscríbete" o "Compra Ahora" deben estar en un lugar prominente. Usa colores contrastantes para que destaquen y atraigan la atención de los usuarios.

Imágenes y Videos de Fondo

Añadir una imagen o video de fondo puede hacer que tu cabecera sea más dinámica y atractiva. Asegúrate de que estén optimizados para no ralentizar tu sitio.

Información de Contacto

Para negocios locales o servicios, es útil incluir información de contacto

Recursos y Herramientas

Para que la personalización de la cabecera de tu WordPress sea más fácil y efectiva, aquí tienes algunas herramientas útiles que puedes utilizar.

Canva

Canva es una herramienta de diseño gráfico online que es perfecta tanto para principiantes como para profesionales. Ofrece plantillas prediseñadas que puedes personalizar fácilmente.

Con Canva, puedes crear logos, banners y otros elementos gráficos para tu cabecera sin necesidad de tener conocimientos avanzados de diseño. Puedes encontrar más información en su web.

Figma

Figma es una herramienta de diseño y prototipado muy popular entre diseñadores web.

Te permite colaborar en tiempo real con tu equipo y crear diseños interactivos. Es ideal para diseñar cabeceras complejas y asegurarte de que cada detalle esté perfecto antes de implementarlo en tu sitio. Para más detalles, visita aquí.

Adobe XD

Adobe XD es una potente herramienta de diseño de interfaces y prototipado de Adobe.

Con Adobe XD, puedes crear prototipos interactivos y obtener una vista previa de cómo se verá y funcionará tu cabecera antes de implementarla.

Es una herramienta muy completa, pero también muy compleja, que te permitirá llevar tus diseños al siguiente nivel. Consulta más información en su web.

Conclusión

Si quieres personalizar la cabecera de WordPress, ya has visto que tienes varias opciones, algunas más visuales y otras más técnicas, que sólo deberían usar los usuarios más experimentaros.

Como el editor de las cabeceras de WordPress depende mucho de theme que estés usando, también puedes recurrir al uso de plugins para tener más control sobre las cabeceras.

Eso sí, te recomendamos que, en cualquiera de los casos, tengas preparada una copia de seguridad del archivo header.php, por si quieres volver a dejarlo todo como estaba.

Y recuerda que si quieres un alojamiento sólido para tu proyecto, en Axarnet encontrarás el mejor hosting WordPress y con un soporte 24x7 en español.