Soporte » Diseño – Temas y plantillas » Cómo ocultar el header en el home

  • Resuelto 101622

    (@101622)


    Hola a todos,

    Estoy personalizando un tema y estoy intentando ocultar el header en la página principal, mi problema está en que este código es más complejo que mi nivel y no sé como hacer para ocultarlo porque incluye cosas que son necesarias para el home y por más que lo intento siempre termina dándome error, ¿dónde tendría que poner el <?php if(is_home() ) { ? ¿lo puedo hacer hacer con CSS?

    Este es el código del header:

    <?php $options = get_option( 'portafolio_theme_settings' ); ?>
    
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
    
    <!-- Stylesheet & Favicon -->
    <link rel="icon" type="image/png" href="<?php echo $options['favicon']; ?>" />
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
    
    <!-- Google Fonts -->
    
    <!-- WP Head -->
    
    <?php if ( is_single() || is_page() ) wp_enqueue_script( 'comment-reply' ); ?>
    <?php wp_head(); ?>
    
    <script type="text/javascript" charset="utf-8">
    jQuery(function($){
    	$(document).ready(function(){
    		//Image opacity hover-over
    		var opacity = 1, toOpacity = 0.7, duration = 300;
    		$('.opacity').css('opacity',opacity).hover(
    		function() {
    		$(this).fadeTo(duration,toOpacity);},
    		function() {
    		$(this).fadeTo(duration,opacity);
    		} );
    	// superFish
    	$('ul.sf-menu').supersubs({
    		minWidth:    16, // minimum width of sub-menus in em units
    		maxWidth:    40, // maximum width of sub-menus in em units
    		extraWidth:  1 // extra width can ensure lines don't sometimes turn over
         })
        	.superfish(); // call supersubs first, then superfish
    	});
    });
    </script>
    
    <?php if(is_front_page()) { ?>
    <script type="text/javascript">
    jQuery(function($){
    $(window).load(function() {
    //homepage Slider
    	$('#slider').nivoSlider({
    		directionNav: true,
    		directionNavHide: true,
    		captionOpacity: 1.0,
    		controlNav: false,
    		boxCols: 8,
    		boxRows: 4,
    		slices: 15,
    		effect:'<?php if($options['effect'] != '') { echo $options['effect']; } else { echo 'fade'; } ?>',
    		animSpeed: <?php if($options['anim_speed'] != '') { echo $options['anim_speed']; } else { echo 500; } ?>,
    		pauseTime: <?php if($options['pause_time'] != '') { echo $options['pause_time']; } else { echo 3000; } ?>
    	});
    	});
    });
    </script>
    <?php } ?>
    
    </head>
    <body <?php body_class($class); ?>>
    <div id="header-wrap">
        <div id="header" class="clearfix">
            <div id="logo">
            	<?php if($options['logo'] !='') { ?>
                <a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php echo $options['logo']; ?>" alt="<?php bloginfo( 'name' ) ?>" /></a>
                <?php } else { ?>
                <?php if (is_front_page()) { ?>
                <h1><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h1>
                <?php } else { ?>
                <h2><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></h2>
                <?php } } ?>
            </div>
            <!-- END logo -->
    
            <div id="navigation" class="clearfix">
                <?php
                //define main navigation
                wp_nav_menu( array(
                    'theme_location' => 'main nav',
                    'sort_column' => 'menu_order',
                    'menu_class' => 'sf-menu',
                    'fallback_cb' => 'default_menu'
                )); ?>
            </div>
            <!-- END navigation -->
        </div><!-- END header -->
    </div><!-- END header-wrap -->
    <div id="wrap">

    Muchas gracias

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Saludos 101622.

    De entrada veo que tu header tiene una envoltura «header-wrap» y que dentro está la id de header y a su vez un logo y un menú de navegación. Admito que no entiendo porqué ocultar el main navigation pero bueno, a lo que vinimos.

    puedes ocultarlo tanto por PHP como por CSS, la diferencia esta en que con PHP no se escribe el bloque de código y con CSS solo se oculta de la vista. Veamos:

    Con PHP:

    <?php if ( !is_home() ) { //esto se a agregado ?>
    <div id="header-wrap">
        <div id="header" class="clearfix">
            <div id="logo">
            .
            .
            .
            .
            <!-- END navigation -->
        </div><!-- END header -->
    </div><!-- END header-wrap -->
    <?php } //esto se a agregado ?>

    if(is_home() )… ejecuta el bloque de código si la página es home.
    if(!is_home() )… con el «!» viene a ser la negación.

    De esta forma el código no se generará, ahorrandote tiempo de procesamiento. Bueno, esto es relevante o no dependiento del tamaño de tu proyecto.

    Con CSS:

    .home #header-wrap {
       display: none;
    }

    <body <?php body_class($class); ?>> este trozo de código se encarga de asignarle clases al body del documento. Cuando esta en home, se le agrega una clase de mismo nombre. De esta forma puedes decir que no se muestra el header-wrap (y por ende todos sus hijos) solo en home.php. Se escribe el código más no se muestra.

    Se puede pensar que no tiene lógica que un segmento de código sea generado para no ser utilizado pero, como siempre digo, todo depende del proyecto. Si es algo que no te va a afectar más que en la estética de código fuente (puede exponerte ante colegas) sin penalizar rendimiento ni calidad para los usuarios pues bienvenido sea.

    Espero que este pequeño post te ayude a resolver tu problema. No dudes en comentar como te va.

    Suerte.

    Wow ¡Gracias!

    ¡Ambas opciones lograron justo lo que necesitaba! y viendo lo que dices la solución parece tan fácil que hasta me da rabia no haberlo intentado antes, tengo que aprender mucho.

    La razón por la que oculto la main navigation en el header es porque llamo al mismo código pero desde el cuerpo del index que en el home me aparecería dos veces y bueno, no hace falta.

    ¡Muchas gracias de nuevo!

    🙂

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Cómo ocultar el header en el home’ está cerrado a nuevas respuestas.