<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1500086133623123&amp;ev=PageView&amp;noscript=1">
logo de inboundcycle

Agencia de Inbound Marketing

Blog de Inbound Marketing

Técnicas y recursos para ayudarte a generar oportunidades comerciales y branding basados en las experiencias de todo un equipo de profesionales del marketing digital.


Cómo crear una plantilla de WordPress desde cero (III)

por Jordi Cuenca  |  07/01/2016

Inbound Marketing: Estrategia y Herramientas

WordPress no es solo el gestor de contenidos (CMS) más utilizado (1 de cada 4 páginas web en internet ya recurren a él): también es el que más crece. De ahí que los expertos en esta plataforma sean muy codiciados por las empresas, ya que son capaces de crear páginas web fáciles de gestionar, seguras y con actualizaciones constantes, flexibles (siempre hay un plugin para cada necesidad) y, sobre todo, con atributos que las hagan destacar entre sus competidores.

Por todo ello, en InboundCycle queremos que tú también puedas sacarle el máximo partido. Y, a continuación, estás invitado a descubrir cómo.

post-image-sample.jpg

Mientras que en nuestro primer post de esta serie sentamos las bases para poner en marcha un proyecto con WordPress y preparamos la estructura de los archivos necesarios, en el segundo artículo de la serie comenzamos a darle forma, preparando una plantilla funcional con una página de inicio, un blog y un menú de navegación.

En esta ocasión, nos disponemos a completar el template y a empezar a añadir todas las opciones imprescindibles que no pueden faltar en ningún blog. ¡Presta atención!

Por cierto, no olvides que si tu objetivo es crear una web desde cero, o mejorar la que tienes, puedes descargar de forma gratuita esta guía con  25 elementos imprescindibles que incluir en tu web para conseguir tráfico,  leads y ventas .

Las categorías

Vamos, pues, a analizar qué necesitamos para seguir creando una web con WordPress. Lo primero en lo que nos fijaremos será la sección de entradas del administrador de WordPress, donde tenemos un gestor de categorías nativo que nos permite otorgar una o varias de ellas a cada una de las entradas. Como veremos, esto nos ayudará a crear filtros y a estructurar nuestro blog por temáticas.

El primer paso consistirá en crear algunas categorías y asignarlas a posts que hayamos creado. De este modo, nos aseguraremos de que el funcionamiento es el adecuado en los siguientes pasos que daremos.

Una vez hayamos generado y asignado categorías a nuestros posts, llega el momento de abrir el archivo home.php y añadirle la función the_category(), con la que crearemos un elemento de lista con todas las categorías que tenga asignadas cada post. Repetiremos la misma acción en la plantilla single.php.

...
<header>

 <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
 <time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time>
  <?php the_category (); ?>
</header>
...

Mostramos solo una parte del código de la plantilla home.php, que nos ayuda a identificar dónde colocamos el elemento. Seguiremos el mismo criterio en el resto de código que agreguemos a archivos de plantilla trabajados con anterioridad.

 

Si nos dirigimos a nuestro blog, podremos comprobar como en cada post ya aparecen las categorías que tiene asignadas. Veremos que cada categoría consiste en un enlace que, si lo probamos, nos llevará a una página en blanco. No obstante, nuestro objetivo es que dicha página muestre un listado de posts que pertenezcan a la categoría en cuestión.

¿Cómo podemos hacerlo? Es fácil: abriremos el archivo category.php y nos limitaremos a duplicar exactamente el mismo código del archivo home.php. Tras realizar esta acción, intentaremos acceder de nuevo a una categoría mediante el enlace que nos aparece en los posts. Si hemos seguido correctamente las instrucciones, ya nos funcionará como un filtro. Además, cuando agreguemos un listado de categorías en el sidebar (más abajo), tendremos también esta función habilitada.

Hay que pensar en el usuario que visita nuestro blog, poniéndole las cosas fáciles y ayudándole a que sepa dónde está en cada momento. Para ello, en este listado de posts por categorías indicaremos qué categoría está actuando de filtro, añadiendo un título con el nombre de la categoría en cuestión. En nuestro archivo category.php agregaremos la función single_cat_title().

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>

<!-- Título de categoría -->
<h2><?php single_cat_title(); ?></h2>
...

Los comentarios

