Plugins y temas de WordPress

Una de las características que hacen de WordPress uno de los mejores y mas versátiles CMS, son sus themes (plantillas) y plugins. Tanto unos como otros se instalan en pocos clics y los podemos encontrar tanto gratuitos como de pago. De la misma forma, para aquellos que conozcan php y html no será difícil desarrollar sus propios themes o plugins, la imaginación es el limite.

En este capitulo vamos a ver la estructura básica de un theme y de un plugin, como modificar o crear themes y child-themes y unas nociones básicas acerca de crear plugins. A continuación me gustaría hablaros de algunos plugins y themes recomendables de cara a mejorar la visibilidad de la web en Google, para terminar con algunos consejos a la hora de escoger los mismos cuando visitemos el repositorio o un marketplace.

Contenidos

1 Plugins y Themes, qué son y para qué sirven
2 Creando tus themes
3 Creando tus plugins
4 Consejos a la hora de escoger un theme o plugin del repositorio

Plugins y Themes, qué son y para qué sirven

Los plugins son los responsables de extender las funcionalidades de nuestra web, los hay desde para efectuar tareas muy simples, como quitar la palabra «category» de la URL, hasta sistemas completos de comercio online (por ejemplo con woocommerce) o de red social (buddypress). Como de serie solo trae el llamado Akismet (un antispam) solo deberemos instalar y activar los plugins que vayamos a utilizar, de esta forma mantendremos la complejidad del panel de control en la justa y necesaria (así como evitaremos la sobrecarga de la web, lo cual repercutiría negativamente en la velocidad de la misma).

Por su parte, el theme será el que determine el aspecto de la web. Puede incluir funcionalidades propias, lo cual hace que a veces la frontera entre plugin y theme pueda ser un tanto difusa, pero su tarea principal es la de mostrarnos los contenidos y «decidir» si la pagina tendrá aspecto de blog o de otra cosa.

Creando tus themes

Estructura básica de un Theme

Un Theme de wordpress puede ser (técnicamente) tan simple como un par de archivos o algo realmente complejo. Pero comenzando por lo mas sencillo, hay 2 archivos imprescindibles index.php y style.css

En index.php es donde tenemos todo el marcado html (la maquetación) y el llamado loop, el pedazo de código con el cual el motor de wordpress recorre la entradas y las muestra. En style.css por su parte, ademas de las propias definiciones de estilos, tenemos la información sobre el theme: nombre, ruta, autor… sin esa información el CMS no podrá identificar el theme.

Aparte de estos 2 archivos hay otros 2 muy importantes, como son functions.php y sidebar.php. El primero es donde se colocan todas esas funcionalidades como habilitar los thumbnails, ajustar los excerps… . El archivo sidebar.php es como su nombre indica para definir el contenido por defecto y la maquetación interna de nuestro sidebar.

Como decía antes, puede haber muchísimos mas archivos en la carpeta de un theme, pero casi todos (salvo Javascript o imágenes) serán herederos de uno de los anteriormente descritos, en el caso de los archivos que muestran el contenido (a partir de ahora templates) tienen una jerarquía, de forma que si el archivo no existe se muestra el siguiente en la cadena, si no el siguiente… así hasta llegar al index.php

Podéis ver esta imagen más grande en http://codex.wordpress.org/images/9/96/wp-template-hierarchy.jpg o una versión interactiva en http://wphierarchy.com

Aunque lo mínimo es index.php y lo máximo (que no hay como tal pero para entendernos) sería crear todos y cada uno de los archivos mostrados en la imagen anterior (cuadros azules y naranjas) más una larga lista de archivos de funciones, js…, lo habitual es crear un fichero para las vistas de entradas individuales (single.php), uno para las paginas (page.php), uno para las categorías (category.php), uno para los resultados de búsqueda (search.php), uno para los no encontrado (404.php), uno para mostrar los comentarios (comments.php) y uno para la home (home.php o front-page.php).

Esa sería la estructura básica, pero seguramente a estas alturas alguno estará pensando que dónde me he dejado header.php y footer.php. Bueno, pues aunque son archivos ampliamente usados, no son imprescindibles en el sentido que si nuestro theme es francamente simple (apenas index.php, style.css y poco mas) podemos incluir la información perteneciente a esos archivos en el mismo index.php. Aun así, y puesto que lo habitual y cómodo es ponerlos aparte, a nuestra lista de archivos necesarios los añadiremos, quedando la lista como sigue:

