Cómo crear un cuadro de texto en WordPress: la manera fácil

Tu sabes como va. Ves una característica de diseño en un sitio web que parece atractiva. Tienes que tener la misma función en tu propio sitio.

¿Cómo se crean esos elegantes cuadros de texto en WordPress?

¿Es un truco de CSS? ¿Es un complemento? ¿Necesitas estudiar un nuevo lenguaje de codificación?



En realidad, es bastante simple y se puede hacer mediante un complemento o manualmente.
 

Cómo crear un cuadro de texto en WordPress

Los cuadros de texto en WordPress se pueden agregar con CSS y/o HTML. La forma más sencilla es instalar un complemento que ya tenga la codificación hecha. También puede usar campos de entrada de texto usando HTML para permitir que los usuarios del sitio web escriban en el front-end de su sitio web, como si estuvieran completando un formulario.
 

Agregar un cuadro de campo de entrada de texto

Para agregar un campo de texto de entrada que permita a los usuarios escribir en un cuadro de texto en una página web en vivo de WordPress, debe ingresar un código HTML.

<form>
<input type="text" name="boxname">
</form>

En el editor de bloques, agregue un bloque de párrafo estándar, haga clic en los tres puntos en la parte superior derecha y seleccione 'editar con HTML'.

Pegue el código de arriba. Si muestra que hay un error, haga clic en los tres puntos para abrir el menú expandido y haga clic en la opción 'convertir a HTML'.

Una vez convertido, haga clic en la pestaña de vista previa y verá que su campo de entrada de texto está allí.

En el editor clásico, haga clic en la opción 'texto' para editar en HTML e inserte allí el mismo código.
 

Estilo de cuadros de entrada de texto con CSS

El estilo estándar para los cuadros de entrada de texto suele ser un borde negro delgado con un fondo transparente.

Nada demasiado decorativo o elegante.

Para agregar estilo a sus cajas o hacerlas más anchas, eso se controla con CSS.

En su panel de administración de WP, vaya al menú Apariencia y seleccione 'personalizar'.

Desde allí, puede agregar varias opciones de estilo:

El código para su personalizador de CSS es:

input[type="text"] {
  width: 100%;
  border: 2px solid Crimson;
  background: PeachPuff;
  border-radius: 4px;
  margin: 8px 0;
  outline: none;
  padding: 8px;
  box-sizing: border-box;
  transition: 0.3s;
  color: Crimson;
}

Cada uno de esos elementos se puede cambiar, como cambiar los tamaños de píxeles de los márgenes, el relleno o los estilos de borde.

Para los colores, busque en línea una lista de nombres de colores CSS, o si conoce el código hexadecimal del color que desea, insértelo en su lugar.

Una vez que el estilo CSS esté configurado en el personalizador, cada vez que inserte el en el HTML de su publicación o página, se mostrará su campo de entrada de texto personalizado.
 

Cómo codificar cuadros de contenido en su plantilla WP themes style.css

Si tiene un tipo particular de cuadro de contenido que desea diseñar con CSS, utilícelo repetidamente en varias páginas (sin tener que codificarlo cada vez), use esta opción.

El style.css es lo que controla todos los elementos de estilo para cada tema.

Puede editar la hoja de estilo para incluir sus propios cuadros de texto personalizados.

Como ejemplo, si quisiera usar cuadros de contenido amarillos, puede agregar una sección a su estilo.css para un 'cuadro de contenido amarillo'.

Vaya a cPanel, administrador de archivos, vaya a la carpeta public_html (o al subdirectorio para un dominio adicional) y busque el tema en el que desea agregar los cuadros de contenido personalizados.

Haga clic derecho para editar la hoja style.css.

Justo antes de que comiencen las consultas @media, inserte allí su CSS personalizado para cuadros de contenido. Comenzando con un . (punto) seguido de un nombre único para su caja, luego inserte los códigos CSS.

.content-box-yellow {
          background-color: #fef5c4;
          border-left: 8px solid #FADF98;

Si no quería el tono más oscuro en el borde, elimine el 'borde izquierdo' y solo inserte el 'color de fondo' para tener un cuadro de color sólido.

Guarde los cambios y vuelva a su editor de publicaciones de WP. Para insertar el cuadro ahora, use la etiqueta

para llamar ese elemento de estilo.

<div class="content-box-yellow">The text you want to display inside a yellow box</div>

Cree tantos colores de cuadro de contenido como desee. Toma algo de verde, algo de rojo, azul, morado o rosa neón si quieres.

Insértelos una vez en su plantilla style.css, luego puede llamarlos con la etiqueta div en cualquier momento que desee insertar sus cuadros de texto de colores personalizados.
 

Cómo agregar un cuadro de texto a tu barra lateral

Para agregar un cuadro de texto a su barra lateral, debe insertar un widget HTML personalizado y envolver su texto dentro de un borde.

La etiqueta HTML que se usa aquí es div, no la etiqueta span, ya que es para cuadros en línea.

El código a utilizar es

<div style="border:solid 3px black">

Puede cambiar el estilo del borde de sólido a punteado, discontinuo, doble, acanalado, de cresta, inserto o saliente.

El tamaño se puede cambiar ajustando el número antes de px, y el color también puede ser el que desee.

Utilice el nombre del color CSS o el código hexadecimal, como #ffffff.
 

Cómo agregar cuadros de contenido en WordPress sin codificación

Los cuadros de contenido son como cuadros de texto pero sin el campo de entrada para que sus visitantes escriban.

Si está familiarizado con las reseñas en línea, es posible que haya visto páginas con las ventajas enumeradas dentro de un cuadro de contenido verde y las desventajas dentro de un cuadro de contenido rojo.

Estos también son útiles para incluir descargos de responsabilidad, o como los usa el sitio web de Dummies... con la pequeña imagen de la bombilla que se usa para resaltar consejos importantes.

Esto se puede hacer de manera similar a cómo codifica su borde HTML en el widget HTML personalizado en WordPress.

Dependiendo de la cantidad de veces que use cuadros de contenido, a menudo es más fácil usar un complemento que ya tiene los códigos hechos.

De esa forma, puede hacer clic en un botón para insertar un cuadro de contenido, en lugar de codificar diferentes estilos.
 

Instale el complemento de códigos cortos de WordPress de Vladimir Anokhin

Vaya a complementos> agregar nuevo> Buscar 'códigos cortos'

El que está buscando es 'WordPress Shortcodes Plugin - Shortcodes Ultimate'.

Hay algunos estilos de caja que puede usar.

Cuando comience una nueva publicación o página o cargue una existente en el modo de edición, verá la opción adicional para agregar códigos abreviados.

Los códigos abreviados para las cajas son 'notas', 'caja de luz' y 'caja'.

Aquí hay una muestra de ejemplo:

Puede cambiar varias opciones de estilo desde el panel de control del complemento. Todo lo que debe hacer es hacer clic en 'insertar código abreviado', elegir el elemento que desee, luego editarlo y hacer clic en 'insertar código abreviado'.

El contenido que escriba en el cuadro de texto aparecerá en su pantalla con los elementos de estilo CSS y HTML que creó.