Customizando a tela de login do WordPress - Criando Plugin - Parte 1

Categoria

Geral, Tutoriais, WordPress

Postado em

13 de maio de 2019

Última Atualização

29 de maio de 2019

Visualizações

1554

Olá, caros leitores, hoje estamos iniciando uma série de tutoriais que poderá te ajudar no seu dia a dia com o WordPress.

Esse primeiro tutorial vamos te ensinar a como estar criando um plugin para customização da sua tela de login do WordPress.

Como pode ver acima a imagem destacada, a tela de login foi em partes customizada, atualizamos o link de direcionamento da página, inserimos um logotipo, também foi inserido um background e modificamos o formulário, bacana não é, saímos um pouco da tela de login padrão do WordPress.

Bom, vamos parar de rodeios e vamos ao que interessa… MÃO NA MASSA.

Para criarmos um plugin precisamos criar uma pasta em wp-content/plugins, em nosso caso vamos utilizar a pasta point_paginadelogin.

 

Pasta (point_paginadelogin)

Vamos criar o arquivo pagina-login.php, você poderá utilizar qualquer editor de texto de sua preferencia, nós recomendamos abaixo alguns, veja:

  1. Sulime Text 3
  2. Visual Studio Code
  3. Notepad++

Vale a pena lembrar que os editores acima são somente sugestões, talvez você queira ou já utiliza o PHPStorm e/ou Netbeans que são IDE´s.

No arquivo pagina-login.php insira o seguinte código abaixo:

<?php
/**
 * Plugin Name: Customizar página de login
 * Plugin URI: https://pointcomunicacao.ppg.br
 * Description: Esse plugin faz com que você possa colocar um background em sua página de login, modifica o logotipo e altera o estilo e cor do box de login bem como o botão.
 * Version: 1.0
 * Author: Wesley Oliveira
 * Author URI: https://pointcomunicacao.ppg.br
 */

Inserimos acima um código comentado que será o que vai ser apresentado na tela de plugins no administrativo do WordPress, vamos explicar o que colocamos no código

Plugin Name – É o nome do plugin, esse será apresentado para o usuário na tela de plugins

Plugin URI – Geralmente é utilizado para direcionar o usuário para a tela de apresentação do plugin

Description – É onde você descreve as funcionalidades do plugin

Version – O nome já diz por si só, você define uma versão para o seu plugin

Author – É o nome de quem criou o plugin

Author URI – É a url que direciona o usuário para o seu portfólio ou para onde desejar

 

Feito o comentário acima, pode ir até a página de plugins no seu painel administrativo e irá ver o plugin, não ative, pois, ainda não está codificado para ativação, veja a imagem abaixo como ficará o plugin visível.

Customizando a tela de login do WordPress - Criando Plugin - Parte 1 - Tela do Plugin

 

Agora temos algumas etapas para fazer, ou seja:

  1. Definir o caminho do plugin
  2. Criar o arquivo de customização
  3. Criar o arquivo classe onde iremos inserir algumas customizações e filtros.

Antes de criar as etapas acima, vamos já deixa-las todas inseridas no arquivo pagina-login.php, que é o arquivo que estamos trabalhando neste momento, correto?

Vamos lá então

/*
 * Definindo o caminho do pacote
 */
define( 'POINT__PLUGIN_DIR' , plugin_dir_path( __FILE__ ) );

No código acima, utilizamos o define para definirmos o nome que utilizaremos como caminho para o nosso plugin em seguida passamos o parâmetro plugin_dir_patch para dizer que o nome do caminho será POINT__PLUGIN_DIR

Pronto, o caminho está definido.

Agora vamos chamar o arquivo de customização, onde vamos alimentar o campo PERSONALIZAR que está em Aparência no nosso painel administrativo.

/*
 * Inserindo informações no customizer
 */
require_once( POINT__PLUGIN_DIR . 'customizando.php' );

Informamos para nosso arquivo que após eu criar na raiz da pasta point_paginadelogin o arquivo customizando.php ele será obrigatório.

Veja que utilizamos o require_once e dentro dos parenteses, colocamos o caminho do nosso plugin POINT__PLUGIN_DIR e em seguida o nome do arquivo 'customizando.php' que criaremos na próxima aula.

Está gostando? tem alguma dúvida ou sugestão? Comente abaixo.

Grande abraço e até a próxima aula.

Gostou? compartilhe nas redes!! ;)

Deixe seu comentário