[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla # Overrides del plugin de cálculo de estimación de tiempo de lectura en Joomla [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net) 22 Octubre 2015 [Tips Joomla](https://sergioiglesias.net/blog/joomla) 3 - 5 minutos Visitas: 4089 - - [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla) - [ Desarrollo Joomla ](https://sergioiglesias.net/etiquetas/desarrollo-joomla) - [ Extensiones Joomla ](https://sergioiglesias.net/etiquetas/extensiones-joomla) - [ Plantillas Joomla ](https://sergioiglesias.net/etiquetas/plantillas-joomla) ![](https://sergioiglesias.net/images/blog/tips/override-plugin-etr.jpg) Hace poco te hablaba de un plugin que hace un [**cálculo estimado del tiempo de lectura de los artículos en Joomla!**](https://sergioiglesias.net/index.php?option=com_content&view=article&id=334:plugin-para-joomla-que-calcula-el-tiempo-estimado-de-lectura&catid=23:extensiones&Itemid=49) que desarrolló [Cárlos Cámara](http://www.twitter.com/carcam). 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/configuracion-plugin-etr_1230.png?version=b4a1489d1c37207612909738ff41d19f) 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/visualizacion-defecto-plugin-etr_1230.png?version=599c8bcae38f2ca0d647add784d4754c) - **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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/estilo-personalizado-plugin-etr_1230.png?version=2f92785cf8e1b44a97ec75cff2700aec) ![visualizacion personalizada plugin etr](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/visualizacion-personalizada-plugin-etr_1230.png?version=8d2b5371b24d97229c3b176d80e303e5) - **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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/override-plugin-etr_1230.png?version=bf545ba4dec8b2f0e4131e3edfd03e49) ### 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/codigo-plugin-etr_1230.png?version=ec3065e34ee8d86800cc097b104c6eb8) 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](http://getbootstrap.com/2.3.2/components.html#alerts) (versión que utiliza esta plantilla). ![codigo plugin etr override](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/codigo-plugin-etr-override_1230.png?version=c0e0e498a09043babf8366d8ae068480) 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](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/visualizacion-override-plugin-etr_1230.png?version=8178821c6eb989fae6eb2fa863cfd974) 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!**](https://sergioiglesias.net/index.php?option=com_content&view=article&id=345:como-hacer-un-override-de-la-vista-de-articulo-en-joomla&catid=19:joomla&Itemid=35) 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: ```

Tranquilo!! Solo vas a tardar item->readingtime->slowtime; ?> minutos en leer este artículo ;-)

``` ![codigo plugin plantilla etr](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/codigo-plugin-plantilla-etr_1230.png?version=d62602a50ff3e9794f26431a9a423d00) Una vez metido este código, guardamos el fichero y vemos el resultado: ![visualizacion plantilla plugin etr](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/plugin-etr/visualizacion-plantilla-plugin-etr_1230.png?version=5a8a5a0f78e267124a22e157025fa7e6) 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](http://carcam.github.io/plg_readingtime/) [ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado ### ¿No sabes bien en qué estado está tu web Joomla? Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden. Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML [ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables [![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS. [](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias") ### Suscríbete a mi newsletter ¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo. Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**. [Quiero apuntarme!](https://sergioiglesias.net/newsletter) ### No hay comentarios ### Deja tu comentario En respuesta a Some User Nombre \* Dirección de email \* Texto del comentario \* Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*