Um boilerplate para auxiliar no aprendizado de desenvolvimento de plugins para WordPress. Parte do projeto LGBTQIAPN+ Connect: https://github.com/ResidenciaTICBrisa/T2G8-Plugin-Wordpress/tree/developer.
O primeiro passo é preparar o ambiente de desenvolvimento. Todas as etapas necessárias estão contidas nessa página: https://residenciaticbrisa.github.io/T2G8-Plugin-Wordpress/#/preparandoambiente
Vamos definir a estrutura das nossas pastas e arquivos. Alguns já estão criados, então vamos finalizar o restante para que fique assim:
Em sequência, vamos definir o cabeçalho do nosso plugin. Lá estará as informações essenciais sobre nosso plugin como nome, versão, autores, descrição, etc. Para uma lista completa de campos disponíveis acesse a página oficial de desenvolvimento de plugins para WordPress: https://developer.wordpress.org/plugins/plugin-basics/header-requirements/
O nosso cabeçalho:
<?php
//cronometro.php
/*
Plugin Name: Cronômetro
Description: Um plugin feito para mostrar um cronômetro até 2030
*/Ativaremos o display de erros para facilitar quando tivermos que debugar:
//cronometro.php
//Display de erros
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);Agora, vamos criar um código JS que mude a cor de todas as tags <body>. Primeiramente, vamos escrever o código no nosso arquivo JS:
//script.js
function mudarCor() {
// Mudar a cor do body para lightgray
document.body.style.backgroundColor = 'lightgray';
}
// Ativa a função quando todos os elementos HTML forem carregados
window.onload = function() {
mudarCor();
}Logo após, vamos fazer com que nosso PHP carregue esse script em todas as páginas do site WordPress e, para isso, vamos criar uma função que carregue nosso script:
//cronometro.php
// Função para carregar os scripts
function carregar_scripts() {
wp_enqueue_script('meu-script', plugins_url('/js/script.js', __FILE__));
}e agora vamos fazer que esse script carregue em todas as páginas através de um gancho do WP:
//cronometro.php
// Gancho para inicializar o script em todas as páginas
add_action('wp_enqueue_scripts', 'carregar_scripts');Agora que aprendemos como o WP carrega os scripts em suas páginas, vamos começar a implementar nosso cronômetro. Primeiro, devemos criar os elementos HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<body>
<h1 id="fc-titulo">Cronômetro para 2030</h1>
<h2 id="fc-cronometro">Carregando...</h2>
</body>
</html>Logo após, criaremos uma função JS que atualize nosso cronômetro a cada segundo(os detalhes da implementação não serão explicados, pois não é o foco desse Workshop):
//script.js
function cronometro() {
let final = new Date("Jan 1, 2030 00:00:00").getTime();
// Atualiza o cronômetro a cada minuto
let x = setInterval(function() {
// Pega o tempo e a data de hoje
let hoje = new Date().getTime();
// Encontra a distância entre o hoje e o final
let distancia = final - hoje;
// Cálculos para dias, horas, minutos e segundos
let dias = Math.floor(distancia / (1000 * 60 * 60 * 24));
let horas = Math.floor((distancia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutos = Math.floor((distancia % (1000 * 60 * 60)) / (1000 * 60));
let segundos = Math.floor((distancia % (1000 * 60)) / 1000);
// Mostra o resultado em um elemento HTML com o Id "cronometro"
document.getElementById("fc-cronometro").innerHTML = dias + "d " + horas + "h "
+ minutos + "m " + segundos + "s ";
// Se o cronômetro for finalizado, coloca algum testo no local
if (distancia < 0) {
clearInterval(x);
document.getElementById("fc-cronometro").innerHTML = "FINALIZADO";
}
}, 1000);
}
// Ativa as funções quando todos os elementos HTML forem carregados
window.onload = function() {
mudarCor();
cronometro();
}Agora, iremos centralizar o texto em nosso arquivo css:
#fc-cronometro, #fc-titulo {
text-align: center;
}Por fim, vamos carregar todos esses arquivos no PHP usando shortcode, para o usuário do plugin poder decidir onde ele quer que o cronômetro fique em seu site. Para isso, vamos remover o gancho que carrega o script em todas as páginas implementado no passo 5:
//cronometro.php
- // Gancho para inicializar o script em todas as páginas
- add_action('wp_enqueue_scripts', 'carregar_scripts');Agora, vamos adicionar duas novas funções: uma para carregar o conteúdo HTML e outra para carregar o CSS:
// Função para carregar o HTML
function carregar_html() {
// Obtém o caminho do arquivo HTML
$arquivo_html = plugin_dir_path(__FILE__) . 'html/index.html';
// Retorna o conteúdo do arquivo HTML
return file_get_contents($arquivo_html);
}
// Função para carregar os estilos
function carregar_estilos() {
wp_enqueue_style('meu-style', plugins_url('/css/styles.css', __FILE__));
}Finalmente, vamos adicionar uma nova função e um novo gancho para carregar tudo onde quer que o usuário deseje:
function shortcode() {
// Obtém o conteúdo do arquivo HTML
$html_content = carregar_html();
carregar_scripts();
carregar_estilos();
// Retorna o conteúdo do arquivo HTML
return $html_content;
}
// Registra o shortcode com o nome 'cronometro'
add_shortcode('cronometro', 'shortcode');Para o usuário implementar o cronômetro no site dele, basta escrever em qualquer página do site dele [cronometro].
Pronto! Agora você aprendeu como o desenvolvimento de plugins para WP funciona, mas ainda há muito a aprender. Para um guia oficial, acesse: https://developer.wordpress.org/plugins/
Resultado final:
Agora, para instalar esse plugin em outro site WP, só precisamos zipar a pasta do nosso plugin e ela estará pronta pra instalação em qualquer outro site WP.
