Agregar elementos CSS como tooltips, botones coloridos y efectos de desplazamiento puede ayudar a que tu 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. Te hemos mostrado cómo agregar widgets coloridos y tablas en WordPress. En este artículo, te mostraremos cómo usar Twitter Bootstrap CSS en WordPress usando shortcodes.
Twitter Bootstrap es un framework de CSS y JavaScript que ayuda a mejorar rápidamente el diseño y la funcionalidad de tu sitio. Fue desarrollado por Mark Otto y Jacob Thornton en Twitter como un framework para fomentar la consistencia 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 plugin WordPress Twitter Bootstrap CSS. Tras la activación, el plugin agregará un elemento de menú de Twitter Bootstrap en tu administrador de WordPress. Al hacer clic en él, te llevará al panel del plugin.
En el panel, verás una gran cantidad de anuncios agregados por el autor del plugin. Desplázate hacia abajo para pasarlos y verás los shortcodes que puedes agregar en tus publicaciones. Cada shortcode está enlazado a la página de soporte del plugin, donde puedes ver más ejemplos de uso de estos shortcodes.
Debajo del elemento de menú Twitter Bootstrap en tu administrador, hay un enlace para configurar los ajustes de CSS de Bootstrap. Al hacer clic en él, serás dirigido a la página de configuración donde puedes cambiar los ajustes para adaptarlos a tus necesidades. Tienes la opción de elegir qué versión de CSS de Bootstrap deseas usar. Debajo de eso, encontrarás opciones más adecuadas para usuarios de nivel avanzado.
Ahora que hemos visto la configuración, agreguemos algunos elementos CSS de bootstrap a una entrada de blog. Simplemente pega los shortcodes como estos en el contenido de tu publicación o página:
<!--Shortcodes-> [TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="http://example.com"]Download[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="danger" link="http://example.com"]Cancel[/TBS_BUTTON] [TBS_BUTTON id="mySpecialButton" color="success" link="http://example.com"]Learn more[/TBS_BUTTON] Icons: [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-globe"] [TBS_ICON class="icon-chevron-right"] [TBS_ICON class="icon-music"] [TBS_ICON class="icon-film"] [TBS_ICON class="icon-user"] [TBS_ICON class="icon-wrench"] [TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] [TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] [TBS_LABEL class="success"]Green: Label[/TBS_LABEL] [TBS_ALERT class="success"]Settings saved[/TBS_ALERT]
Así es como se verán estos shortcodes en la entrada de blog:
Hay muchos más elementos CSS que puedes agregar a tus publicaciones. Tooltips, menús desplegables, cuadros emergentes, barras de progreso, etc. El sitio web de este plugin tiene más documentación sobre cómo usar estas funciones. Si tienes curiosidad sobre los iconos, puedes consultar el sitio oficial de Twitter Bootstrap para ver el conjunto completo de iconos que puedes usar.
Sabemos que los frameworks de temas como Genesis y otros vienen con sus propias opciones. ¿Usas elementos CSS en tus publicaciones? Háznoslo saber dejando un comentario a continuación.
kezzy
Gracias por esta publicación. He estado usando un tema construido sobre un framework de bootstrap y el proceso es directo en lugar de tener que ingresar shortcodes aquí y allá. De todos modos, ¿no sería más fácil incluir el script y el estilo de bootstrap en el encabezado de un tema y lograr el mismo resultado?
Thiago
¡Muchas gracias! Esto me puede ayudar mucho.
Deprito
Estoy usando genesis, pero cuando intento este plugin... mi CSS se vuelve loco.
¿Cómo lo arreglo? Estoy un poco confundido...
Soporte de WPBeginner
Deprito, Genesis es en sí mismo un Marco de Tema y hacer que Twitter Bootstrap funcione en Genesis requeriría pasos adicionales. Prueba los foros de soporte de Genesis, alguien debe haberlo hecho ya.
Administrador
James Matthews
Tutorial increíble. Aclaró mucha confusión que tenía sobre Twitter Bootstrap. Algunas partes de Bootstrap todavía me resultan difíciles de entender, pero esto definitivamente será muy útil a medida que me familiarice más con él.
Steven Blake mba
Gracias por lo que estoy seguro debe ser un buen artículo. Me resulta bastante frustrante la cantidad de artículos que realmente podrían interesarme y que olvidan o no se dan cuenta de que el uso de palabras de moda con las que tratas todos los días podría no ser entendido por nadie que no se haya encontrado con ellas antes. Intento no hacer esto en mi propio trabajo como coach de vida, que si anunciara como practicante de PNL, alejaría al 90% de las personas que no saben qué es eso.
Así que, desafortunadamente, hasta que entienda qué es un Twitter Bootstrap, realmente no necesito el detalle de cómo instalarlo. Puede que me esté perdiendo algo, pero no tengo tiempo para investigar más de lo que ya hago y llegué a tu artículo, ¡solo no quiero tener que buscar varios más antes de regresar!
Una sola línea explicando qué hace y los beneficios de tener un Twitter Bootstrap sería la diferencia entre que yo siga leyendo o me vaya.
Esto es crítica constructiva, por cierto, agrega la descripción en este y en cualquier blog subsiguiente y verás mejorar tus resultados. Mis mejores deseos, Steven
Noumaan Yaqoob
@Steven Twitter Bootstrap es un conjunto de herramientas de diseño predefinidas que ayuda a otros diseñadores y desarrolladores a usar esos elementos en sus propios proyectos.
El propósito de este artículo y el plugin es ayudar a usuarios como tú a usar Twitter Bootstrap sin aprender código o CSS.
Richie
Gran tutorial.
craig grella
Gran publicación, gracias. He usado Bootstrap y lo he adaptado para tesis y algunos otros temas, pero esto será útil para sitios que no necesitan el framework, solo los botones e íconos.
¡Buena observación!