Encabezado diferente por página en WordPress: así es como se hace

Tener la capacidad de WordPress para mostrar un encabezado diferente por página es muy útil para las páginas de ventas o incluso para los embudos.

Cree un nombre de producto único, cree una página de ventas y luego tenga un encabezado de WP diferente por página para cada etapa de su embudo de ventas...

Página de lanzamiento, página de JV, página de registro, página de seminario web... lo que sea. Realmente puedes ir a la ciudad con los encabezados de WP y no es (siempre) tan difícil de hacer.



De hecho, algunos temas hacen que apuntar y hacer clic sea simple.

Si no, siempre puede ir a la ruta del complemento.

A medida que continúe leyendo a continuación, obtendrá información detallada sobre cómo reemplazar su encabezado WP por página.

Todo lo que necesita es una imagen de encabezado diferente en el mismo tamaño de encabezado. Los métodos para colocar su imagen en el espacio del encabezado se detallan a continuación.
 

WordPress: encabezado diferente por página

Use un tema que le permita ocultar el encabezado, luego puede reemplazarlo con una imagen en la publicación. Alternativamente, agregue la funcionalidad de reemplazo de encabezado usando el complemento WP Display Header. En caso de que no anule su encabezado predeterminado (lo que da como resultado que se muestren dos encabezados), oculte el encabezado predeterminado con CSS.
 

Deshabilitar el encabezado en la página (depende del tema)

Antes de meterse con cualquier codificación o agregar más complementos que pueden o no ser necesarios, verifique que su tema requiera su intervención.

En su editor de WP, busque en la barra lateral derecha una sección titulada 'elementos'.

El encabezado es un elemento y hay algunos temas (en su mayoría premium) que le brindan la opción de deshabilitar el encabezado en páginas y publicaciones individuales.

 

Si tiene esa opción, puede reemplazar la imagen del encabezado en cada página con una imagen estándar.

Puede insertar una imagen de encabezado directamente dentro del editor que coincida con las dimensiones del encabezado de su plantilla. Simplemente desmarque la casilla para mostrar la imagen del encabezado.

Tenga en cuenta que insertar una imagen dentro del editor de publicaciones carga la imagen dentro de su área de contenido. Si tiene su barra lateral configurada para mostrarse, no se colocará encima de ella.

Para eso, necesita reemplazar la imagen del encabezado. No lo oculte, luego reemplácelo con una imagen en la publicación. Eso solo funciona si su tema también tiene la opción de ocultar la barra lateral.

Si su tema no admite ocultar el encabezado del tema por página...
 

Recurra a los complementos para reemplazar su encabezado predeterminado en una sola página/publicación

Probamos dos. Ninguno funcionó fuera de la caja. Los complementos dependen de que los desarrolladores hagan que sus temas sean compatibles con los encabezados personalizados.

Si su tema no es compatible con el gancho (customer_header) en WP, los complementos parecen (en la superficie) inútiles.

Pero, siendo fanáticos del personalizador WP CSS, descubrimos que hay una manera de hacerlos funcionar sin duplicar su archivo header.php, editar códigos con FTP y posiblemente romper su sitio.
 

Una forma rápida de saber si alguno de estos complementos funcionará sin editar...

Vaya al menú Apariencia, seleccione el personalizador, abra la configuración de su 'encabezado' y vea lo que tiene.

Necesita su tema para permitirle agregar nuevos encabezados Y mantener los encabezados cargados anteriormente disponibles para uso futuro. Si puede 'agregar nuevo', su tema es bueno. Si solo puede 'cambiar' el encabezado o el logotipo del sitio, los complementos no funcionarán.

Los dos complementos para probar son 'WP Unique Headers' y 'WP Display Headers'.
 

Encabezados únicos de WP y encabezados de visualización de WP

Para que funcionara en nuestras pruebas, los cambios debían realizarse con CSS; de lo contrario, el resultado era que la imagen del encabezado predeterminado se colocaba sobre la imagen diferente.

El resultado de dos imágenes de encabezado, una sobre la otra, es desordenado.

Así que tenga en cuenta que si ve que esto sucede, no significa que el complemento sea incompatible con su tema. Puede ocultar elementos con CSS y esa es la solución rápida para que complementos como estos funcionen.

