personalizar-cabecera-wordpress-cabecera

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

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.

personalizar-cabecera-wordpress-personalizar-plantilla

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í:

personalizar-cabecera-wordpress-ejemplo-1

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

personalizar-cabecera-wordpress-ejemplo-2

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.

personalizar-cabecera-wordpress-tipografia

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

personalizar-cabecera-wordpress-paletas-colores

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.

personalizar-cabecera-wordpress-menus

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.

contratar hosting WordPress


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.

personalizar-cabecera-wordpress-editor-codigo-bloques

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).

personalizar-cabecera-wordpress-editor-archivos-temas

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.

personalizar-cabecera-wordpress-descargar-header

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

personalizar-cabeceras-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.

personalizar-cabeceras-wordpress-header-footer-ejemplo

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.

personalizar-cabeceras-wordpress-elementskit-ejemplo

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

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.


contratar hosting WordPress





Imagen

Hosting Web

Lanza tu proyecto a la red. Desde 2,48 € al mes podrás tener visible tu negocio en Internet ¿A qué esperas?

Dominios

El primer paso de un negocio en Internet es contar con un dominio. ¡Regístralo!

Imagen

Certificado SSL

Protege tu web, gana posiciones en Google y aumenta tus ventas y clientes.

Imagen

Hosting WordPress

Para páginas corporativas y ecommerce hechos en WordPress. Configuración específica y backups diarios.
AXARNET COMUNICACIONES S.L | Lee nuestro Aviso Legal y nuestra Política de Cookies | Echa un vistazo a nuestras Condiciones Generales de Contratación
Política de Cookies
.
Usamos cookies propias y de terceros para asegurarnos de brindarte la mejor experiencia en nuestra web y para recopilar datos sobre cómo los visitantes interactúan con nuestra web y nuestros servicios. Al hacer clic en Aceptar, estás de acuerdo con el uso de todas las cookies para analítica, publicidad y soporte. Si lo prefieres, puedes hacer clic en Configurar y rechazar las cookies de analítica y publicidad. Para más información puedes leer nuestra Política de cookies.
Cookies manager

Continúa con tu compra

¿Es la primera vez que compras?

Si ya eres cliente de Axarnet