DeWebIdea » WordPress » Desarrollar un tema de WordPress desde cero

Desarrollar un tema de WordPress desde cero

Diseño de un tema para wordpress

WordPress es un sistema gestor de contenidos muy potente con el que podemos crear sitios web multifuncionales y versátiles. Todavía hay quien piensa que WordPress es sólo una plataforma para crear blogs, pero nada más lejos de la realidad; con WordPress podemos crear verdaderos portales web que incluyan, incluso, una tienda online.

Aunque son muchas las causas que explican su éxito y su alto grado de aceptación, uno de los principales motivos es la sencillez, flexibilidad y potencia que ofrece a los desarrolladores a la hora de crear temas (o plantillas). En este sentido, algunos programadores señalan que, pese a estar trabajando con un CMS, nunca tienen la impresión de que haya algo que no se pueda hacer a la hora de crear un blog o una web en WordPress.

Objetivos:

  1. Instalar wordpress en local.
  2. Crear una plantilla nueva, basándonos en el diseño de Bootstrap (Blog template for Bootsrap).
plantilla-bootsrap-blog

Ejemplo de nuestro tema para WordPress. Resultado final

Instalando WordPress en local

Hay un montón de artículos circulando por ahí con los que puedes  instalarlo, o bien, puedes servirte de la guía oficial de intalación de wordpress. Pero, si tenemos instalado un servidor local y hemos descargado la última versión de wordpress, la instalación resulta muy sencilla.

La ruta donde vamos a crear la carpeta para trabajar la plantilla es: C:\xampp\htdocs\wpbootstrap. En ella,  descomprimimos el zip descargado anteriormente, quedando de la siguiente forma:

plantilla-bootsrap-blog-01

Estructura de un wordpress

Crear una base de datos:

Crear una base de datos con nombre “bootstrap”, por ejemplo, y con codificación utf8_general_ci

plantilla-bootsrap-blog-02

Crear una base de datos desde el phpadmin

Una vez que tenemos la base de datos, configuramos el archivo wp-config-sample.php, el archivo se encuentra en la carpeta wpbootstrap, es donde hemos colocado el wordpress. El código que contiene por defecto es:

// ** Ajustes de MySQL. Solicita estos datos a tu proveedor de alojamiento web. ** //
 /** El nombre de tu base de datos de WordPress */
 define('DB_NAME', 'nombredetubasededatos');
 /** Tu nombre de usuario de MySQL */
 define('DB_USER', 'nombredeusuario');
 /** Tu contraseña de MySQL */
 define('DB_PASSWORD', 'contraseña');
 /** Host de MySQL (es muy probable que no necesites cambiarlo) */
 define('DB_HOST', 'localhost');
 /** Codificación de caracteres para la base de datos. */
 define('DB_CHARSET', 'utf8');
 /** Cotejamiento de la base de datos. No lo modifiques si tienes dudas. */
 define('DB_COLLATE', '');

En nuestro caso tendremos que colocar el nombre de la base de datos (bootstrap), el usuario por defecto, que es root y la contraseña, la dejamos en blanco:

// ** Ajustes de MySQL. Solicita estos datos a tu proveedor de alojamiento web. ** //
/** El nombre de tu base de datos de WordPress */
define('DB_NAME', 'bootstrap');
/** Tu nombre de usuario de MySQL */
define('DB_USER', 'root');
/** Tu contraseña de MySQL */
define('DB_PASSWORD', '');
/** Host de MySQL (es muy probable que no necesites cambiarlo) */
define('DB_HOST', 'localhost');
/** Codificación de caracteres para la base de datos. */
define('DB_CHARSET', 'utf8');
/** Cotejamiento de la base de datos. No lo modifiques si tienes dudas. */
define('DB_COLLATE', '');

Por último, configuramos las claves únicas de autentificación en el siguiente enlace, https://api.wordpress.org/secret-key/1.1/salt/,  lo reemplazamos por lo que aparece:

define('AUTH_KEY',         '+yE=XVoQT:)F(%Q9_Bn-`+=oj+c,FQms5~_w(|:G+oh4UI#=Qr8]Tl95!9(OgQE#');
 define('SECURE_AUTH_KEY',  '/ddMkMVN$I0ZT-:;ySd&O[s/+!~[mCS8xq:y$=3$1tn=JHVYIm/-bZ-4(GaS%vb ');
 define('LOGGED_IN_KEY',    '8vB9^.e-v(.bC~u$nmF.^<aDl|:Q-+nbln(8.CQ|MA<Bca#g!r-z[baT^0ZI|mr~');
 define('NONCE_KEY',        '+ofw}(/t`dezR+b0+;D&Vl]JC+--t-`CE-`$G}F`^zL,4i{eFcqwyzy*$wb ZEQD');
 define('AUTH_SALT',        'yA)/aI@YghE8(5F` {w`Ss@7|cle_J2>8-L~|O7H31,I~<|#V<+i|vqH:+Jf9&~c');
 define('SECURE_AUTH_SALT', '+@JR({r082d|-~2eRD7p-YT9m#@q&v;n8&-y`g4FqiWIgY$4_w~xg^3-a-I>!Xpa');
 define('LOGGED_IN_SALT',   'q4auHufUDrITsFJd#c=I/V5s@}Y+A.usdsD9AeB e7|7BK8[vL%zBcf^$-@a+0)>');
 define('NONCE_SALT',       '>.0bk3V#Gd`!:SdtiwKh$XBuO$?Z1m])JP_<9jcr8;dTB wP@I&rk=e{^.s5T<4 ');

Guardamos el archivo como wp-config.php y vamos al navegador:

plantilla-bootsrap-blog-03

Instalación wordpress

Rellenamos el formulario con los datos que nos pide: Título del sitio, nombre de usuario, contraseña y e-mail. Hemos terminado de instalar el Blog en loca; si vamos a la URL principal, veremos nuestro Blog.

Creación de un tema personalizado

Vamos a desarrollar una plantilla de wordpress desde cero. ¿Dónde vamos a trabajar? Todo lo que necesitamos para trabajarlo se encuentra dentro de la carpeta «C:\xampp\htdocs\wpbootstrap\wp-content\themes». Vamos a realizar un tema básico:

¿Que aparece en la carpeta «themes»? Se encuentran los temas que vienen por defecto twentyfifteen, twentyfourteen y twentysixtee.

Para nuestra plantilla, creamos una carpeta nueva denominada: bootstrap

plantilla-bootsrap-blog-04

Estructura del wordpress. Crear una carpeta llamada bootstrap en themes

El archivo style.css

Normalmente, un archivo CSS guarda los estilos que se usarán para aplicar el diseño de nuestro tema. Él archivo style.css, además, contiene la información del tema que estamos creando. Por ejemplo, el título del tema, autor, descripción, versión…

En la carpeta de nuestro tema creamos un archivo style.css. En él, simplemente, colocamos un comentario con los datos de nuestra plantilla:

/*
 Theme Name: Bootstrap
 Author: DeWebIdea
 Description: Bootstrap plantilla para woordpress
 Version: 0.0.1
 Tags: bootstrap, responsive
 */

El archivo index.php

Es el archivo que buscará wordpress como página de inicio. Es el encargado de realizar las llamadas a las funciones correspondientes. En un principio, será un archivo estático, en el futuro lo iremos convirtiendo en dinámico, según lo vayamos necesitando e iremos comprendiendo su función.