Si recordamos nuestro post anterior, mediante la función the_author_posts_link() añadimos el nombre del autor y un enlace que, en estos momentos, nos lleva a una página en blanco. Sin embargo, este enlace nos tendría que conducir a una página muy similar a la de categorías, pero en lugar de filtrar por una categoría específica nos debería mostrar todos los posts publicados por ese autor. Este aspecto puede solventarse con dos sencillos pasos:

1) En primer lugar, duplicamos el archivo category.php y renombramos el nuevo archivo creado por author.php.

2) A continuación, reemplazamos las líneas que aparecen tachadas por las que figuran en negrita. Mediante esta acción, estamos quitando la parte de la plantilla de categorías donde indicábamos el nombre de la categoría. Acto seguido, agregaremos una línea en la que podremos señalar a los internautas que están viendo únicamente los posts escritos por el autor que corresponda.

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>

<!-- Título de categoría -->
<h2><?php single_cat_title(); ?></h2>
<!-- Autor -->
<p>Posts de <strong><?php echo get_the_author(); ?></strong></p>
<!-- Listado de posts -->
<?php if ( have_posts() ) : ?>
...

El soporte para etiquetas o 'tags'

WordPress también cuenta con un soporte nativo para poder añadir etiquetas o tags a los posts. Para poder aprovecharlos en nuestra plantilla, seguiremos unos pasos muy similares a los que hemos realizado para dotar a las categorías de un soporte. Primero, nos aseguraremos de que tengamos disponibles algunos posts, a los que le habremos añadido tags y, seguidamente, volveremos a nuestro archivo home.php y añadiremos la función the_tags().

...
<footer>

   <?php the_tags(); ?>            
   <address>Por <?php the_author_posts_link() ?></address>
</footer>
...

Si regresamos al listado de posts de nuestro blog veremos que, en los casos donde tenemos más de una etiqueta, aparecen todas juntas, perdiendo así toda utilidad. Esto se soluciona con la función the_tags(), que permite incluir parámetros para poder gestionar cómo los maquetamos:

<?php the_tags('al inicio’,'entre cada tag’,'al final'); ?>

Vamos a mostrarlos como una lista, igual que las categorías. Eso implica que tenemos que hacer la siguiente modificación en la función de nuestra plantilla home.php:

...
<footer>

   <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>            
   <address>Por <?php the_author_posts_link() ?></address>
</footer>
...

Repetiremos el mismo procedimiento en el archivo single.php.

Si volvemos al blog, veremos que nuestros tags ya presentan el formato propio de una lista. Ahora bien, si hacemos clic en uno de ellos, nos llevará a una página en blanco, tal y como nos ocurrió anteriormente con las categorías. Para solucionarlo, basta con duplicar el archivo category.php y cambiar el nombre del nuevo archivo por el de tag.php. De este modo, nuestro tema ya soportará tags. Útil, ¿verdad?

Los comentarios

Los comentarios son un sistema muy eficaz para resolver dudas, recibir feedback y aprender de los internautas. Eso sí: te recomendamos que, antes de nada, te hagas con algún buen plugin antispam.

Para poder añadir un sistema de comentarios a los posts, abriremos el archivo single.php e incorporaremos la función de WordPress comments_template(). Con ella, se llama al archivo comment-template.php del directorio wp-includes de WordPress.

...
   <address>Por <?php the_author_posts_link() ?></address>

   <!-- Comentarios -->
   <?php comments_template(); ?>
</section>
...

Existe la posibilidad de emplear el archivo comments.php en nuestra plantilla para poder personalizar el aspecto de los comentarios; si WordPress detecta ese archivo, lo prioriza respecto a comment-template.php. Para nuestro tutorial, será suficiente con recurrir a las opciones que WordPress nos ofrece de forma nativa. Por lo tanto, si tienes el archivo comments.php en el directorio de la plantilla, elimínalo.

Cómo crear una zona de 'widgets'

Los widgets son una potente herramienta que nos ofrece WordPress, y a la que le podemos sacar todo el partido gracias a los miles de plugins disponibles. Para obtener el máximo rendimiento, vamos a crear una zona de widgets en la barra lateral del blog. No obstante, en realidad, podemos añadir tantas como queramos (y en las plantillas que nos apetezca).

Lo primero que tendremos que hacer será recuperar nuestro archivo functions.php, donde crearemos la zona del menú de navegación y donde agregaremos el código en negrita.

/**
* Crear nuestros menús gestionables desde el

* administrador de Wordpress.
*/

