10 minutos de lectura ( 1924 palabras)

Shortcode para Joomla! 3.x

Hace unos días estaba enseñando el uso de Joomla! a mi alumno Gustavo y llegamos a la parte de tener que crear contenido, pasando por el proceso de crear uno y otro artículo “demo” para insertarlo en el sitio de pruebas en el que estaba trabajando.

 

Contenido v/s Extensiones

Como aún estábamos en proceso de aprendizaje, no quería hacer aún una introducción al <a href=”http://extensions.joomla.org”>Joomla! Extensions Directory</a>, puesto que significaría una distracción en el momento en que estábamos comenzando a conocer las categorías, los artículos y su vinculación con los Items de menú.
Es así como comenzó el proceso de copiar y pegar contenido “demo” dentro de un artículo y luego hacer lo mismo con otro y otro, entonces se me ocurrió simplificar el trabajo con un pequeño plugin.

Identificación del problema y posible solución

Como no soy un desarrollador, sino que un constructor de sitios, mi conocimiento del lenguage php es limitado a solo lo que necesito para desarrollar un template y un par de llamadas adicionales, con esto en mente, ¿cómo facilitar el vaciado de contenido en artículos “demo” sin pasar por el centro de extensiones?, la respuesta era, desarrollando un plugin propio, en español, que facilitara la comprensión de lo que era y lo que hacía.

Lo primero fue dirigirme al Centro de Documentación de Joomla! y buscar información relacionada a la creación de un plugin que pudiera ayudarme en la tarea propuesta. La búsqueda no fue compleja para nada y el resultado de esa búsqueda fue precisamente lo que necesitaba, para identificar los “eventos” de un plugin, esta página fue la solución y habiendo identificado que necesitaba, me dispuse a hacer un plugin que afectara al contenido y que sustituyera lo que se ingresaba por algo distinto. Luego, si el alumno escribía por ejemplo [contenido] en su editor de texto, el resultado debiera ser un par de párrafos “Lorem Ipsum” y una imagen al costado del artículo.

El html necesario

Para generar ese contenido “demo” de reemplazo, debía tener un contenido que tuviera un poco de html básico, nada complejo en realidad, lo único que necesitaba era un par de etiquetas “<p></p>” y un <img src>. Con esto en mente y a través de un generador de “Lorem Ipsum” online, de los que hay bastantes, hice el siguiente código:

<pre><p><img class="pull-left" src=http://placehold.it/400x200>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo id eros commodo interdum. Curabitur tortor orci, lobortis et libero ac, vulputate tempor purus. Suspendisse potenti. Sed fermentum sit amet diam ut imperdiet. Sed porttitor lectus placerat molestie interdum. Praesent in dignissim neque, non molestie turpis. Fusce dui est, tincidunt quis velit quis, efficitur molestie arcu. Fusce consequat hendrerit eros.</p>
<p>Sed ornare dapibus lacinia. Fusce tempus mollis eros, vitae hendrerit magna fringilla sed. Sed leo magna, pulvinar id ullamcorper et, consequat id tortor. Aenean sit amet turpis in dui malesuada pharetra. Proin molestie volutpat porta. Donec vitae tincidunt sapien, vitae facilisis mauris. Integer in ante a nisl semper venenatis ac in libero. Maecenas luctus enim sed suscipit viverra. Curabitur dictum imperdiet dapibus. Vivamus mollis nibh id est viverra dictum. Nunc fermentum urna vel tellus elementum, nec elementum sem sollicitudin.</p></pre>

Con ese código ya tenía solucionado el problema del html fijo para el artículo, básicamente está llamando a una imagen, alineada a la izquierda, con 2 párrafos de texto. Ahora bien, para que funcionara había que traspasarlo al plugin.

Creando un Plugin Lorem Ipsum

Si seguimos las instrucciones que nos da el Centro de Documentación de Joomla!, para la la creación de un plugin, veremos que necesitamos para comenzar 2 archivos, un xml y un php, en el primero daremos las instrucciones para que el Plugin se instale correctamente y en el segundo mezclaremos el código html antes indicado con un poco de php para que nuestro plugin funcione correctamente.

