Se você não é um grande fã de trabalhar com o editor HTML no WordPress ou deseja fornecer algumas melhorias interessantes para seus temas premium, os códigos de acesso são uma ótima solução para expandir os recursos do seu editor de postagem, mantendo as coisas simples.
Eu estava pensando que seria legal adicionar algum tipo de botão ao meu site ao fornecer links para arquivos gratuitos ou outros sites (usando códigos de acesso, é claro), então depois de adicionar o código de acesso ao meu tema, pensei em compartilhar o código aqui no blog para que outras pessoas interessadas em adicionar shortcodes de botão ao seu site possam simplesmente copiar e colar meu código em seu tema e não ter que gastar muito tempo criando o shortcode e estilizando o botão.
O que são códigos de acesso?
Os códigos de acesso foram introduzidos no WordPress 2.5 e permitem que você crie códigos de macro para uso no conteúdo do post. Um shortcode simples seria algo assim:
[shortcode]
Que quando adicionado ao editor de postagem retornará o valor do shortcode conforme definido em seus arquivos de tema. Mostrarei como criar um código de acesso que permitirá adicionar botões facilmente ao seu editor de postagem sem tocar em nenhum código.
Adicionando um Shortcode de “botão” personalizado
A primeira coisa que você precisa fazer é adicionar o código php do seu shortcode ao seu tema. O código a seguir pode ser usado para adicionar um botão simples ao seu site. Este código pode ser colocado no arquivo functions.php. Se você estiver usando um tema de terceiros, é melhor fazer isso por meio de um tema filho do WordPress .
function myprefix_button_shortcode( $atts, $content = null ) {
// Extract shortcode attributes
extract( shortcode_atts( array(
‘url’ => ”,
‘title’ => ”,
‘target’ => ”,
‘text’ => ”,
‘color’ => ‘green’,
), $atts ) );
// Use text value for items without content
$content = $text ? $text : $content;
// Return button with link
if ( $url ) {
$link_attr = array(
‘href’ => esc_url( $url ),
‘title’ => esc_attr( $title ),
‘target’ => ( ‘blank’ == $target ) ? ‘_blank’ : ”,
‘class’ => ‘myprefix-button color-‘ . esc_attr( $color ),
);
$link_attrs_str = ”;
foreach ( $link_attr as $key => $val ) {
if ( $val ) {
$link_attrs_str .= ‘ ‘ . $key . ‘=”‘ . $val . ‘”‘;
}
}
return ‘<a’ . $link_attrs_str . ‘><span>’ . do_shortcode( $content ) . ‘</span></a>’;
}
// No link defined so return button as a span
else {
return ‘<span class=”myprefix-button”><span>’ . do_shortcode( $content ) . ‘</span></span>’;
}
}
add_shortcode( ‘button’, ‘myprefix_button_shortcode’ );
Usando o código de acesso em seu editor de postagem
Agora que você tem um código de acesso, você pode adicionar o novo “botão” (que parece um link simples agora, já que não o estilizamos) ao seu editor de postagem.
// Example usage 1
[button href=”YOUR LINK” target=”self”]Button Text[/button]
// Example usage 2
[button href="YOUR LINK" target="self" text="Button Text"]
Estilizando o botão
Qual é o objetivo de criar um código de acesso se ele parecer apenas um link simples? Nada. É por isso que vou mostrar como adicionar um CSS3 legal para estilizar o botão de download e torná-lo sexy.
Como você notou no shortcode, adicionei a classe “myprefix-button” para que você possa estilizá-la facilmente através do seu arquivo style.css. Insira o seguinte código em sua folha de estilo para criar um belo botão azul como o da imagem.
/* Main Button Style */
.myprefix-button{ background:#65A343; text-shadow:1px 1px 1px #000; -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; overflow: hidden; padding: 1px; vertical-align: middle; }
.myprefix-button span { border-top: 1px solid rgba(255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px;border-radius: 5px; color: #fff; display: block; font-weight: bold; font-size: 1em; padding: 6px 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25); }
/* Hover */
.myprefix-button:hover{ background: #558938; text-decoration:none; }
/* Active */
.myprefix-button:active{ background:#446F2D; }
Suporte a várias cores
Se você notou que o shortcode tem um parâmetro de cor que você pode usar para adicionar estilos CSS para diferentes cores de botão. Por exemplo, se você puder adicionar uma opção de cor azul adicionando este CSS extra:
/* Blue Button */
.myprefix-button.color-blue { background:#2981e4 }
/* Blue Button Hover */
.myprefix-button.color-blue:hover { background:#2575cf }
/* Blue Button Active */
.myprefix-button.color-blue:active { background:#0760AD }
Agora basta usar o parâmetro color no shortcode:
[button href="YOUR LINK" target="self" color="blue"]Button Text[/button]
