Si está desarrollando un sitio de WordPress para un cliente, es probable que tenga códigos abreviados para que los usen sus clientes. El problema es que muchos principiantes no saben cómo agregar códigos cortos y si hay parámetros complejos involucrados, entonces 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 una interfaz de usuario 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 mediante el uso de códigos abreviados. Muchos temas y complementos de WordPress permiten a los usuarios agregar funciones adicionales mediante códigos abreviados. Sin embargo, a veces estos códigos abreviados pueden complicarse cuando un usuario necesita ingresar 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 dos a cinco parámetros. Me gusta esto:
[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]
Shortcake es un complemento de WordPress y una característica futura propuesta de WordPress. Su objetivo es resolver este problema al proporcionar una interfaz de usuario para ingresar estos valores. Esto hará que los shortcodes sean mucho más fáciles de usar.
Empezando
Este tutorial está dirigido 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.
Dicho esto, comencemos.
Lo primero que debe hacer es instalar y activar el Shortcake (interfaz de usuario de código corto) enchufar.
Ahora necesitará un código abreviado que acepte algunos parámetros de la entrada del usuario. Si necesita un pequeño repaso, aquí le mostramos cómo agregar un código abreviado en WordPress.
Por el bien de este tutorial, utilizaremos 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 shortcode, 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
));
return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}
También deberá agregar algo de CSS para diseñar su botón. Puedes usar este CSS en la hoja de estilo de tu tema.
.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #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 shortcode que acepta parámetros, creemos una interfaz de usuario para él.
Registro de su interfaz de usuario de Shortcode con Shortcake
Shortcake API le permite registrar la interfaz de usuario de su shortcode. Deberá describir qué atributos acepta su shortcode, tipos de campos de entrada y qué tipos de publicaciones mostrarán la interfaz de usuario de shortcode.
Aquí hay un fragmento de código de muestra que usaremos para registrar la interfaz de usuario de nuestro shortcode. Hemos tratado de explicar cada paso con comentarios en línea. Puede pegar esto en el archivo de funciones de su tema o en un complemento específico del sitio.
shortcode_ui_register_for_shortcode( /** Your shortcode handle */ 'cta-button', /** Your Shortcode label and icon */ array( /** Label for your shortcode user interface. This part is required. */ 'label' => 'Add Button', /** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */ 'listItemImage' => 'dashicons-lightbulb', /** Shortcode Attributes */ 'attrs' => array( /** * Each attribute that accepts user input will have its own array defined like this * Our shortcode accepts two parameters or attributes, title and URL * Lets first define the UI for title field. */ array( /** This label will appear in user interface */ 'label' => 'Title', /** This is the actual attr used in the code used for shortcode */ 'attr' => 'title', /** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */ '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', ), ), ), /** You can select which post types will show shortcode UI */ 'post_type' => array( 'post', 'page' ), ) );
Eso es todo, ahora puede ver la interfaz de usuario de shortcode en acción al editar una publicación. Simplemente haga clic en el botón Agregar medios sobre un editor de publicaciones. Esto abrirá 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 ícono de la bombilla y la etiqueta de su shortcake, se le mostrará la interfaz de usuario del shortcode.
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 shortcode 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
));
return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}
Dado que nuestro shortcode mostrará botones en diferentes colores, también necesitaremos actualizar nuestro CSS. Puedes usar este CSS en la hoja de estilo de tu tema.
.mybutton {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
}
.blue-button {
background-color: #50A7EC;
}
.orange-button {
background-color:#FF7B00;
}
.green-button {
background-color:#29B577;
}
Así es como se verán los botones:
Ahora que nuestro shortcode está listo, el siguiente paso es registrar la interfaz de usuario de shortcode. Usaremos esencialmente el mismo código, excepto que esta vez tenemos otro parámetro para el color y ofrecemos a los usuarios seleccionar botones azules, naranjas o verdes.
shortcode_ui_register_for_shortcode(
/** Your shortcode handle */
'mybutton',
/** Your Shortcode label and icon */
array(
/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',
/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon. */
'listItemImage' => 'dashicons-flag',
/** Shortcode Attributes */
'attrs' => array(
/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field.
*/
array(
/** This label will appear in user interface */
'label' => 'Title',
/** This is the actual attr used in the code used for shortcode */
'attr' => 'title',
/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'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',
),
/** Finally we will define the UI for Color Selection */
array(
'label' => 'Color',
'attr' => 'color',
/** We will use select field instead of text */
'type' => 'select',
'options' => array(
'blue' => 'Blue',
'orange' => 'Orange',
'green' => 'Green',
),
),
),
/** You can select which post types will show shortcode UI */
'post_type' => array( 'post', 'page' ),
)
);
Eso es todo, ahora puede editar una publicación o página y hacer clic en el botón Agregar medios. Notará su código abreviado recién agregado en ‘Insertar elementos de publicación’.
Al hacer clic en su código abreviado recién creado, aparecerá la interfaz de usuario del código abreviado, donde simplemente puede ingresar los valores.
Puede descargar el código utilizado en este tutorial como complemento.
wpb-shortcake-tutorial
Hemos incluido el CSS, por lo que puede usarlo para estudiar o usarlo para agregar sus propios botones de llamada a la acción en WordPress usando una interfaz de usuario más sencilla. Siéntete libre de modificar la fuente y jugar con ella.
Esperamos que este artículo le haya ayudado a aprender cómo agregar una interfaz de usuario para códigos cortos en WordPress con Shortcake. También puede echar un vistazo a estos 7 consejos esenciales para usar códigos abreviados en WordPress.
.