Los Plugins
Los plugins son fragmentos de código PHP que permiten añadir funcionalidades a webs hechas con WordPress (sin necesidad de modificar su núcleo).
Por defecto, WordPress se instala con dos extensiones:
- Akismet: Permite detectar, con la ayuda de un servicio web externo, si los comentarios de las entradas son en realidad spam. Eso si, hay que registrarse.
- Hello Dolly: Es el primer plugin que se creó para WordPress. Hace que aparezcan fragmentos de la canción Hello Dolly en las pantallas de administración. En realidad se puede borrar, ya que no tiene utilidad práctica.
En el artículo Widgets y Plugins en WordPress encontrarás cómo buscar e instalarte plugins para tu Web. Hay miles y muchos son gratuítos. Pero en el presente artículo explicaremos cómo desarrollar uno de propio.
Nuestro primer plugin (planteamos un caso práctico)
Supongamos que estamos trabajando con un tema que hace caso omiso a la relación entre páginas y subpáginas, y necesitamos crear un plugin que permita a una página madre mostrar el contenido de todas sus subpáginas. Además, queremos que arriba del todo aparezca automáticamente una lista con la imagen destacada de cada subpágina, y que se puedan clicar para ir directamente a su contenido.
Lo primero que habrá que hacer es escoger un nombre que identifique al plugin. P. ej. «Listado de subpáginas con imágenes«.
Implementando el plugin «Listado de subpáginas con imágenes«
A partir del nombre del plugin, decidiremos el nombre del fichero PHP con el código fuente, que será el mismo que el de la carpeta dónde se ubicará. Este nombre se conoce como slug del plugin. Lógicamente, no puede coincidir con el de ningún otro plugin instalado.
En nuestro caso hemos escogido como slug lisupima. Por lo tanto, crearemos la carpeta lisupima dentro de wp-content/plugins (o dentro de la carpeta dónde haya las extensiones en caso de haberse indicado otra ruta en el fichero wp-config.php).
El fichero con el código fuente del plugin lo ubicaremos dentro de la carpeta que hemos creado y se llamará lisupima.php.
Editando el fichero lisupima.php: la cabecera
Lo primero que debe tener el fichero principal de una extensión es la cabecera:
<?php /* Plugin Name: Listado de Subpáginas con imágenes Description: Lista las subpáginas de una página con su imagen destacada como link Author: webscreatives Version: 0.7 */ // ... ?>
La cabecera es necesaria para poder activar el plugin en nuestro WordPress.
El único atributo obligatorio es el Plugin Name. El resto son opcionales. De hecho, hay más que se pueden añadir:
- Plugin URI. Dirección de la página web del plugin.
- Author URI: Dirección de la página web del autor del plugin.
- License: Licencia del plugin (p.ej. GPLv2 or later).
- License URI: Dirección dónde se encuentra el texto íntegro de la licencia.
- Text Domain: Sirve para las traducciones cuando se internacionaliza el plugin (desde la versión 4.6, no es necesario si coincide con el slug del plugin).
- Domain Path: Sitio dónde ir a buscar las traducciones (no es necesario si se utilizan las carpetas por defecto).
A continuación se podría incluir otro comentario (/* ... */) con el texto de la licencia. En este artículo, sólo queremos abordar un caso muy sencillo a modo de ejemplo. Por lo tanto, no será necesaria esta parte.
Escribiendo la funcionalidad del plugin lisupima.php
Después del comentario inicial con la cabecera (y, si se quiere, el texto de la licencia) ya podemos «picar» el código del plugin:
if ( !function_exists( 'prefijo_get_lisupima' ) )
{
function prefijo_get_lisupima()
{
wp_register_style( 'estilo_lisupima', plugins_url('/lisupima.css', __FILE__), false, '1.0.0', 'all');
wp_enqueue_style( 'estilo_lisupima' );
$pages = get_pages(array('child_of' => get_the_ID(), 'sort_order' => 'ASC', 'sort_column' => 'menu_order'));
$sortida = "<div class=\"imageneslisupima\"><ul id=\"lisupima-ul\">";
foreach ($pages as $page):
$sortida .= "<li><a href=\"#" . $page->post_name . "\" title=\"" . esc_attr($page->post_title) . "\">";
$sortida .= get_the_post_thumbnail($page->ID, 'medium') . "</a></li>";
endforeach;
$sortida .= "</ul></div>";
foreach ($pages as $page):
$sortida .= "<div id=\"" . $page->post_name . "\" class=\"subpaginalisupima\">";
$sortida .= "<h1 class=\"titulolisupima\">" . $page->post_title . "</h1>";
$sortida .= apply_filters('the_content', $page->post_content);
$sortida .= "<hr class=\"linealisupima\"/></div>";
endforeach;
return $sortida;
}
}
add_shortcode('lista_subpag_imagenes', 'prefijo_get_lisupima');
Es una buena práctica validar siempre con function_exists() que no exista ya la función que vamos a implementar. También lo es añadir un prefijo propio al nombre de nuestras funciones.
Ya en el cuerpo de la función, las dos primeras líneas sirven para cargar la hoja de estilos que se va a utilizar.
A continución, mediante la función get_pages(), se obtienen las subpáginas de la página actual, hecho que indicamos con el parámetro 'child_of' => get_the_ID().
Entonces vienen dos bucles. El primero sirve para crear la cabecera, y genera una lista en que cada elemento es un enlace con el nombre, tooltip e imagen de cada subpágina. Mientras que el segundo sirve para renderizar las páginas una a continuación de la otra. Para cada subpágina se renderiza el título, contenido y una línea separadora.
Por último, ya fuera de la función, creamos un shortcode que permitirá incluir esta funcionalidad en la página que queramos. Es decir, allí dónde incluyamos [lista_subpag_imagenes], nos aparecerá todo lo que se renderiza en la función prefijo_get_lisupima().
Aplicando estilos a nuestra extensión: lisupima.css
La hoja de estilos, lisupima.css, la dejaremos en la misma carpeta del plugin (wp-content/plugins/lisupima/). Su contenido será:
#lisupima-ul li
{
display: inline-block;
list-style-type: none;
padding-right: 30px;
padding-bottom: 10px;
vertical-align: bottom;
}
div.imageneslisupima
{
text-align: center;
}
div.subpaginalisupima
{
padding-top: 30px;
}
h2.titulolisupima
{
color: #d3b062;
font: 18px arial, sans-serif;
}
hr.linealisupima
{
color: #d3b062;
background-color: #d3b062;
height: 2px;
border: 0px;
}
Activando y probando el plugin
A continuación, lo que haremos es probar el plugin. Para esto, será necesario ir a Plugins > Plugins instalados y, en el listado que aparece, buscar «Listado de subpáginas con imágenes«. Allí, clicaremos el enlace «Activar«.
Con esto habremos activado el plugin. El siguiente paso es crear una página madre y varias subpáginas de ésta, todas ellas con una imagen destacada.
Entonces editamos la página madre, escribimos: [lista_subpag_imagenes] y grabamos.
Por último, ya sólo nos quedaría navegar por nuestra web, ir a la página madre y ver qué nos aparece!
¡Deseamos que este artículo te haya sido de utilidad y que lo compartas en las redes sociales!