function mis_menus() {
register_nav_menus(
  array(
    'navegation' => __( 'Menú de navegación' ),
  )
);
}
add_action( 'init', 'mis_menus' );

/**
* Crear una zonan de widgets que podremos gestionar
* fácilmente desde administrador de Wordpress.
*/

function mis_widgets(){
 register_sidebar(
   array(
       'name'          => __( 'Sidebar' ),
       'id'            => 'sidebar',
       'before_widget' => '<div class="widget">',
       'after_widget'  => '</div>',
       'before_title'  => '<h3>',
       'after_title'   => '</h3>',
   )
 );
}
add_action('init','mis_widgets');

Si entendimos anteriormente cómo funcionaba la adición de zonas de menús, el código con el que agregaremos zonas de widget no tendrá demasiados secretos. ¡Veámoslo!

En primer lugar, hemos creado una función que hemos denominado mis_widgets(), que invocaremos desde el inicio mediante la función add_action(), igual que hicimos con el menú. Dentro de nuestra función mis_wigets, llamaremos a la función nativa de WordPress register_sidebar(), que nos permite crear una zona de widgets y que nos permite configurar varios parámetros enviándole un elemento de array.

  • name
    Es el nombre de la zona creada, que nos aparecerá en el gestor de widgets.
  • id
    Es el identificador que nos permitirá incluir esta zona de widgets dentro de una plantilla.
  • before_widget
    Nos permite añadir código HTML antes de cada widget añadido a nuestra zona. Para este caso, hemos añadido un div contenedor con la clase widget.
  • after_widget
    Funciona igual que el elemento anterior, pero en este caso no permite añadir código después de cada widget. Lo utilizaremos para cerrar el contenedor abierto previamente.
  • before_title
    Los widgets por defecto llevan un título que, por lo general, puede editarse. Mediante este parámetro, podemos añadir código HTML antes de cada título de los widgets, como por ejemplo una etiqueta <h3>.
  • after_title
    Podemos agregar código después del título, y aprovechamos para cerrar el <h3> abierto anteriormente.

En el momento de ir al gestor de widgets en el administrador de WordPress, ya nos tendría que aparecer una zona de widgets con el nombre de Barra lateral (o Sidebar, si la instalación está en inglés). Para poder asegurarnos de que funciona bien, vamos a arrastrar algunos elementos (por ejemplo, Buscar, Categorías y Nube de etiquetas). A continuación, añade un título a cada uno de los widgets e investiga sus opciones. Cuando acabes, ¡no te olvides de hacer clic en Guardar!

En cualquier caso, nuestra flamante barra lateral todavía no mostrará ningún widget. Por lo tanto, es hora de abrir nuestro archivo sidebar.php y añadir lo siguiente:

<aside>
<!-- Zona de Widgets -->
<?php dynamic_sidebar('sidebar'); ?>
</aside>

Dentro de la etiqueta de HTML5 <aside>, haremos la llamada a nuestra zona de widgets mediante la función dynamic_sidebar(), donde le indicamos el identificador de la zona que queremos mostrar.

Y ahora… llega el momento de comprobar que todo funcione adecuadamente. Recuerda que, aunque se trate de una barra lateral, los widgets aparecerán en la parte inferior de las páginas, ya que no estamos aplicando estilos a la plantilla.

El buscador

Llegados a este punto, nuestro template ya tiene muy buena pinta; si has hecho pruebas con los elementos de la barra lateral, te habrás dado cuenta de que todo funciona a la perfección... excepto el buscador. En efecto, si haces una búsqueda, ésta te llevará una página en blanco.

Como en anteriores ocasiones, vamos a solventarlo. Lo que haremos a continuación será copiar exactamente el código del archivo home.php, trasladarlo al archivo search.php y efectuar una pequeña modificación para ayudar a nuestros usuarios a saber que están en los resultados de una búsqueda.

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>

<!-- Búsqueda -->
<p>Resultados de búsqueda para <strong><?php echo get_search_query() ?></strong></p>
<!-- Listado de posts -->
<?php if ( have_posts() ) : ?>
...

Si vuelves a hacer pruebas, verás que las búsquedas ya funcionan. En este ejemplo, nos hemos limitado a duplicar la estructura tal y como lo hacemos en el listado de posts para simplificar el ejemplo. Por lo tanto, no necesariamente tiene que ser así.

