Tudo sobre códigos de acesso do WordPress

Se você já trabalhou com um tema do WordPress, provavelmente já se deparou com um shortcode do WordPress… algo que se parece um pouco com isso:

 [button type="twitter"]

Se você entendeu o que é um shortcode e como eles funcionam é outra questão! Os autores de temas usam códigos de acesso extensivamente, mas às vezes apenas 'supõem' que os usuários saberão o que são e como funcionam quando, na verdade, podem ser bastante confusos!

A boa notícia é que os códigos de acesso são fáceis de entender e usar. Neste artigo, vamos dar uma olhada nos códigos de acesso para descobrir como você pode aproveitá-los ao máximo antes de ver como você pode criar seu próprio código de acesso!

Vamos pular!

O que são códigos de acesso do WordPress?

O WordPress introduziu códigos de acesso quando eles lançaram a v2.5 do WordPress (em 2008) e desde então eles têm sido usados ​​extensivamente na maioria dos temas e plugins.

Então, o que exatamente são códigos de acesso? Bem, resumindo (desculpe, não resisti), os shortcodes são um pouco de código que pode ser usado praticamente em qualquer lugar do seu site para inserir um recurso ou função. Então, em vez de ter que codificar laboriosamente, digamos, um ícone de mídia social usando HTML, você pode inserir um código de acesso que 'informa' ao WordPress para inserir um ícone de mídia social onde quer que você insira um determinado código de acesso. O estilo e a função (neste exemplo) do ícone de mídia social são pré-definidos pelo desenvolvedor do tema, então todo o trabalho pesado de uma perspectiva de programação foi feito para você.

Então, talvez você queira colocar um ícone do Facebook na parte inferior de uma postagem no blog. Em vez de inserir isso manualmente, adicionar um hiperlink, atualizar o tamanho do ícone e assim por diante, tudo o que você precisa fazer é colocar um código de acesso que foi 'pré-programado' pelo autor do tema que pode ser assim:

 social icon="facebook"]

É importante reiterar neste ponto que você não pode simplesmente adicionar códigos de acesso de sua própria criação e esperar que eles funcionem. Eles precisam ter sido adicionados como uma opção ao seu tema. Normalmente, os temas vêm com muitos códigos de acesso pré-criados e as instruções do tema incluirão uma lista de códigos de acesso disponíveis para você escolher.

Os códigos de acesso são um ótimo atalho para não desenvolvedores exibirem muitos tipos de conteúdo sem escrever código e uma ferramenta que também pode economizar tempo para os desenvolvedores.

O que você pode fazer com os códigos de acesso do WordPress?

Os códigos de acesso são usados ​​para inserir uma ampla variedade de conteúdo de um botão de chamada para ação (CTA), caixa de anúncio dinâmico, formulário de contato, galerias de imagens, controles deslizantes e muito mais... disponível para você dependerá do tema e plugins que você está usando.

Um exemplo de código de acesso usando o plug-in Contact Form 7

Não são apenas os temas que fazem uso de códigos de acesso. Um dos plug-ins de formulário de contato mais populares disponíveis atualmente, o Contact Form 7, usa códigos de acesso para permitir que os usuários incorporem de forma rápida e fácil um formulário de contato em um local de sua escolha.

Para fazer isso, depois de instalar o Contact Form 7, tudo o que você precisa fazer para adicionar um formulário a uma página ou postagem em seu site é o seguinte.

Passo um:

Acesse o menu Contato > Formulários de contato e crie um novo formulário ou use o existente que acompanha o plugin.

Copie o código de acesso [contact-form-7 title="Contact form 1"] que corresponde ao formulário.

Passo dois:

Cole o shortcode no local onde deseja que o formulário apareça conforme mostrado abaixo:

Salve a página e você deverá ver isso:

E é isso! Você acabou de usar com sucesso um código de acesso para incorporar um formulário de contato em seu site. Como você pode ver, os códigos de acesso são incrivelmente fáceis de usar e podem acelerar tarefas que poderiam ser complexas e demoradas.

Usando códigos de acesso padrão do WordPress

Embora a maioria dos códigos de acesso que você provavelmente usará será introduzida como resultado da instalação de um tema ou plugin. O próprio WordPress, no entanto, tem um punhado de códigos de acesso 'padrão' que você pode usar. Esses incluem:

• Áudio
• Rubrica
• Embutir
• Galeria
• Lista de reprodução
• Vídeo

Esses códigos de acesso podem ser usados ​​em todo o site para adicionar uma variedade de conteúdo, por exemplo, um player de áudio. Na imagem abaixo, mostramos isso usado em um widget de rodapé.

