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 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 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.
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.
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.
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.
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.
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
![Como habilitar el ShortCode de [year] en WordPress sin plugins](https://gabiflorensa.com/wp-content/uploads/2022/02/portasda-shortcode.jpg)
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más
Leer Más