• Home »
  • WordPress »
  • Crear una plantilla en WordPress con Bootstrap 4 – Haciendo el header y el footer dinámicos

Crear una plantilla en WordPress con Bootstrap 4 – Haciendo el header y el footer dinámicos

Posted by On abril 13, 2020 0 Comment

Vamos a comenzar a dar dinamismo a nuestro tema, a hacer que comience a leer algunos datos de nuestro WordPress, y a prepararnos para lo que está por venir que es donde vamos a empezar a disfrutar…

Un header dinámico

Vamos a hacer que nuestro header comience a recibir alguna información como el idioma de instalación de nuestro WordPress, el título de nuestra página y la información descriptiva de la misma.

Naturalmente somos libres de usar o no usar esta información pero de forma didáctica vamos a utilizarla, y para ello vamos a necesitar las siguientes funciones de WordPress

  • language_attributes()
  • wp_title()
  • bloginfo()

Hay que tener en cuenta que blog_info() puede recibir muchísima información de nuestro blog, aunque en el siguiente ejemplo nosotros solo usemos alguna, pero en el codex de WordPress podemos ver todas sus opciones.

De este modo tenemos el siguiente código en nuestro archivo header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo('charset')?>">
    <title><?php wp_title(' | ', true, 'right');?><?php bloginfo('name')?></title>
    <!--Introducir el css-->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
	<!--Introducir el javascript-->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <?php wp_head();?>
</head>
<body>
	<header>
		<h3><?php bloginfo('name');?></h3>
        <h4><?php bloginfo('description');?></h4>
		<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
		    <a href="#" class="navbar-brand">Logo</a>
		    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colapsado">
		        <span class="navbar-toggler-icon"></span>
		    </button>
		    <div class="collapse navbar-collapse" id="colapsado">
		        <ul class="navbar-nav">   
		            <li class="nav-item"><a href="#" clas="nav-link">Enlace 1</a></li>
		            <li class="nav-item"><a href="#" clas="nav-link">Enlace 2</a></li>
		            <li class="nav-item dropdown">
		                <a href="#" clas="nav-link dropdown-toggle" data-toggle="dropdown" id="navbardrop">Enlace 3 +</a>
		                <div class="dropdown-menu">
		                    <a href="#" class="dropdown-item">Subenlace</a>
		                    <a href="#" class="dropdown-item">Subenlace</a>
		                    <a href="#" class="dropdown-item">Subenlace</a>
		                    <a href="#" class="dropdown-item">Subenlace</a>
		                </div>
		            </li>
		        </ul> 
		    </div>    
		</nav>
	</header>
	<main>

No os preocupéis por el menú en la próxima entrada vamos a crear un menú de bootstrap 4 que se adaptará a la forma de trabajar de WordPress.

Un footer dinámico

El footer es un lugar donde puede ser interesante poner widgets, pero no eso lo haremos más adelante, de momento solo vamos a crear un copyright.

	</main>
	<footer>
		&copy; <?= date('Y');?> <?php bloginfo('name');?>
	</footer>
	<?php wp_footer(); ?>
</body>
</html>

Con esto ya tenemos nuestro tema listo para empezar a darle forma de verdad como haremos a partir de la siguiente entrada.

Si te esta gustando esta serie, compartela y si le das click a algun anuncio de la web sería todo un detalle!