Como adicionar campos Extras ao Perfil do Usuário

Veja como é fácil adicionar campos extras ao perfil do usuário no WordPress. Dessa forma é possível armazenar e exibir informações sobre os autores e usuários do seu site. Eu particularmente uso essa função para armazenar links das redes sociais e outras informações sobre os autores.

Esse recurso pode ser útil para quem precisa armazenar o endereço, dados de contato, entre outras informações do usuário. Existem duas formas distintas de adicionar esses campos personalizados, conforme veremos a diante.

Caso você não precise inserir recursos de validação nos campos poderá optar pelo modelo mais simples de inserção de campos extras no perfil do usuário. Não é preciso instalar plugins ou fazer configurações avançadas, mas é importante entender o funcionamento para fazer alterações conforme suas necessidades.

Como inserir campos extras ao perfil do usuário (método simples)

Vamos começar pelo método simples para adicionar novos campos ao perfil do usuário. Os novos campos são exibidos na tela de edição de perfil do usuário.

No arquivo functions.php do seu tema ou arquivo do plugin adicione o seguinte código:

/**
** Adicionando novos campos ao perfil do usuario
** By wptotal.com.br
**/
function add_contact_methods($profile_fields) {
// Sintaxe $profile_fields['nome do campo'] = 'Descrição do campo';
$profile_fields['twitter'] = 'Twitter Username';
$profile_fields['facebook'] = 'Facebook URL';
$profile_fields['gplus'] = 'Google+ URL';
return $profile_fields;
}
add_filter('user_contactmethods', 'add_contact_methods');

Com este código os novos campos serão inseridos na seção “Informações de contato”. Não há muitas opções, você deve informar o nome do campo e a descrição do mesmo, conforme mostrado no código acima. Caso precise de algo mais avançado utilize o método a seguir em vez deste.

Como inserir campos extras ao perfil do usuário (método avançado)

O método mais simples de inserir campos extras na tela de edição de usuários do WordPress pode não atender algumas necessidades. Muitas vezes é preciso inserir campos dinâmicos e/ou validações.

Neste caso o WordPress dispõe de um segundo método que também permite adicionar novos campos ao perfil do usuário, porém esse é mais avançado e pode exigir um conhecimento maior para manipular os dados.

É possível inserir validações nos campos e exibir mensagens de erros customizadas. No exemplo abaixo coloquei o campo “Telefone” como obrigatório e inseri uma mensagem de erro personalizada no caso do campo não ser preenchido.

O código é divido em três partes, cada um com uma finalidade diferente, que devem ser inseridos no arquivo functions.php do seu tema ou no arquivo do seu plugin.

Seguem os códigos com uma breve explicação a respeito de seu funcionamento.

O código abaixo serve para mostrar os campos na tela de perfil e edição de usuários:

/**
** Adiciona novos campos ao perfil de usuario
** By wptotal.com.br
**/
function add_extra_fields_user_profile($user) {
$user_telefone = isset($_POST['user_telefone']) ? $_POST['user_telefone'] : get_the_author_meta('user_telefone', $user->ID);
$user_endereco = isset($_POST['user_endereco']) ? $_POST['user_endereco'] : get_the_author_meta('user_endereco', $user->ID);
$user_cep = isset($_POST['user_cep']) ? $_POST['user_cep'] : get_the_author_meta('user_cep', $user->ID);
?>
<h3>Dados para Contato</h3>
<table class="form-table">
<tbody>
<tr>
<th><label for="user_telefone">Telefone <span class="description">(obrigatório)</span></label></th>
<td><input type="text" name="user_telefone" id="user_telefone" value="<?php echo esc_attr($user_telefone) ?>" class="regular-text" /></td>
</tr>
<tr>
<th><label for="user_endereco">Endereço</label></th>
<td>
<input type="text" name="user_endereco" id="user_endereco" value="<?php echo esc_attr($user_endereco) ?>" class="regular-text" />
<p>Incluir AV, Rua e etc.</p>
</td>
</tr>
<tr>
<th><label for="user_cep">CEP</label></th>
<td>
<input type="text" name="user_cep" id="user_cep" value="<?php echo esc_attr($user_cep) ?>" class="regular-text" />
<p class="description">Não sabe o CEP? <a href="http://www.buscacep.correios.com.br/sistemas/buscacep/" target="_blank" rel="nofollow">clique aqui</a> para consultar.</p>
</td>
</tr>
</tbody>
</table>
<?php
}
add_action('show_user_profile', 'add_extra_fields_user_profile');
add_action('edit_user_profile', 'add_extra_fields_user_profile');

