Cómo crear una lista de actividades con un complemento para la lista de verificación de WordPress

¿Alguna vez ha pensado en lo difícil que sería agregar una lista de verificación interactiva a su sitio web o a una de las publicaciones de blog? Las listas de verificación son súper útiles y algo geniales para todo tipo de cosas. Desde organizar y organizar eventos, hasta la planificación navideña o simplemente comprar, todos hacemos listas o al menos todos los necesitamos. Ya sea que necesite una lista de verificación para su uso personal o si desea proporcionar esta funcionalidad a sus lectores, estará encantado de averiguar sobre una pequeña lista de verificación de WordPress que queremos recomendar hoy.
Usando este excelente complemento, puede agregar fácilmente listas de verificación para cualquier necesidad. Por ejemplo, si tiene un blog de viajes, puede poner una lista de verificar las cosas que la gente tiene que aportar a un determinado destino. Otro ejemplo sería un blog de maternidad, donde puede encontrar una lista de las cosas que todos los futuros padres deben obtener antes de la llegada del bebé. Puede hacer listas de compras, listas de compras, listas de tareas, casi cualquier lista de verificación que tenga sentido para su sitio. Usando el complemento de la lista de verificación de WordPress Frontand. Es una gran solución que le gustaría usar.
Las listas de verificación se tratan de ser prácticas, por lo que decidimos ser nuevas prácticas y ahorrar tiempo investigando esta excelente solución para usted.
La lista de verificación front-end
La lista de verificación de Frontend es un complemento de WordPress para crear listas de corriente HTML o PDF para su sitio es muy simple, intuitivo, sin problemas. No es particularmente rico en funciones, pero eso es solo porque no necesitas que haga tantas cosas. Necesita una lista de verificación simple y esto lo ayudará a obtener la lista de verificación delantera y delantero. Una gran cosa en este complemento es que puede guardar sus listas de verificación a través de cookies o en la base de datos. De esta manera, sus visitantes pueden acceder a la lista de verificación cuando regresen al sitio y verifique o artículos adicionales no publicados.
Configuración básica y uso
Lo primero que debe hacer, por supuesto, es instalar el complemento y activarlo. Después de haber resuelto todo esto, vaya a Configuración> Lista de verificación frontal.

Verá un panel de opción simple que contiene varios códigos cortos diferentes. La única opción disponible aquí es la nueva lista de verificación.

Haga clic en la nueva lista de verificación e ingrese primero el nombre de la lista de verificación. No se preocupe, el nombre de la lista no aparecerá en su página, el campo Descripción es opcional. Nuevamente, el texto que ingrese aquí no se mostrará en su página y sirve solo para la gestión más fácil de múltiples listas de verificación. El elemento de la parte es importante. Allí realmente inserta los elementos en la lista de verificación. Puede agregar hasta 50 elementos, que es más que suficiente. Los campos adicionales se abren a medida que avanza en la lista y complete los campos de artículos.

Si lo desea, también puede usar el HTML básico en estos campos. Por ejemplo, si desea enfatizar una o más palabras en negrita, colóquela entre las etiquetas y . Para el cursivo, use las etiquetas y . La lista de verificación delantera ofrece cuatro códigos cortos diferentes. Use el primero, [frontend-contCkist name = “Standard”], para agregar una lista de verificación a una página. Asegúrese de reemplazar el nombre del atributo con el nombre de la lista de verificación actual.
Copie el código corto e insértelo donde desee. Creamos una página especial para la lista de verificación del paquete de viajes, agregamos una imagen y colocamos la lista de verificación a continuación. También puede agregar listas de verificación a widgets usando el campo de texto. Por supuesto, haga esto solo si es lógico colocar la lista de verificación en su sótano o barra lateral.

Y aquí está el resultado:

La siguiente opción de código corto es “activación/desactivación de cookies” y es extremadamente útil. Básicamente, le ayuda a determinar si desea guardar la lista de verificación para uso futuro o no. Si las cookies se activan, la condición de la lista de verificación se guardará para los usuarios autenticados y podrán reanudar dónde permanecieron antes de actualizar o dejar la página. Si no desea que se active esta funcionalidad, si desea mostrar una lista de verificación vacía cada vez, simplemente deshabilite las cookies.

[Frontand-checklist name = “checklisName” cookie = “off”]
Incluso puede establecer la vida útil de las cookies, utilizando el atributo de día. Simplemente agregue la cantidad de días en los que desea durar cookies y observe que el valor predeterminado es de 365 días. [Frontand-checklist name = “days estándar” = “180”] Otra opción interesante que puede usar es proporcionar un enlace para su versión PDF de su lista de verificación. De esta manera, sus visitantes, una vez que hayan completado la lista de verificación, pueden guardarla en su computadora o imprimirla. Esto es particularmente conveniente para las listas de compras, el embalaje de vacaciones, etc., el código corto para esto es [frontend-conck name = “CheckListaname” type = “pdf” title = “my checkText =” a la lista de verificación “]. El enlace de descarga se ubicará debajo de la lista de verificación. Puede cambiar el enlace predeterminado “al enlace de la lista de verificación” y puede reemplazarlo con su propio texto.
Ajustes avanzados

