Como Adicionar uma Interface de Usuário de Shortcodes no WordPress com Shortcake

Se você está desenvolvendo um site WordPress para um cliente, é provável que você tenha shortcodes para seus clientes usarem. O problema é que muitos iniciantes não sabem como adicionar shortcodes e, se houver parâmetros complexos envolvidos, fica ainda mais difícil. Shortcake oferece uma solução adicionando uma interface de usuário para shortcodes. Neste artigo, mostraremos como adicionar uma interface de usuário para shortcodes no WordPress com Shortcake.

O que é Shortcake?

O WordPress oferece uma maneira mais fácil de adicionar código executável dentro de posts e páginas usando shortcodes. Muitos temas e plugins do WordPress permitem que os usuários adicionem funcionalidades extras usando shortcodes. No entanto, às vezes esses shortcodes podem se tornar complicados quando um usuário precisa inserir parâmetros para personalização.

Por exemplo, em um tema WordPress típico, se houver um shortcode para inserir um botão, o usuário provavelmente precisará adicionar pelo menos dois a cinco parâmetros. Assim:

[themebutton url=”http://example.com” title=”Baixar Agora” color=”purple” target=”newwindow”]

Shortcake é um plugin do WordPress e um recurso futuro proposto para o WordPress. Ele visa resolver esse problema fornecendo uma interface de usuário para inserir esses valores. Isso tornará os shortcodes muito mais fáceis de usar.

Primeiros Passos

Este tutorial é voltado para usuários que são novos no desenvolvimento WordPress. Usuários iniciantes que gostam de ajustar seus temas WordPress também acharão este tutorial útil.

Dito isso, vamos começar.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Shortcake (Shortcode UI).

Agora você precisará de um shortcode que aceite alguns parâmetros de entrada do usuário. Se precisar de uma pequena recapitulação, veja como adicionar um shortcode no WordPress.

Para este tutorial, usaremos um shortcode simples que permite aos usuários inserir um botão em suas postagens ou páginas do WordPress. Aqui está o código de exemplo para o nosso shortcode, e você pode usá-lo adicionando-o ao arquivo functions do seu tema ou em um plugin específico para o site.

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>';
}

Você também precisará adicionar algum CSS para estilizar seu botão. Você pode usar este CSS na folha de estilos do seu tema.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

É assim que um usuário usará o shortcode em suas postagens e páginas:

[cta-button title="Baixe Agora" url="http://example.com"]

Agora que temos um shortcode que aceita parâmetros, vamos criar uma UI para ele.

Registrando a Interface do Usuário do Seu Shortcode com Shortcake

A API Shortcake permite que você registre a interface do usuário do seu shortcode. Você precisará descrever quais atributos seu shortcode aceita, os tipos de campo de entrada e quais tipos de postagem exibirão a UI do shortcode.

Aqui está um trecho de código de exemplo que usaremos para registrar a interface do usuário do nosso shortcode. Tentamos explicar cada etapa com comentários inline. Você pode colar isso no arquivo functions do seu tema ou em um plugin específico do site.

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' ), 
)
);

Isso é tudo, agora você pode ver a interface do usuário do shortcode em ação editando uma postagem. Simplesmente clique no botão Adicionar Mídia acima do editor de postagem. Isso abrirá o carregador de mídia, onde você notará um novo item 'Inserir Elemento de Postagem' na coluna da esquerda. Clicar nele mostrará um botão para inserir seu código.

Clicar na miniatura contendo o ícone da lâmpada e o rótulo do seu shortcake mostrará a interface do usuário do shortcode.

Adicionando Shortcode com Múltiplas Entradas

No primeiro exemplo, usamos um shortcode muito básico. Agora vamos torná-lo um pouco mais complicado e muito mais útil. Vamos adicionar um shortcode que permite aos usuários escolher a cor de um botão.

Primeiro, adicionaremos o shortcode. É quase o mesmo shortcode, exceto que agora ele aceita a entrada do usuário para a cor.

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>';
}

Como nosso shortcode mostrará botões em cores diferentes, precisaremos atualizar nosso CSS também. Você pode usar este CSS na folha de estilo do seu 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;
}

É assim que os botões ficarão:

Agora que nosso shortcode está pronto, o próximo passo é registrar a UI do shortcode. Usaremos essencialmente o mesmo código, exceto que desta vez temos outro parâmetro para cor e estamos oferecendo aos usuários a opção de selecionar entre botões azuis, laranjas ou 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' ), 
)
);

Isso é tudo, você agora pode editar uma postagem ou página e clicar no botão Adicionar Mídia. Você notará seu shortcode recém-adicionado em 'Inserir Elementos de Postagem'.

Clicar no seu shortcode recém-criado exibirá a UI do shortcode, onde você pode simplesmente inserir os valores.

Você pode baixar o código usado neste tutorial como um plugin.

wpb-shortcake-tutorial

Incluímos o CSS, para que você possa usá-lo para estudar ou para adicionar seus próprios botões de call to action no WordPress usando uma interface de usuário mais fácil. Sinta-se à vontade para modificar o código-fonte e brincar com ele.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma interface de usuário para shortcodes no WordPress com Shortcake. Você também pode dar uma olhada nestas 7 dicas essenciais para usar shortcodes no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e Facebook.