X
Jhon Marreros Guzmán

Ocultar el título en la página de inicio de WordPress

Si has configurado tu sitio para que en el inicio se muestra una página estática, es posible que el tema que estas usando muestre el título de esta página, en este artículo aprenderás distintas maneras de ocultar este título de la página de inicio en WordPress.

 

Generalidades

Para especificar una página de inicio en tu sitio web lo puedes hacer desde Ajustes > Lectura tal como se muestra en la siguiente imagen.

 
Luego, posiblemente verás que te aparecerá el título en el front-end de tu sitio, tal como se muestra en la siguiente imagen en la que hemos usado el tema Twenty Nineteen

En un artículo anterior vimos las diferencias en la configuración de Página de inicio y Página de entradas en WordPress

 

– Eliminar el título directamente desde WordPress

Las versiones actuales de WordPress permiten crear una página sin título, por lo que podrías eliminar directamente el título de la página. Tal como se muestra en la siguiente imagen:

Como verás ahora la página no tendrá título, y en algunos lugares se identificará con el ID, lo cual puede complicarte la administración.

 

– Ocultar el título por CSS

Con esta opción sólo se ocultará el título en el front-end del sitio, en el backend se seguirá mostrando. El código que podemos usar será:


.home .entry-header{
	display: none;
}

Puedes agregar este código al final de tu archivo style.css de tu child-theme o agregarlo en la opción de CSS del theme, desde: Apariencia > Personalizar

 

– Remover el título usando Hooks

Esta opción requiere agregar el siguiente código PHP al final del archivo functions.php del theme o child-theme, con este código eliminamos el título sólo en el front-end del sitio.


add_filter( 'the_title', 'remove_home_page_title', 10, 2 );
function remove_home_page_title( $title, $id ) {
	if ( is_front_page() ){
		$home_id = get_option('page_on_front');
		if ( $home_id == $id ) return '';	
	}
	return $title;	
}

En el código anterior:

  • Usamos un Hook de filtro llamado the_title que hace referencia a la función remove_home_page_title
  • La función acepta dos parámetros, uno de ellos es el $title y el otro el $id de la entrada o página
  • Lo primero que hacemos es comprobar si estoy en el front-page con la función is_front_page
  • Obtengo el id de la página de inicio con la función get_option() y el parámetro page_on_front
  • Comparo los ids y en este caso retorno el título vacío
  • Si no se cumple estas condiciones anteriores retorno la variable $title sin cambios

 

Conclusión

Como hemos visto, existe diferentes formas de eliminar el título de tu página de inicio, usa el que más te convenga, ten en cuenta sin embargo que al eliminar el título eliminas la etiqueta h1, por lo que deberás agregar esta etiqueta manualmente como parte de tu contenido.

 

Artículos Relacionados

Categorías: Themes
Etiquetas: mejoras

Ver comentarios (59)

  • Gracias por la solución, tendrán algún articulo que enseñe como agregar el la etiqueta h1, manualmente?

    • Hola, es posible que el theme que uses tenga código CSS que haga que aún permanezca el espacio del título, tendrías que ocultar ese espacio por CSS, puedes enviar la url para ver lo que comentas.

  • Hola John, me pasa lo mismo que a Jesús. Pude limpiar el título pero me queda la caja. La url es fajuelectricidad.com.ar. Estoy usando el tema de stackable.

    Gracias
    Guillermo

    • Hola Guillermo, es posible que sea debido a que tu theme define una altura para el contenedor del título, aunque lo elimines aún aparece el contenedor, veo que tu sitio esta en mantenimiento y no puedo ver lo que comentas, pero la idea sería ocultar el contenedor igualmente por CSS.

  • A mi me sucedía lo mismo; me encuentro trabajando con el tema ''Zeriff Lite'' y eliminé el entry-header por medio de plugin, ya que por CSS me eliminaba también los títulos de las entradas del blog, cosa que no quería, pero de igual forma quedaba ese espacio en blanco que se ve horrible. La solución que encontré fué:

    .content-left-wrap {
    padding-top: 0;
}

    Aunque de igual forma queda un pequeño espacio que aún no logro eliminar, ya no se nota tanto como antes. Les cuento por si a alguien le sirve, saludos

    • Olvidé mencionar; esto también eliminará el espacio entre la imagen de título en la pestaña blog, dejando las entradas pegadas al encabezado, por lo que también deberán añadir:

      .blog .site-content{
	padding-top: XXXX ;
}

      Espero no olvidar nada :D

      • Hola Victor, dónde debes introducir ese código?

        Yo consigo eliminar el título mediante el functions.php pero me sigue apareciendo en las demás páginas del sitio, a parte del hueco donde antes aparecía el título en la página principal.

        Gracias.

        • Hola, si quieres eliminar en todas las páginas el título puedes hacerlo con el siguiente código:

          add_filter( 'the_title', 'remove_page_title', 10, 2 );
function remove_page_title( $title, $id ) {
	return '';	
}

          Saludos.

  • Hola, He pasado por todos los posts no le encuentro la vuelta.

    Estoy intentando ocultar el "nombre del sitio web" aquel que colocamos en Configuracion - nombre del sitio . Este por defecto aparece en todas las entradas y paginas. Pueden ver a lo que me refiero si entran al http://www.oceandivestore.com este titulo aparece en blanco y dice "tienda online de buceo"

    He probado con todos los códigos posibles en Css sin resultados.

    Ojalá puedan ayudarme!
    saludos !!

    • Hola, prueba con el siguente código CSS

      .logocase{
  display: none;
}

      Refresca tu navegador para ver los cambios.
      Saludos.

    • Hola, cada theme tiene diferentes clases, en tu caso además tiene que ver con el padding, agrega el siguiente código CSS: 

      .home .site-main,
.home .site-main > .page{
  padding-top:0;
}

      Saludos.

    • Hola, tal vez tengas que ocultar el contenedor o quietarle márgenes, puedes escribirme a través del formulario de contacto, envía la url de tu sitio.

    • Hola, por CSS puedes ocultarlo con este código:

      .entry-title{
	display: none;
}

      Saludos.

  • Hola estimado Jhon. Por favor mi problema es que al verificar en "Entradas" no se visualiza la página de inicio ni su nombre; sin embargo se edita, se actualiza y se publica.

    • Hola, entiendo entonces que en tu caso si quieres mostrar el título, posiblemente tu theme te este ya quitando el título, si aún no lo solucionas coméntame más detalles a través del formulario de contacto: https://decodecms.com/contacto/

    • Hola, el título no genera ese espacio porque esta oculto, más bien parece que lo genera el elemento que tiene la imagen, prueba con el siguiente código que reduce el padding-top de ese elemento:

      #hypermarket-page-content{
  padding-top: 0;
}

      Saludos.

Deja un comentario