Cómo crear un botón en WordPress sin plugins paso a paso

Con este artículo aprenderás a cómo introducir un botón en WordPress, sin utilizar plugins, y que funcione a la perfección y cumpla con su utilidad de redirigir a otro sitio de tu propia web, o a otra página web, red social, etc.

Editar entrada

Para introducir un botón, la manera de hacerlo será por medio de la WP Admin, por lo que deberás dirigirte a las entradas y elegir la que quieras modificar o abrir una nueva.

Seguidamente, vas a crear un bloque nuevo de texto y seleccionarás “HTML“.

Tendrás un buscador en la opción de más (+) donde colocar directamente HTML y así, introducir dicha sección, que automáticamente se separara del resto de las secciones. Allí, se debe pegar el siguiente código que te pasaré a continuación.

PD: Si estás en el editor clásico (el antiguo), directamente selecciona HTML arriba a la derecha, al lado de texto.

Crear un botón en WordPress

Crear botón en WordPress con editor Gutenberg

Este es el código que vas a pegar en el espacio HTML, introducido dónde quieras que haya el botón.

<center><a class="boton-personalizado-2" href="www.url.com">Sitio Web</a></center>
  • Como ves en el código de arriba, en ambos extremos del código está la palabra center, lo que significa que se desea que quede en el centro.
  • Seguido de center esta <a o en caso de cierre /a>, dentro de estas “a” se introduce el enlace, clase y anchor del mismo.
  • También esta class=“boton-personalizado-2”, lo que es muy importante porque luego se modificara con CSS dicho enlace. En el caso de que esto no estuviese allí, se modificarían todos los enlaces, pero queremos que solo suceda en estos, porque seguramente no quieres que TODOS los enlaces de tu web sean un botón, xD.
  • Lo que se llama “botón-personalizado-2” es el nombre de la class. Este podría ser modificado por cualquier otro, por ejemplo, “BOTON” o en minúscula “boton”.
  • Luego esta href=, seguido del enlace encerrado entre comillas, que debe cambiarse por el que se desea que lleve ese botón. Lo que deberás hacer es ir a tus entradas y elegir una de ella, dar clic derecho y copiar dirección de enlace, o directamente pegar el enlace externo de cualquier web o sitio dónde quieras que redirija este botón. Elimina la dirección (url) anterior y pega la actual, a la cual quieres que lleve el botón.
  • Por último y muy importante, se encuentra escrito Sitio Web. Esta parte del código tiene que ver con que quieres que este escrito en el botón, por ejemplo, “Ir a la Entrada de Gatos”; esto ayudará al usuario a entender de que se trata y dónde le va a llevar el dar clic a este botón.
  • Dale clic a actualizar entrada ¡y listo!.

    Ahora faltará configurar el CLASS para que sea un botón después de un enlace, te lo enseño más abajo..
Crear enlace en WordPress

Crear botón en WordPress con editor antiguo

Crear un botón en el editor antiguo sería prácticamente lo mismo. Solo debes darle clic a HTML en la esquina superior derecha del cuadro de texto, pegar el código y realizar las modificaciones antes mencionadas anteriormente (es lo mismo).

Luego, debes volver a visual y actualizar entrada. Ten en cuenta que, ya sea que hayas creado el código en el editor antiguo o en el editor actual, debes abrir la entrada y observar que se ha creado correctamente el enlace que te redirige a la otra entrada que deseabas, además de poseer el nombre que le has colocado.

Crear enlace en WordPress

Ahora toca hacer que el botón se visualice como un botón de verdad

Si hasta esta primera parte todo está bien, puedes continuar con el siguiente paso, debido a que lo que acabas de modificar no se trata de un botón, sino de un enlace.

Lo que tienes que saber ahora es cómo convertir eso en un botón y para ello, principalmente, tienes que instalar la extensión de chrome llamada Stylebot.

Consiste en una herramienta fácil de usar; permitiéndote previsualizar y modificar sin necesidad de que conozcas sobre programación o de CSS.