Uno de los problemas más comunes cuando se trabaja con la búsqueda de WordPress es que, por defecto, no solo busca en los posts, sino que también lo hace en las páginas. Esta particularidad puede llegar a ser molesta, porque a pocas personas les interesa que la página de contacto o la política de privacidad aparezcan en los resultados. Para evitar este problema, existen dos procedimientos muy sencillos:

1) El primero consiste en instalar un plugin como Search Exclude, que ejecuta perfectamente esta función.

2) La otra opción pasa por incluir nativamente en nuestra plantilla un filtro que actúe en el momento de la búsqueda, y al que le podamos indicar que solo queremos que nos devuelva posts. No entraremos en profundidad en estos filtros, pero saber que existen y qué es lo que podemos hacer con ellos te dará muchas más herramientas en el futuro, cuando comiences a crear plantillas más complejas. Por lo tanto, vamos a aprovechar este caso práctico para ver un ejemplo sencillo de cómo funciona.

Abriremos el archivo functions.php y, después del código que ya tenemos, añadiremos lo siguiente:

/**
* Filtrar resultados de búsqueda para que solo muestre
* posts en el listado
*/

function buscar_solo_posts($query) {
 if($query->is_search) {
  $query->set('post_type','post');
}
return $query;
}
add_filter('pre_get_posts','buscar_solo_posts');

Vamos a analizar qué hace exactamente este código. Lo primero que hemos hecho ha sido crear una función a la que hemos llamado buscar_solo_posts(), aunque podemos darle cualquier otro nombre. A esta función le incorporaremos un parámetro llamado $query. Mediante el filtro, le vamos a indicar qué tipo de listado estamos reclamando. Utilizando un condicional if() en la función, comprobaremos si lo que estamos haciendo es una búsqueda con $query->is_search. Si la respuesta es afirmativa, mediante $query->set indicaremos a WordPress que, de entre los resultados de la búsqueda que hemos realizado, solo nos devuelva informaciones contenidas en los posts: (‘post_type’,’post’). Por último, finalizaremos la función pidiendo que nos devuelva el listado con return $query.

Ahora solo nos falta invocar la función que hemos creado. Igual que con el parámetro add_action(), que ya hemos visto para crear menús y zonas de widgets, el parámetro add_filter() nos permite intervenir en acciones que realicemos con la base de datos y especificar en qué momento queremos hacerlo. En este caso, estamos indicado con pre_get_posts que, justo antes de llevar a cabo la recogida de posts en la plantilla, nos ejecute la función buscar_solo_posts(), donde habremos intervenido en ese listado, indicando que únicamente nos devuelva contenidos de los posts.

El funcionamiento de los filtros puede ser algo difícil de comprender para alguien que se esté iniciando en la creación de plantillas para WordPress. Por lo tanto, si esta última parte te ha parecido algo confusa, no te preocupes. Afortunadamente, hay una gran cantidad de documentación al respecto (por ejemplo, aquí) que te ayudará a entender poco a poco cómo funciona.

La plantilla de página

A esta alturas ya tenemos una plantilla con un blog completo y funcional. Además, también disponemos de una página inicial que controlamos desde el archivo de plantilla front-page.php. Sin embargo, nuestro template aún no estaría preparado en el caso de crear una página de contenido. Si seguimos con nuestro caso práctico, lo entenderemos mucho mejor. ¡Empecemos!

En primer lugar, iremos a nuestro administrador de WordPress y crearemos una nueva página de contenido junto a Página de Inicio y Blog, a la que le daremos el nombre de Sobre el autor. Una vez creada, iremos al gestor de menús y la añadiremos a nuestra navegación. Si navegamos por nuestra plantilla y tratamos de acceder a esta página, nos daremos cuenta de que, como ya ha ocurrido en otras ocasiones, la página aparece en blanco. Las páginas de WordPress invocan por defecto a la plantilla page.php. Para solucionarlo, lo que haremos será abrir este archivo y utilizar el mismo código que tenemos en front-page.php. De este modo, tendremos lista una plantilla que se utilizará por defecto para todas las páginas que creemos.

Recuerda que, para simplificar el tutorial, emplearemos siempre la misma estructura para todas las plantillas. Eso sí: recuerda que una de las grandes ventajas que ofrece WordPress es la posibilidad de utilizar diferentes archivos de plantilla, lo que te permite, por ejemplo, organizar la información diferente en las páginas respecto a los posts.

La plantilla personalizada

