Se você não gosta muito de trabalhar com o editor de HTML no WordPress ou deseja fornecer alguns aprimoramentos 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 e simplificar as coisas..


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); portanto, 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 códigos de atalho para o site simplesmente copiem e colem meu código no tema e não precisem gastar muito tempo criando o código abreviado 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 criar códigos de macro para uso no conteúdo da postagem. Um código curto simples seria algo como isto:

[Código curto]

Que, quando adicionado ao editor de postagem, retornará o valor do código curto, conforme definido nos seus arquivos de tema. Vou mostrar como criar um código de acesso que permita adicionar botões facilmente ao seu editor de postagem sem tocar em nenhum código.

Adicionando um código de acesso personalizado do “botão”

A primeira coisa que você precisa fazer é adicionar o código php do seu código curto 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 através de um Tema filho do WordPress.

função myprefix_button_shortcode ($ atts, $ content = null) {

// Extrair atributos de código curto
extrair (shortcode_atts (array (
'url' => '',
'title' => '',
'target' => '',
'texto' => '',
'cor' => 'verde',
), $ atts));

// Use valor de texto para itens sem conteúdo
$ content = $ text? $ texto: $ conteúdo;

// Botão Retornar com 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 como $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. chave $. '= "'. $ val. '"';

}

}


Retorna '' do_shortcode ($ content). "';

}

// Nenhum link definido, portanto, botão de retorno como extensão
outro {

Retorna '' do_shortcode ($ content). "';

}

}
add_shortcode ('botão', 'myprefix_button_shortcode');

Usando o Shortcode em seu editor de postagem

Agora que você possui um código curto, pode adicionar o novo “botão” (que parece um link simples agora, pois não o denominamos) ao seu editor de postagem.

// Exemplo de uso 1
[button href = "YOUR LINK" target = "self"] Texto do botão [/ button]

// Exemplo de uso 2
[button href = "SEU LINK" target = "self" text = "Texto do botão"]

Denominar o botão

Qual é o sentido de criar um código de acesso se ele parecer um link simples? Nada. É por isso que mostrarei como adicionar 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 código a seguir na folha de estilo para criar um belo botão azul como o da imagem.

/ * Estilo do botão principal * /
.botão myprefix {background: # 65A343; sombra de texto: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; raio da borda: 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); sombra da caixa: 1px 2px 1px rgba (0, 0, 0, 0,1); cursor: ponteiro; display: bloco embutido; estouro: oculto; preenchimento: 1px; alinhamento vertical: meio; }

.extensão do botão myprefix {border-top: 1px rgba sólido (255, 255, 255, 0.25); -webkit-border-radius: 5px; raio da borda: 5px; raio da borda: 5px; cor: #fff; display: bloco; intensidade da fonte: Negrito; tamanho da fonte: 1em; preenchimento: 6px 12px; sombra de texto: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/* Flutuar */
.botão myprefix: hover {background: # 558938; decoração de texto: nenhuma; }

/* Ativo */
.botão myprefix: active {background: # 446F2D; }

Botão verde Shortcode

Suporte para várias cores

Se você notou que o shortcode possui um parâmetro de cor que pode ser usado para adicionar estilos CSS para diferentes cores de botão. Por exemplo, se você pode adicionar uma opção de cor azul, adicione este CSS extra:

/ * Botão azul * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Passe o mouse sobre o botão azul * /
.myprefix-button.color-blue: passe o mouse {background: # 2575cf}

/ * Botão azul ativo * /
.myprefix-button.color-blue: active {background: # 0760AD}

Agora basta usar o parâmetro color no shortcode:

[button href = "SEU LINK" target = "self" color = "blue"] Texto do botão [/ button]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me