¿Cómo incrustar tableros y tarjetas de Trello en WordPress?

¿Tiene que administrar grandes proyectos basados ​​en equipos y desea utilizar Trello en su máximo potencial? ¿Planea integrar sus tableros de Trello directamente en su sitio web? Si es así, ¡has venido al lugar correcto! En esta guía, le mostraremos 3 métodos diferentes para insertar tableros y tarjetas de Trello en WordPress .

¿Por qué incrustar tableros y tarjetas de Trello en WordPress?

Trello es una de las herramientas de gestión de proyectos visuales más populares que existen. Casi todos los proyectos colaborativos o equipos de proyectos adoran Trello debido a su diseño y la capacidad de configurar fácilmente tareas diarias y a corto plazo. Simplemente construya su tablero, agregue sus tarjetas y configure sus listas de tareas planificadas. Además, también puede disfrutar de funciones adicionales al configurar sus tableros de tareas, como activadores basados ​​en reglas para sus tareas, comandos de calendario, tarjetas personalizadas, botones de tablero y mucho más. Y, por supuesto, también puede incrustar tableros de Trello en su sitio.

Entonces, ¿qué ventajas tiene incrustar Trello en WordPress? Si bien la aplicación móvil y el visor del navegador web para Trello son suficientes, hay un par de ventajas en la integración de Trello con su sitio web. Por un lado, está la productividad . Si su equipo puede acceder rápidamente a sus tableros de Trello, pueden trabajar mejor. Puede proporcionar a varios equipos acceso a tableros públicos específicos sin tener que preocuparse de que confundan diferentes tableros o tengan la molestia de buscarlos. Pégalos en las tarjetas y tableros relevantes para ellos, y harás su vida mucho más fácil.

Además, puede mostrar tarjetas en páginas y publicaciones para brindar información a otros administradores del sitio u otros clientes. ¿Gestiona un proyecto a gran escala que se ejecuta fuera de su sitio web? Simplemente inserte sus tableros y tarjetas de Trello y permita que su equipo coopere entre sí de manera mucho más eficiente, y todo sin la necesidad de invitar a varios usuarios directamente a sus tableros de Trello.

¿Cómo incrustar tableros y tarjetas de Trello en WordPress?

En esta guía, le mostraremos 3 métodos para incrustar tableros y tarjetas de Trello en WordPress :

1. Con un guión incrustado
2. Uso de iFrame
3. con un complemento

Echemos un vistazo más de cerca a cada uno de ellos.

1. Conecte Trello y WordPress con un script incrustado

Trello le permite incrustar una pequeña instantánea de sus tableros y tarjetas usando un código javascript . Sin embargo, este código javascript tiene sus limitaciones. Por un lado, no muestra mucha información, ni es muy fácil de personalizar. Además, no se puede interactuar con la inserción, y los clics en la inserción lo llevan directamente al tablero.

Aún así, hay una serie de ventajas en el uso de este script sobre otros métodos. Primero, puede incrustar sus tableros privados y proporcionar un enlace directo a ellos con solo información mínima para identificarlos. Además, la pequeña instantánea funciona especialmente bien para las tarjetas.

A) Tomando el enlace de su Tablero/Tarjetas de Trello

Una forma de incrustar esto en su sitio web es agregando código a sus páginas/publicaciones. Primero, debe obtener la URL de su tablero/tarjeta de Trello. Para obtener la URL de su tablero de Trello, ábrala y, en la barra lateral derecha, podrá ver un botón Más junto a los 3 puntos en la parte superior derecha. Haga clic en él, vaya a Enlace a este tablero y obtendrá el enlace/URL de su tablero de Trello.

Alternativamente, si desea obtener el enlace a su tarjeta Trello individual, simplemente abra la tarjeta primero. Luego, haga clic en Compartir en la parte inferior de la tarjeta y verá el enlace debajo de la sección Enlace a esta tarjeta .

Para agregar código a sus páginas y publicaciones de WordPress, puede usar el complemento gratuito de código incrustado . Esta herramienta esencialmente le permite agregar scripts al pie de página o al encabezado de sus páginas/publicaciones. Esta es una de las formas más fáciles de incrustar tableros y tarjetas de Trello en sus sitios de WordPress, pero tampoco está limitado exactamente a esto. También puede usar complementos como los widgets de texto mejorados y colocar directamente sus scripts en widgets personalizados.

Así que ahora, sigamos adelante e instalemos el complemento Embed Code . Para hacerlo, abra la barra lateral de su Tablero, haga clic en Complementos > Agregar nuevo . Luego, use la barra de búsqueda en el extremo derecho para buscar Código de inserción. Haga clic en Instalar y una vez que el botón cambie a Activar, vuelva a presionarlo. Ahora, el complemento está activado y listo para funcionar.

B) Incrustar tarjetas con el script Embed

Ahora, todo lo que tiene que hacer es pegar el siguiente script en sus páginas/publicaciones.

 <blockquote class="tarjeta-trello">
<a href="{url a la tarjeta}">Tarjeta Trello</a>
</blockquote>
<secuencia de comandos src="https://p.trellocdn.com/embed.min.js"></secuencia de comandos>

Simplemente cambie {url to card} por el enlace de su tarjeta Trello . Para hacer eso, simplemente siga los pasos descritos anteriormente. Por ejemplo, para incrustar nuestra tarjeta Trello, nuestro script es:

 <blockquote class="tarjeta-trello">
<a href="https://trello.com/c/z****LZj/8-166-2020-07-02">Tarjeta Trello</a>
</blockquote>
<secuencia de comandos src="https://p.trellocdn.com/embed.min.js"></secuencia de comandos>

Para incrustar sus tarjetas y tableros de Trello, puede usar el complemento de código incrustado. Una vez que instale el complemento, en el editor de publicaciones/páginas, verá una sección del editor de metadatos con la etiqueta " Código incrustado ". Verá los cuadros Código de encabezado y Código de pie de página . Entonces, puede colocar su script en cualquiera de los dos campos. Para nuestra demostración, usaremos el cuadro de código de pie de página.

Simplemente pegue la secuencia de comandos personalizada y, una vez que guarde o publique su página o publicación, se incrustará la tarjeta Trello.

C) Incrustar tableros con el script Embed

El proceso para incrustar tableros en sus páginas/publicaciones de WordPress es idéntico al proceso para las tarjetas. Solo necesita usar un código diferente para Boards en su lugar:

 <blockquote class="trello-board-compacto">
<a href="{url al tablero}">Tablero de Trello</a>
</blockquote>
<secuencia de comandos src="https://p.trellocdn.com/embed.min.js"></secuencia de comandos>

Simplemente pegue el enlace de su Trello Board en {url to board} . Esto debería verse algo como esto:

 <blockquote class="trello-board-compacto">
<a href="https://trello.com/b/g***h3Ec">Tablero de Trello</a>
</blockquote>
<secuencia de comandos src="https://p.trellocdn.com/embed.min.js"></secuencia de comandos> 

Luego, vaya a la página o publicación a la que desea agregar el tablero de Trello y pegue el código en la sección de código del encabezado o pie de página. Guarda los cambios, ¡y listo! Ha incrustado un tablero de Trello en su sitio.

CONSEJO PROFESIONAL

Incrustar tableros y tarjetas de Trello mediante un script es una buena opción para algunos, pero carece de algunas funciones que podría necesitar. Por un lado, no es una inserción interactiva, y todo lo que ve es un Tablero/Tarjeta de Trello básico con detalles mínimos. Al hacer clic en la inserción, se accede al tablero de Trello real, por lo que solo es útil agregar un enlace instantáneo a sus tableros/tarjetas de Trello mostrando detalles mínimos.

2) Integrar Trello con WordPress usando iFrame

Teniendo en cuenta las limitaciones del método de secuencia de comandos incrustado, usar un iFrame puede ser una opción mucho mejor. Especialmente cuando desea mostrar el tablero/tarjeta de Trello en su sitio web.

Puede incrustar un tablero/tarjeta de Trello mediante un enlace iFrame siempre que su tablero sea público. Puede cambiar la visibilidad de su tablero usando la configuración de Visibilidad junto al título de su Tablero en la barra de herramientas superior. Simplemente cámbielo de Privado o Equipo a Público, y una vez que acepte el aviso, su tablero debería estar listo para vincularse con iFrame.

Ahora, para encontrar el enlace para su tablero de Trello, vaya a la barra lateral derecha y haga clic en el botón Más junto a los 3 puntos. Luego, ve a Vincular a este foro y obtendrás la URL del foro.

Como alternativa, para obtener el enlace a una tarjeta individual, abra la tarjeta, haga clic en Compartir y verá el enlace debajo de Enlace a esta tarjeta .