Para index.php por ahora vamos a utilizar el archivo del ejemplo de bootstrap que nos hemos descargado. (Enlace: https://github.com/twbs/bootstrap/archive/v4.0.0-alpha.6.zip)

plantilla-bootsrap-blog-05

Archivo zip con blog.css e index.html, son los ejemplos desde donde comenzamos nuestro tema de wordpress

Colocamos en la carpeta de nuestro tema el archivo index.html, pero llamándolo index.php. Verificamos lo que hemos conseguido en el panel de gestión, cambiando nuestro tema en apariencia. (En el panel de gestión, buscar apariencia y presionar en Temas)

plantilla-bootsrap-blog-06

Desde el apartado de temas podemos ver que ya aparece nuestro tema

Ya podemos ver los detalles de nuestro tema, se puede mejorar colocando la imagen final de la plantilla, como veremos más adelante.

plantilla-bootsrap-blog-07

Detalles del tema para wordpress que hemos creado

y si activamos el tema, veremos algo parecido a:

plantilla-bootsrap-blog-08

Nuestro tema de wordpress sin estilos

¿Qué hemos hecho hasta ahora?

Crear una plantilla estática y sin los estilos, (archivos CSS).

Vamos a ir haciendo, poco a poco, las modificaciones correspondientes para conseguir una plantilla dinámica y que podamos utilizar en nuestro wordpress. Primero, vamos a solucionar el link con la página de estilos, lo realizaremos de la forma más sencilla posible, (más adelante veremos una forma más correcta).

Creamos una nueva carpeta CSS en la capteta de nuestro tema, donde vamos a colocar los archivos de CSS correspondientes a bootstrap.

Carpeta CSS con los archivos de estilos

Para vincular la hoja de estilos en index.php, el código actualmente en index.php es:

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

Y lo cambiamos por:

 <!-- Bootstrap core CSS -->
 <link href="<?php bloginfo('template_directory');?>/css/bootstrap.min.css" rel="stylesheet">

Utilizamos la función bloginfo() para conseguir la dirección a nuestro tema, entonces,  nos quedará pasar el css del archivo blog.css de nuestro ejemplo a style.css, a continuación de los datos de la plantilla.  El resultado sería:

/*
 Theme Name: Bootstrap
 Author: DeWebIdea
 Description: Bootstrap plantilla para woordpress
 Version: 0.0.1
 Tags: bootstrap, responsive
 */
 @media (min-width: 48em) {
 html {
 font-size: 18px;
 }
 }
 body {
 font-family: Georgia, "Times New Roman", Times, serif;
 color: #555;
 }
 h1, .h1,
 h2, .h2,
 h3, .h3,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: normal;
 color: #333;
 }
 ...

Antes de comprobar el resultado, modificamos en index.php el vínculo a la hoja de estilo blog.css. Actualmente, tenemos:

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

Lo modificamos por:

<!-- Custom styles for this template -->
 <link href="<?php bloginfo('template_directory');?>/style.css" rel="stylesheet">

Y ahora, observamos los cambios:

plantilla-bootsrap-blog-10

Tema bootstrap con los estilos enlazados correctamente

¿Qué es lo que hemos hecho hasta ahora?

  • Hemos creado la carpeta «bootstrap» que contiene nuestra plantilla y la hemos colocado dentro de «themes».
  • Hemos creado el archivo «style.css» dentro de bootsrtap, con las características de nuestra plantilla y estilos.
  • Una carpeta «css», con los estilos de bootstrap.
  • El «index.php» con todo el contenido.

A continuación, pasamos a dividir el contenido de index.php en cuatro secciones y archivos.

Dividir en secciones el index.php

Vamos a dividir index.php en cuatro archivos diferentes:

  • header (cabecera),
  • footer (pie de página),
  • sidebar (va ser nuestro menu lateral)
  • content (contenido principal de la página).

¿Que nos va a permitir esto en un futuro?, personalizar diferentes estilos de páginas.

El archivo header.php

¿Que contiene el header? Las etiquetas meta, los estilos que necesitamos y la barra de navegación superior. Creamos el archivo header.php en la carpeta de nuestro tema. Cortamos el código de index.php y lo pegamos en nuestro archivo, el único código nuevo que se coloca es «wp_head()» justo antes del cierre de la etiqueta head. Esta función permite añadir contenido en la sección HEAD del HTML que genera WordPress.

Bien ¿qué código cortamos en index.php? Como hemos dicho anteriormente contiene el head y la barra de navegación, por lo que vamos a cortar desde el principio hasta el comienzo del div con la clase container incluida.

<!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="<?php bloginfo('template_directory');?>/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="<?php bloginfo('template_directory');?>/style.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.3/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">

Una vez pegado en header.php añadimos la función wp_head() y si  lo deseamos el comentario, en la apertura del div container al final, <!– inicio container – se cierra en footer.php –>. El archivo con su código es:

 <!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, shrink-to-fit=no">
 <!-- 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="<?php bloginfo('template_directory');?>/css/bootstrap.min.css" rel="stylesheet">
  
 <!-- Custom styles for this template -->
 <link href="<?php bloginfo('template_directory');?>/style.css" rel="stylesheet">
  
 <?php wp_head();?>
 </head>
  
 <body>
  
 <div class="blog-masthead">
 <div class="container">
 <nav class="nav blog-nav">
 <a class="nav-link active" href="#">Home</a>
 <a class="nav-link" href="#">New features</a>
 <a class="nav-link" href="#">Press</a>
 <a class="nav-link" href="#">New hires</a>
 <a class="nav-link" href="#">About</a>
 </nav>
 </div>
 </div>
  
 <div class="blog-header">
 <div class="container">
 <h1 class="blog-title">The Bootstrap Blog</h1>
 <p class="lead blog-description">An example blog template built with Bootstrap.</p>
 </div>
 </div>
 <div class="container">  <!--  inicio container - se cierra en footer.php  -->