Imaginemos que necesitamos generar una página de contenido distinta a la de Sobre el autor que acabamos de crear. Puede surgirnos la necesidad de añadir un formulario, un slideshow o una galería de imágenes. Es cierto que existen cientos de excelentes plugins que nos solucionarían el problema, pero pongámonos en el supuesto, por ejemplo, de que necesitáramos añadir un formulario de contacto directamente en la plantilla, ya que éste precisa de alguna necesidad especial.

WordPress nos permite crear archivos de plantilla que podremos asignar a una página de contenido específica (y de forma muy sencilla).

Para ello, duplicaremos el archivo page.php y le indicaremos el nombre que queramos que no corresponda a un archivo de plantilla nativo de WordPress. En este caso, vamos a ponerle el nombre de contacto.php y, seguidamente, le añadiremos las siguientes líneas en negrita:

<?php
/**
* Template Name: Plantilla de Contacto
*/
?>
<!-- Archivo de cabecera gobal de Wordpress -->
<?php get_header(); ?>
<!-- Contenido de página de inicio -->
<?php if ( have_posts() ) : the_post(); ?>
<section>
 <h1><?php the_title(); ?></h1>
 <?php the_content(); ?>
  <form method="post" action="">
     <label for="name">Nombre</label><br>
     <input type="text" id="name" placeholder="Escribe aquí tu nombre y apellidos"><br>
     <label for="subject">Asunto</label><br>
     <input type="text" id="subject" placeholder="Motivo de tu consulta"><br>     
     <label for="message">Mensaje</label><br>
     <textarea id="message"></textarea><br>
     <button type="submit">Enviar datos</button><br>
 </form>
</section>
<?php endif; ?>
<!-- Archivo de barra lateral por defecto -->
<?php get_sidebar(); ?>
<!-- Archivo de pié global de Wordpress -->
<?php get_footer(); ?>

En las primeras líneas, lo que hemos hecho es crear un comentario en PHP con el parámetro Template Name e indicar el nombre que queremos para nuestra plantilla. La segunda parte resaltada de nuestro código es, simplemente, un formulario ficticio para ayudar a comprender cómo funciona y qué utilidad podemos encontrar al utilizar plantillas personalizadas.

Una vez creada nuestra plantilla, y después de haber hecho los cambios, es el momento de volver al administrador de WordPress, donde crearemos una nueva página de contenido a la que llamaremos Contacto. Antes de publicarla, vamos a indicarle que la plantilla que queremos que utilice es la que acabamos de crear. Para realizar este paso, hay que ir al cuadro Atributos de página, que generalmente se encuentra en el lateral, debajo del cuadro de Publicar. Allí veremos un desplegable con el label Plantilla y con el valor Plantilla predeterminada seleccionada por defecto. Si desplegamos este selector veremos que nos aparecerá también la opción Plantilla de contacto. Pues bien: la seleccionaremos y, ahora, publicaremos nuestra página de contacto. ¡No te olvides de añadirla al menú de navegación para poder facilitar el acceso a ella!

Como hemos visto, podemos crear tantas plantillas como queramos para poder crear secciones muy diferentes dentro de nuestra página. Asociar estas plantillas a páginas es muy sencillo y, si hacemos un buen uso de ellas, nos pueden dar mucha flexibilidad en los templates que elaboremos.

Hemos hecho lo mínimo para que WordPress nos reconozca este archivo como un archivo de plantilla personalizada. No obstante, como siempre hay gran cantidad de opciones que nos permitirán generar plantillas cada vez más completas y complejas, te animamos a aprender un poco más sobre plantillas personalizadas aquí.

Conclusiones

Ha sido un largo camino desde que publicamos el primer post sobre este tema hasta que hemos conseguido tener un template funcional, capaz de cubrir las necesidades más comunes de cualquier página realizada con WordPress.

Esperamos que este tutorial te haya ayudado –igual que a gran cantidad de desarrolladores– a enamorarte de este CMS. Asimismo, deseamos que haya sido útil para todos aquellos que se estén iniciando en el manejo de esta plataforma y que deseen profundizar en su funcionamiento.

Si te interesa, puedes descargarte los archivos completos de este tutorial aquí.

Y si te decides a crear tu propio site con WordPress, no dudes en compartir tus impresiones y tus progresos con nosotros. ¡Será fantástico conocerlos!

elementos imprescindibles para tu web

como crear una landing page perfecta

marketing de contenidos e inbound marketing

 

Inbound Marketing: Estrategia y Herramientas

¿Y tú qué opinas? ¡Déjanos aquí tus comentarios!