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.
