Cómo añadir una interfaz de usuario de Shortcodes en WordPress con Shortcake

Si está desarrollando un sitio de WordPress para un cliente, es probable que tenga atajos para que sus clientes los usen. El problema es que muchos principiantes no saben cómo añadir atajos y si hay parámetros complejos involucrados, entonces es aún más difícil. Shortcake proporciona una solución añadiendo una interfaz de usuario para los atajos. En este artículo, le mostraremos cómo añadir una interfaz de usuario para los atajos en WordPress con Shortcake.

¿Qué es Shortcake?

WordPress ofrece una forma más fácil de añadir código ejecutable dentro de los mensajes y páginas mediante el uso de atajos. Muchos temas y plugins de WordPress permiten a los usuarios añadir funcionalidad adicional usando atajos. Sin embargo, a veces estos atajos pueden complicarse cuando un usuario necesita introducir parámetros para la personalización.

Por ejemplo, en un tema típico de WordPress, si hay un código abreviado para ingresar un botón, entonces el usuario probablemente necesitará agregar al menos de dos a cinco parámetros. Así:

themebutton title="Download Now" color="purple" ]

Shortcake es un plugin de WordPress y una característica propuesta para el futuro de WordPress. Su objetivo es resolver este problema proporcionando una interfaz de usuario para introducir estos valores. Esto hará que los atajos sean mucho más fáciles de usar.

Introducción

Este tutorial está dirigido a usuarios que son nuevos en el desarrollo de WordPress. Los usuarios de nivel principiante que deseen modificar sus temas de WordPress también encontrarán útil este tutorial.

Dicho esto, empecemos.

Lo primero que debe hacer es instalar y activar el plugin Shortcake (Shortcode UI).

Ahora necesitará un código abreviado que acepte algunos parámetros de entrada del usuario. Si necesitas una pequeña actualización, aquí está cómo añadir un código abreviado en WordPress.

Para este tutorial usaremos un simple atajo que permite a los usuarios insertar un botón en sus posts o páginas de WordPress. Aquí está el código de ejemplo para nuestro código abreviado, y puedes usarlo añadiéndolo al archivo de funciones de tu tema o en un plugin específico del sitio.

123456789101112add_shortcode(cta-button, cta_button_shortcode); functioncta_button_shortcode( $atts) { extract( shortcode_atts( array( ` title=> ` Title, ` url=> ), $atts )); return. $url. ">. $title. ;}

También necesitará añadir algo de CSS para darle estilo a su botón. Puede utilizar este CSS en la hoja de estilo de su tema.

12345678.cta-botón {acolchado: 10px;tamaño fuente: 18px;borde: 1pxsólido#FFF;radio del borde: 7px;color: #FFF;color de fondo: #50A7EC;}

Así es como un usuario usará el código abreviado en sus mensajes y páginas:

cta-button title="Descargar ahora" ]

Ahora que tenemos un código abreviado que acepta parámetros, vamos a crear una interfaz de usuario para él.

Registro de la interfaz de usuario de código abreviado con Shortcake

Shortcake API le permite registrar la interfaz de usuario de su código abreviado. Tendrá que describir qué atributos acepta el código abreviado, los tipos de campos de entrada y qué tipos de mensajes mostrarán la interfaz de usuario del código abreviado.

Aquí hay un fragmento de código de ejemplo que usaremos para registrar la interfaz de usuario de nuestro código abreviado. Hemos intentado explicar cada paso con comentarios en línea. Puede pegarlo en el archivo de funciones de su tema o en un plugin específico del sitio.

12345678910111213141415161717181920212223242526272829303132333435363738394041424344454647484950515253shortcode_ui_register_for_shortcode( /** Su mango de código abreviado */cta-button, /** Su etiqueta de código abreviado y el icono de su interfaz de usuario de código abreviado */**. Esta parte es obligatoria. */label=> Add Button, /** Icono o un archivo adjunto de imagen para el código abreviado. Opcional. src o dashicons-$icon.  */Cada atributo que acepte la entrada del usuario tendrá su propia matriz definida de esta manera* Nuestro atajo acepta dos parámetros o atributos, título y URL* Permite definir primero la interfaz de usuario para el campo de título. */ Esta etiqueta aparecerá en la interfaz de usuario */label => `Título, /** Esta es la atracción real utilizada en el código utilizado para el código abreviado */attr => `título, /** Definir tipo de entrada. Los tipos admitidos son texto, casilla de verificación, área de texto, radio, selección, correo electrónico, url, número y fecha. */Ahora vamos a definir la interfaz de usuario para el campo URL */ array(label => URL => URL,),),),),), /** Puede seleccionar qué tipos de mensajes mostrarán el código abreviado UI */post_type => array( `post, `página), ));

Eso es todo, ahora puedes ver la interfaz de usuario de código abreviado en acción editando un mensaje. Simplemente haga clic en el botón Agregar medios encima de un editor de mensajes. Esto mostrará el cargador de medios donde notará un nuevo elemento Insertar elemento de publicación en la columna de la izquierda. Al hacer clic en él se le mostrará un botón para insertar su código.

Al hacer clic en la miniatura que contiene el icono de la bombilla y la etiqueta de la torta, se le mostrará la interfaz de usuario del código abreviado.

Adición de código de acceso directo con múltiples entradas

En el primer ejemplo, usamos un atajo muy básico. Ahora vamos a hacerlo un poco más complicado y mucho más útil. Añadamos un código abreviado que permite a los usuarios elegir el color de un botón.

Primero añadiremos el código abreviado. Es casi el mismo código abreviado, excepto que ahora exceptúa la entrada del usuario para el color.

12345678910111213add_shortcode( mybutton, my_button_shortcode); functionmy_button_shortcode( $atts) { extract( shortcode_atts( `color=> `azul, `título=> `título, ` url=> ), $atts )); return. $color. Botón">. $url. ">. $title. ;}

