Shortcake Bakery Plugin

Cómo agregar la interfaz de usuario de códigos cortos en WordPress con Shortcake

Si está desarrollando un sitio de WordPress para un cliente, es probable que tenga códigos cortos que sus clientes puedan usar. El problema es que muchos novatos no saben cómo agregar códigos cortos y si hay algunos parámetros complejos involucrados, es aún más difícil. Shortcake proporciona una solución al agregar una interfaz de usuario para códigos cortos. En este artículo, le mostraremos cómo agregar UI para códigos cortos en WordPress con Shortcake.

¿Qué es Shortcake?

WordPress ofrece una forma más fácil de agregar código ejecutable dentro de publicaciones y páginas usando códigos cortos. Muchos temas y complementos de WordPress permiten a los usuarios agregar funcionalidades adicionales utilizando códigos cortos. Sin embargo, estos códigos cortos a veces pueden complicarse cuando un usuario necesita ingresar parámetros de personalización. Por ejemplo, en un tema típico de WordPress, si hay un código corto para ingresar un botón, es probable que el usuario deba agregar al menos de dos a cinco parámetros. Así:
[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”] Shortcake es un complemento de WordPress y una función futura propuesta de WordPress. Su objetivo es resolver este problema proporcionando una interfaz de usuario para ingresar estos valores. Esto hará que los códigos cortos sean mucho más fáciles de usar.

Comenzar

Este tutorial está destinado a usuarios que son nuevos en el desarrollo de WordPress. Los usuarios de nivel principiante a los que les gusta modificar sus temas de WordPress también encontrarán útil este tutorial. Habiendo dicho eso, comencemos. Lo primero que debe hacer es instalar y activar el complemento Shortcake (Shortcode UI). Ahora necesitará un código corto que acepte algunos parámetros de entrada del usuario. Si necesita un pequeño repaso, aquí le mostramos cómo agregar un código corto en WordPress. Para este tutorial, usaremos un código abreviado simple que permite a los usuarios insertar un botón en sus publicaciones o páginas de WordPress. Aquí está el código de muestra para nuestro código corto, y puede usarlo agregándolo al archivo de funciones de su tema o en un complemento específico del sitio. add_shortcode (‘cta-button’, ‘cta_button_shortcode’); function cta_button_shortcode ($ atts) {extract (shortcode_atts (array (‘title’ = ‘Title’, ‘url’ = »), $ atts)); volver ‘«. $ título. ‘‘; } También necesitará agregar CSS para darle estilo a su botón. Puede utilizar este CSS en la hoja de estilo de su tema. .cta-button {relleno: 10px; tamaño de fuente: 18px; borde: 1px sólido #FFF; radio del borde: 7px; color: #FFF; color de fondo: # 50A7EC; } Así es como un usuario usará el shortcode en sus publicaciones y páginas:
[cta-button title=»Download Now» url=»http://example.com»] Ahora que tenemos un código corto que acepta parámetros, creemos una interfaz de usuario para él.

Guardar su interfaz de usuario de código corto con Shortcake

La API de Shortcake te permite guardar la interfaz de usuario de tu shortcode. Deberá describir los atributos aceptados por su código corto, los tipos de campos de entrada y los tipos de publicación que mostrarán la interfaz de usuario del código corto. Aquí hay un fragmento de código de muestra que usaremos para registrar la interfaz de usuario para nuestro código corto. Hemos intentado explicar cada paso con comentarios en línea. Puede pegarlo en el archivo de funciones de su tema o en un complemento específico del sitio. shortcode_ui_register_for_shortcode (/ ** Su descriptor de shortcode * / ‘cta-button’, / ** Su etiqueta de shortcode e icono * / array (/ ** Etiqueta para su interfaz de usuario de shortcode. Esta parte es requerida. * / ‘label’ = ‘ Agregar botón ‘, / ** Icono o imagen adjunta para el código abreviado. Opcional. Src o dashicons- $ icon. * /’ ListItemImage ‘=’ dashicons-lightbulb ‘, / ** Atributos de código abreviados * /’ attrs ‘= array (/ ** * Cada atributo que acepta la entrada del usuario tendrá su propia matriz definida así * Nuestro código abreviado acepta dos parámetros o atributos, el título y la URL * Definamos desde el principio la interfaz de usuario para el campo de título. En la interfaz de usuario * / ‘etiqueta’ = ‘Título’, / ** Este es el atributo real utilizado en el código utilizado para * / ‘código corto de atributo’ = ‘título’, / ** Establecer tipo de entrada. Los tipos admitidos son texto, casilla de verificación, cuadro de texto, radio, selección, correo electrónico, url, núm ro y fecha. * / ‘type’ = ‘text’, / ** Agregar una descripción útil para los usuarios ‘description’ = ‘Ingrese el texto del botón’,), / ** Ahora definiremos la interfaz de usuario para el campo URL * / array (‘label’ = ‘URL’, ‘attr’ = ‘url’, ‘type’ = ‘text’, ‘description’ = ‘URL completa’,),),), / ** Puede seleccionar los tipos de publicación que mostrará la interfaz de usuario del código corto * / ‘post_type’ = array (‘post’, ‘page’),)); Eso es todo, ahora puede ver la interfaz de usuario de shortcode en acción mientras edita una publicación. Simplemente haga clic en el botón Agregar medios encima de un editor de publicaciones. Esto abrirá el descargador de medios donde verá un nuevo elemento «Insertar elemento de publicación» en la columna de la izquierda. Al hacer clic en él, verá un botón para insertar su código.