Uso de iFrames con enlaces de Trello

Después de obtener su enlace, agregue .HTML al final del enlace y guárdelo. Por ejemplo, para el enlace de nuestro tablero, agregaríamos .HTML al final:

 https://trello.com/b/g****Ec.html

Luego, todo lo que necesita hacer es usar el siguiente enlace iFrame dentro de un bloque HTML en WordPress.

 <iframe src="https://trello.com/b/g******c.html">

Simplemente cambie el enlace dentro del atributo src al enlace de su tablero/tarjeta de Trello con un .HTML al final, y una vez que guarde su publicación/página, la inserción debería mostrarse en su sitio.

Para esto, deberá usar el bloque HTML usando el editor visual y luego pegar su enlace iFrame. Para una ventana Trello iFrame más clara, agregaremos algunos atributos más al enlace.

Una vez que haya terminado, su incrustación debería verse así.

CONSEJO PROFESIONAL

Incrustar tableros y tarjetas de Trello usando iFrame es una gran opción. Es fácil de usar y es una inserción interactiva que muestra la información de la tarjeta o del tablero sin redirigirte al tablero real de Trello.

3) Incruste tableros y tarjetas de Trello en WordPress usando un complemento

Una de las opciones más fáciles y amigables para principiantes para incrustar tableros y tarjetas de Trello en sus sitios web de WordPress es usar WooTrello . Esta es menos una opción de visualización y más un gancho de WooCommerce Checkout que puede integrar con Trello. Este complemento le permite integrar su página de agradecimiento de WooCommerce con su tablero de Trello. De esta manera, puede crear un tablero de Trello automáticamente cada vez que su cliente realice un nuevo pedido. Por lo tanto, puede optimizar sus tareas y detalles utilizando tareas de pedido creadas automáticamente, completas con detalles de facturación, fechas y otros detalles adicionales del pedido.

Por supuesto, el complemento viene con algunas ventajas, como una interfaz clara y una fácil integración con WooCommerce y ganchos de pago. Además, también puede habilitar la autenticación con un clic para su vista de Trello. WooTrello está diseñado para admitir WooCommerce y ayudarlo a administrar su tienda sin problemas. Por lo tanto, si tiene una empresa, puede permitir que el complemento cree una nueva tarea de Trello después de cada nuevo pedido o actualización de pedido.

Instalación del complemento WooTrello

Para comenzar con nuestro tercer método para integrar los tableros de Trello con WordPress, debe instalar el complemento. Para hacerlo, abra su Panel de administración de WordPress y vaya a Complementos> Agregar nuevo . Luego, use la barra de búsqueda en el extremo derecho para buscar WooTrello . A continuación, haga clic en Instalar y luego actívelo.

Usando el complemento WooTrello

Una vez que instale y active el complemento, lo llevará automáticamente a su pantalla de configuración. Alternativamente, puede abrir el complemento haciendo clic en WooTrello en la barra lateral de administración.

Luego, el complemento puede pedirle permiso para proporcionarle notificaciones de actualización de funciones y optar por sus servicios de seguimiento de diagnóstico. Si desea compartir sus datos de uso no confidenciales, haga clic en Permitir y continuar . Alternativamente, puede presionar Saltar .

Tomando su token Trello Access

Para la integración, debe sincronizar su tablero de Trello con su instalación de WordPress utilizando la API de Trello. Haga clic en el vínculo Código de acceso de Trello en el extremo derecho sobre el campo Código de acceso de Trello .

Iniciará sesión en su cuenta de Trello y WooTrello le pedirá permiso para acceder a la información de su cuenta.

Acéptalo haciendo clic en Permitir y verás un token para el acceso a Trello.

Copie este código y abra la ventana/pestaña donde tiene abierta su página de Complementos. Luego, pegue este token en el campo Publicar código de acceso de Trello aquí y haga clic en Guardar código de acceso.

Integrando sus tableros de Trello y su página de Checkout usando WooTrello

Para habilitar la integración de su tablero Trello, marque la casilla Habilitar/Deshabilitar . Luego, use la opción desplegable de tableros de Trello para seleccionar uno de sus tableros de Trello y luego use la lista Seleccionar Trello para elegir uno de ellos.

A continuación, agregue una marca a todos los detalles del pedido que muestra en su tarjeta Trello. Después de hacerlo, haga clic en Guardar nueva configuración de pedido de la página de pago.