index.php
single.php
page.php
category.php
search.php
404.php
front-page.php

header.php
footer.php
comments.php

functions.php y
style.css

Ojo! index.php, style.css y functions.php tienen que tener esos nombres de archivo sí o sí, sin embargo, header y footer pueden realmente tener el nombre que queramos, aunque lo mejor es utilizar esos ya que Wordpress trae funciones pre-escritas para incluirlos, y si utilizamos otro nombre tendríamos que incluirlas de una forma más “artesanal” desaprovechando lo que ya hay.

Creando el theme desde 0

Para empezar, vamos a crear una carpeta con el nombre que le queramos dar al theme, pero por favor, jamás de los jamases uséis espacios ni caracteres especiales como acentos o eñes para los nombres de los archivos. Y dentro vamos a crear los archivos arriba mencionados en blanco (sin contenido, de momento).

Con un editor de texto (Word no es un editor de texto, es un procesador de texto. Editor de texto es el bloc de notas, pspad,… el que trae dreamweaver… ese tipo de editores de texto) abrimos style.css y el el principio del fichero escribimos:

Theme Name: elnombredemitheme

Theme URI: la URL del tema, habitualmente la página de venta o descarga

Description: una breve descripción

Version: 1

Author: mi nombre

Author URI: la URL de mi web

Con eso wordpress ya «sabe» que eso que está en esa carpeta es un theme, aunque aún no hay nada para mostrar. Debajo irán todas las reglas de estilo que queramos usar.

Ahora abrimos index.php y escribimos:

<?php get_header(); ?>

<?php the_content(‘<p class=»serif»>Sigue leyendo »</p>’); ?>

</div>

<?php endwhile; else: ?>

<h2 class=»center»>No encontrado</h2>

<?php endif; ?>

</div>

<?php get_footer(); ?>

Aquí arriba tenemos, entre if (have_posts()) y <?php endif; ?> el mencionado loop.

Por encima del loop tenemos <?php get_header(); ?> que es para incluir el contenido de header.php y por debajo <?php get_footer(); ?> que es para incluir footer.php. Entre medias lo que hay es un poco de marcado html y poco más.

Básicamente, el loop lo que “dice” es “si hay posts”, “mientras los haya”, “tráeme el contenido de dicho post”.

Después muestra el titulo (del post) y el contenido (del post). Mientras haya entradas por mostrar hará loop entre la línea donde dice

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Y donde dice

<?php endwhile;

Y en el momento que se acaben los post por mostrar caerá fuera del if, es decir en

<?php endif; ?>

Y si no hubiera nada, caería en

else: ?>

para mostrar el mensaje de error y después seguir con el resto del código.

Este archivo index es muy muy sencillo, pues aun no hay sidebar, ni comentarios… eso se lo pondremos más adelante.

Para tener una primerísima versión de nuestro theme solo falta tocar 2 archivos más, header y footer.

En header.php vamos a escribir la cabecera de html

<!DOCTYPE html>

<?php wp_head(); ?>

</head>

Evidentemente podemos poner muchísimas más cosas en la cabecera, de momento con esto vamos bien.

Las 2 líneas más importantes para que todo funcione son:

Que es la que incluye el css donde está el código que identifica el theme y

<?php wp_head(); ?>

Que es un hook de wordpress y sin él, los plugins y las funcionalidades built-in no funcionarán o no lo harán correctamente.

footer.php es más sencillo.

Allí solo completamos (y cerramos, que no queden etiquetas abiertas) el marcado html y tenemos esta línea que, como su “hermana” de la cabecera, es imprescindible si queremos que las cosas funcionen correctamente:

<?php wp_footer(); ?>

De forma que el footer queda algo así como:

<?php wp_footer(); ?>

</body>

</html>

Si por ejemplo queremos incluir un sidebar, necesitamos, por un lado registrarlo (en functions.php)

add_action( ‘widgets_init’, ‘theme_slug_widgets_init’ );

