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.