FULL.

ATÉ 30% DE DESCONTO | BLACK.DA.FULL

USE O CUPOM: BLACK.DA.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Siga a FULL.

Como adicionar um código curto de botão CSS3 legal no WordPress

Você está em:

Como adicionar um código curto de botão CSS3 legal no WordPress

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

Botão de código de acesso verde

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]

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

plugins premium WordPress
O meu carrinho
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.