Con esta información a la mano, lo primero fue crear un fichero llamado “loremipsum.xml” y otro llamado “loremipsum.php”, el xml lleva bastante información, pero como estamos hablando de un plugin básico para una necesidad específica, nos limitaremos al mínimo de contenido, es así que necesitaremos completar las etiquetas:

Creación del fichero loremipsum.xml

La información que entregamos en el fichero .xml es siempre constante en sus etiquetas, por lo que básicamente debemos comprender que es lo que estamos ingresando solamente, en este caso, tratándose de un plugin muy básico, se usaron solo las etiquetas mínimas, la estructura del fichero .xml es la siguiente:

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0.0" type="plugin" group="content" method="upgrade">
<name>Content - LoremIpsum</name>
<author>Guillermo Bravo</author>
<creationDate>Septiembre 28, 2014</creationDate>
<copyright>Copyright (C) 2014</copyright>
<authorEmail>Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.;/authorEmail>
<authorUrl>https://www.joomla.org</authorUrl>
<version>1.0</version>
<description>Plugin que reemplaza un código corto por un contenido completo, que está compuesto por una imagen alineada a la izquierda y 2 párrafos de contenido, usando el conocido “Lorem Ipsum” como texto de relleno. La forma de usarlo es simplemente escribir en tu editor de texto [loremipsum].</description>
<files>
<filename plugin="loremipsum">loremipsum.php</filename>
<filename>index.html</filename>
<filename>loremipsum.xml</filename>
</files>
<config>
</config>
</extension>

Con eso nuestro fichero loremipsum.xml ya está listo, es básicamente la información del autor, lo que hace el plugin y el contenido del mismo para su correcta instalación. Importante destacar la línea que indica la versión, pues ahí indicamos que se trata de una extensión para Joomla! 3.x, que nuestra extensión es un plugin, que deberá ser instalado dentro del grupo de componen los plugins para contenido y que puede ser actualizado.

Creación del fichero loremipsum.php

De acuerdo al centro de extensiones de Joomla!, señala como ejemplo base para lo que necesitamos al plugin “Email cloak”, verás muchas líneas de código y texto, pero nos enfocaremos en lo básico y lo justo para crear nuestro plugin.

Lo primero que veremos es que hay una estructura que aplica siempre, a todos los plugins, que como no cambia, solo se debe mantener en el que estamos creando, lo importante en este punto es que estamos creando un “@package” llamado “Lorem Ipsum”, que tenemos un “@subpackage” que es “plugin” y que su clase, de acuerdo al estándar de Joomla! es “plgContentLoremIpsum”.

También debemos comprender que el plugin que estamos creando funcionará una vez que cargue el contenido de nuestro artículo, por lo que su función será “onContentPrepare” y que existen parámetros inherentes a los plugins de contenido que son 4, “context”, “row”, “params” y “page”, “context”. Para nuestro plugin nos centraremos solamente en “row”, que es lo que saldrá como resultado de la ejecución de nuestro plugin y una función llamada “str_replace” que buscará nuestro código corto [loremipsum] en nuestro artículo y lo reemplazará por el artículo completo señalado anteriormente.

En este php debemos comprender la función de lo que estamos haciendo, poniendo atención a la única cadena con la que trabajaremos:

$article->text = str_replace('Lo que se busca', 'Lo que se cambia', $article->text);

El primer “$article->text” lo que nos indica que nos centraremos en el texto del artículo, luego la función “str_replace” indica que se realizará un reemplazo de texto, en “Lo que se busca” es en donde insertamos nuestro código corto con el que estamos trabajando, en este caso [loremipsum] y “Lo que se cambia” es el texto de resultado, el que será el reemplazo del texto anterior, en este caso todo el html descrito anteriormente, para finalmente terminar con un nuevo $article->text que indica el texto de salida ya reemplazado.

Con esas variables explicadas, veremos la estructura de nuestro loremipsum.php completa:

