Snippets e Shortcodes

Como formatar campo de telefone no admin do WordPress

Veja como criar e formatar um campo de Whatsapp ou telefone no admin do WordPress, permitindo só a entrada de números.
Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Os campos de contato do usuário do WordPress são ótimos, mas não fazem verificação dos dados inseridos. Você pode digitar qualquer groselha no campo “Facebook”, por exemplo, ou letras no campo de telefone, o que para alguns projetos pode ser um desastre, como sites de classificados ou outros que precisam do telefone. Isso por muito tempo foi explorado para dar utilidade a campos inúteis (no Brasil pelo menos), como o de AIM, que era preenchido com URLs tipo Orkut, Fotolog, etc.

Pra quem está perguntando “onde estão esses campos que nunca vi?“, eles aparecem em Usuários > Seu perfil, e para adicionar campos como Facebook e telefone, que não existem por padrão, você pode usar alguma função como esta.

Precisei ter certeza de que os dados inseridos pelo usuário no campo de telefone seria de fato um telefone, e pra isso, jQuery e um pequeno e utilíssimo plugin externo.

1) Crie o campo

Vamos criar os campos adicionais como mostrado no post que linkei acima. No caso, só um, para inserir número de Whatsapp.

// nova info de contato
 function novos_contatos($contactmethods) {
     $contactmethods['whatsapp'] = 'Whatsapp';
     return $contactmethods;
 }
 add_filter('user_contactmethods', 'novos_contatos');

Este campo será como qualquer outro (texto, número, etc). Para criar uma máscara de formatação, usaremos um plugin chamado inputmask, de Robin Herbots. Baixe-o e salve os arquivos no seu servidor, junto aos arquivos do template, onde quiser, OU carregue-o a partir de um CDN, como mostrado aqui.

2) Inserindo o plugin na área de admin

Carregando os arquivos do plugin na área de administração, onde ele será usado. Insira o seguinte no arquivos functions.php do seu template:

function admin_enqueuer() {
     wp_enqueue_script(
     'inputmask', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.1.62/jquery.inputmask.bundle.js', array('jquery') );
 }
 add_action('admin_enqueue_scripts', 'admin_enqueuer');

O arquivo agora será carregado na área de administração do seu site, já com a dependência de jQuery atendida.

3) Formatando o script

O script carrega uma ou mais máscaras no seu campo. No caso do Brasil, em que há telefones com 8 ou 9 dígitos (acho que não foi padronizado em 9 ainda, ou estou errado?), podemos usar duas máscaras que cobrirão ambas as necessidades.

function admin_scriptss() { ?>
 <script language="javascript">
 (function($) {
     $(window).load(function() {
         var phones = [{ "mask": "(##) ####-####"}, { "mask": "(##) #-####-####"}];
         $('#whatsapp').inputmask({
             mask: phones,
             greedy: false,
             definitions: { '#': { validator: "[0-9]", cardinality: 1}}
         });
     });
 })(jQuery);
 </script><?php
 }
 add_action('admin_head', 'admin_scriptss');

O trecho “$(‘#whatsapp’).inputmask({” é onde o campo é localizado e “alvejado” pelo script, então se seu campo tem outro nome, será preciso mudar o identificador “#whatsapp” de acordo.

O resultado é que ao passar o mouse sobre o campo, você verá a máscara, que obrigará a entrada de dados naquele formato. Ele não vai permitir a digitação de letras, apenas números.

campo com mascara de formatacao

Essas máscaras não suportam telefones com o código do país, como +55 11 1234-5678, nem de outros países, então se precisar de algo diferente é só ajustá-las (exemplo: +## ## ####-####).

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

Deixe um Comentário

Pin