(Tiempo estimado: 3 - 5 minutos)

Hace poco te hablaba de un plugin que hace un cálculo estimado del tiempo de lectura de los artículos en Joomla! que desarrolló Cárlos Cámara.

Este plugin lo puedes ver en este mismo artículo justo antes de la imagen de cabecera del artículo.

En este artículo voy a enseñarte qué posibilidades tiene para ponerlo en tu web.

Instalación por defecto

Tan simple como instalar el plugin, configurarlo y habilitarlo.

De esta forma ya se mostrará en tus artículos en el formato estándar.

Configuración

configuracion plugin etr

En la configuración podrás realizar lo siguiente:

  • Excluir categorías: se pueden seleccionar las categorías en las que no quieres que se muestre.
    Yo, por ejemplo, lo tengo configurado para que solo se muestre en las categorías del Blog.
  • Usar estilo por defecto: te muestra la información del cáculo estimado con negrita.
    visualizacion defecto plugin etr
  • Estilo personalizado: tendrás que poner a "No" el campo anterior y añadir los estilos que quieras poner.
    Por ejemplo, si lo queremos en color rojo, habría que añadir el siguiente atributo CSS: color:red;
    estilo personalizado plugin etr
    visualizacion personalizada plugin etr
  • Ocultar salida: si lo ponemos a "Sí" se dejará de mostrar y aquí es donde entraría a actuar el override del plugin.

Override del plugin ETR

Para hacer uso del override de este plugin (o cualquier otro que nos permita hacerlo), tenemos que seguir los siguientes pasos:

  1. Crear una carpeta (o directorio) dentro de la carpeta "html" que tenemos en la plantilla definida en nuestro sitio web.
    Para este ejemplo estoy utilizando una instalación limpia de Joomla! y haciendo uso de la plantilla "protostar" que es la que viene por defecto. La ruta es la siguiente: "templates/protostar/html".
  2. Esta carpeta la tenemos que llamar como se llama la carpeta del plugin y añadirle plg_content, es decir, "plg_content_readingtime".
  3. Dentro de esta carpeta subir el fichero "default.php" que está dentro de la carpeta "tmpl" del plugin original.

Nota 1: el plugin se instala en "plugins/content/readingtime".

Nota 2: el proceso hay que realizarlo de forma manual, ya que de forma automática, en la configuración de plantillas de Joomla!, los plugin no vienen (cosa que sí ocurre para módulos y componentes).

Al final, en nuestra carpeta "html" de la plantilla, deberíamos tener lo siguiente:

override plugin etr

Editar y adaptar la vista del plugin

Ahora ya solo falta abrir el fichero con tu editor favorito (o directamente desde la administración de Joomla! > Extensiones > Plantillas > Plantillas > Pestaña Editor).

El código del plugin es muy sencillo, lo puedes ver a continuación.

codigo plugin etr

Vamos a cambiar la vista y lo vamos a poner para que se vea en un div de tipo "alert" de Bootstrap 2.3.2 (versión que utiliza esta plantilla).

codigo plugin etr override

Cómo puedes ver he cambiado la clase del div (en lugar de poner "reading-time" he puesto "alert alert-info") y he quitado los paréntesis.

El resultado es el siguiente:

visualizacion override plugin etr

Como puedes ver, ya tienes el "poder" para adaptar la vista de este plugin a las necesidades de tu diseño.

Pero...

No queda aquí la cosa.

También puedes utilizar las variables del plugin directamente dentro de tu template (Grande Carlos!!).

Uso de plugin ETR directamente en tu plantilla

El bueno de Cárlos nos ha dejado las siguientes variables para que utilicemos dentro de nuestra plantilla.

Concretamente dentro del override de la vista de artículo.

  • $this->item->readingtime->slowtime: muestra la estimación de tiempo más largo en la lectura del artículo.
  • $this->item->readingtime->quicktime: muestra la estimación de tiempo más corto en la lectura del artículo.
  • $this->item->readingtime->formattedtime: puedes jugar con el formato del tiempo.

Para hacer un override de un componente puedes ver el artículo que escribí sobre esto: Cómo hacer un Override de la vista artículo de Joomla!

Una vez tienes este override solo tendrás que jugar con estas variables para ponerlas a tu gusto.

Por ejemplo, vamos a poner el siguiente texto antes de que empiece el contenido del artículo:
"Tranquilo!! Solo vas a tardr X minutos en leer este artículo ;-)"

Para ello tienes que buscar en el código la línea en donde comienza el artículo (busca por $this->item->text) y lo encontrarás.

Una vez encontrado, solo hay que poner el siguiente código:

<p class="alert alert-success"><i class="icon-clock"></i> Tranquilo!! Solo vas a tardar <?php echo $this->item->readingtime->slowtime; ?> minutos en leer este artículo ;-)</p>

codigo plugin plantilla etr

Una vez metido este código, guardamos el fichero y vemos el resultado:

visualizacion plantilla plugin etr

Como puedes ver hemos cambiado por completo la vista por defecto el plugin.

Incluso hemos añadido un icono con un reloj ;-)

Eso sí.

No se te olvide configurar el plugin con el campo "Ocultar salida" (ponerlo a "Sí").

Sino se verán los dos textos como en el ejemplo ;-).


Con este artículo espero haberte enseñado cómo utilizar los overrides de los plugin en tu plantilla Joomla!.

En este caso he utilizado el plugin ETR de Cárlos Cámara (al que le prometí escribir este post).

Puedes ver toda la documentación de este plugin en: Documentation: Estimated Reading Time

Sobre el autor, Sergio Iglesias

Sergio Iglesias

Sergio Iglesias es formador, desarrollador y front-end del CMS Joomla!. A través de su blog y sus cursos puedes aprender a desarrollar tu propio portal web autogestionable.

 

¿Te ha gustado el artículo? ¡Suscríbete YA!

¿Necesitas un sitio web que funcione?

¿No quieres depender de nadie para gestionar tu página web?

Recibe contenido exclusivo y GRATIS mi curso sobre desarrollo de plantillas Joomla!


Me apunto ya!

Escribir un comentario

Puedes publicar el comentario que quieras, pero si lo considero SPAM será eliminado automáticamente.



Código de seguridad
Refescar

SergioIglesias.NET te informa que los datos de carácter personal que nos proporciones rellenando este formulario serán tratados por Sergio Iglesias Sánchez como responsable de esta web. La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es, únicamente, para gestionar los comentarios de este blog. La legitimación se realiza a través del consentimiento del interesado. Te informamos que los datos que nos facilitas estarán ubicados en los servidores de SiteGround (proveedor de hosting). Ver política de privacidad de Siteground. El hecho de que no introduzcas los datos de carácter personal que aparecen en el formulario como obligatorios podrá tener como consecuencia que no pueda atender tu solicitud. Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@sergioiglesias.net así como el derecho a presentar una reclamación ante una autoridad de control. Puedes consultar la información adicional y detallada sobre Protección de Datos en mi política de privacidad.

¿Quieres tener un sitio web que funcione?

Contacta conmigo