function theme_slug_widgets_init() {

register_sidebar( array(

‘name’ => __( ‘Mi Sidebar Principal’, ‘theme-slug’ ),

‘id’ => ‘sidebar-1’,

‘description’ => __( ‘Sidebar principal de mi sitio.’, ‘theme-slug’ ),

‘before_widget’ => ‘<li id=»%1$s» class=»widget %2$s»>’,

‘after_widget’ => ‘</li>’,

‘before_title’ => ‘<h2 class=»widgettitle»>’,

‘after_title’ => ‘</h2>’,

) );

}

y por otro incluirlo, en el lugar donde deseemos que aparezca con <?php get_sidebar(); ?>

De igual forma, el template de los comentarios se puede incluir (lo normal es que sea en single.php y/o page.php) añadiendo la linea <?php comments_template(); ?>.

Otras formas de comenzar: los starter themes y los constructores de temas

Hay otra forma de ponerse en marcha en la creación de themes propios, que es emplear un starter theme. Un starter theme es un theme «en blanco», pero con todo lo necesario. Para este propósito podemos utilizar alguno sencillo que encontremos en el repositorio (durante mucho tiempo muchos hemos utilizado los themes por defecto), podemos utilizar uno que ya hayamos creado nosotros, o podemos utilizar uno como underscores http://underscores.me

La gran ventaja de comenzar con un starter theme, es sobre todo de tiempo, al tener de partida todo lo básico ya creado, la estructura de archivos, los loops, algo de css… También, para aquellos que no estén muy duchos en php, les resultará mas fácil modificar el aspecto de un theme «soso» que crear, definir o descubrir por si mismos las funciones necesarias para que la web funcione.

Y por último, tenemos los constructores de temas. Se trata de temas con funcionalidades especiales para la creación de temas desde el mismo interfaz de wordpress. La ventaja que tienen es que son muy fáciles de usar, y es posible conseguir un tema bastante resultón sin tener ni idea de programación. La gran desventaja es que incluyen tal cantidad de código “basura” que no son precisamente seo-amigables.

Modificar Themes: Crear un Child-theme

A veces (muchas veces, de hecho) cuando estamos utilizando una plantilla , ya sea del repositorio o de pago, descubrimos que de alguna forma necesitamos hacerle cambios, por ejemplo para insertar el código del plugin wp-page-navi (para la paginación), para añadirle microformatos o porque le queremos cambiar ese borde punteado que le han a las entradas y que no nos gusta. Una de las opciones (la menos recomendada) es modificar el theme que tengamos instalado. Por qué no es una opción recomendada? Pues sencillamente porque cuando el theme sea actualizado, perderemos los cambios realizados. Para evitar perder esos cambios, podemos hacer 2 cosas, o cambiarle el nombre al theme (con lo que ya no se volverá a actualizar y si tiene alguna falla de seguridad o alguna función que quede obsoleta nuestro theme quedará inservible o al menos vulnerable) o crear lo que se viene llamando un Child Theme, un tema hijo.

Crear un theme de este tipo es realmente muy sencillo. El primer paso es crear una carpeta para nuestro theme (si va a ser “hijo” , por ejemplo, del twentyfifteen, pues lo podemos llamar “my_twentyfifteen_child”). Dentro pondremos 2 archivos (de momento en blanco): style.css y functions.php. Esos 2 archivos son lo mínimo imprescindible para que nuestro child theme funcione.

Ahora con un editor de textos plano (bloc de notas, por ejemplo) abrimos style.css y al principio del todo escribimos lo siguiente:

Theme Name: Twenty Fifteen Child

Theme URI: http://example.com/my_twentyfifteen_child/

Description: Twenty Fifteen Child Theme

Author: John Doe

Author URI: http://example.com

Template: twentyfifteen

Version: 1.0.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready

Text Domain: my_twentyfifteen_child

Theme name: es el nombre del nuestro theme, puede ser el que queramos

Theme URI: es la url donde se puede encontrar nuestro theme, esto es por si lo vamos a compartir con alguien. Si es solo para nosotros, se puede quitar esta linea o dejarla así mismo

Description: pues una breve descripción

Author: tu nombre, esto es como lo de la URI de antes (y la siguiente) por si lo vamos a querer compartir

Author URI: la url de tu blog

Template (esto es muy importante) la carpeta del theme del que va a ser hijo. Asegúrate de que esta escrito exactamente igual, incluidas mayúsculas y minúsculas

Version: otro más para cuando compartas tus themes. Déjalo como en el ejemplo.

License, y License URI: déjalos como en el ejemplo

