CPC códigos cortos - KolMitE

CPC códigos cortos

CPC códigos cortos

diciembre 19, 2018 Formulario 0


Descripción

CPO Shortcodes es un paquete completo de códigos cortos que le brinda una flexibilidad extrema para diseñar contenido de alta calidad.

Al instalar este complemento, podrá integrar todo tipo de elementos interactivos en sus páginas: Botones, acordeones, presentaciones de diapositivas e incluso tablas de precios.. Al utilizar estos elementos, puede hacer que su contenido sea más atractivo y aumentar sus conversiones.

Este complemento está diseñado para brindarle la mayor libertad posible al hacer que cada shortcode sea lo más flexible posible. Cada una de estas piezas de diseño se puede configurar de muchas maneras diferentes, lo que le permite elegir cualquier tamaño, color o forma.

Códigos cortos incluidos

  • Acordeones
  • Areas de animacion
  • Botones
  • Dropcaps
  • Cuadros de enfoque
  • mapas de Google
  • Cajas de iconos
  • Listas de artículos
  • Párrafos principales
  • Notificaciones
  • Contadores de números
  • Formas Optin (Mailchimp)
  • Barras de progreso
  • Separadores
  • Contenido tabulado
  • Testimonios
  • Miembros del equipo
  • Secciones
  • Separadores
  • Espaciadores

Códigos cortos avanzados

CPO Shortcodes también incluye una cantidad de códigos cortos más avanzados que le permiten crear páginas altamente refinadas:

  • Diseños de columnas – Distribuya su contenido en hasta 6 columnas a la vez, incluidas varias combinaciones.
  • Listados de publicaciones – Cree listas de cualquier tipo de publicación en cualquier lugar, ya sea como una lista o en formato de cuadrícula. Puede crear su propia lista de cartera de esta manera.
  • Tablas de Precios – Muestra tus precios con una tabla de precios bellamente diseñada, lo suficientemente flexible como para que puedas modificarla para maximizar las conversiones.
  • Presentaciones de contenido – Cree presentaciones de diapositivas con prácticamente cualquier cosa en ellas, incluidas imágenes, texto e incluso otros códigos cortos.
  • Formularios de registro e inicio de sesión – Cree e incruste hermosos formularios de registro para crear una comunidad vibrante alrededor de su sitio web.

Otros puntos destacados

  • Compatible con la gran mayoría de temas que hay
  • Elementos sensibles que se adaptan al tamaño de pantalla actual.

Este plugin se mantiene y es compatible con Macho Themes.
Echa un vistazo a algunos de los otros complementos de WordPress que hemos desarrollado.
Echa un vistazo a algunos de los otros temas de WordPress gratuitos que hemos desarrollado.

Capturas de pantalla

  • Botón de inserción rápida para un marcado inmediato
  • Múltiples tamaños de botones y colores. Elija entre una paleta predefinida o un color HEX personalizado
  • Agregue cuadros de mensajes, notificaciones y cuadros resaltados con colores de fondo personalizados
  • Cree testimonios, miembros del equipo o características en línea
  • Agregue tablas de precios de colores personalizados a sus páginas.

Instalación

Instalación a través del administrador de WordPress

  1. Descarga el archivo ZIP
  2. En el área de administración de WordPress, vaya a Complementos> Agregar complemento y seleccione Cargar complemento
  3. Sube el archivo ZIP y la instalación comenzará.
  4. Active el complemento a través del menú “Complementos” en WordPress
  5. Asegúrese de revisar el Ajustes> Códigos cortos de CPO Página antes de usarlo de inmediato!
  6. Ahora está listo para usar los códigos cortos del Editor Visual de WordPress

Instalación a través de FTP

  1. Descarga el archivo ZIP y descomprímelo.
  2. Sube el entero cpo-shortcodes al / wp-content / plugins / directorio
  3. Active el complemento a través del menú “Complementos” en WordPress
  4. Asegúrese de revisar el Ajustes> Códigos cortos de CPO Página antes de usarlo de inmediato!
  5. Ahora está listo para usar los códigos cortos del Editor Visual de WordPress

Preguntas más frecuentes

Lea la documentación en CPOThemes

Instrucciones de instalación

Instalación a través del administrador de WordPress

  1. Descarga el archivo ZIP
  2. En el área de administración de WordPress, vaya a Complementos> Agregar complemento y seleccione Cargar complemento
  3. Sube el archivo ZIP y la instalación comenzará.
  4. Active el complemento a través del menú “Complementos” en WordPress
  5. Asegúrese de revisar el Ajustes> Códigos cortos de CPO Página antes de usarlo de inmediato!
  6. Ahora está listo para usar los códigos cortos del Editor Visual de WordPress

Instalación a través de FTP

  1. Descarga el archivo ZIP y descomprímelo.
  2. Sube el entero cpo-shortcodes al / wp-content / plugins / directorio
  3. Active el complemento a través del menú “Complementos” en WordPress
  4. Asegúrese de revisar el Ajustes> Códigos cortos de CPO Página antes de usarlo de inmediato!
  5. Ahora está listo para usar los códigos cortos del Editor Visual de WordPress
¡AYUDA! ¡Mis códigos cortos no funcionan!

Vaya a Configuración> Códigos cortos de CPO y vea qué Prefijo de código corto es. Este prefijo está pensado para evitar conflictos con otros complementos (en caso de que tenga un complemento que también tenga un (código) código corto). Simplemente asegúrese de que los códigos cortos que está utilizando se correspondan con el prefijo allí. Por ejemplo, si su prefijo es Connecticut, entonces deberías usar el ct_button Código corto. Si tiene un prefijo vacío, puede usar solo botón.

Cómo utilizar códigos cortos

Escritura de sintaxis de código corto

Los códigos cortos son bastante simples de escribir. Actúan de manera muy parecida a una etiqueta HTML, pero utilizando corchetes cuadrados ([]) en lugar de los signos menor que y mayor que. Un shortcode puede ser de cierre automático o puede incluir otra parte del contenido, como por ejemplo:

[custom_shortcode]

[custom_shortcode]Esto es algo de contenido.[/custom_shortcode]

Un código abreviado también puede admitir uno o más atributos que indiquen un valor particular. Normalmente se utiliza para que el código abreviado se pueda configurar y personalizar su comportamiento:

[custom_shortcode attribute1=”value” attribute2=”value”]

Problemas comunes con los códigos cortos

Si bien los códigos cortos son muy flexibles, también pueden romperse con bastante facilidad si los formatea de forma incorrecta en el editor visual. Esto es particularmente importante al crear una página con muchos códigos cortos, ya que puede ensuciarse muy rápido. Siempre debes tener en cuenta lo siguiente:
No anidar el mismo código corto

Incluso cuando se utiliza la última versión de WordPress, el analizador de shortcode tiene muchos problemas al intentar leer el mismo shortcode cuando está anidado en más de un nivel. En todo momento, debe evitar insertar un shortcode directamente dentro del mismo. Este es un ejemplo de un shortcode anidado:

[custom_shortcode]

[custom_shortcode]Esto es algo de contenido.[/custom_shortcode]

[/custom_shortcode]

Siempre separados atributos con un espacio

Los atributos en un shortcode deben estar separados por un espacio, o el editor no lo reconocerá como válido y no se analizará. Debería evitar escribir sintaxis, como el título = “nombre” número = “2? asegúrate de que sea correcto
Cuidado con los saltos de línea desigual

Al usar el editor visual, WordPress convertirá cada salto de línea en un bloque de párrafo (agregando

<

p> etiquetas en cada pieza de contenido). El problema se presenta cuando agrega un shortcode y lo separa en muchas líneas de manera inconsistente. Un ejemplo sería:

[custom_shortcode]Primera línea de mi contenido.

Segunda línea del contenido.

[/custom_shortcode]

En este caso, el analizador de shortcode puede tener problemas con las etiquetas de párrafo, ya que la primera línea se contará como un solo párrafo, pero no distinguirá entre el comienzo del contenido y la etiqueta de apertura. Este problema se puede resolver formateando el mismo contenido de la siguiente manera consistente:

[custom_shortcode]







Esto es algo de contenido.

Tiene dos líneas.

[/custom_shortcode]
Acordeón
[[accordion title=”Title” state=””]Contenido[/accordion]] Ejemplo

[accordion title=”Title of Accordion” style=”boxed” state=’closed’]Este es un acordeón normal. Puede contener cualquier tipo de marcado HTML como el resto de la publicación. Esto significa que también puede incrustar imágenes, medios y etiquetas HTML normalmente.[/accordion] [accordion title=”Title of Accordion” style=”boxed” state=’open’]Este es un acordeón abierto. Se cargará en su estado abierto.[/accordion]

Atributos del Acordeón