Depois de exibir os campos é necessário validar e gravar no banco de dados. Para isso usaremos o seguinte código:

/**
** Grava os dados dos novos campos de usuários no banco de dados
** Obs: É necessário validar os campos obrigatórios antes de gravar as alterações.
** By wptotal.com.br
**/
function save_extra_fields_user_profile($user_id) {
if (!current_user_can('edit_user', $user_id))
return false;
// Validando o campo obrigatorio
if ( !isset( $_POST['user_telefone'] ) || empty( $_POST['user_telefone'] ) ) {
return false;
}
update_usermeta($user_id, 'user_telefone', $_POST['user_telefone']);
update_usermeta($user_id, 'user_endereco', $_POST['user_endereco']);
update_usermeta($user_id, 'user_cep', $_POST['user_cep']);
}
add_action('personal_options_update', 'save_extra_fields_user_profile');
add_action('edit_user_profile_update', 'save_extra_fields_user_profile');

É importante ressaltar que o segundo “if” do código acima é para validar se o campo “user_telefone” foi preenchido. Caso não tenha campos de preenchimento obrigatório esse “if” deverá ser removido.

Como exibir mensagem de erro personalizada

O segundo método para inserir campos extras ao perfil do usuário permite criar rotinas de validação personalizadas. No caso do nosso campo “Telefone” valido e exibo uma mensagem de erro caso o usuário deixe o mesmo em branco.

Porém é possível inserir outros tipos de validação nos campos. Mas atenção, em meus testes somente gerar a mensagem de erro (código abaixo) não impede a gravação dos dados na tela de edição de usuários. Além da validação abaixo, é preciso validar o campo antes de gravá-lo no banco de dados, conforme foi feito em save_extra_fields_user_profile().

/**
** Valida e Mostra a(s) mensagem(s) de erro(s) dos novos campos de usuário
** By wptotal.com.br
**/
function validate_fields_in_user_profile(&$errors,$is_update) {
if ( ! $is_update ) {
return true;
}
// Somente exibe a mensagem de erro.
if ( ! isset( $_POST['user_telefone'] ) || empty( $_POST['user_telefone'] ) ) {
$errors->add( 'user_telefone', '<strong>ERRO</strong>: Digite um telefone do usuário.' );
}
}
add_action( 'user_profile_update_errors', 'validate_fields_in_user_profile',10,2);

Como exibir o valor dos campos extras

Você aprendeu a adicionar os campos extras, agora vamos entender como podemos mostrar os valores gravados no banco de dados. O código de exibição vai ser inserido no arquivo do seu tema ou plugin (onde você quiser mostrar essa informação gravada no banco).

// Imprime na tela os dados do campo a partir do ID do author do post atual
echo get_the_author_meta('nome_do_campo', $post->post_author);
// OU
the_author_meta('nome_do_campo', $post->post_author);

Parâmetros aceitos pela função get_the_author_meta:

function get_the_author_meta( $field = '', $user_id = false )

• $field: Nome do campo da tela de edição de usuários.
• $user_id: ID do usuário que deseja retornar o valor do campo.

Conclusão

Esse tutorial é destinado a usuários avançados que estão criando plugins e temas, porém não sabem como armazenar informações do usuário no banco de dados. Através do exemplo prático mostrado aqui tenho certeza que ficara muito mais fácil trabalhar com campos extras no perfil do usuário do WordPress.

Foram passadas várias informações importantes que eu não encontrei em nenhum tutorial em português. Caso você necessite saber mais poderá olhar a documentação oficial do WordPress.

Caso tenha restado alguma dúvida, poste-a na seção de comentários abaixo que eu tentarei ajudar com um imenso prazer!