• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Ocultar el título en la página de inicio de WordPress

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

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

[ 21 mayo 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Básico] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Página estática desde Ajustes - Lectura

 
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

Título nombre de la página de inicio

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:

Creación página sin título

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.

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar subtítulos en WordPressAgregar subtítulos en WordPress
  • Habilitar comentarios en el inicio de WordPressHabilitar comentarios en el inicio de WordPress
  • Página estática y entradas recientesPágina estática y entradas recientes en el inicio de WordPress
  • Página de inicio y página de entradasPágina de inicio y Página de entradas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,80 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. joseph

    5 agosto, 2019

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

    • Jhon Marreros Guzmán

      8 agosto, 2019

      Hola, podrías probar usar un plugin, revisa por ejemplo: https://es.wordpress.org/plugins/hide-title/ , aunque si quieres ocultarlo para cualquier título de página o entrada y hacerlo por código, tendrías que usar el ID del artículo en lugar de comprobar sólo para la página de inicio.

  2. Jesus

    3 diciembre, 2019

    Hola se podría eliminar tambien el hueco que deja despues de quitar el título?

    • Jhon Marreros Guzmán

      6 diciembre, 2019

      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.

  3. Guillermo

    10 diciembre, 2019

    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

    • Jhon Marreros Guzmán

      13 diciembre, 2019

      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.

  4. Victor Muñoz F

    26 enero, 2020

    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

    • Victor Muñoz F

      26 enero, 2020

      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 😀

      • Julián

        15 abril, 2020

        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.

        • Jhon Marreros Guzmán

          15 abril, 2020

          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.

  5. Nicolas

    18 abril, 2020

    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 !!

    • Jhon Marreros Guzmán

      18 abril, 2020

      Hola, prueba con el siguente código CSS

      .logocase{
        display: none;
      }

      Refresca tu navegador para ver los cambios.
      Saludos.

  6. Esteban

    23 abril, 2020

    Hola me pasa lo miismo, la web que estoy haciendo es http://www.mallwebshop.com intenté poner el código de .logocase pero no hace nada, no logro quitar el espacio entre el menú y el slider.
    Podrás ayudarme ? Gracias

    • Jhon Marreros Guzmán

      24 abril, 2020

      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!important;
      }

      Saludos.

      • Esteban

        24 abril, 2020

        Funcionó, Muchìsimas Gracias !!!!!

  7. Irede

    30 abril, 2020

    Hola en mi página web no consigo quitar el espacio en blanco espero ayuda gracias.

    • Jhon Marreros Guzmán

      1 mayo, 2020

      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.

  8. Valeria Andrea Rut

    28 mayo, 2020

    Hola quisiera saber como hago para ocultar todos los titulos, estoy usando este template
    https://proteo.yithemes.com/classic-shop/

    • Jhon Marreros Guzmán

      28 mayo, 2020

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

      .entry-title{
      	display: none;
      }

      Saludos.

  9. Bertha

    10 junio, 2020

    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.

    • Jhon Marreros Guzmán

      11 junio, 2020

      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/

  10. adrian

    25 junio, 2020

    Buenas, me ocurre lo mismo, he ocultado el título pero no consigo quitar el espacio en blanco, la web es esta:

    https://39504263.servicio-online.net/

    • Jhon Marreros Guzmán

      25 junio, 2020

      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!important;
      }

      Saludos.

  11. Rosana - FemMarketingValencia

    28 agosto, 2020

    Buen aporte!

  12. Rafael

    9 septiembre, 2020

    Sí quiero ocultar el título en todas las páginas, excepto en una sola cómo puedo lograrlo?

    • Jhon Marreros Guzmán

      11 septiembre, 2020

      Hola, si quieres hacerlo por PHP puedes usar la función is_page() ya que acepta como parámetro el ID, por ejemplo:

      if ( is_page(123) ) {
      // tu código para remover el título
      }
      
  13. ANGEL BENITO

    23 octubre, 2020

    Hola Jhon,
    He conseguido quitar el título pero se me queda un pequeño separador que estaba debajo del título, no llega al centímetro pero crea un espacio en blanco a lo largo de todo el ancho de la pantalla algo feo y además no pinta nada ahí. ¿sabrías como quitar eso? por más que busco no encuentro nada.
    Gracias

    • Jhon Marreros Guzmán

      25 octubre, 2020

      Hola, posiblemente tengas que ocultarlo por CSS, envíame la url de tu sitio para verificar lo que comentas.
      Saludos.

  14. Luis

    16 enero, 2021

    Hola Jhon,

    Me pasa lo mismo que comenta la gente, al quitar el título de INICIO en la Home me deja un hueco de unos 2 cm. que afecta al diseño. ¿Cómo podría quitarlo? Te he dejado mi web al poner el comentario.

    Mil gracias por tu contenido

    • Jhon Marreros Guzmán

      19 enero, 2021

      Hola, en tu caso tu título H1 esta realizado con Elementor, puedes simplemente usar ese constructor para quitarlo.

  15. Henry Roncal

    2 febrero, 2021

    Hola Jhon, muchs gracias por tu aporte, me gustaría saber si es posible crear un filtro para ocultar el contenido de los Posts a los usuarios que no estén logueados, solamente mostrar el título y la imagen principal (obviamente sí mostrar el contenido de los posts a los usuarios logueados.). Gracias.

    • Jhon Marreros Guzmán

      2 febrero, 2021

      Hola, prueba configurando tu contenido como contenido privado, sino usa algún plugin de restricción de contenido que tiene funcionalidad adicional.

  16. Henry

    18 marzo, 2021

    Yo solo quiero quitarlo en las páginas pero no en el blog.
    Muchas gracias.

    • Jhon Marreros Guzmán

      18 marzo, 2021

      Hola, prueba cambiando la lógica de la función, quedaría:

      	if ( is_page() ){
      		return '';	
      	}
      	return $title;	
      

      Saludos.

      • Henry

        19 marzo, 2021

        ¿Esto lo tendría que cambiar en functions.php?

  17. Kellys

    21 mayo, 2021

    Hola Jhon, quiero eliminar los títulos de todas las paginas sin que se le borre el nombre a la pagina en el escritorio. Ya probé con todos los códigos que diste y no me funcionó, en uno de ellos se me borró hasta las palabras el menú. Tengo el tema de ASTRA.

    Mi página web es http://www.delujo.uno

    Te agradecería mucho si me ayudas a solucionar eso, porfa.

    • Jhon Marreros Guzmán

      22 mayo, 2021

      Hola, si quieres ocultarlo de todo tu sitio, puedes probar el siguiente código CSS:

      h1.entry-title{
           display:none;
       }
  18. Luis peña

    18 junio, 2021

    Hola Jhon, excelente las guías para nosotros los principiantes, una pregunta acabo de realizar un sitio de ejemplo en wordpress con storefront como tema, me aparecen las respectivas paginas pero cuando empiezo a navegarlas ya en tiempo de ejecución me aparece en la parte superior abajo del menú superior un icono de una casita y enseguida apunta a la pagina la cual abrí, si abro otra pagina del sitio sigue apareciendo el icono de home y apunta ahora a la nueva pagina que entre y aparece su respectivo nombre igual como aparece en el menú, mi pregunta es ¿hay forma de que no aparezca este icono junto con el nombre de la pagina en la cual me encuentro y sólo se quede visible el menú superior? de antemano agradezco tu tiempo. saludos

    • Jhon Marreros Guzmán

      21 junio, 2021

      Hola, ese icono de casita supongo que debería llevarte al inicio, sino te interesa podrías probar ocultarlo con CSS, revisa este artículo de guía para detectar el elmeneto HTML y las clases que usa para ocultarlo: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/

      • luis peña

        22 junio, 2021

        Muchas gracias Jhon, me sirvió mucho tu respuesta pude ocultarlo sin problemas. Agradezco que compartiste tu tiempo y conocimiento. saludos cordiales

  19. Miguel

    5 agosto, 2021

    Hola Jhon, no se como eliminar el espacio en blanco, entre el título y la imagen de la página web. Eliminé el título a través de “funtions.php”. Si me lo solucionas me harías un gran favor. Muchas gracias.

    • Jhon Marreros Guzmán

      8 agosto, 2021

      Hola, tendrías que enviar la url exacta de tu sitio en donde aparece el espacio que comentas, posiblemente se solucione con CSS.

  20. Ilde

    23 agosto, 2021

    Hola Jhon
    Mi problema es el mismo de muchos que te han preguntado sobre el espacio vacio que queda cuando quieres eliminar el título. He conseguido eliminar el texto pero el espacio sigue allí, y he ido probando cada una de las soluciones que has mencionado, pero el resultado sigue siendo el mismo.
    Desearía poder eliminar el espacio que queda, pero no lo consigo.ç
    Enlace de la página: https://cutt.ly/1Q5xCvR
    ¿Alguna sugerencia?
    Gracias

    • Jhon Marreros Guzmán

      24 agosto, 2021

      Hola, cada caso es diferente, especialmente si usas constructores, o por ejemplo en tu caso, que el enlace que envías no es una página de inicio, por lo tanto no te funcionará la clase .home, sino la clase .page-id-323 (que es el identificativo de la página que me envías en tu enlace).

      Ahora bien, supongo que quieres quitar el espacio superior de esta página, ese espacio es un padding, podrías ver con el constructor, o usar el siguiente código CSS:

      .page-id-323 .site-inner{
        padding-top: 0;
      }
      

      Saludos.

  21. Manuel Eduardo García López

    24 septiembre, 2021

    hermano probe con unos de los codigos pero sabes que quite el titulo de la pagina de inicio pero tambien quiero quitar el titulo de 3 paginas mas pero sin quitar mi barra de menu, porque lo hice con unos de los cogidos pero tambien me quito la barra de menu

    • Jhon Marreros Guzmán

      24 septiembre, 2021

      Hola, no debería ocultarte toda la barra, tal vez tu theme tenga una estructura especial o fuera del estándar. Si quieres aplicar esto también en páginas específicas, revisa esta respuesta: https://decodecms.com/ocultar-el-titulo-en-la-pagina-de-inicio-de-wordpress/#comment-6317 ( en este caso sería ocultarlo por PHP)

  22. Alexxo

    5 diciembre, 2021

    Puedo ocultar sin problema el Titulo, pero presento el mismo problema que los demás, existe un gran espacio entre el Menú del sitio y el Slider… pero note algo adicional: es un espacio que está ahí adicional previo al Titulo (El espacio está con o sin el titulo oculto). ¿Me podrías ayudar?

    Mi sitio es: https://planetadigital.tenomax.com

    • Jhon Marreros Guzmán

      6 diciembre, 2021

      Hola, prueba agregar el siguiente código CSS, con eso debería quitar ese espacio ya que por alguna razón tu theme tiene un margen-top de separación.

      #content.site-content{
        margin-top: 0!important;
      }

      Saludos.

      • Alexxo

        6 diciembre, 2021

        Funcionó perfecto. No tienes idea cuanto te lo agradezco. Duré horas buscando sin solución, y meses en otro proyecto de ya casi un año, que al final asi lo deje por la misma razón… hasta ahora.

        Por cierto, Excelente articulo. El mejor que encontré de todos los que leí.

        • Jhon Marreros Guzmán

          6 diciembre, 2021

          Que bueno que lo solucionaste :). Saludos.

  23. Ant.

    14 abril, 2022

    Excelente artículo. En mi tema usar el codigo de cc3 no va. Haciendolo por php consigo como es lógico quitar el titulo solo de la home. El caso es que yo quiero hacer desaparecer el titulo en todas las páginas de mi web. Mi theme es ocean.
    Como se podría hacer para quitar el titulo en toda la web y la franja que me aparece con el título ( lo de la franja no es tan importante por que con oponerla del mismo color que el fondo el problema esta resulto)
    Enhorabuena por tu contenido.

    • Jhon Marreros Guzmán

      16 abril, 2022

      Hola, puedes quitar o cambiar la condición:

      if ( is_front_page() ){
      //...codigo
      }

      Si sólo quieres quitarla en las páginas puedes usar en lugar de is_front_page() la función is_page()

      Saludos.

  24. Mike

    29 julio, 2022

    Saludos, estoy intentando eliminar el titulo de pagina solo de la pestaña del browser. Utilize elementor.

  25. Alex Acevedo

    19 agosto, 2022

    Hola Jhon muchas gracias, me funciono muy bien el metodo del hooks en la home, pero tengo una pregunta:
    ¿si necesito removerl el h1 de una pagina que no es la home usando el Hooks como debería ser el código? o ¿qué debo cambiar?

    intente cambiando el “if ( is_page( ) ) {” pero no me funcionó 🙁

    add_filter( ‘the_title’, ‘remove_home_page_title’, 10, 2 );
    function remove_home_page_title( $title, $id ) {
    if ( is_page(1139) ){
    $home_id = get_option(‘page_on_front’);
    if ( $home_id == $id ) return ”;
    }
    return $title;
    }

    No entiendo muy bien que más es lo que debo modificar para que me funcione en una URL específica

    Saludos

    • Jhon Marreros Guzmán

      20 agosto, 2022

      Hola, creo que ya no sería necesario la comprobación del id, sólo retorna una cadena vacío dentro del if:

      if ( is_page(1139) ){
       return '';
      }

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar un Slider al tema Storefront

Contenido de relleno para probar Gutenberg

Agregar Whatsapp flotante en WordPress

Cómo usar la cache de objetos en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados