Introdução aos códigos de acesso do WordPress e snippets de amostra
Publicados: 2021-02-18Os shortcodes do WordPress foram introduzidos na versão 2.5 e ajudam você a criar códigos de macro para usar em seu conteúdo. Se você pensar bem, essa é uma ótima maneira de criar algo como um anúncio dinâmico ou um botão de chamada para ação em suas postagens.
Se usarmos o exemplo de call-to-action, você pode adicionar algo assim em sua postagem de blog para mostrar o botão e, em seguida, editar a saída em seu arquivo functions.php de modelos, ao qual chegaremos em um minuto.
[button]
Para personalizar o botão, podemos simplesmente adicionar algo como:
[button type="twitter"]
Ou para torná-lo ainda melhor, podemos usar um shortcode anexo:
[button type="twitter"]Follow me on Twitter![/button]
Com alguma imaginação, você logo percebe o potencial dos códigos de acesso e o que pode ser feito com eles. Neste artigo, mostrarei como criar e usar esses três tipos diferentes de códigos de acesso e, em seguida, mostrarei alguns códigos de acesso prontos para usar em seu próprio site WordPress.
Criando um shortcode de fechamento automático
O shortcode mais simples é o de fechamento automático. Vamos criar um link simples para nossa conta do Twitter e adicioná-lo a uma postagem no blog.
Todo o código vai em functions.php
, que está localizado em /wp-content/themes/your-theme/
. Se você não tiver um, basta criá-lo e colocar o código nele.
<?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>
Uso:
[button]
Simplesmente usando a função add_shortcode()
, podemos vincular qualquer função PHP ao nosso shortcode. Neste exemplo simples, tudo o que fazemos é retornar um link para nossa conta do Twitter, mas vamos dar um passo adiante e adicionar alguns parâmetros.
Criando um shortcode de fechamento automático com parâmetros
Shortcode tem suporte para parâmetros, o que nos permite personalizar a saída. Neste exemplo, temos dois botões diferentes, então temos que definir qual botão queremos mostrar.
<?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>
Agora você pode escolher qual botão exibir definindo o type
em seu código de acesso.
[button type="twitter"] [button type="rss"]
Isso é ótimo. Mas e se quiséssemos mudar o texto? Poderíamos continuar adicionando tipos de shortcode como [button type="twitter-2"]
e assim por diante, mas isso não é muito dinâmico, não é? Vamos ver como fazer isso da maneira certa.
Criando um shortcode envolvente
O shortcode anexo permite que você incorpore conteúdo em seu shortcode, assim como BBCode, se você já usou isso.
<?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>
Para usar este shortcode, você incorpora o texto que deseja usar assim:
[button]Follow me on Twitter![/button]
Para tornar este botão ainda melhor, poderíamos adicionar parâmetros como fizemos no exemplo anterior. Vamos adicionar dois parâmetros desta vez, um para o nome de usuário do Twitter e outro para o estilo do botão. Então podemos ter diferentes tipos de botões e escolher a qual conta do Twitter queremos vincular o botão.
<?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>
Uso:
[button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>
Agora temos um botão personalizável que podemos vincular a qualquer conta do Twitter. Como tenho certeza que você entende, você pode criar códigos de acesso muito mais avançados do que isso, mas este é um bom começo.
Shortcodes em widgets e arquivos de modelo
Agora, quando você viu o poder dos códigos de acesso, provavelmente está se perguntando por que não pode usá-los em seus widgets e arquivos de modelo. Bem, acontece que você pode.
Para ativar shortcodes em seus widgets, basta colocar o seguinte código em functions.php:
add_filter('widget_text', 'do_shortcode')
E para usar um shortcode em seus arquivos de modelo, você pode acessá-los usando:
do_shortcode("[button]");
Shortodes prontos para uso
Aqui estão alguns códigos de acesso interessantes que você pode implementar imediatamente.
Código nas postagens
Se você administra um blog que se concentra em programação, provavelmente deseja exibir código em suas postagens.
function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');
Uso:
[code]<?php echo 'Hello World!'; ?>
Incorpore o Adsense em qualquer lugar em suas postagens
Com este código de acesso, você pode adicionar um anúncio do Google em qualquer lugar de suas postagens simplesmente usando [adsense]
.
function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');
Incorporar vídeo do YouTube
Este shortcode permitirá que você incorpore vídeos do YouTube em suas postagens de blog.
function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");
Uso:
// Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]
Código de acesso de doação do Paypal
Este é um shortcode que ajuda você a criar links de doação para sua conta Paypal.
function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');
Uso:
[donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]
Nota privada aos autores
Este último é inteligente. Com este shortcode, você pode criar notas em suas postagens que apenas os autores podem ver.
function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );
Conclusão
Depois de ler este artigo, espero que você goste dos códigos de acesso do WordPress tanto quanto eu, e espero que comece a implementá-los em seu próprio blog.