Dado que nuestro código abreviado mostrará botones en diferentes colores, también tendremos que actualizar nuestro CSS. Puede utilizar este CSS en la hoja de estilo de su tema.

1234567891010111213141415161718.mybutton { relleno: 10px; tamaño de fuente: 18px; borde: 1pxsólido#FFF; radio del borde: 7px; color: #Botón azul { color de fondo: #50A7EC;}.botón naranja { color de fondo:#FF7B00;} .botón verde { color de fondo:#29B577;}

Así es como se verán los botones:

Ahora que nuestro código abreviado está listo, el siguiente paso es registrar la interfaz de usuario de código abreviado. Usaremos esencialmente el mismo código, excepto que esta vez tenemos otro parámetro para el color y estamos ofreciendo a los usuarios la posibilidad de seleccionar entre botones azules, naranjas o verdes.

1234567891011121314141516171718192021222324252526272829303132333435363738394041424344454454647484950515253545556565758596061626364656667shortcode_ui_register_for_shortcode( /** Su mango de atajo */mybutton, /** Su etiqueta de código de acceso directo e icono */array( /** Etiqueta de la interfaz de usuario de su atajo. Esta parte es obligatoria. */label=> `Añadir un botón de colores, /** Icono o un archivo adjunto de imagen para el código abreviado. Opcional. src o dashicons-$icon.  */Cada atributo que acepte la entrada del usuario tendrá su propia matriz definida de esta manera* Nuestro código abreviado acepta dos parámetros o atributos, título y URL* Permite definir primero la interfaz de usuario para el campo de título. */ Esta etiqueta aparecerá en la interfaz de usuario */label => `Título, /** Esta es la atracción real utilizada en el código utilizado para el código abreviado */attr => `título, /** Definir tipo de entrada. Los tipos admitidos son texto, casilla de verificación, área de texto, radio, selección, correo electrónico, url, número y fecha. */Ahora definiremos la interfaz de usuario para el campo URL */ array(label =>URL,attr =>url,type =>text,description => Full URL,), /** Finalmente definiremos la interfaz de usuario para la selección de color */array(label =>Color,Usaremos el campo de selección en lugar del texto */type => select, options=> array(blue => Blue, ` orange => ` Orange, ` green =>Green, ),), ), /** Puede seleccionar qué tipos de mensajes mostrarán el código de acceso abreviado UI */post_type => array(post, page), ));

Eso es todo, ahora puede editar un mensaje o página y hacer clic en el botón Agregar contenido multimedia. Notarás el nuevo código abreviado que acabas de añadir bajoInsertar Elementos de Mensajes.

Al hacer clic en el código abreviado que acaba de crear, aparecerá la interfaz de usuario del código abreviado, en la que podrá introducir los valores de forma sencilla.

Puede descargar el código utilizado en este tutorial como un plugin.

wpb-shortcake-tutorial

Hemos incluido el CSS, así que puedes usarlo para estudiarlo o usarlo para añadir tu propia llamada a los botones de acción en WordPress usando una interfaz de usuario más fácil. Siéntase libre de modificar la fuente y jugar con ella.

Esperamos que este artículo le haya ayudado a aprender a añadir una interfaz de usuario para los atajos en WordPress con Shortcake. También puedes echar un vistazo a estos 7 consejos esenciales para usar los atajos en WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir