WordPress : Plantilla header.php
Fecha Publicación:
07 de Septiembre de 2022
Fecha Modificación:
07 de Septiembre de 2022
Dentro del archivo header.php agregamos en la etiqueta body la clase body_class() que nos servira para que wordpress añada en forma automatica las clases de las paginas donde nos encontremos.
Por ejemplo:
- Si estamos en la pagina de Inicio la agregara la
clase Home. - Si estamos en la pagina de Category le agragara la
clase archive. - Si estamos en un articulo le agragara la
clase single. - Si estamos en la pagina de le agragara la
clase page.
<!-- dentro de header.php agregamos en la etiqueta body la clase body_class()-->
<body <?php body_class(); ?>>Por ejemplo estamos en la categoria recetas nos gregado la clase archive ademas la clase category-5 donde 5 es su identificador(ID) de la categoria recetas.
Ejemplo plantilla Header.php
<?php
/**
* The template for displaying the header
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<!-- Required meta tags always come first -->
<meta charset="<?php bloginfo('charset'); ?>" >
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<!-- Font Awesome CDN -->
<script src="https://use.fontawesome.com/025d1f53df.js"></script>
<!-- Main CSS -->
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css">
<?php wp_head(); ?>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="fastfood">
</div>
<div class="col-md-6">
<ul class="social-header list-inline text-xs-right">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="menu-bar text-xs-right">
<?php
wp_nav_menu( array(
'theme_location' => 'top',
'container' => 'nav',
'container_class' => 'container',
'menu_class' => 'menu-list list-inline'
) );
?>
</div>
</header>Tambien se puede agregar dentro de <header> el menu de navegación
<nav>
<a href="<?php echo esc_url( home_url('/') ) ?>" title="<?php bloginfo('desription'); ?>"><h3><?php bloginfo('name'); ?></h3></a>
<?php
if ( has_nav_menu( 'primary_menu' ) ){
wp_nav_menu( array(
"theme_location" => "primary_menu",
"menu_class" => "primary_menu_class",
"container_class" => "primary_menu_contariner_class"
) );
}
?>
</nav>Nota : La función wp_head() , carga los estilos y scrip de WordPress y no deve de faltar.
Vea tambien : WordPress : La importancia de usar wp_head() y wp_footer() en tus plantillas
Articulo : 912 - Veces Leidas