Una vez que haya establecido la lista de verificación, es posible que desee personalizarla y hacerlo más adecuado para su sitio web. Con el complemento de la lista de verificación Frontend, de forma predeterminada, su lista de verificación tiene la misma configuración que otros formularios utilizados en su sitio. Eso significa el mismo tamaño de la fuente, el color, el espacio, etc. Debido a este hecho, su sitio web es uniforme estilístico, pero si desea cambiarlo y eliminar la lista de verificación, es posible.
Si desea personalizar la apariencia de la lista de verificación y sus elementos, debe agregar la etiqueta HTML “SPAN” a cada uno de los elementos y definir la clase. En este caso, la clase es “MyClist”, pero, por supuesto, puedes usar el tuyo. Hacemos esto para asignar ciertos atributos a la clase, atributos que cambiarán la apariencia de la lista de verificación. Para hacer esto, debe agregar algunas líneas CSS, que es muy simple y no requiere un conocimiento especial de este idioma. Piense en agregar CSS como agregar ciertos atributos a una clase. Simplemente siga estos pasos:

Aspecto de acceso> Personalización> CSS adicional. A su izquierda, verá un campo donde puede presentar su CSS, en nuestro caso, la clase “MyClist”. Puede rastrear los cambios en vivo en el campo correcto. Vaya al menú y busque la página donde se encuentra su lista de verificación.
En este ejemplo, cambiaremos su fuente y sus propiedades. Específicamente, asignaremos seis propiedades a nuestra clase:

Color: para cambiar el color del color de la fuente en la lista de verificación

Shadow de texto: para agregar una apariencia de fuente 3D. Los números en el código definen la dimensión de la sombra en comparación con el tamaño de la fuente. Puede experimentar la adición de diferentes colores en sombras y fuentes.
Font-peso: para establecer el grosor de la fuente

Font-Family: hay muchos de estos disponibles, así que elija de acuerdo con sus preferencias
Tamaño de fuente: para configurar el tamaño de fuente utilizado para elementos de la lista de verificación
Reladro: definir el número de píxeles alrededor del artículo en sí. Los valores expresados ​​se refieren a arriba, derecha, abajo e izquierda, en este orden, así que preste atención. En nuestro ejemplo, es solo el relleno de izquierda, es decir, el espacio entre la casilla y el elemento en la lista de verificación … Myclista {
Color: #CC615F;
Shadow de texto: 0.5px 1px de naranja;
Peso de fuente: 600;
Familia rápida: “Comic sans MS”, cómic sans, cursiva;
Tamaño de fuente: 20px;
Llenado: 0 0 0 10px;
}
Tenga en cuenta que debe prestar mucha atención a la estructura de su código, si desea que todo salga correctamente. La clase se define como .classname. Por supuesto, probablemente tendrá otro nombre que usará a cambio. Todas las propiedades se colocan entre {}. Las propiedades se agregan como propiedad: la descripción de la propiedad; Y esta es la estructura que debe seguirse. Otra cosa interesante que puede establecer es hacer que los elementos funcionen diferentes de los discretos para hacer que la distinción sea aún más clara. Para hacer esto, agregará propiedades a la clase. Miclista. A diferencia de los elementos sin obstrucciones, los marcados tendrán decoración de texto: línea que corta los elementos marcados.
.Verificado .myclista {
Color:#E4D2B8;
Peso de fuente: 300;
TEXT-Decor: Line-through;}
El resultado se verá así:
Como puede ver, todo es muy simple. Simplemente siga la estructura del código, experimente, juegue con sus propiedades y haga su blog con esto más genial y útil.
Pensamientos finales
El complemento de la lista de verificación Frontnd para WordPress es una pequeña herramienta útil que probablemente ni siquiera necesitara.Considere agregar una lista de verificación o dos a su sitio para aumentar la participación de los usuarios y hacer que los visitantes vuelvan por más.Además, ahora que sabe lo fácil que es, asegúrese de personalizar su lista de verificación, hacerlo más personal y de acuerdo con el estilo de su blog.¡Y háganos saber los resultados! Espero que este artículo haya sido útil.Si le gustó, ¡no dude en consultar algunos de estos artículos!
Una guía completa para WordPress mi complemento de calendario
Los mejores complementos de complementos de WordPress

Una guía completa para el complemento de alimentación de Instagram

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

gkOVSBm5B8SgiXmo

Shopify vs WooCommerce – ¿Cuál es la mejor plataforma?(Comparación)

Shopify vs WooCommerce

Leave a Reply

Your email address will not be published. Required fields are marked *