Luego, la integración de pago de la página de WooTrello y WooCommerce debería estar completa. Ahora, cada vez que un cliente complete un pedido en su tienda en línea, el complemento creará automáticamente una tarea de Trello de acuerdo con su configuración guardada.

Bonificación: incrustar el tablero de Trello a través de HTML

También puede mostrar su tablero de Trello en su sitio usando un poco de HTML. Este no es el mejor método porque no es interactivo pero es bastante fácil de implementar.

Para agregar un tablero de Trello a su sitio web de WordPress, simplemente copie y pegue el siguiente código HTML en su sitio:

<blockquote class="trello-board-compact">
<a href="{url to board}">Trello Board</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Ahora, cada vez que se carga la página en la que ha insertado el código, el script encontrará la tarjeta y la reemplazará con una versión incrustada. Para obtener más información al respecto, puede consultar esta página.

¿Cómo aprovechar al máximo los tableros y tarjetas de Trello en WordPress?

Incrustar sus tableros de Trello en WordPress es solo el primer paso. Ahora es el momento de usar la herramienta para organizar tus tareas y ser más productivo.

Trello es una de las herramientas de administración más populares por una buena razón, pero simplemente agregarlas a su sitio no es suficiente. Aquí hay algunos consejos que lo ayudarán a organizar mejor sus tarjetas y tableros y llevar la productividad de su equipo al siguiente nivel.

• Categoriza las tareas : en lugar de tener una lista masiva llena de tareas, es mejor organizarlas. El primer paso es categorizar las tareas. Esto depende de su negocio y de quién esté usando la pizarra. Por ejemplo, si está organizando tareas para un grupo de desarrolladores, puede agrupar tareas en Trabajo pendiente, Seleccionado, En curso, Prueba, Listo (en vivo).
• Agregar etiquetas : las etiquetas son una de las formas más fáciles de organizar tareas. Además de ser muy útil para priorizar tareas o asignar tareas a diferentes equipos, también puedes personalizar las etiquetas y añadirles colores. De esa manera, su equipo tiene rápidamente información clara sobre las tareas.
• Use power-ups : los power-ups agregan funcionalidades adicionales a sus tableros de Trello. Puede conectar sus tareas a Google Drive, Calendar, Slack, Maps y muchas otras herramientas para tener toda la información relevante en un solo lugar.
• Mantén el tablero actualizado : Las tarjetas y los tableros son útiles solo si están actualizados. Por lo tanto, le recomendamos que asigne a una persona para asegurarse de que el equipo actualice las tarjetas y use las etiquetas correctamente.
• Asigne miembros del equipo y plazos : esto puede parecer obvio, pero es extremadamente importante. Cada tarea debe tener al menos una persona responsable y una fecha de vencimiento.

Estos son solo los conceptos básicos para ayudarlo a comenzar, pero hay muchas otras cosas que puede hacer para aprovecharlo al máximo.

planes trello

Aunque Trello ofrece muchas funciones excelentes de forma gratuita, también tiene dos versiones premium que comienzan en 12,5 USD por usuario al mes. Además de funciones más avanzadas y muchas más opciones, una de nuestras funcionalidades favoritas es Listas de verificación avanzadas. Esto le permite asignar miembros del equipo y fechas de vencimiento a cada elemento de la lista de verificación, lo cual es excelente para proyectos complejos. Para obtener más información sobre los diferentes planes de Trello, puede consultar su página de precios.

Conclusión

Con todo, Trello es una excelente herramienta para organizar sus proyectos y tareas en tableros y tarjetas. Por lo tanto, si desea ayudar a su equipo a ser más productivo, debe incorporar tableros y tarjetas de Trello en WordPress .

En este tutorial, le mostramos 3 métodos para insertar tableros y tarjetas de Trello en su sitio . Todos ellos son aptos para principiantes y tienen algunos pros y contras. Teniendo en cuenta la flexibilidad que proporciona y lo fácil que es configurarlo, recomendamos utilizar el método iFrame. Le permitirá agregar un tablero interactivo o una tarjeta incrustada.

Nuestra guía era bastante completa y tenía algunos bits de codificación que los principiantes de WordPress podrían encontrar confusos. Entonces, si tiene alguna pregunta, continúe y háganoslo saber en la sección de comentarios a continuación.

Finalmente, para obtener más información sobre cómo incrustar diferentes tipos de contenido en su sitio web, consulte nuestra guía sobre cómo incrustar hojas de Google en WordPress .