Programación

Crear una plantilla de WordPress: parte 1

Hace algunos días estuve enredado con WordPress — recordando viejos tiempos programando PHP — y estuve pensando sobre si desarrollar una plantilla de WordPress, más que nada, por practicar y recordar algo de PHP. Estuve dándole bastantes vueltas hasta que di con la forma de desarrollar una muy sencilla y, por eso, hoy quiero compartir con vosotros una serie de artículos sobre cómo crear una plantilla de WordPress. Este artículo es el primero de esta serie, así que… ¡vamos al lío!

Crear una plantilla de WordPress rápidamente

En primer lugar, me gustaría explicar, para quien no lo sepa, qué es WordPress. Según los chicos de WebEmpresa, WordPress es un Sistema Gestor de Contenidos (CMS) que permite crear blogs de forma muy rápida y sencilla. Cuenta con decenas de plantillas, tanto gratuitas como de pago, para darle el aspecto deseado a tu página. Además, cuenta con una gran comunidad y plugins que te ayudarán a montar tu web de forma aún más sencilla. También puede desplegarse en un Docker, olvidándonos de la instalación de servidores

Ahora que sabemos al menos el concepto básico de WordPress, podemos empezar a desarrollar nuestra plantilla. Evidentemente, es necesario contar con una instalación de WordPress, la cual es muy sencilla y de la que tengo en mente, algún día, escribir un artículo muy sencillo sobre su instalación.

El primer paso es tener una pequeña idea de cómo queremos nuestra plantilla. Para este artículo he elegido algo muy sencillo: un ejemplo de blog de la página de Bootstrap, escrita en HTML estático. En la siguiente imagen podéis ver cómo es el diseño de esta página:

crear una plantilla de WordPress

Como ya os imaginaréis, para el desarrollo de esta plantilla utilizaremos Bootstrap, que se puede descargar en su página oficial.

Una vez tengamos descargado el famoso framework CSS, es hora de decir cuáles son los archivos básicos con los que se debe contar para crear una plantilla de WordPress. Estos archivos son los siguientes:

  • style.css
  • functions.php
  • header.php
  • footer.php
  • sidebar.php
  • index.php

En los siguientes apartados del artículo veremos qué entra en cada uno de los archivos, aunque los nombres dan alguna pista sobre qué se incluirá en cada uno de los ficheros ;). También contar que, a partir de este punto, necesitaremos de nuestro IDE de desarrollo favorito para PHP (o para lo que sea). En mi caso, utilizo PHPStorm, el IDE de Jetbrains.

Crearemos un proyecto (o directorio, como prefiráis) con los ficheros anteriores dentro del mismo, además de la carpeta bootstrap dentro del archivo que descargamos anteriormente de la página del framework.

Archivo header.php

Empezaremos por el techo de nuestra plantilla. Los estilos van al final, no os preocupéis. Como indica el propio nombre de este fichero, en él se especifica la cabecera de nuestra plantilla, donde irán las etiquetas meta de HTML, title… entre otras. No me voy a centrar demasiado en esta parte, pues es bastante sencillo. El código PHP perteneciente a este fichero es el siguiente:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Blog Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">

<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>

<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<a class="blog-nav-item" href="#">New features</a>
<a class="blog-nav-item" href="#">Press</a>
<a class="blog-nav-item" href="#">New hires</a>
<a class="blog-nav-item" href="#">About</a>
</nav>
</div>
</div>

<div class="container">

<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>

<div class="row">

 

 

Como se puede ver, el contenido es estático. En esta primera parte de la serie de desarrollo sobre cómo crear una plantilla para WordPress se hará de esta forma. Más tarde añadiremos contenido estático para la plantilla.

Archivo index.php

Continuando con la estructura, ahora seguiremos por index.php. Este fichero contiene lo que es el cuerpo de la página. En la primera línea se llama al header del fichero anterior. En la última llamaremos al footer, que definiremos en el siguiente apartado. El código correspondiente a este fichero es:


<div class="col-sm-8 blog-main">

<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
<p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
</div><!-- /.blog-post -->

<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->

<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
</div><!-- /.blog-post -->

<nav>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

</div><!-- /.blog-main -->

Al igual que en el header, el código es estático. En la segunda parte de esta guía se cambiará el contenido. De esta forma, mostraremos los diferentes artículos escritos en el blog, entre otras cosas.

Archivo footer.php

Aquí se escribirá todo lo referente al footer de la página. Algo muy típico en plantillas de WordPress es encontrar menús, o enlaces a las redes sociales. Para ello, es necesario definir el footer. El código correspondiente a este apartado es el siguiente:


</div><!-- /.row -->

</div><!-- /.container -->

<footer class="blog-footer">
<p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
<p><a href="#">Back to top</a></p>
</footer>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

 

 

Archivo sidebar.php

Esto os sonará. Es la típica barra que aparece a la derecha o izquierda de muchas plantillas. Normalmente se muestran widgets como los archivos o enlaces a redes sociales, perfil, el feed de Twitter… Al parecer, ahora es obligatorio incluir este fichero, por lo que no podemos pasarlo por alto.

Para integrar este fichero con el resto de la plantilla, es necesario registrar las barras laterales en functions.php, que veremos posteriormente. El código correspondiente a este fichero es el siguiente:


<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<div class="sidebar-module sidebar-module-inset">
<h4>About</h4>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
<div class="sidebar-module">
<h4>Archives</h4>
<ol class="list-unstyled">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>
<div class="sidebar-module">
<h4>Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</div><!-- /.blog-sidebar -->

Fichero functions.php

Ahora si, ha llegado el momento de registrar nuestra sidebar. En este fichero también se registran los estilos de Bootstrap y ficheros Javascript, entre otras cosas. Este fichero hace referencia a las funciones que tiene el tema. En el se pueden definir funcionalidades como una imagen de fondo dinámica, o el título del sitio. La idea de este fichero es, por ejemplo, poder modificar nuestro tema desde el backoffice de WordPress.


<?php

function bootstrapstarter_enqueue_styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );
}

function bootstrapstarter_enqueue_scripts() {
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri().'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_styles' );
add_action( 'wp_enqueue_scripts', 'bootstrapstarter_enqueue_scripts' );

?>

Ya sólo queda el fichero style.css para finalizar esta primera parte sobre cómo crear una plantilla de WordPress.

Archivo style.css

Al igual que sidebar.php, este fichero es obligatorio para WordPress. Como podréis imaginar, este fichero define los estilos de nuestro tema. Es muy importante poner en la parte superior del archivo el nombre del tema, tal y como podemos apreciar en el siguiente código:


/* Theme Name: Boostrap Starter Theme Theme URI: https://www.lyrathemes.com/bootstrap-wordpress-theme-tutorial/ Author: Abby Author URI: https://www.lyrathemes.com Description: A basic theme using the Bootstrap framework. Version: 1.0 Text Domain: bootstrapstarter */

 

 

Conclusiones

Como podéis ver, definir una “plantilla” es muy sencillo. Evidentemente, esto tiene bastante más trabajo, pues es necesario conocer funciones de WordPress para mostrar posts, por ejemplo.

En la segunda entrega de esta serie sobre cómo crear una plantilla para WordPress, que publicaré en unos días, veremos cómo agregar posts a nuestro index.php y cambiar la cabecera.

¿Qué te parece el tutorial? ¿Has tenido algún problema? ¡Cuéntamelo en los comentarios!

 

Tags

1 thought on “Crear una plantilla de WordPress: parte 1”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close

Adblock Detected

Por favor, desactiva tu adblock