Crear una plantilla en WordPress con Bootstrap 4 – Haciendo el DRY

Posted by On abril 12, 2020 0 Comment

Vamos a proceder a hacer nuestro DRY para separar en partes nuestra plantilla, para ello identificamos varias partes:

  • cabecera
  • contenido
  • aside
  • footer

Las cuales se van a convertir en los siguientes archivos que tenemos que crear:

  • header.php
  • footer.php
  • sidebar.php

Fijaos de en que no tenemos ningún archivo para el contenido, esto es por que el contenido lo cargaremos directamente en el archivo en cuestión que queremos utilizar. En nuestro caso este archivo sigue siendo el index.php

De este modo vamos a ir creando todos nuestros archivos…

header.php

Aquí vamos a tomar desde el principio del archivo html hasta la apertura del main, de ese modo tendremos nuestra cabecera lista para que se cargue en las diferentes secciones de nuestra web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WPB4</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>
    <link rel="stylesheet" href="style.css">
</head>
	<header>
		<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>

Por norma general en este archivo se encuentra toda la cabecera de la web, la barra de navegación… aunque puede llegar hasta donde nosotros queramos que aparezca en todas las cabeceras, o incluso identificando las ids y mostrando lo que queramos…

sidebar.php

nuestro archivo sidebar.php ahora mismo quedará super sencillo, ya iremos complicándolo.

En él solo vamos a poner el código del aside tal y como vemos aquí.

<aside class="col-md-4">
	aside
</aside>

footer.php

En este archivo vamos a poner desde el cierre del main hasta el cierre del html:

	</main>
	<footer>
		footer
	</footer>
<body>
</body>
</html>

index.php

El contenido principal de nuestros html lo vamos a llevar a nuestro archivo index.php, aunque seguirá siendo todo totalmente estático, no os preocupéis, es algo a lo que vamos a dar solución muy pronto.

<?php get_header();?>
<div class="container">
	<div class="row">
		<div class="col-md-8">
			contenido
		</div>
		<?php get_sidebar();?>
	</div>
</div>
<?php get_footer();?>

Como se puede observar hemos hecho uso de tres funciones de WordPress:

  • get_header()
  • get_sidebar()
  • get_footer()

Las cuales se encargan de ir llamando a los archivos correspondientes de nuestra plantilla para montar la página.

De este modo ya podemos eliminar el archivo html de nuestra plantilla ya que no nos va a volver a hacer falta para nada.