Tags: otro campo por si lo compartes en el repositorio. Si no lo vas a hacer, déjalo en blanco o quita esta linea

Text domain: la carpeta de tu child theme. Es por si vas a poner ficheros de idioma.

Una vez rellenados estos datos, guarda y cierra.

Ahora vamos con functions.php. Abres el fichero (igual, con el bloc de notas) y pones lo siguiente

<?php

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

function theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );

}

Con esto lo que estamos haciendo es importar las reglas de estilo del theme original. Antes se hacia importándolo en el mismo archivo css, pero esta forma es mas correcta y es la que hoy día se considera optima.

Y con esto ya tenemos un child theme! Uno que no cambia en absoluto el theme original, claro, porque no hemos añadido nada. Pero hemos establecido el marco para hacer nuestros cambios con seguridad.

Ahora, cualquier archivo que vayamos a necesitar cambiar del theme original, lo único que tenemos que hacer es copiarlo a nuestro child theme y ejecutar dichos cambios ahí. Recuerda copiar solo los archivos que vayas a cambiar, no todos. Solo los que necesites cambiar.

Notas importantes:

En functions.php podemos definir nuevas funciones, pero asegúrate de no re-utilizar ningún nombre de función ya utilizado en el theme principal, o tu sitio arrojará errores.

Ojo! Los themes de pago, sobre todo si requieren activación, no siempre permiten la creación de child-themes.

Creando tus plugins

Estructura básica de un plugin

Al contrario que los themes, los plugins no tienen una estructura fija. D hecho, ni siquiera necesitan estar en una carpeta, pero si queremos guardar un poco de orden deberíamos empaquetarlos en carpetas. Hay por la red muchas plantillas, y depende de cuan complejo sea el plugin que quieras crear, será menester utilizar una u otra. Aun así, cualquier plugin tiene en el que sea su archivo principal (aquí como ya hemos dicho no hay reglas estrictas y se puede llamar un poco como se quiera, aunque lo convencional es que se llame igual que la carpeta que lo contenga) y en ese archivo, ahí si, hay al principio un pedazo de código que es imprescindible para que wordpress pueda detectar la presencia de dicho plugin. Es algo así:

Plugin Name: El nombre de mi plugin

Plugin URI: example.com/mi_super-plugins

Description: La descripción del plugin

Version: 1.1.0

Author: El nombre de autor

Author URI: La pagina del autor

A continuación, se incluiría el código del plugin propiamente dicho.

Creado tus propios plugins

Tomemos como ejemplo el plugin Hello Dolly que viene por defecto con todas las instalaciones de wordpress.

Comienza con el código antes expuesto, donde se informa del nombre, creador… para a continuación declarar unas funciones, hello_dolly_get_lyric y hello_dolly , las cuales realizan x acción. Pero estas funciones así sin más no van a ejecutarse, necesitamos “engancharlas” a algún proceso de wordpress, a un hook. Estos pueden ser acciones o filtros, en este caso se trata de una acción, admin_notices , las notificaciones del panel de administración, de esta forma:

add_action( ‘admin_notices’, ‘hello_dolly’ );

La lista de acciones y filtros es bastante extensa y profundizar en ello nos llevaría a escribir un libro solamente acerca de este tema, por lo que mi recomendación es visitar el codex, la pagina de documentación y referencia oficial de wordpress, donde se puede consultar el uso y sintaxis del 99% de las funciones, hooks, parámetros y demás cuestiones técnicas.

plugin vs functions.php

Una pregunta recurrente a la hora de añadir o modificar funcionalidades a una página creada en wordpress es “y esto lo añado al theme (functions.php) o creo un plugin?”.

La respuesta no siempre es clara y dependerá de cada caso concreto. Para tener una guía, diría que si la funcionalidad es algo que solo se va a utilizar en ese theme y que si lo cambiamos no vamos a querer conservarla, entonces va colocado en functions.php , pero que si el algo que podemos querer emplear en otros sitios, o en el mismo aun a pesar de cambiar de theme, entonces será lo ideal crear un plugin. También es interesante incluir las funcionalidades en functions.php cuando estamos creando un theme donde la velocidad de carga sea la principal (o una de las principales) característica (los llamados de alto CTR), ya que al cargar menos plugins reduciremos el tiempo de carga.

Selección de Plugins

