Cómo crear cuadros de texto en WordPress - la manera fácil
Tu sabes como va. Has encontrado una función de diseño de sitio web que parece atractiva. Necesita tener la misma funcionalidad en su propio sitio.
¿Cómo se crean estos fantásticos cuadros de texto en WordPress?
¿Es esto un truco de CSS? ¿Es un complemento? ¿Necesitas aprender un nuevo lenguaje de codificación?
De hecho, es bastante simple y se puede hacer a través de un complemento o manualmente.
- Cómo crear un cuadro de texto en WordPress
- Agregar un campo de entrada de texto
- Crear un campo para ingresar texto con CSS
- Cómo codificar cuadros de contenido sólido en su plantilla WP theme style.css
- Cómo agregar un cuadro de texto a la barra lateral
- Cómo agregar cuadros de contenido a WordPress sin codificar
- Instale el complemento WordPress Shortcode de Vladimir Anokhin
Cómo crear un cuadro de texto en WordPress
Los campos de texto en WordPress se pueden agregar usando CSS y/o HTML. La forma más fácil es instalar un complemento que ya esté encriptado. También puede usar cuadros de texto de entrada HTML para permitir que los usuarios del sitio web escriban en la parte frontal de su sitio web, tal como lo harían al completar un formulario.
Agregar un campo de entrada de texto
Para agregar campos de entrada de texto que permitan a los usuarios ingresar campos de texto en páginas de WordPress en vivo, debe ingresar algún 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 esquina superior derecha y seleccione "Editar con HTML".
Pegue el código de arriba. Si muestra errores, haga clic en los tres puntos para abrir el menú avanzado y luego haga clic en la opción Convertir a HTML.
Después de la conversión, haga clic en la pestaña de vista previa y verá el campo de entrada de texto.
En el editor clásico, haga clic en la opción Texto para editar en HTML y pegue el mismo código allí.
Crear un campo para ingresar texto con CSS
El estilo estándar para un campo de entrada de texto suele ser un marco negro delgado con un fondo transparente.
Nada demasiado decorativo o sofisticado.
Para dar forma a su cuadro o hacerlo más ancho, puede usar CSS para controlarlo.
En el panel de administración de WP, vaya al menú Apariencia y seleccione Opcional.
Desde allí puede agregar diferentes 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 estos elementos se puede cambiar, como cambiar el tamaño de píxel de los márgenes, el relleno o los estilos de borde.
Para los colores, busque una lista en línea de nombres de colores en CSS, o si conoce el código hexadecimal del color deseado, péguelo.
Insertar en cualquier momento después del estilo CSS en la herramienta de personalizaciónIngrese el HTML de su publicación o página y aparecerá su campo de entrada de texto personalizado.
Cómo codificar cuadros de contenido sólido en su plantilla WP theme style.css
Utilice esta opción si desea utilizar CSS para diseñar un tipo específico de campo de contenido y luego reutilizarlo en varias páginas (sin tener que codificarlo cada vez).
style.css controla todos los elementos de estilo de cada tema.
Puede editar la hoja de estilo para incluir sus propios cuadros de texto.
Por ejemplo, si desea utilizar un campo de contenido amarillo, puede agregar una sección de "cuadro de contenido amarillo" a style.css.
Vaya a cPanel, el administrador de archivos, vaya a la carpeta public_html (o al subdirectorio del dominio adicional) y busque el tema al que desea agregar un campo de contenido personalizado.
Haga clic derecho para editar la hoja style.css.
Pegue un CSS personalizado para el campo de contenido aquí antes de iniciar la consulta @media. Empezar con. (punto) seguido del nombre de campo único, luego pegue el código CSS.
.content-box-yellow {
background-color: #fef5c4;
border-left: 8px solid #FADF98;
Si no desea un tono más oscuro alrededor de los bordes, elimine el "borde izquierdo" y aplique solo "color de fondo" para obtener un campo de color sólido.
Guarde sus cambios y regrese a su editor de publicaciones de WP. Para colocar el cuadro ahora, use
<div class="content-box-yellow">The text you want to display inside a yellow box</div>
Cree cualquier número de colores en el cuadro de contenido. Puedes elegir entre verde, rojo, azul, morado o rosa neón si lo prefieres.
Insértelos en su plantilla style.css y luego puede llamarlos en cualquier momento con etiquetas div para insertar cuadros de texto de color personalizados.
Cómo agregar un cuadro de texto a la barra lateral
Para agregar un cuadro de texto a la barra lateral, debe insertar un widget HTML personalizado y envolver el texto dentro.
Las etiquetas HTML utilizadas aquí son divs, no etiquetas de intervalo para campos incrustados.
El código utilizado es
<div style="border:solid 3px black">
Puede cambiar el estilo del borde de sólido a punteado, punteado, doble, acanalado, borde, insertado o inicial.
El tamaño se puede cambiar ajustando el número antes de px, y el color puede ser el que quieras.
Use nombres de colores CSS o códigos hexadecimales como #ffffff.
Cómo agregar cuadros de contenido a WordPress sin codificar
Un campo de contenido es similar a un cuadro de texto, pero no hay campos para ingresar visitantes.
Si está familiarizado con las revisiones en línea, probablemente haya visto páginas que enumeran los pros en verde y los contras en rojo.
También son útiles para incluir descargos de responsabilidad o cuando el sitio Dummies los usa... con imágenes de bombillas pequeñas para resaltar consejos importantes.
Esto puede ser similar a la forma en que escribiría un marco HTML en un widget HTML personalizado en WordPress.
Dependiendo de cuántas veces haya usado el campo de contenido, generalmente es más fácil usar un complemento que ya está encriptado.
De esta forma, en lugar de escribir un estilo diferente, puede hacer clic en un botón para insertar un cuadro de contenido.
Instale el complemento WordPress Shortcode de Vladimir Anokhin
Vaya a Complementos> Agregar nuevo> Buscar "Código corto"
Lo que está buscando es el "Complemento de códigos cortos de WordPress - Códigos cortos Ultimate".
Puede utilizar varios estilos de cuadro.
Cuando comienza una nueva publicación o página o carga una publicación o página existente en modo de edición, verá opciones adicionales para agregar códigos abreviados.
Los códigos cortos para las cajas son "notas", "caja de luz" y "caja".
Aquí hay un ejemplo:
Puede cambiar varias opciones de estilo desde el panel de control del complemento. Todo lo que tiene que hacer es hacer clic en 'Insertar código abreviado' para seleccionar el elemento que desea, luego editarlo y hacer clic en 'Insertar código abreviado'.
Lo que escribe en el cuadro de texto aparece en la pantalla junto con los elementos de estilo CSS y HTML que crea.
¡Hola a todos! Este soy yo, Marcel, también conocido como Masha. ¡Obtengo ingresos de tiempo completo en línea y en MaschiTuts y estoy emocionado de compartir con ustedes cómo me mantengo en la cima! Dirijo varios blogs y sitios web lucrativos y me gusta hablar sobre estos proyectos cuando tengo la oportunidad. Hago esto con todo mi corazón. De hecho, el momento en que dejé de trabajar de 8 a 5 y me encontré en un negocio en línea como emprendedor digital fue probablemente una de las mejores decisiones que he tomado en mi vida. ¡Quiero estar seguro de que tú también irás por este camino! Que nadie te diga que es imposible. El cielo es el límite, de verdad... ¡solo si crees en él! Y todo comienza aquí... ¡en Maschiuts!
Deja una respuesta