Inserta Tu Shortcode En Un Artículo O Una Página
Al hacer clic en la miniatura que contiene el icono de la bombilla y la etiqueta de su tarta, verá la interfaz de usuario de código abreviado.
Interfaz De Usuario Para Shortcode Simple

Agregar código corto con múltiples entradas

En el primer ejemplo, usamos un shortcode muy básico. Ahora hagámoslo un poco más complicado y mucho más útil. Agreguemos un código corto que permita a los usuarios elegir un color de botón. Primero agregaremos el shortcode. Es casi el mismo código abreviado, excepto que ahora excluye la entrada del usuario para el color. add_shortcode (‘mybutton’, ‘my_button_shortcode’); function my_button_shortcode ($ atts) {extract (shortcode_atts (array (‘color’ = ‘blue’, ‘title’ = ‘Title’, ‘url’ = »), $ atts)); volver ‘«. $ título. ‘‘; } Dado que nuestro código abreviado mostrará botones en diferentes colores, también necesitaremos actualizar nuestro CSS. Puede utilizar este CSS en la hoja de estilo de su tema. .mybutton {relleno: 10px; tamaño de fuente: 18px; borde: 1px sólido #FFF; radio del borde: 7px; color: #FFF; } botón .blue {color de fondo: # 50A7EC; } .orange-button {color de fondo: # FF7B00; } .green-button {color de fondo: # 29B577; } Así es como se verán los botones:
Botones De Llamada A La Acción Creados Con Un Shortcode
Ahora que nuestro shortcode está listo, el siguiente paso es registrar la interfaz de usuario del shortcode. Usaremos básicamente el mismo código, excepto que esta vez tenemos otra configuración para el color y ofrecemos a los usuarios elegir entre botones azules, naranjas o verdes. shortcode_ui_register_for_shortcode (/ ** Su identificador de shortcode * / ‘mybutton’, / ** Su etiqueta de shortcode e icono * / array (/ ** Etiqueta de su interfaz de usuario de shortcode. Esta parte es obligatoria. * / ‘label’ = ‘Agregar colorido button ‘, / ** Icono o imagen adjunta para código abreviado. Opcional. Src o dashicons- $ icon. * /’ ListItemImage ‘=’ dashicons-flag ‘, / ** Atributos de código abreviado * /’ attrs ‘= matriz (/ ** * Cada atributo que acepta la entrada del usuario tendrá su propia matriz definida de esta manera * Nuestro código abreviado acepta dos parámetros o atributos, el título y la URL * Definamos primero la interfaz de usuario para el campo de título. * / Array (/ ** Esta etiqueta aparecerá en la interfaz de usuario * / ‘etiqueta’ = ‘Título’, / ** Este es el atributo real utilizado en el código utilizado para el código corto * / ‘attr’ = ‘título’, / ** Establecer tipo de entrada. los tipos son texto, casilla de verificación, área de texto, radio, sel ect, correo electrónico, url, número y fecha. * / ‘type’ = ‘text’, / ** Agregar una descripción útil para los usuarios * / ‘description’ = ‘Ingrese el texto del botón’,), / ** Ahora vamos a ajustar la interfaz de usuario para el campo URL * / array (‘label’ = ‘URL’, ‘attr’ = ‘url’, ‘type’ = ‘text’, ‘description’ = ‘URL completa’,), / ** Finalmente definiremos la interfaz de usuario para la selección de color * / array (‘label’ = ‘Color’, ‘attr’ = ‘color’, / ** Usaremos el campo de selección en lugar del texto * / ‘type’ = ‘select’, ‘options’ = array (‘ blue ‘=’ Blue ‘,’ orange ‘=’ Orange ‘,’ green ‘=’ Green ‘,),),), / ** Puede seleccionar los tipos de publicaciones que mostrarán el código corto de la interfaz de usuario * /’ post_type ‘ = matriz (‘publicación’, ‘página’),)); Eso es todo, ahora puede editar cualquier publicación o página y hacer clic en el botón Agregar medios. Notará su código corto recién agregado en «Insertar elementos de publicación».
Selección Del Elemento De Publicación O Código Corto Para Insertar
Haga clic en su código abreviado recién creado para mostrar la interfaz de usuario del código abreviado, donde simplemente puede ingresar los valores.
Interfaz De Usuario De Código Corto Con Un Campo De Selección
Puede descargar el código utilizado en este tutorial como complemento. wpb-shortcake-tutorial Hemos incluido el CSS para que pueda usarlo para estudiarlo o usarlo para agregar sus propios botones de llamada a la acción en WordPress usando una interfaz de usuario más simple. Siéntase libre de cambiar la fuente y jugar con ella. Esperamos que este artículo le haya ayudado a aprender cómo agregar UI para códigos cortos en WordPress con Shortcake. Es posible que también desee echar un vistazo a estos 7 consejos esenciales para usar códigos cortos en WordPress. Si te gustó este artículo, suscríbete a nuestro …

Leave a Reply