La lista de plugins que podemos encontrar en la red es inmensa, a continuación me gustaría hacer un breve repaso sobre los mismos. De algunos de ellos hablarán en profundidad más adelante mis compañeros, esto es tan solo un aperitivo de lo que se puede encontrar 😉

Para SEO on site y performancia

FV Top Level Categories. Este plugin sirve para eliminar de la url el molesto “category” que nos la ensucia y alarga innecesariamente.
All In One SEO Pack. Junto con el siguiente, este es uno de los 2 grandes plugins de seo on site para wordpress. Realmente diría que escoger uno un otro es cuestión de gustos.
WordPress SEO + Google Analytics af Yoast. El otro gran plugin de seo on site. No incluye funcionalidad para añadir analitycs ( el All In One sí ) y es por ello que lo pongo en un combo. Tanto este como el anterior, incluyen en sus últimas versiones la creación de los sitemaps.
W3 Total Cache. Un plugin bastante complejo. Permite cachear la web, aglutinar los css…

Para seguridad

Wordfence Security. Bloquea los ataques de fuerza bruta y escanea los archivos en busca de discrepancias o código maligno.
iThemes Security. Como el anterior, pero con más funcionalidades, como cambiar la url del login, cambiar el nombre de usuario del admin y más. Ambos plugins son compatibles (pero la velocidad se puede resentir).

Diversos

Woocommerce. Uno de los más extendidos plugins de comercio online.
WordPress Backup & Clone Master. Disponible en codecanyon.net Para hacer copias de seguridad de todo tu sitio, incluido contenidos, usuarios, theme, configuración… permite guardar la copia tanto en local como subirla a google drive.
Eggplant 301 Redirects. Para hacer redirecciones de forma fácil. Muy útil si eliminaste alguna página o post que estaba enlazado externamente y quieres mandar las visitas al sitio adecuado, en lugar de a la página de error de wordpress.
BeMobile. Disponible en quieroserelprimero.es Para activar un theme diferente en los dispositivos móviles, y así poder ofrecer una experiencia de usuario satisfactoria sin tener que cambiar o rediseñar tu theme actual en caso de que no sea responsive.
Ultimate Nofollow. Añade un checkbox al cuadro de crear enlace para poder marcar que queremos que sea nofollow.
Lazy Load for Videos. Para aligerar la carga. Cuando insertas un vídeo lo normal es que este se cargue, demorando la carga completa de la web. Con este plugin se sustituye en un primer momento ese vídeo por una imagen estática, demorando la carga del mismo hasta que el visitante haga click sobre él. Para vídeos de Youtube y de Vimeo.

Consejos a la hora de escoger un theme o plugin del repositorio

Es muy goloso meterse en el repositorio (o utilizar el buscador que tenemos en el panel de control de nuestras instalaciones wordpress) y ponerse a buscar e instalar plugins y themes, y si bien en principio no hay ningún peligro, pues son revisados antes de ponerse disponibles para el público, no siempre son de una calidad ni medio aceptable. Es por ello que quisiera terminar mi capitulo con unos sencillos consejos a la hora de escoger qué plugins o themes instalar.

Lo primero de todo, es que si puedes tener una instalación de test, ya sea en tu pc o en un hosting gratuito, la tengas. De esa forma podrás “jugar” todo lo que quieras sin poner en peligro tu web.

Fíjate en versión y fecha. Cuándo se actualizó por última vez? Es compatible con mi instalación de wordpress (por cierto, deberías usar siempre la última)? Es una beta o es un plugin ya asentado?

Fíjate en las valoraciones. Si bien es cierto que porque un plugin no tenga muchas valoraciones no quiere decir que sea malo, es una buena practica fijarse en ellas. Qué problemas han tenido quienes lo probaron antes que yo? Que echaron en falta? Qué fue lo que más les gustó?

Veamos un ejemplo que lo que digo.

Imaginemos que estos 2 plugins hacen lo mismo. Son 2 son plugins ya asentados, con muchísimas descargas a sus espaldas y una buena valoración en general de los mismos. Pero! El de la izquierda hace casi un año que no lo actualizan, y solo nos aseguran que es compatible hasta a versión 3.9.2, mientras que el de la derecha se actualizó por última vez hace tan solo una semana y es compatible hasta la versión actual, 4.1.1. En este caso yo me decantaría primero por el de la derecha y si no me convence probaría el de la izquierda.