El archivo footer.php

¿Qué va a contener el footer.php? Contiene el cierre del documento html y el pie de nuestra página. Primero creamos el archivo footer.php en nuestro tema. Cortamos el código del index.php y lo colocamos en nuestro nuevo archivo. Debemos fijarnos que el documento comienza con el cierre del div que corresponde a la clase container, que nos quedó abierto en header.php.

</div><!-- /.container -->
  
 <footer class="blog-footer">
 <p>Blog template built for <a href="https://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/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></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>

El archivo sidebar.php

Corresponde con la barra lateral del blog. Creamos el archivo sidebar.php. Cortamos el código correspondiente y lo pegamos en sidebar.php.

<div class="col-sm-3 offset-sm-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 -->

El archivo conten.php

Contiene el contenido de la página, es decir el listado de los artículos y los artículos en sí. Creamos un archivo conten.php en la carpeta de nuestro tema. Cortamos el código de index.php y pegamos. No hace falta que copiemos todo el código, con una pequeña parte nos sobra para no hacerlo muy extenso. Cuidado con no dejar ninguna etiqueta de html sin cierre.

<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 -->

¿Qué es lo que nos ha quedado en el archivo index.php?

<div class="row">
  
 <div class="col-sm-8 blog-main">
  
 </div><!-- /.blog-main -->
  
 </div><!-- /.row -->

Y como debe ser:

<?php get_header(); ?>
 <div class="row">
 <div class="col-sm-8 blog-main">
 <?php get_template_part( 'content', get_post_format() ); ?>
 </div><!-- /.blog-main -->
 <?php get_sidebar(); ?>
 </div><!-- /.row -->
 <?php get_footer(); ?>

¿Qué es lo que hacen las nuevas funciones añadidas?

  • get_header(). Consigue el archivo header.php
  • get_template_part(). Consigue el archivo conten.php
  • get_sidebar(). Consigue el archivo sidebar.php
  • get_footer(). Consigue el archivo footer.php

La estructura de nuestra carpeta debe coincidir con la de la imagen

plantilla-bootsrap-blog-11

Estructura de nuestro tema

Si volvemos a cargar la página se verá como anteriormente, pero con las secciones separadas en diferentes archivos.

plantilla-bootsrap-blog-12

Resultado después de separar la cabecera, contenido, sidebar y pie de página en diferentes archivos

 

Convertir nuestro wordpress en dinámico

Antes de comenzar con las entradas y las páginas, vamos a realizar unos pequeños ajustes para que se vea el título del sitio y la descripción corta de los ajustes generales, además pondremos el enlace en el título para poder ir a la página de entrada del blog. Para esto utilizamos la función get_bloginfo() que ya conocemos.

plantilla-bootsrap-blog-13

En Ajustes generales podemos modificar el título y la descripción

En header.php vamos a modificar el titulo principal, buscamos el código:

<h1 class="blog-title">The Bootstrap Blog</h1>

Lo cambiamos por:

<h1 class="blog-title"><?php echo get_bloginfo( 'name' ); ?></h1>

La función get_bloginfo() devuelve información sobre el blog dependiendo del argumento. El argumento name, nos devuelve el título del blog, con description, nos devuelve la descripción corta que hemos indicado en ajustes generales, y wpurl, nos devuelve la URL.

Para cambiar la descripción, buscamos:

<p class="lead blog-description">An example blog template built with Bootstrap.</p>

y lo modificamos por:

<p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>

Para poner el enlace en el título:

<a href="<?php bloginfo( 'wpurl' );?>">
 <h1 class="blog-title"><?php echo get_bloginfo( 'name' ); ?></h1>
 </a>

Mostrar las entradas y las páginas de nuestro blog. The loop

