Si estás desarrollando un sitio de WordPress para un cliente, es probable que tengas shortcodes para que tus clientes los usen. El problema es que muchos principiantes no saben cómo agregar shortcodes 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 shortcodes. En este artículo, te mostraremos cómo agregar una interfaz de usuario para shortcodes en WordPress con Shortcake.
¿Qué es Shortcake?
WordPress ofrece una forma más fácil de agregar código ejecutable dentro de entradas y páginas usando shortcodes. Muchos temas y plugins de WordPress permiten a los usuarios agregar funcionalidad adicional usando shortcodes. Sin embargo, a veces estos shortcodes pueden volverse complicados cuando un usuario necesita ingresar parámetros para la personalización.
Por ejemplo, en un tema típico de WordPress, si hay un shortcode para ingresar un botón, el usuario probablemente necesitará agregar al menos de dos a cinco parámetros. Así:
[themebutton url=”http://example.com” title=”Descargar ahora” color=”purple” target=”newwindow”]
Shortcake es un plugin de WordPress y una característica propuesta para futuras versiones 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.
Primeros Pasos
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, empecemos.
Lo primero que necesitas hacer es instalar y activar el plugin Shortcake (Shortcode UI).
Ahora necesitarás un shortcode que acepte algunos parámetros de entrada del usuario. Si necesitas un pequeño repaso, aquí te mostramos cómo agregar un shortcode en WordPress.
Para este tutorial, usaremos un shortcode simple que permite a los usuarios insertar un botón en sus publicaciones o páginas de WordPress. Aquí está el código de ejemplo para nuestro shortcode, y puedes usarlo agregándolo al archivo functions de tu tema o en un plugin específico para tu 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 necesitarás agregar algo de CSS para estilizar tu botón. Puedes usar este CSS en la hoja de estilos 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="Descargar ahora" url="http://example.com"]
Ahora que tenemos un shortcode que acepta parámetros, creemos una interfaz de usuario para él.
Registrando la interfaz de usuario de tu Shortcode con Shortcake
La API de Shortcake te permite registrar la interfaz de usuario de tu shortcode. Necesitarás describir qué atributos acepta tu shortcode, los tipos de campo de entrada y en qué tipos de publicación se mostrará la interfaz de usuario del shortcode.
Aquí tienes un fragmento de código de ejemplo que usaremos para registrar la interfaz de usuario de nuestro shortcode. Hemos intentado explicar cada paso con comentarios en línea. Puedes pegar esto en el archivo functions.php de tu tema o en un plugin específico para el 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 puedes ver la interfaz de usuario del shortcode en acción editando una publicación. Simplemente haz clic en el botón Agregar medios encima del editor de una publicación. Esto abrirá el cargador de medios donde notarás un nuevo elemento 'Insertar elemento de publicación' en la columna de la izquierda. Al hacer clic en él, se mostrará un botón para insertar tu código.
Al hacer clic en la miniatura que contiene el ícono de la bombilla y la etiqueta de tu shortcake, se mostrará la interfaz de usuario del shortcode.
Agregar un Shortcode 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 el color de un botón.
Primero agregaremos el shortcode. Es casi el mismo shortcode, excepto que ahora acepta 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 de diferentes colores, también necesitaremos actualizar nuestro CSS. Puedes usar este CSS en la hoja de estilos 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í se verán los botones:
Ahora que nuestro shortcode está listo, el siguiente paso es registrar la interfaz de usuario del shortcode. Usaremos esencialmente el mismo código, excepto que esta vez tenemos otro parámetro para el color y ofrecemos a los usuarios la opción de seleccionar entre 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 puedes editar una publicación o página y hacer clic en el botón Agregar medios. Notarás tu shortcode recién agregado en 'Insertar elementos de publicación'.
Al hacer clic en tu shortcode recién creado, aparecerá la interfaz de usuario del shortcode, donde simplemente puedes ingresar los valores.
Puedes descargar el código utilizado en este tutorial como un plugin.
Hemos incluido el CSS, para que puedas usarlo para estudiar o para agregar tus propios botones de llamada a la acción en WordPress utilizando una interfaz de usuario más fácil. Siéntete libre de modificar el código fuente y jugar con él.
Esperamos que este artículo te haya ayudado a aprender cómo agregar una interfaz de usuario para shortcodes en WordPress con Shortcake. También te puede interesar echar un vistazo a estos 7 consejos esenciales para usar shortcodes en WordPress.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Waqar
hola, quiero modificar el cuadro de búsqueda de mi tema de wordpress. porque el cuadro de búsqueda del tema no busca en todo el sitio excepto en el título de la publicación/producto. por favor, ayúdame a deshacerme de este problema.
Soporte de WPBeginner
Echa un vistazo a nuestra lista de plugins de búsqueda de WordPress para mejorar la búsqueda de tu sitio
Administrador