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’);function cta_button_shortcode( $atts) {extract( shortcode_atts(array(‘title’ =>’Title’,’url’ => ‘),$atts));return ”. $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: 1px só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 e ícono */array(/** Etiqueta para su interfaz de usuario de código abreviado. Esta parte es obligatoria. */Icono o un archivo adjunto de imagen para el código abreviado. Opcional. src o dashicons-$icon. */listItemImage’ => ‘dashicons-lightbulb’,/** Shortcode Attributes */’attrs’ => array(/*** Cada atributo que acepte la entrada del usuario tendrá su propio array definido de esta manera* Nuestro shortcode acepta dos parámetros o atributos, título y URL* Permite definir primero la interfaz de usuario para el campo title. */Esta etiqueta aparecerá en la interfaz de usuario */’label’ =>’Title’,/** Esta es la atracción real usada en el código usado para el código de acceso directo */’attr’ =>’title’,/** Define input type. Los tipos admitidos son texto, casilla de verificación, área de texto, radio, selección, correo electrónico, url, número y fecha. */’type’ =>’text’,/** Add a helpful description for users’description’ => ‘Please enter the button text’,),/** Now we will define UI for the URL field */array(‘label’ => URL”, “attr” => “url”, “type” => “text”, “description” => “Full 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’);function my_button_shortcode( $atts) {extract( shortcode_atts(array(‘color’ => `blue’,’title’ => ` Title’,’url’ => ‘; ‘),$atts);return ‘span ‘ ‘…$color . . . $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 {acolchado: 10px;tamaño fuente: 18px;borde: 1px sólido #FFF; radio del borde: 7px;color: #FFF;}.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.

12345678910111213141415161717181920212223242526272829303132333435363738394041424344454454647484950515253545556565758596061626364656667

Valora el post

Deja un comentario