Para iniciar, abre la extensión y dale clic al seleccionador en la esquina superior derecha, esto te permitirá seleccionar cualquier parte de la entrada, pero la que debes es el enlace que redirige a otra entrada.

Crear botón en WordPress

Extension Stylebot

Cuando pulses encima del enlace que tiene la class desde el selector de Style bot, podrás modificar de forma específica los enlaces que tengan dicha “Class”.

Por ejemplo, añadiendo un fondo azul, con Background Color (color de fondo del botón).

Incluso podrías hacer que el botón se expandiese colocando en la opción de padding (10) y asegurarte de que el botón sea responsive añadiendo una anchura máxima de 300px, para ello puedes colocar el código max-width: 300px;

Por último, hay un detalle que puedes incluirle a tu enlace para que tenga más parecido a un botón, y es colocándole bordes. También puedes incluir manualmente opciones como border-radius: 5px; (que da un estilo más de botón) y además de ello ir a border style y modificar otras opciones molonas.

Crear botón en WordPress

Personalizar la entrada

Una vez tengas creado el código CSS en la extensión, lo que sigue a continuación, es copiar todos los códigos o CSS ubicados en la sección de edit, y pegarlos en el editor de temas para que se apliquen de forma permanente.

Dirígete al WP Admin , luego a temas, y luego a personalizar. Se abrirá una nueva ventana donde aparecerán diferentes opciones en el lado izquierdo de la pantalla. Irás a CSS adicional y añadirás el código.

Crear botón en WordPress

Seguidamente lo Publicas y listo.

Ten en cuenta que, si deseas usar ese botón en cualquier entrada, fácilmente puedes copiar el código HTML que creamos al inicio al crear el botón en la entrada, y si es necesario, cambiar la url a donde va dirigido. Siempre que el código tenga la CLASS configurada en el CSS; se verá como un botón (si así lo has configurado en CSS, claro).

Video tutorial de cómo crear un botón en WordPress paso a paso

Los procedimientos mencionados son sencillos de aplicar. En cualquier entrada y en cualquier momento. Espero que el siguiente video tutorial pueda serte de ayuda si aún tienes alguna duda.

Te puede interesar...

herramientas de análisis web y competencia

Mejores herramientas para analizar webs y competencia (gratis)

Soy GabiFlorensa y en este artículo te traigo mi TOP 3 mejores herramientas para analizar webs y analizar competencia de forma gratuita. Estas te permiten analizar cualquier web a nivel SEO, tráfico, palabras claves y otros aspectos. TOP 3 Tools para analizar dominios Semrush Esta página, en su versión gratuita,

Leer más »

3 formas de conseguir clientes B2B vía online

¡Muy buenas soy GabiFlorensa! En este artículo te explicaré tres métodos para hacer publicidad B2B (Business to Business). Es decir, cuando una empresa quiere hacer publicidad orientada a otras empresas, esto es muy útil para proveedores, servicios, etc. Las mejores formas para anunciarse B2B LinkedIn Es una red social muy

Leer más »

7 Herramientas de Inteligencia Artificial GRATIS

Soy GabiFlorensa y este artículo, te enseñaré 7 herramientas de inteligencia artificial gratuitas que permiten usar funcionalidades muy interesantes. Generar dibujos con inteligencia artificial gratis (Craiyon.com) Es una herramienta que te permite generar dibujos usando una frase o un texto con inteligencia artificial. Para ello, en el buscador colocamos unas

Leer más »

3 mejores webs de compra-venta de redes sociales

En este artículo encontrarás mi top 3 de webs para compra-venta de activos digitales. Para poder ver ofertas y comprar diferentes tipos de redes sociales: Twitter, Instagram, Facebook, canales de YouTube, cuentas de TikTok, etc. A continuación, te presento opciones muy interesantes para que puedas analizar posibles oportunidades. Ranking de

Leer más »