¿Cómo conseguimos mostrar la información de nuestro blog? The Loop es un término usado para describir un ciclo interno usado para mostrar cada uno de los post o entradas. Al usar The Loop, WordPress procesa todos los artículos y los muestra en la página, formateados y filtrados. ¿Dónde lo colocamos? en index.php

<?php get_header(); ?>
 <div class="row">
 <div class="col-sm-8 blog-main">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
 get_template_part( 'content', get_post_format() );
 endwhile; endif; ?>
 </div><!-- /.blog-main -->
 <?php get_sidebar(); ?>
 </div><!-- /.row -->
 <?php get_footer(); ?>

Si nos fijamos, lo único que ha quedado dentro del bucle es la llamada al archivo content.php. Por tanto el siguiente paso debe ser recoger el artículo o post de nuestro wordpress.

Modificamos el contenido del archivo content.php por:

<div class="blog-post">
 <h2 class="blog-post-title"><?php the_title(); ?></h2>
 <?php the_date(); ?> by <a href="#"><?php the_author(); ?></a>
 <?php the_content(); ?>
 </div>
 <!-- /.blog-post -->

 

Funciones nuevas utilizadas

  • The_title(), es el título del post
  • the_date(), corresponde con la fecha de publicación
  • the_author(), el autor del artículo
  • the_content(), nos muestra el contenido de la entrada.

Si comprobamos su funcionamiento nos mostrará la entrada «¡Hola Mundo!» que viene por defecto y si publicamos nuevas entradas debe salir el listado de artículos.

plantilla-bootsrap-blog-14

Nuestro blog ya debe cargar las entradas de nuestra base de datos

 

El sidebar

En siguiente paso vamos a modificar el sidebar y convertirlo dinámico. Primero, vamos con los archivos: buscamos en sidebar.php el siguiente código:

<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>

y lo modificamos por:

<div class="sidebar-module">
 <h4>Archivos</h4>
 <ol class="list-unstyled">
 <?php wp_get_archives( 'type=monthly' ); ?>
 </ol>
 </div>

Para la descripción, vamos a extraer los datos de la cuenta de usuario, antes nos aseguramos que en nuestro perfil de usuario esté completo el campo información biográfica, sino, saldrá en blanco. Buscamos:

<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>

y lo cambiamos por:

<div class="sidebar-module sidebar-module-inset">
 <h4>Acerca de</h4>
 <?php the_author_meta( 'description' ); ?>
 </div>

Ahora el contenido es dinámico en el apartado de archivos y Acerca de.

plantilla-bootsrap-blog-15

Sidebar cargando la información desde la base de datos

El menú y las páginas

Uno de los aspectos principales que nos falta es el menú de navegación.  Vamos, primero, a crear alguna página para comprobar que realmente nos va a funcionar el menú.

¿Cuál es la diferencia entre entradas y páginas?

Las entradas o posts son las noticias o artículos que forman parte del diario, del blog propiamente dicho. Éstas se organizan de forma cronológica, admiten categorías y etiquetas. Mientras que las páginas son contenidos estáticos que normalmente se utilizan para la información genérica del blog.

Para nuestro menú vamos a utilizar la función wp_list_pages(), con ella vamos a conseguir un listado de las páginas. Para ello, modificamos el archivo header.php. Buscamos el código:

<nav class="nav blog-nav">
 <a class="nav-link active" href="#">Home</a>
 <a class="nav-link" href="#">New features</a>
 <a class="nav-link" href="#">Press</a>
 <a class="nav-link" href="#">New hires</a>
 <a class="nav-link" href="#">About</a>
 </nav>

y lo modificamos por:

<nav class="nav blog-nav">
 <?php wp_list_pages( '&title_li='); ?>
 </nav>

El resultado que se muestra es diferente al deseado, pero tiene fácil solución. Lo arreglamos añadiendo nuevos estilos en el archivo style.css

.blog-nav li {
 position: relative;
 display: inline-block;
 padding: 10px;
 font-weight: 500;
 }
.blog-nav li a {
 color: #fff;
 }
plantilla-bootsrap-blog-16

Menu creado a partir de la función wp_list_pages()

Más adelante configuraremos nuestro blog para crear el menú a partir de apariencia/menú, lo que nos permitirá seleccionar las páginas que queramos en nuestro menú.

Sé el primero en comentar en «Desarrollar un tema de WordPress desde cero»

Deja un comentario

Tu dirección de correo electrónico no será publicada.


*


Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies