Cómo personalizar la cabecera de WordPress (Guía para principiantes)

¿Quieres mostrar una cabecera personalizada para tu sitio web WordPress?

Muchos temas de WordPress vienen con una cabecera integrada que se sitúa en la parte superior de cada página. Puede que necesites personalizarlo para añadir enlaces importantes, iconos sociales, búsqueda en el sitio u otros elementos para causar una buena primera impresión.

En este artículo, le mostraremos cómo personalizar su cabecera de WordPress e incluso crear una cabecera totalmente personalizada para todo su sitio o páginas específicas.

¿Qué es la cabecera en WordPress?

La cabecera de su sitio web es la sección superior de cada página de su sitio web WordPress, y probablemente lo primero que verán sus visitantes.

Suele mostrar el logotipo y el título de su sitio web, los menús de navegación y otros elementos importantes que desea que los usuarios vean en primer lugar.

Por ejemplo, aquí está nuestra cabecera en WPBeginner que millones de lectores ven cada mes.

Personalizando la cabecera de tu sitio, puedes darle un diseño único y hacerlo más útil para tus visitantes. Puedes enlazar a tus páginas más populares, mostrar iconos sociales o el número de teléfono de tu negocio y mostrar botones de llamada a la acción para conseguir más conversiones.

Dicho esto, echemos un vistazo a cómo personalizar fácilmente tu cabecera de WordPress. Puede utilizar los siguientes enlaces para saltar a la sección que desea leer.

• Personalizar cabecera usando el Personalizador de temas de WordPress
• Personalice la cabecera usando el editor de sitio completo de WordPress
• Crear cabeceras personalizadas y diseños de página con SeedProd
• Añadir una cabecera personalizada para cada categoría
• Añadir un área de widget a la cabecera de WordPress
• Añadir imágenes de cabecera aleatorias a su blog de WordPress
• Añadir código personalizado a la cabecera de su sitio web (Avanzado)

Personalice la cabecera utilizando el Personalizador de temas de WordPress

Muchos temas populares de WordPress le permiten utilizar el Personalizador de temas de WordPress para realizar cambios en el área de la cabecera de su disposición WordPress. Esta característica a veces se denomina cabecera personalizada, pero no todos los temas son compatibles con ella.

Usted debe comenzar por navegar a Apariencia ” Personalizar en su área de administrador de WordPress.

Tu tema puede añadir una sección de “Cabecera” al Personalizador, o añadir opciones de cabecera en la sección “Color”, pero esto varía de un tema a otro. Aquí tienes algunos ejemplos.

Algunos temas, como Twenty Twenty-One, no ofrecen opciones de personalización de cabecera en absoluto. En este caso, le recomendamos que utilice un plugin editor de arrastrar y soltar tema como SeedProd que cubrimos a continuación.

El tema Twenty Sixteen te permite añadir una imagen de fondo a la cabecera, e incluso añadir imágenes de cabecera aleatorias.

Algunos temas de WordPress gratuitos y premium ofrecen aún más opciones de personalización del tema. Por ejemplo, puedes cambiar el estilo de fuente, disposición, colores y mucho más de la cabecera. Pero estás limitado a lo que el desarrollador del tema te permite hacer.

Por ejemplo, puede crear una cabecera personalizada utilizando el Personalizador de temas con el tema Astra.

Astra cuenta con una opción dedicada al “maquetador de cabeceras” en el panel de la izquierda. Aquí encontrarás diferentes ajustes para editar la apariencia y el estilo de la cabecera. Puedes crear una cabecera personalizada añadiendo bloques, igual que cuando editas una entrada de blog o una página en el editor de contenidos de WordPress.

Para empezar, basta con pasar el cursor sobre una zona vacía de la cabecera y hacer clic en el icono “+” para añadir un bloque de cabecera.

A continuación, puedes seleccionar cualquier bloque que quieras añadir a tu cabecera personalizada. Por ejemplo, puedes añadir un bloque de widget, un bloque de cuenta, un bloque de búsqueda, etc.

Además, el maquetador de cabeceras también te permite arrastrar y soltar los bloques y colocarlos encima o debajo de la cabecera.

Puede personalizar aún más cada bloque que añada a la cabecera.

Por ejemplo, si selecciona el bloque Título y logotipo del sitio, tendrá opciones para subir el título y el logotipo del sitio, cambiar la anchura del logotipo, mostrar la descripción corta del sitio, etc.

Además, también puede cambiar el color de fondo de la cabecera o añadir una imagen de fondo para que aparezca en segundo plano.

Cuando haya terminado de editar la cabecera personalizada, sólo tiene que hacer clic en el botón “Publicar”.

Para más detalles, consulte nuestra guía definitiva sobre cómo utilizar el Personalizador de temas de WordPress.

Personalice la cabecera utilizando el editor del sitio completo de WordPress

WordPress añadió la edición completa del sitio a WordPress en la versión 5.9. Si tu tema es compatible con la nueva característica, entonces sustituye al personalizador de temas. Sin embargo, en este momento solo hay unos pocos temas que funcionan con el editor de sitio completo.

Si utilizas un tema compatible, puedes personalizar tu cabecera accediendo a Apariencia ” Editor. Esto abrirá el editor completo del sitio, que es como el editor de bloques que utilizas para escribir entradas y páginas de WordPress.

Al hacer clic en la cabecera, notará que el nombre de la plantilla en la parte superior de la página cambia a “Cabecera de página”.

Ahora, al hacer clic en el icono “Ajustes” de la barra de herramientas, verá opciones para personalizar la disposición / color / borde / dimensiones de la cabecera.

A modo de ejemplo, cambiaremos el color de fondo de la cabecera. Primero, debes hacer clic en la sección ‘Color’ para expandirla. Después, debes hacer clic en la opción ‘Fondo’.

Aparecerá un mensaje / ventana emergente que le permitirá seleccionar un color sólido o un degradado. También habrá una serie de colores que puede seleccionar. Al hacer clic en un color, el fondo de su cabecera cambiará inmediatamente.

Encontrará más opciones de personalización al hacer clic en el icono “Estilos”, en la parte superior derecha de la página. Esto le permitirá cambiar la fuente, los colores y la disposición de la cabecera.

Para saber más acerca de cómo funciona el editor completo del sitio, consulte nuestra guía para principiantes sobre cómo personalizar su tema de WordPress.

Cree cabeceras y diseños de página personalizados con SeedProd

Si desea tener un control total sobre sus cabeceras, pies de página y barras laterales para dar a su sitio web un diseño único, le recomendamos que utilice SeedProd.

SeedProd es el mejor plugin maquetador de temas de WordPress que le permite crear fácilmente un tema de WordPress personalizado sin escribir ningún código. Esto incluye la creación de cabeceras, pies de página, y todo lo necesario para un atractivo tema de WordPress.

Incluso puede crear múltiples estilos de cabecera personalizados para diferentes páginas y secciones de su sitio web.

Nota: Puede utilizar la versión gratuita de SeedProd para crear páginas de destino personalizadas que incluyan cabeceras personalizadas, pero necesitará la versión Pro para crear temas totalmente personalizados que incluyan estructuras de cabecera para todo el sitio.

En primer lugar, te recomendamos que sigas nuestra guía sobre cómo crear fácilmente un tema de WordPress personalizado sin necesidad de código. Una vez hecho esto, SeedProd hace que sea sencillo personalizar tu cabecera.

Sólo tiene que hacer clic en el enlace “Editar diseño” que encontrará bajo la cabecera.

Esto abrirá la cabecera en el editor arrastrar y soltar de SeedProd.

Desde aquí, puede personalizar fácilmente su cabecera añadiendo nuevos bloques.

Hay bloques para etiquetas de plantillas como el logotipo del sitio, cualquiera de tus widgets de WordPress y bloques avanzados como un temporizador de cuenta atrás, un menú de navegación o botones para compartir en redes sociales.

Lo mejor es que puedes personalizar aún más cada bloque utilizando el maquetador de temas. Por ejemplo, puedes cambiar el tamaño y la alineación de tu logotipo o elegir qué páginas mostrar en el menú de navegación. Incluso te permite añadir una imagen en la cabecera.

Con SeedProd, también puede añadir una sección completa a la plantilla de cabecera de su tema.

Las secciones son un grupo de bloques, y puede utilizarlos para diferentes áreas de su sitio web. Esto incluye cabeceras, pies de página, características, testimonios, llamadas a la acción y mucho más.

Para utilizar una sección de cabecera, cambie primero a la pestaña “Secciones” del panel de diseño.

Después de eso, elija una sección de cabecera que le gustaría utilizar para su sitio web. SeedProd ofrece múltiples plantillas de secciones que puedes utilizar.

A continuación, siga adelante y personalice la sección de cabecera.

Una vez que esté satisfecho con su cabecera personalizada, asegúrese de hacer clic en el botón “Guardar” para guardar los cambios.

Ahora, ya está listo para publicar su cabecera personalizada.

Simplemente vaya a la página SeedProd ” Theme Builder desde su escritorio de WordPress y haga clic en el conmutador al lado de la opción ‘Activar Tema SeedProd’ a Sí.

Una vez que active la opción, SeedProd reemplazará su tema de WordPress por defecto con un nuevo tema y cabecera personalizados.

Ya puede visitar su sitio web para ver en acción la nueva cabecera personalizada.

Cree diferentes cabeceras personalizadas para cada página

¿Sabías que con SeedProd puedes crear cabeceras personalizadas para diferentes páginas?

El maquetador de temas te permite añadir cabeceras personalizadas para cada página de tu sitio web en WordPress. De esta forma, puedes mostrar una cabecera personalizada para diferentes categorías, etiquetas, tipos de entradas, tipos de páginas y mucho más.

Para empezar, tendrá que ir a SeedProd ” Theme Builder desde su escritorio de WordPress y hacer clic en el botón ‘Añadir nueva plantilla de tema’.

Aparecerá una nueva ventana emergente en la que tendrás que introducir los detalles de la plantilla del tema.

Introduzca un nombre para su plantilla de tema. A continuación, seleccione “Cabecera” como tipo de plantilla en el menú desplegable. Puede dejar en blanco el campo “Prioridad”.

A continuación, tendrás que introducir las condiciones de visualización de tu cabecera personalizada. Por ejemplo, hemos utilizado las condiciones en las que se mostrará en todas las entradas y páginas que están en la categoría tutoriales.

No olvides hacer clic en el botón “Guardar” cuando hayas terminado.

Después de eso, usted puede seguir adelante y editar la cabecera personalizada utilizando el editor de arrastrar y soltar tema de SeedProd.

Cuando haya terminado de editar la cabecera personalizada, sólo tiene que hacer clic en el botón “Guardar” de la parte superior.

Puede ver más ideas sobre cómo personalizar su cabecera utilizando SeedProd en nuestra guía para principiantes sobre cómo crear fácilmente un tema de WordPress personalizado utilizando el maquetador de temas de SeedProd.

Añadir una cabecera personalizada para cada categoría

La mayoría de los sitios web muestran la misma cabecera en todas las entradas, páginas, categorías y páginas de archivo. Sin embargo, puede mostrar una cabecera diferente para cada categoría de WordPress.

Esto puede hacerse añadiendo código a los archivos de su tema, pero tendrá más control utilizando un maquetador de temas.

Anteriormente le mostramos cómo personalizar su cabecera utilizando el plugin maquetador de temas SeedProd. SeedProd también le permite crear múltiples cabeceras personalizadas y mostrarlas para diferentes categorías utilizando la lógica condicional.

Para crear una nueva cabecera, debe navegar a SeedProd ” Creador de temas y hacer clic en el botón naranja “Añadir nueva plantilla de tema”. También puede duplicar su cabecera actual y utilizarla como punto de partida.

Aparecerá una ventana emergente en la que podrá dar un nombre a la plantilla del tema y seleccionar “Cabecera” en el menú desplegable Tipo.

También debe introducir una prioridad. Esto se utiliza si más de una cabecera cumple las condiciones para una determinada página, y se mostrará la cabecera con mayor prioridad. La cabecera por defecto tiene una prioridad de 0, así que asegúrese de introducir 1 o superior.

Después de eso, tendrá que establecer una o más condiciones. Esto le permite a SeedProd saber cuándo mostrar una determinada cabecera. Simplemente seleccione las condiciones de los menús desplegables.

En los dos primeros menús, debe seleccionar “Incluir” y, a continuación, “Tiene categoría”. En el último campo, debe escribir el nombre de la categoría en la que desea que aparezca la cabecera.

Puede mostrar fácilmente la misma cabecera para varias categorías al hacer clic en el botón “Añadir condición” e incluir otra categoría. Cuando haya terminado, asegúrese de hacer clic en el botón “Guardar” para guardar la nueva cabecera.

Ahora puede personalizar el diseño de cada nueva cabecera utilizando el editor de arrastrar y soltar de SeedProd como le mostramos anteriormente.

Para obtener más información, incluido cómo hacerlo mediante código, consulte nuestra guía práctica sobre cómo añadir una cabecera, un pie de página o una barra lateral personalizados para cada categoría.

Añadir un área de widgets a la cabecera de WordPress

