Crear una plantilla en WordPress con Bootstrap 4 – Generar el HTML
Para hacer nuestra plantilla, necesitaremos tener pensada una estructura HTML, aunque luego podremos cambiarla, modificarla… de este modo podremos generar nuestro DRY más facilmente.
Nosotros vamos a partir de una estructura muy sencilla con una cabecera donde irá el logo y el menú, una sección principal con contenido y aside y un footer. Aunque más adelante vamos a crear un tipo de página sin aside, por ejemplo. Pero de momento para ir empezando nos servirá con la siguiente estructura:
<!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> <body> <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> <div class="container"> <div class="row"> <div class="col-md-8"> contenido </div> <div class="col-md-4"> aside </div> </div> </div> </main> <footer> footer </footer> </body> </html>
Como veis ahora mismo no hemos hecho nada más allá de crear un simple HTML donde hemos insertado bootstrap 4 y al cual hemos enlazado nuestro css, pero esto ahora mismo no tiene importancia ya que este archivo no lo lee WordPress. En la siguiente entrada veremos como despiezarlo e ir empezando a darle funcionalidad.
Además siguiendo este tutorial podréis de forma muy sencilla aprender a convertir casi cualquier plantilla HTML en un tema de WordPress, no os vayáis perdiendo las siguientes entradas.