<?php
/**
* @package Lorem Ipsum
* @subpackage Plugin
*
* @copyright Copyright (C) 2014 Guillermo Bravo, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
/**
* Lorem Ipsum plugin.
*
* @package Lorem Ipsum
* @subpackage Plugin
* @since 1.0
*/
class PlgContentLoremIpsum extends JPlugin
{
protected $autoloadLanguage = true;
/**
* Plugin que transforma el código corto [loremispum] en un artículo “demo” completo.
*
* @param string $context The context of the content being passed to the plugin.
* @param mixed &$row An object with a "text" property or the string to be modified
* @param mixed &$params Additional parameters.
* @param integer $page Optional page number. Unused. Defaults to zero.
*
* @return boolean True on success.
*/
function onContentPrepare($context, $article, $params, $limitstart)
{
/*Se puede usar $this->db, $this->app y $this->params aquí*/
$article->text = str_replace('[loremipsum]', '<p><img class="pull-left" src=http://placehold.it/400x200>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In commodo id eros commodo interdum. Curabitur tortor orci, lobortis et libero ac, vulputate tempor purus. Suspendisse potenti. Sed fermentum sit amet diam ut imperdiet. Sed porttitor lectus placerat molestie interdum. Praesent in dignissim neque, non molestie turpis. Fusce dui est, tincidunt quis velit quis, efficitur molestie arcu. Fusce consequat hendrerit eros.</p><p>Sed ornare dapibus lacinia. Fusce tempus mollis eros, vitae hendrerit magna fringilla sed. Sed leo magna, pulvinar id ullamcorper et, consequat id tortor. Aenean sit amet turpis in dui malesuada pharetra. Proin molestie volutpat porta. Donec vitae tincidunt sapien, vitae facilisis mauris. Integer in ante a nisl semper venenatis ac in libero. Maecenas luctus enim sed suscipit viverra. Curabitur dictum imperdiet dapibus. Vivamus mollis nibh id est viverra dictum. Nunc fermentum urna vel tellus elementum, nec elementum sem sollicitudin.</p>', $article->text);
return true;
}
}
?>

Empaquetado e instalación

Finalmente debemos crear un fichero html vacío, solamente para asegurarnos que si alguien navega hasta la ruta de nuestro plugin se encuentre con una página html en blanco y no con nuestra carpeta. El código para crear el index.html en blanco es simplemente:

<!DOCTYPE html><title></title>

Terminados nuestros 3 ficheros, procedemos a empaquetarlos en un archivo comprimido del tipo zip, el resultado final sería:

  • loremipsum.zip
    • loremipsum.xml
    • loremipsum.php
    • index.hmtl

Una vez que ya tenemos nuestro zip listo, procedemos a realizar su instalación en Joomla!, recuerda que el plugin una vez instalado, debe ser activado.

Uso de nuestro plugin

Finalmente ya podemos usar nuestro plugin, basta con que ingreses a tu gestor de artículos y crees o modifiques uno agregando en tu editor de texto simplemente [loremipsum] y lo guardes. El resultado será ese html completo que habíamos creado con su respectiva imagen y contenido.

Consideraciones y recomendaciones

Si no estás familiarizado con el desarrollo de plugins, te recomiendo encarecidamente que revises los enlaces que tiene este artículo y visites los recursos enlazados, así mismo que juegues con tus propios parámetros, que agregues tus propios códigos, una línea solamente, un nombre o lo que sea… La idea es que vayas aprendiendo del error hasta que logres entender completamente el funcionamiento de los plugins de contenido.

Luego de varias pruebas realizadas, el mismo estilo de plugin ha funcionado sin problemas llamando a videos de Vimeo o Youtube, insertando imágenes desde servicios externos, redimensionándolas al tamaño que nosotros indiquemos, creando botones para insertar en nuestros artículos, etc. Por lo que si le pones la debida atención a su estructura, debieras poder generar más de un plugin de bastante utilidad para tu trabajo.

Agradecimientos

En el proceso de creación del plugin, como todo lo nuevo que uno aprende, tuve varios problemas, los que fueron solucionados y sorteados gracias a la invaluable ayuda de los amigos que estuvieron dispuestos a ayudar en el proceso, ellos son Olaf Offic, Tito Alvarez y Gustavo Aragón, a todos ellos muchas gracias por el tiempo y la paciencia para con este constructor de sitios. 

0
Premios y reconocimientos del CMS Joomla!
Desenredando Warp 7 y UIKIT (Primera Parte: Warp 7...
 

Comentarios

¿Ya està registrado? Ingresa Aquí
No hay comentarios por el momento. Sé el primero en enviar un comentario.

By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/