Vaya a su menú Apariencia, seleccione Personalizar, luego vaya al menú CSS adicional.

Agrega el siguiente código:

.page-id-1283 .custom-logo {
    display:none;
}
.page-id-1283 .menu {
    display:none;
}

 

Donde está el ID de la página, reemplácelo con el ID de su página. Cargue la página en la que desea un encabezado diferente y la ID de la página se muestra en la barra de direcciones URL de su navegador.

Donde está el 'logotipo personalizado', reemplácelo con el código de encabezado de su tema.

Para encontrarlo, haga clic con el botón derecho en la imagen de su encabezado, seleccione inspeccionar y el elemento 'clase' es su ID de clase de encabezado. La mayoría de los temas son 'logotipo personalizado' o 'encabezado personalizado'.

Mantenga la pantalla configurada como 'ninguna'. Eso ocultará su imagen de encabezado predeterminada.
 

La segunda sección de CSS que quizás no necesites

Use esto si encuentra que su menú de navegación se muestra dentro de su gráfico de encabezado diferente en lugar de debajo de él.

Como el encabezado predeterminado se oculta, la barra de navegación principal se empuja hacia arriba para llenar el espacio en blanco.

Puede ocultarlo, que es lo que hace el código CSS anterior, o puede jugar con elementos de relleno para empujar la barra de navegación hacia abajo debajo de la nueva imagen del encabezado.
 

Usando el complemento de encabezado de pantalla WP

Una vez que se activa el complemento WP Display Header, cuando carga una página o publica en modo de edición, obtiene una sección de encabezado adicional que se muestra debajo de su editor de WordPress. Seleccione el encabezado único para mostrar para esa página o publicación, luego haga clic en actualizar.

Nota: Cada imagen de encabezado que se muestra son los encabezados 'cargados previamente' que puede cargar en la configuración del encabezado del personalizador de temas.

Es por eso que necesita un tema que guarde los encabezados anteriores. El complemento no funcionará en temas que solo le permitan cambiar un encabezado o logotipo.

Esto reemplaza el encabezado predeterminado con su encabezado único para esa página o publicación solamente.

Una vez que haya seleccionado su encabezado diferente, presione vista previa y verá que se muestra el encabezado diferente.


 

Cómo hacer un encabezado personalizado en dos minutos

Si pasas MUCHO tiempo editando imágenes, hazte un favor y crea una cuenta gratuita en Canva.

Se necesitan dos minutos (dependiendo de la conexión a Internet) para crear un gráfico personalizado, guardarlo en su computadora, luego cargarlo en WP y configurarlo como su gráfico de encabezado personalizado.

Con el fin de crear un gráfico personalizado para los encabezados de página, consulte como descargar desde canva , que lo guía a través de la etapa de creación de imágenes personalizadas y la descarga.
 

Subiendo tu encabezado personalizado

Una vez que tenga su imagen, regrese a su tablero de WP, vaya a Apariencia, luego seleccione 'Personalizador'. Vaya a la configuración del encabezado y esta vez seleccione 'Agregar nueva imagen'.

Con toda probabilidad, cambiará su imagen de encabezado en todas las páginas cuando agregue la imagen por primera vez. Haga clic en el encabezado de la sección 'cargado previamente' para restaurar su gráfico de encabezado predeterminado.

Ahora, edite su página o publicación para mostrar un encabezado diferente en esa página específica.

Haga clic en el botón de radio junto a la imagen de encabezado que desea para esa página. Vuelva a la parte superior, haga clic en el botón 'vista previa' y verá que su página o publicación se muestra con una imagen de encabezado diferente.
 

Una combinación de tema y complemento que funcionó para poner diferentes encabezados en diferentes páginas es:

Si está iniciando un sitio con WordPress y quiere ir por la ruta gratuita personalizando temas WP gratuitos, una combinación que funciona sin necesidad de ediciones de CSS es el tema puro y simple (versión gratuita) y los encabezados de pantalla WP.

Instale y active el tema y el complemento y luego puede seleccionar diferentes encabezados para mostrar en diferentes páginas y publicaciones.