Crear una plantilla en WordPress con Bootstrap 4 – Haciendo el DRY
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.