Convertir enlaces en botones
Agregar botones en el cuerpo del mensaje es tan sencillo que, cuando aprendas a hacerlo, dotarás a tu web de un estilo único.
Para poder agregar botones, tienes que saber muy poco de html y sobre todo, saber escribir en la pestaña Texto de la caja de redacción de tu WordPress. Si te fijas en la caja de redacción, cuentas a tu derecha de dos pestañas: “Visual” y “Texto”. La mayoría de usuarios de WordPress escriben en “Visual” ya que es muy parecido a los clásicos documentos en Word de Microsoft Office y una gran minoría lo hace en Texto o en ambas para poder maquetar elementos y textos fuera de la visualización normal. Prácticamente, en Texto es escribir en código fuente (html).

Imaginemos que has añadido un enlace desde Visual:

Enlace

Si observamos este enlace desde Texto, veremos su código fuente así:

Ahora añadiremos muy poco de código para convertir el enlace en un botón:

Siendo el resultado el siguiente:

Enlace

Símplemente hemos añadido la clase btn btn-info y el código role="button" que también corresponde con un botón de color azul celeste. La característica del color del botón está justamente en btn-info. Si por ejemplo queremos un botón verde, debemos cambiar “info” por “success” de esta forma:

Enlace

En la siguiente lista mostramos los colores por defecto que cuenta el framework Bootstrap 3.0 con el código completo:

  • btn btn-default gris claro
  • btn btn-info azul celeste
  • btn btn-primary azul índigo
  • btn btn-success verde
  • btn btn-danger rojo
  • btn btn-warning naranja claro
  • btn btn-link solo enlace

Tamaños

Si necesitas destacar el botón tipo enlace, estos estos son los códigos que debemos de añadir según sus características de tamaño: .btn-lg, .btn-sm, o .btn-xs

Botón Grande

Botón por Defecto

Botón Pequeño

Botón extra pequeño

En siguientes tutoriales veremos donde insertar estos enlaces estilo botón con la maquetación de cada publicación.


Fuente: http://getbootstrap.com/css/#buttons

Este tutorial está basado en el framework Bootstrap 3.0 o superior para las plantillas web Athenea y Pharma de WordPress. Puedes descargar ambas plantillas desde http://www.ibermega.com/themes e instalarlas para practicar con este y otros tutoriales. Ver índice.

Aconsejamos que cuando crees una entrada o una página no la publiques directamente. Solo guardala y si quieres ver los resultados, pulsa en “Vista previa”. Cuando la tengas lista, publícala con garantías de una perfecta visualización exenta de errores.

Por experiencia, nada más publicar una entrada o una página, los robots del buscador Google que pasaban en ese momento, nos han indexado la publicación en sus directorios mostrándo los errores y fallas que estaban por corregir. Si esto ocurre, no podremos hacer nada hasta que vuelva a pasar el rastreador del buscador, que en algunas ocasiones, puede tardar hasta 30 días.


Webmaster y CEO en IBERMEGA digital desde el año 2002. Desarrollador de aplicaciones web. Consultor y docente en SEO, SEM e Internet. Project Management. I+D en App Web para nuevos proyectos. Tecnologías web en streaming para Radio y TV. Investigaciones de Mercado para proyectos de comercio electrónico. Autor de diversos artículos y tutoriales sobre el sector.

También te puede interesar

Un pensamiento en “Convertir enlaces en botones

Inserta un comentario

El correo no se mostrará ;)