Si estás creando un tema personalizado desde cero utilizando código, entonces puede que quieras añadir un widget de WordPress a tu cabecera para captar la atención de tus visitantes. Los widgets te permiten añadir bloques de contenido a secciones específicas de tu tema fácilmente, pero no todos los temas incluyen una zona de widgets en la cabecera.

Antes hemos mencionado lo sencillo que es añadir widgets a tu cabecera utilizando el maquetador de temas SeedProd. Pero ¿qué pasa si desea añadir un widget a la cabecera de un tema de WordPress normal?

Algunos temas, como el tema Astra, permiten personalizar la cabecera mediante el Personalizador de temas de WordPress. Por ejemplo, Astra añade una opción llamada “Maquetador de cabecera” que te permite personalizar completamente la cabecera, incluso añadiendo widgets.

Si su tema de WordPress no tiene actualmente un área de widget de WordPress en la cabecera, entonces tendrá que añadirlo manualmente añadiendo el siguiente código a su archivo functions. php, en un plugin específico del sitio, o utilizando un plugin de fragmentos de código.

Esta es una opción más avanzada, ya que tendrá que saber dónde colocar el código y cómo aplicarle estilo mediante CSS.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Este código registra una nueva barra lateral o un área lista para widgets para tu tema.

Si vas a Apariencia ” Widgets, verás una nueva área de widgets llamada ‘Custom Header Widget Area’. Ahora, puedes añadir tus widgets a esta nueva área.

Por último, tienes que añadir un código a la plantilla de cabecera de tu tema, que se encuentra en el archivo header.php de tu tema. Esto añadirá el área de widgets que creó anteriormente a su cabecera para que los widgets se muestren en su sitio web.

Tienes que copiar este fragmento de código y pegarlo donde quieras que se muestre el widget.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

Dependiendo de tu tema, puede que también necesites añadir CSS a WordPress para controlar cómo se muestra el área del widget.

Para más detalles, consulte nuestra guía sobre cómo añadir un widget de WordPress a la cabecera de su sitio web.

Añade imágenes de cabecera aleatorias a tu blog de WordPress

Otra forma de hacer más atractivas las cabeceras de WordPress es añadir imágenes aleatorias a la sección de cabecera.

Mostrar imágenes que cambian aleatoriamente ayuda a captar la atención de sus visitantes y hace que su contenido sea más participativo.

Para añadir imágenes de cabecera aleatorias a tu blog de WordPress, puedes utilizar el personalizador de temas y subir imágenes a la sección de cabecera. Esta opción puede variar en función del tema de WordPress que estés utilizando.

A continuación, seleccione la opción “Aleatorizar las cabeceras subidas”.

Si desea un mayor control y flexibilidad a la hora de mostrar imágenes aleatorias en la sección de cabecera, también puede utilizar un plugin de WordPress.

Para más detalles, consulte nuestra guía sobre cómo añadir imágenes de cabecera aleatorias a su blog de WordPress.

Añadir código a la cabecera de su sitio web (Avanzado)

Por último, si desea añadir código personalizado a la sección de cabecera de su sitio web, puede hacerlo fácilmente desde su escritorio de WordPress. Este método se recomienda para usuarios avanzados y no es adecuado para principiantes, ya que incluye la edición de código y requiere conocimientos técnicos.

Puedes encontrar los archivos de cabecera de tu tema yendo a Apariencia ” Editor de archivos de tema desde el panel de administrador de WordPress. En los archivos de tema ‘style.css’, puede desplazarse hasta la sección de cabecera del sitio y añadir o quitar código.

Nota: No le recomendamos que edite directamente los archivos del tema porque el más mínimo error puede romper su sitio web y estropear el diseño.

Una forma más fácil de añadir código personalizado para editar la cabecera de tu sitio es utilizando WPCode.

Primero, instala y activa el plugin gratuito WPCode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez activado, puede ir a Fragmentos de código ” Cabecera y pie de página desde su escritorio de WordPress. A continuación, introduzca el código personalizado en la sección “Cabecera”.

Después de introducir el código, haz clic en el botón “Guardar cambios”.

Para más detalles, puede consultar nuestra guía práctica sobre cómo añadir código de cabecera y pie de página en WordPress.

Esperamos que este tutorial te haya ayudado a aprender cómo personalizar tu cabecera de WordPress. Puede que también quieras aprender a elegir el mejor software de diseño web, o comprobar nuestra lista de plugins imprescindibles para hacer crecer tu sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.