[definition title=”title”]El título que desea darle al acordeón.[/definition] [definition title=”state”]Determina el estado inicial del acordeón. Se puede cerrar, abrir.[/definition] [definition title=”style”]Determina la aparición del acordeón. Puede ser normal, en caja.[/definition] [definition title=”group”]Indica a qué grupo pertenece este acordeón. Puede asignar cualquier nombre arbitrario a cualquier número de acordeones. Todos los acordeones que pertenezcan al mismo grupo solo pueden tener uno abierto en todo momento.[/definition]
Botones
[[button size=”small” color=”green” url=”http://google.com” icon=”angle-right”]Pequeño botón[/button]] Ejemplo

[button icon=”magic” url=”#”]Botón de muestra[/button]

Atributos del botón

[definition title=”description”]Agrega una pequeña descripción debajo del texto del botón.[/definition] [definition title=”url”]La URL completa y absoluta a donde debe llevar el usuario el botón.[/definition] [definition title=”size”]Determina el tamaño total. Los valores posibles son pequeño, normal, medio, grande o enorme.[/definition] [definition title=”color”]Establece el color del texto para el botón. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal. Por defecto es blanco.[/definition] [definition title=”background”]Establece el color de fondo para el botón. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”gradient”]Establece un color de fondo secundario para el botón. Cuando se utiliza junto con el atributo de fondo, se producirá un degradado vertical. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”position”]Determina la disposición de la posición. Puede ser ninguno, izquierda, centro, o derecha.[/definition] [definition title=”border”]Determina el estilo de borde del botón. Debe especificarse en la sintaxis CSS.[/definition] [definition title=”target”]Determina el atributo de destino del botón.[/definition] [definition title=”rel”]Determina el atributo rel del botón.[/definition] [definition title=”icon”]Define un icono que se mostrará en el botón. El nombre del icono debe ser uno de la Hoja de trucos de Font Awesome, menos el prefijo.[/definition]
Cuadrículas de clientes
[[clients images=”42,55,64″]] Ejemplo

[clients columns=”2″ images=”26134,26135,26136,26137″]

Atributos de la cuadrícula del cliente

[definition title=”images”]Una lista de identificadores de datos adjuntos separados por comas. Cada archivo adjunto se utilizará como una sola diapositiva.[/definition] [definition title=”columns”]establece el número de columnas[/definition]
Columnas

Dos columnas

[[column_half]Dos columnas[/column_half]] [[column_half_last]Dos columnas[/column_half_last]] Tres columnas

[[column_third]Tres columnas[/column_third]] [[column_third]Tres columnas[/column_third]] [[column_third_last]Tres columnas[/column_third_last]] Cuatro columnas

[[column_fourth]Cuatro columnas[/column_fourth]] [[column_fourth]Cuatro columnas[/column_fourth]] [[column_fourth]Cuatro columnas[/column_fourth]] [[column_fourth_last]Cuatro columnas[/column_fourth_last]] Cinco columnas

[[column_fifth]Cinco columnas[/column_fifth]] [[column_fifth]Cinco columnas[/column_fifth]] [[column_fifth]Cinco columnas[/column_fifth]] [[column_fifth]Cinco columnas[/column_fifth]] [[column_fifth_last]Cinco columnas[/column_fifth_last]] Dos tercios columnas

[[column_two_thirds]Cinco columnas[/column_two_thirds]] [[column_third_last]Cinco columnas[/column_third_last]] Tres cuartas columnas

[[column_three_fourths]Cinco columnas[/column_three_fourths]] [[column_fourth_last]Cinco columnas[/column_fourth_last]] Ejemplo

[column_half style=”fit”][message][/column_half] [column_half_last style=”fit”][message][/column_half_last] [column_third][message][/column_third] [column_third][message][/column_third] [column_third_last][message][/column_third_last] [column_fourth][message][/column_fourth] [column_fourth][message][/column_fourth] [column_fourth][message][/column_fourth] [column_fourth_last][message][/column_fourth_last] [column_fifth][message][/column_fifth] [column_fifth][message][/column_fifth] [column_fifth][message][/column_fifth] [column_fifth][message][/column_fifth] [column_fifth_last][message][/column_fifth_last] [column_two_thirds][message][/column_two_thirds] [column_third_last][message][/column_third_last] [column_three_fourths][message][/column_three_fourths] [column_fourth_last][message][/column_fourth_last]

Atributos de columna

Los códigos cortos de la columna que terminan en _last se utilizan para controlar el margen derecho de una columna, de modo que tengan un espacio entre ellos. Asegúrese de marcar siempre la última columna en una fila con _last, de lo contrario, ¡el diseño se romperá!

[definition title=”style”]Determina el estilo de las columnas. Se puede usar para controlar el ancho del margen; por ejemplo, las columnas de estilo de ajuste no tendrán márgenes entre cada una de ellas. Puede ser normal, estrecho o en forma.[/definition]
Contadores
[[counter title=”Title” color=”#f90″ number=”243″ icon=”twitter” size=”normal”]Descripción del contador[/counter]] Ejemplo

[counter title=”Facebook” color=”#3b5998″ number=”243″ icon=”facebook-sign” size=”normal”]Aficionados[/counter]

Atributos del Acordeón

[definition title=”title”]El título que desea dar al acordeón (predeterminado para un título estático).[/definition] [definition title=”number”]El valor numérico para el contador.[/definition] [definition title=”size”]El tamaño del elemento contador. Puede ser normal, pequeño, mediano, grande.[/definition] [definition title=”color”]El color del icono del contador. Puede ser un color CSS válido o un valor hexadecimal.[/definition] [definition title=”icon”]El icono del elemento contador. Puede ser cualquier nombre de icono válido de la biblioteca de Font Awesome, menos el prefijo de la fuente.[/definition]
Listas personalizadas
[[list background=”#ff9900″ icon=”check” style=”round”]Lista de contenidos[/list]] Ejemplo

[list background=”#ff9900″ icon=”check” style=”round”]Primer elemento[/list] [list background=”#ff9900″ icon=”check” style=”round”]Segundo elemento[/list] [list background=”#ff9900″ icon=”check” style=”round”]Tercer elemento[/list]

Enumerar atributos

[definition title=”color”]El color del icono. Por defecto es blanco.[/definition] [definition title=”background”]Establece el color de fondo para el icono. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”gradient”]Establece un color de fondo secundario para el icono. Cuando se utiliza junto con el atributo de fondo, se producirá un degradado vertical. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”icon”]El icono de cada elemento de la lista. Corresponde a la hoja de trucos de Font Awesome, menos el prefijo de icono.[/definition] [definition title=”style”]La apariencia de cada elemento en la lista. Puede ser cuadrada, redonda o normal.[/definition]
Dropcaps
[[dropcap color=”#ff9900″ style=”square”]L[/dropcap]]etter
Ejemplo

[dropcap color=”#ff9900″ style=”square”]L[/dropcap]orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre.
Atributos Dropcap

[definition title=”color”]El color de la letra dropcap.[/definition] [definition title=”style”]El estilo de la letra dropcap. Puede ser normal, cuadrada o redonda.[/definition]
Listas de definiciones

Las definiciones son excelentes para crear su propio glosario o para describir con facilidad un conjunto particular de viñetas. Se componen de un título simple y una descripción, que puede contener otros códigos cortos, así como HTML. Puedes verlos en uso a través de esta página de documentación.

[[definition title=”Title”]La descripción[/definition]] Ejemplo

[definition title=”Title”]La Descripción para este elemento de definición.[/definition]

Definición de atributos de la lista

[definition title=”title”]El título del elemento de definición.[/definition]
Cuadros de enfoque
[[focus background=”#5ecae5″ gradient=”#639ac6″ color=”dark”]]Contenido[[/focus]] Ejemplo

[focus background=”#5ecae5″ gradient=”#639ac6″ color=”dark”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre. Exceptionur occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/focus]

Atributos del cuadro de enfoque

[definition title=”color”]Establece el color del cuadro, destinado a fondos claros u oscuros. Puede ser claro u oscuro.[/definition] [definition title=”background”]Establece el color de fondo para el botón. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”gradient”]Establece un color de fondo secundario para el botón. Cuando se utiliza junto con el atributo de fondo, se producirá un degradado vertical. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”style”]Establece un estilo particular para el cuadro. Puede ser normal, sombra.[/definition]
Características en línea

Los bloques de funciones se componen de un título, un bloque de contenido y un icono o imagen que lo acompaña. Son muy útiles al describir sus servicios o al describir los detalles de un tema, y ​​puede personalizar su apariencia y diseño de la forma que desee.

[[feature title=”Feature Title” icon=”flag”]Contenido[/feature]] Ejemplo

[feature style=”normal” icon=”ok-sign” color=”#fff” background=”#54c57c” gradient=”#82c054″ title=”Title Of Feature Block”]Phasellus placerat, nisl sed pulvinar pharetra, ligula sapien tincidunt arcu, et mattis lorem purus vitae ligula. Úlceras de nunc sapiens ac suscipit fringilla.[/feature]

Atributos de la característica

[definition title=”title”]Especifica el título del bloque destacado.[/definition] [definition title=”icon”]El nombre del icono a utilizar. Debe corresponder al nombre en la hoja de trucos de Font Awesome, menos el ícono ‘ícono’.[/definition] [definition title=”image”]Especifica una URL de imagen para usar en lugar de un icono.[/definition] [definition title=”background”]Define el color de fondo del icono. Debe especificarse en formato hexadecimal (# 123456).[/definition] [definition title=”gradient”]Define un color secundario para el fondo del icono. Si también se establece el atributo de fondo, el resultado será un tono de degradado vertical. Debe especificarse en formato hexadecimal (# 123456).[/definition] [definition title=”color”]Define el color del icono. Debe especificarse en formato hexadecimal (# 123456).[/definition] [definition title=”style”]Define la apariencia de la característica. Puede ser normal, horizontal, vertical, en caja.[/definition]
Presentaciones de imágenes
[[slideshow effect=”fade” speed=”800″ timeout=”6000″ pager=”none” navigation=”none” ] [slide]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet.[/slide] [slide]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet.[/slide] [/slideshow]] Ejemplo

[slideshow effect=”fade” speed=”800″ timeout=”6000″ ] [slide]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet.[/slide] [slide]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est. En vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no takimata sanctus est Lorem ipsum dolor sit amet.[/slide] [/slideshow]

Atributos de presentación de diapositivas

[definition title=”images”]Una lista de identificadores de datos adjuntos separados por comas. Cada archivo adjunto se utilizará como una sola diapositiva.[/definition] [definition title=”effect”]

Especifica el tipo de transición para la presentación de diapositivas. Puede ser cualquiera de los siguientes:

descolorarse
cubrir
descubrir
scrollHorz
scrollVert
scrollLeft
scrollRight
[/definition] [definition title=”speed”]Especifica la velocidad de cada transición, en milisegundos.[/definition] [definition title=”timeout”]Especifica el tiempo de espera entre transiciones, en milisegundos.[/definition] [definition title=”pager”]Muestra los controles de paginación. No puede ser ninguno, círculo.[/definition] [definition title=”navigation”]Muestra los controles de navegación siguiente / anterior. Se puede establecer en ninguno, normal.[/definition]
Banners de imagen
[[banner image=”26166″ position=”bottom” style=”round” color=”dark” url=”#”]Contenido[/banner]] Ejemplo

[banner image=”26166″ position=”bottom” style=”round” color=”dark” url=”#”]

Un banner de imagen
Agrega cualquier tipo de contenido aquí.

[/banner]

Atributos del botón

[definition title=”content”]El contenido de la imagen del banner. Puede tener HTML, así como otros códigos cortos.[/definition] [definition title=”image”]Indicó la imagen a utilizar como banner. Debe ser una ID que indique la publicación adjunta para la instalación actual de wordPress.[/definition] [definition title=”url”]La URL completa y absoluta donde la imagen debe llevar al usuario.[/definition] [definition title=”size”]Determina el tamaño total. Los valores posibles son pequeño, normal, medio, grande o enorme.[/definition] [definition title=”color”]Establece el color del texto para el botón. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal. Por defecto es blanco.[/definition] [definition title=”background”]Establece el color de fondo para el botón. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”gradient”]Establece un color de fondo secundario para el botón. Cuando se utiliza junto con el atributo de fondo, se producirá un degradado vertical. Puede ser una palabra de color CSS (rojo, azul) o una representación hexadecimal.[/definition] [definition title=”position”]Determina la disposición de la posición. Puede ser superior o inferior.[/definition] [definition title=”align”]Determina la alineación del contenido. Puede ser izquierda, centro, o derecha.[/definition] [definition title=”border”]Determina el estilo de borde de la imagen. Debe especificarse en la sintaxis CSS.[/definition]
mapas de Google
[[map latitude=”27.174526″ height=”400″ longitude=”78.042153″ color=”#798565″]] Ejemplo

[map latitude=”27.174526″ longitude=”78.042153″ color=”#798565″ height=”300″]

Atributos del mapa

[definition title=”color”]El tono del color para el mapa.[/definition] [definition title=”height”]La altura en píxeles del mapa.[/definition] [definition title=”latitude, longitude”]Las coordenadas del mapa. Puede obtenerlos de una dirección utilizando un servicio como LatLong.[/definition]
Principales párrafos
[[map latitude=”27.174526″ height=”400″ longitude=”78.042153″ color=”#798565″]] Ejemplo

[map latitude=”27.174526″ longitude=”78.042153″ color=”#798565″ height=”300″]

Atributos del mapa

[definition title=”color”]El tono del color para el mapa.[/definition] [definition title=”height”]La altura en píxeles del mapa.[/definition] [definition title=”latitude, longitude”]Las coordenadas del mapa. Puede obtenerlos de una dirección utilizando un servicio como LatLong.[/definition]
Cuadros de mensaje
[[message type=”info”]Contenido del mensaje[/message]] Ejemplos

[message]Este es un mensaje normal.[/message] [message type=’info’]Este es un mensaje de información.[/message] [message type=’ok’]Este es un mensaje de confirmación.[/message] [message type=’error’]Este es un mensaje de error.[/message] [message type=’warning’]Este es un mensaje de advertencia.[/message]

Atributos del mensaje

[definition title=”type”]Especifica el tipo de mensaje que se mostrará. Los valores posibles son normales, información, ok, error, advertencia (el valor predeterminado es normal)[/definition]
Formas Optin
[[optin url=”URL” captcha=”URL”]] Ejemplos

[optin url=”#” firstname=”Your Name” size=”medium” style=”horizontal”]

Atributos de Optin

[definition title=”url”]Toma la URL del atributo de acción en la etiqueta de formulario de su formulario de Mailchimp. Debe extraer esto de su cuenta de Mailchimp usando el generador de formularios integrados.[/definition] [definition title=”captcha”]Toma el atributo de nombre del campo CAPTCHA en tu formulario de Mailchimp, para evitar que los robots se registren en tu lista.[/definition] [definition title=”email”]Especifica el título de su campo de correo electrónico.[/definition] [definition title=”firstname”]Especifica el título de su primer campo de nombre. Si está en blanco, el campo no será utilizado.[/definition] [definition title=”lastname”]Especifica el título de su campo de apellido. Si está en blanco, el campo no será utilizado.[/definition] [definition title=”submit”]Especifica el título del botón de envío en su formulario.[/definition] [definition title=”style”]Determina el diseño de tu formulario. Puede ser horizontal, vertical.[/definition] [definition title=”size”]Determina el tamaño de tu formulario. Puede ser normal, medio, grande.[/definition]
Listas de publicaciones
[[posts columns=”2″ style=”list” author=”none” excerpt=”none” comments=”none”]] Ejemplos

[posts columns=”2″ number=”4″ style=”list” author=”none” excerpt=”none” comments=”none”]

Atributos de la lista de entradas

[definition title=”type”]Especifica el tipo de publicación a consultar. Por defecto para publicar.[/definition] [definition title=”number”]Especifica el número de publicaciones para recuperar.[/definition] [definition title=”columns”]Especifica el número de columnas de la lista.[/definition] [definition title=”style”]Especifica la apariencia de la lista. Puede ser lista, cuadrícula.[/definition]
Tablas de Precios
[pricing title=”Title” price=”10″ coin=”€” url=”URL” urltitle=”Go”]Contenido[/pricing]

Ejemplo

[column_half] [pricing title=”Advanced” subtitle=”example option” type=”highlight” color=”#f80″ price=”39.00″ description=”Per Month” before=”$” after=””]Lorem ipsum dolor sit amet, conseturur sadipscing elitr, sed diam eirmod tempor invidunt ut labore et dolore.[/pricing] [/column_half][column_half_last] [pricing title=”Basic” subtitle=”example option” price=”19.00″ description=”Per Month” before=”$” after=””]Lorem ipsum dolor sit amet, conseturur sadipscing elitr, sed diam eirmod tempor invidunt ut labore et dolore.[/pricing] [/column_half_last]

Atributos de precios

Los artículos de precios se utilizan idealmente junto con columnas, de modo que puede tener múltiples opciones de precios de lado a lado. Tenga en cuenta que cada elemento de fijación de precios debe colocarse en su propia columna, utilizando el código abreviado de las columnas.

[definition title=”title”]Determina el encabezado del elemento.[/definition] [definition title=”subtitle”]Determina el subtítulo del artículo.[/definition] [definition title=”price”]Establece el valor del precio para el artículo. Puede ser cualquier texto.[/definition] [definition title=”before”]Le permite agregar texto antes del valor del precio, como ‘$’.[/definition] [definition title=”after”]Le permite agregar texto después del valor del precio, como ‘/ month’.[/definition] [definition title=”color”]Determina el esquema de color para la columna. Si se usa, el título y el subtítulo aparecerán en blanco.[/definition] [definition title=”type”]Determina el estilo general de la columna. Se puede destacar.[/definition] [definition title=”description”]Añade una pequeña descripción debajo del precio.[/definition]
Barra de progreso
[[progress value=”30″ title=”HTML/CSS” background=”#e08f27″ gradient=”#cc3290″]] Ejemplo

[progress value=”30″ title=”HTML/CSS” background=”#e08f27″ gradient=”#cc3290″]

Atributos de la barra de progreso

[definition title=”value”]El valor real de la barra, que determina qué tan lleno está. Puede ir de 0 a 100.[/definition] [definition title=”size”]El tamaño de la barra. Puede ser pequeño, normal, mediano o grande.[/definition] [definition title=”icon”]El icono de la barra de progreso. Puede ser cualquier icono de la biblioteca de Font Awesome menos el prefijo de icono.[/definition] [definition title=”title”]La etiqueta del título para la barra de progreso.[/definition] [definition title=”background”]El color de fondo de la barra.[/definition] [definition title=”gradient”]El color degradado de la barra.[/definition]
Espaciadores
[[spacer height=”40″]] Ejemplo

Un espaciador creará un espacio entre dos elementos, en todo el contenido. Puede usarlo para separar bloques de texto o para crear espacios en blanco adicionales, si lo necesita.
Atributos Dropcap

[definition title=”height”]Determina la altura del espaciador, en píxeles. Por defecto es de 25 píxeles.[/definition]
Separadores
[[separator title=”A full separator with all elements.” icon=”map-marker” style=”narrow” color=”#f91″ top=”Go Back Up”]] Ejemplo

[separator title=”A full separator with all elements.” icon=”map-marker” color=”#f91″ top=”Go Back Up”]

Atributos del separador

[definition title=”title”]Especifica una pequeña nota al pie para el separador.[/definition] [definition title=”icon”]Establece un icono ubicado en el centro del separador. Debe ser cualquier icono de la biblioteca de Font Awesome, menos el prefijo de fa.[/definition] [definition title=”style”]Controla la apariencia del separador. Puede ser normal, discontinua, punteada, gruesa, estrecha.[/definition] [definition title=”color”]Determina el color del icono separador.[/definition] [definition title=”top”]Agrega un pequeño texto de enlace que apunta a la parte superior de la página.[/definition]
Contenido con pestañas
[[tabs style=”horizontal”] [tab title=”Title”]Contenido de la pestaña[/tab] [/tabs]] Ejemplo

[tabs style=”horizontal”] [tab title=”First Tab”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre. Excepteur sint occaecat cupidatat non proident, sunt in deserunt mollit anim id est laborum.[/tab] [tab title=”Second Tab”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre. Exceptionur occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/tab] [tab title=”Last Tab”]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lo primero que se puede hacer es usarlo en la mano, pero si lo hacemos, no tenemos que recurrir a ninguna parte de la misma forma. El dolor de cabeza se repite en volumen y volumen en la piel de la madre y de la madre. [/tab] [/tabs]

Atributos del grupo de pestañas

[definition title=”style”]Determina la posición general de las pestañas. Puede ser horizontal o vertical.[/definition]

Atributos de una sola pestaña

[definition title=”title”]Determina el título de la pestaña. Cada pestaña debe tener una diferente.[/definition]
Miembro del equipo
[[team name=”Person Name” title=”Person Title” image=”IMAGEURL” facebook=”” web=”” email=”[email protected]”]Contenido[/team]] Ejemplo

[column_half] [team name=”John Doe” title=”CEO of Doe Industries” facebook=”http://facebook.com/cpothemes” twitter=”http://twitter.com/cpothemes” image=”http://www.cpothemes.com/wp-content/uploads/2013/08/cpotheme-testimonial.jpg”]Hola soy john Dirijo a Doe Industries y me gusta probar cosas nuevas todo el tiempo. Disfruto surfeando y paseando a mi perro.[/team] [/column_half][column_half_last] [team name=”John Doe” title=”CEO of Doe Industries” facebook=”http://facebook.com/cpothemes” twitter=”http://twitter.com/cpothemes” image=”http://www.cpothemes.com/wp-content/uploads/2013/08/cpotheme-testimonial.jpg”]Hola soy john Dirijo a Doe Industries y me gusta probar cosas nuevas todo el tiempo. Disfruto surfeando y paseando a mi perro.[/team] [/column_half_last]

Atributos de la característica

[definition title=”name”]El nombre del miembro del equipo.[/definition] [definition title=”title”]El título o cargo de la persona antes mencionada.[/definition] [definition title=”image”]La URL de una imagen que representa a esa persona.[/definition] [definition title=”facebook, twitter, gplus, linkedin, pinterest, tumblr, web”]La URL de los respectivos perfiles de redes sociales para este miembro del equipo.[/definition]
Testimonios

</p>
<p>[[testimonial name=”Person Name” title=”Person Title” image=”43″ email=”[email protected]”]Contenido[/testimonial]]</p>
<p>

Ejemplo

[testimonial name=”John Doe” title=”CEO of Doe Industries” image=”http://www.cpothemes.com/wp-content/uploads/2013/08/cpotheme-testimonial.jpg”]Este es un bonito testimonio. ¡Me gusta tanto que quiero mi nombre! Muestra mi nombre y título de trabajo, así como una imagen para mostrar quién soy.[/testimonial]

Atributos de la característica

[definition title=”name”]El nombre de la persona a quien se dirige en el testimonio.[/definition] [definition title=”title”]El título o cargo de la persona antes mencionada.[/definition] [definition title=”image”]El ID de archivo adjunto de una imagen que representa a esa persona.[/definition] [definition title=”style”]Especifica la apariencia general del testimonio. se puede dejar, a la derecha[/definition]

Opiniones

roto

BitzLeon

ya no funciona

Un montón de herramientas útiles!

1

Muy buen montón de chortcodes! Para ser justos, más de la mitad de ellos, otros complementos funcionan mejor, pero los complementos revisados ​​tienen cierta potencia específica para códigos cortos únicos como la barra de progreso. Puede ser útil en los blogs, pero existen soluciones más poderosas …

Leer las 9 opiniones

Colaboradores y Desarrolladores

“CPO Shortcodes” es un software de código abierto. Las siguientes personas han contribuido a este plugin.

Contribuyentes

Traducir “CPO Shortcodes” a su idioma.

¿Interesado en el desarrollo?

Busque el código, revise el repositorio SVN o suscríbase al registro de desarrollo por RSS.

Registro de cambios

1.4.0

  • Varios arreglos y actualizaciones
  • Mejor saneamiento

1.3.5

  • Mejora del rendimiento mediante la carga selectiva de activos

1.3.4

  • Nuevo shortcode: listas de definiciones!
  • Corregidos errores menores en el generador de shortcode.
  • Estilos de respuesta fijos para columnas estrechas y ajustadas

1.3.3

  • Nuevo código corto: formulario de inicio de sesión!
  • Se corrigieron las advertencias de PHP así como los enlaces defectuosos del generador.

1.3.2

  • Correcciones menores

1.3.1

  • Nuevo shortcode: formulario de inscripción!

1.3.0

  • Se modificó la página de configuración para usar la API de configuración de WordPress nativa.
  • Se revisó el generador de shortcode y se agregó una interfaz renovada.
  • Reorganizó algunos de los códigos cortos en el botón del editor de visaul.
  • Agregado mejor manejo de impagos.

1.2.3

  • Cambió la biblioteca de Ciclo a Ciclo 2.
  • Rendimiento optimizado al cargar scripts JS solo cuando sea necesario

1.2.2

  • Se corrigió el shortcode de la sección no siendo incluido.
  • Se agregaron códigos cortos faltantes al generador del editor visual.
  • Se agregó un nuevo shortcode: mailchimp optin form.
  • Agregado un nuevo shortcode: area de animacion.
  • Agregado un nuevo shortcode: dep div.

1.2.1

  • Se corrigió el generador de iconos no se muestra correctamente.

1.2.0

  • El plugin ha sido completamente renovado con muchas características nuevas.
  • Los botones ahora tienen colores de fondo, degradados, iconos y bordes.
  • Los avisos han cambiado de nombre a Cuadros de enfoque, destinados a resaltar contenido. Los avisos todavía funcionan como un código abreviado, pero no son compatibles.
  • Los cuadros de enfoque ahora tienen fondos degradados.
  • Los acordeones ahora se pueden establecer como parte de un grupo, permitiendo que solo uno permanezca abierto.
  • Las características en línea ahora pueden tener múltiples tamaños de iconos, colores, fondos y bordes.
  • Los miembros del equipo se han actualizado con nueva información de contacto, diseño y funciones sociales.
  • Los testimonios ahora se pueden colocar hacia la izquierda o hacia la derecha.
  • Los contadores se han racionalizado.
  • Se agregaron más opciones a las barras de progreso, tales como gradientes.
  • Las listas personalizadas ya no afectan a un elemento HTML de UL. Ahora son un único elemento de la lista por motivos de flexibilidad.
  • Los separadores ahora tienen íconos, descripciones y varios estilos.
  • Se agregaron más opciones al código corto de las publicaciones para filtrar mejor las consultas.
  • Los atributos que ahora toman una imagen pueden tener una URL completa o una ID de publicación.
  • Estilos limpios y CSS general mejorado.
  • Se agregaron colores de fondo, degradados, iconos y bordes para enfocar cuadros.
  • Se agregó una configuración para especificar un prefijo de código abreviado para evitar conflictos.

1.1.0

  • Se modificaron los archivos JS para usar la API TinyMCE versión 4.X.

1.0.2

  • Se corrigieron los códigos cortos del equipo y se agregaron parámetros de animación, tiempo de espera y velocidad a las presentaciones de diapositivas

1.0.1

  • Se corrigieron problemas menores de CSS y correcciones de marcado

1.0

  • Lanzamiento de plugin, yay!


Por favor Comparte y Síguenos:
RSS
Follow by Email
Facebook
Twitter

Deja una respuesta