Cómo agregar Twitter Bootstrap CSS en WordPress usando Shortcodes

Agregar elementos CSS como información sobre herramientas, botones de colores y efectos de desplazamiento puede ayudar a que su contenido destaque. El problema es que la mayoría de las personas no saben cómo usar CSS para agregar botones coloridos, tablas, etiquetas, etc. Le hemos mostrado cómo agregar widgets y tablas coloridos en WordPress. En este artículo, le mostraremos cómo usar Twitter Bootstrap CSS en WordPress usando códigos cortos.

Twitter Bootstrap es un marco CSS y JavaScript que ayuda a mejorar el diseño y la funcionalidad de su sitio rápidamente. Fue desarrollado por Mark Otto y Jacob Thornton en Twitter como un marco para fomentar la coherencia en sus herramientas internas. Más tarde fue lanzado como una herramienta de código abierto. Es hermoso, simple y compatible en todos los navegadores..

Lo primero que debes hacer es instalar y activar el complemento CSS de WordPress Twitter Bootstrap. Tras la activación, el complemento agregará un elemento del menú de inicio de Twitter en su administrador de WordPress. Haciendo clic en él te llevará al panel de control de los plugins..

En el panel, verá una gran cantidad de anuncios agregados por el autor del complemento. Desplácese hacia abajo y verá los códigos cortos que puede agregar en sus publicaciones. Cada código abreviado está vinculado a la página de soporte del complemento, donde puede ver más ejemplos de uso de estos códigos cortos.

Debajo del elemento de menú de Twitter Bootstrap en su administrador, hay un enlace para configurar los ajustes de Bootstrap CSS. Al hacer clic en eso, irá a la página de configuración donde puede cambiar la configuración para que se ajuste a sus necesidades. Tiene la opción de elegir qué versión de Bootstrap CSS le gustaría usar. A continuación encontrará opciones más adecuadas para usuarios de nivel avanzado..

Ahora que hemos examinado la configuración, agreguemos algunos elementos css de bootstrap a una publicación de blog. Simplemente pegue los códigos cortos como este en su publicación o contenido de la página:

  [TBS_BUTTON color = "primary" link = "http://example.com"] Descargar [/ TBS_BUTTON] [TBS_BUTTON color = "danger" link = "http://example.com"] Cancelar [/ TBS_BUTTON] [TBS_BUTTON color = "success" link = "http://example.com"] Más información [/ TBS_BUTTON] Iconos: [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_ICON] [TBS_LABEL] : Etiqueta [/ TBS_LABEL] [TBS_LABEL] Peligro: Etiqueta [/ TBS_LABEL] [TBS_LABEL] Verde: Etiqueta [/ TBS_LABEL] [TBS_ALERT] Configuraciones guardadas [/ TBS_ALERT] 

Así es como se verán estos códigos cortos en la publicación del blog:

Hay muchos más elementos de CSS que puedes agregar a tus publicaciones. Información sobre herramientas, menús acordianos, cuadros emergentes, barras de progreso, etc. El sitio web de este complemento tiene más documentación sobre cómo usar estas funciones. Si tiene curiosidad por los íconos, puede consultar el sitio oficial de Twitter Bootstrap para obtener el conjunto completo de íconos que puede usar..

Sabemos que los marcos temáticos como Génesis y otros vienen con sus propias opciones. ¿Usas elementos CSS en tus publicaciones? Háganos saber dejando un comentario a continuación..