Para descobrir como usar esses códigos de acesso com mais detalhes, confira o artigo de suporte do WordPress sobre eles.

Então, o que você faz quando o WordPress ou o tema/plugin que você está usando não fornece o shortcode que você precisa para sua finalidade específica? Fácil… crie o seu próprio!

Crie seu próprio código de acesso WordPress

O WordPress tem uma API Shortcode que pode ser aproveitada para desenvolver seus próprios shortcodes com relativa facilidade. Vamos percorrer as etapas básicas que você precisa seguir para criar seu próprio código de acesso agora.

Passo um:

Neste exemplo vamos criar um botão CTA (Call to Action) que o leitor pode clicar para ser redirecionado para um Formulário de Contato.

Para ajudar a manter as coisas organizadas, sugerimos que você mantenha todos os seus códigos de acesso em um arquivo separado (em vez de adicionar código a um arquivo existente). Para fazer isso, crie um novo arquivo vazio na mesma pasta do arquivo functions.php do seu tema e nomeie-o como my-shortcodes.php . Depois disso, inclua este arquivo no seu arquivo functions.php assim:

 include('my-shortcodes.php');

Embora, como acabamos de dizer, recomendamos criar seus códigos de acesso em um arquivo separado, para os propósitos deste artigo, iremos em frente e adicionaremos nosso novo código diretamente em nosso arquivo functions.php para ajudar a manter o exemplo o mais claro possível.

Usaremos a função add_shortcode que é introduzida no arquivo wp-includes/shortcodes.php . Essa função precisa de dois parâmetros, a tag de código de acesso e a função de retorno de chamada.

 add_shortcode( string $tag, callable $callback )

Passo dois:

Aqui está o pedaço de código que você pode colocar em seu arquivo functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Observe que os nomes de tags e funções incluem apenas letras minúsculas e sublinhados.

Não se esqueça de substituir o 'THE_CONTACT_FORM_URL' pelo URL do formulário de contato para o qual você deseja redirecionar o usuário.

Além disso, você pode usar opcionalmente este código CSS em seu arquivo style.css para tornar o botão mais atraente visualmente:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Passo três:

A exibição de seu código de acesso no conteúdo do site é feita como faria para qualquer outro código de acesso. Neste exemplo, nosso shortcode seria [my_cta_button] . Adicione isso a uma postagem ou página e você deverá ver algo assim quando visualizar a página:

Este exemplo gera conteúdo predefinido no código PHP que fornecemos. Vamos ver como você pode permitir que o usuário administrador personalize a saída do código de acesso, se necessário.

Um código de acesso que aceita atributos do usuário

Para criar um código de acesso que tenha atributos editáveis ​​pelo usuário, você deve definir uma matriz dos atributos que deseja permitir que o usuário altere dentro de sua função de retorno de chamada. Por exemplo, você pode querer alterar o título padrão e a url do botão.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

No código acima usamos a função shortcode_atts para combinar os atributos definidos pelo usuário com atributos conhecidos. Dessa forma, você precisa criar uma função de código de acesso diferente para cada botão de CTA que precisar, mas apenas uma que redirecione para qualquer lugar que o usuário especificar todas as vezes.

O uso deste código deve ser especificado assim: [my_cta_button title='My Custom Title' url='MY_URL']

Adicionar um código de acesso em um arquivo de modelo

Do ponto de vista dos desenvolvedores, também há uma maneira rápida de forçar a inclusão do código de acesso em uma posição predefinida em seu site, chamando-o no arquivo de modelo correspondente. Por exemplo, se quisermos que o botão CTA seja exibido na seção inferior de cada postagem ou página, podemos editar o modelo singular e usar a função do_shortcode . No tema Twenty Twenty, editamos o arquivo singular.php e inserimos esta linha sob o fechamento do container div principal:

 <?php echo do_shortcode('[my_cta_button]'); ?>

O resultado será exibido abaixo do conteúdo da postagem e antes dos widgets de rodapé.

Conclusão

Antes de encerrarmos este artigo, lembre-se de que se você usar códigos de acesso fornecidos pelo seu tema ou um plugin e depois desabilitar esse tema/plugin, esses códigos de acesso deixarão de funcionar (você ficará apenas com o colchete de código de acesso exibido no o front-end do seu site).

Com essa pequena ressalva, os códigos de acesso são um recurso realmente útil quando se trata de criar um site. Eles são amplamente usados ​​no WordPress e, se você ainda não os adotou, talvez agora seja a hora de dar outra olhada nos códigos de acesso!