Neste guia, apresento uma solução simples e poderosa que segue o padrão de atualizações do WordPress, tornando o processo totalmente transparente para seus usuários. Para isso, desenvolvi uma GitHub Action personalizada e um script PHP que trabalham juntos para gerenciar as atualizações de forma fácil e eficiente. É a mesma solução que uso para alguns dos meus próprios plugins, e agora estou compartilhando com a comunidade para que você também possa aproveitar.

Sem dependências extras, sem complicações – apenas GitHub e um pouco de mágica com PHP. Vamos começar!

O Que São Plugins Auto-Hospedados?

Antes de entrarmos nos detalhes, vamos entender: auto-hospedar plugins significa gerenciar o armazenamento e as atualizações de seus plugins de forma independente, fora do repositório WordPress.org. Isso permite que você controle onde seus plugins estão armazenados e como as atualizações são entregues, sem depender do repositório oficial do WordPress.

Em vez de hospedar o plugin no WordPress.org, você utiliza sua própria infraestrutura – como o GitHub, um servidor privado ou qualquer outro serviço de hospedagem de arquivos – para gerenciar o ciclo de vida do plugin.

Basicamente, auto-hospedar permite que os desenvolvedores criem, distribuam e atualizem plugins sob seus próprios termos, enquanto ainda fornecem aos usuários uma experiência de atualização familiar e fluida.

O Que É Necessário Para Auto-Hospedar Plugins no GitHub?

Agora que entendemos o conceito, vamos falar sobre o que é necessário e como o processo funciona. Em um nível geral, você precisará de:

1. Um Servidor (No Nosso Caso, GitHub)

Hospedar os detalhes do plugin: O servidor armazena metadados sobre o plugin, como versão mais recente, URL de download e outras informações necessárias.

Armazenar os arquivos de distribuição: Inclui o arquivo .zip do plugin, que será baixado durante o processo de atualização.

2. Um Script de Verificação de Atualizações no Plugin

Buscar dados do servidor: O script se comunica com o servidor (neste caso, o GitHub) para obter os detalhes mais recentes do plugin.

Comparar versões: Verifica se a versão instalada no site do usuário está desatualizada, comparando-a com a versão mais recente disponível no servidor.

Encaminhar atualizações: Se houver uma nova versão disponível, o script integra-se ao sistema de atualização padrão do WordPress, tornando o processo transparente para o usuário.

Com esses dois componentes trabalhando juntos, você pode oferecer uma experiência de atualização fluida e automatizada para seus plugins, mantendo total controle sobre o processo de distribuição.

O Lado do Servidor no GitHub

O objetivo aqui não é entrar em todos os detalhes técnicos da GitHub Action que desenvolvi, mas entender o fluxo geral do processo e por que ele é essencial para a solução. Fluxo Simplificado da GitHub Action:

1. Gerar Metadados JSON

A Action analisa o arquivo readme.txt e outros arquivos relevantes para criar um arquivo JSON contendo informações sobre o plugin, como versão, URL de download, descrição e muito mais. Esse JSON é essencial para que o script PHP no lado do plugin possa consultar o servidor e verificar atualizações.

2. Preparar o Pacote de Distribuição

A Action compila os arquivos do plugin em um pacote .zip pronto para distribuição. Durante esse processo, você pode definir regras específicas para excluir pastas ou arquivos desnecessários – como diretórios de desenvolvimento, casos de teste ou artefatos de build – garantindo que o pacote final seja limpo e otimizado.

3. Criar um Release

A Action automatiza a criação de um novo release no GitHub. Esse release serve como ponto de hospedagem para o arquivo .zip. Ele é marcado com a versão correspondente do plugin, garantindo que o WordPress e o script PHP possam buscar corretamente a versão mais recente.

O Lado do Plugin – Script de Verificação de Atualizações

Do lado do plugin, o script PHP atua como a “ponte” entre o plugin instalado no site WordPress e os metadados hospedados no GitHub.

1. Adicionar um Arquivo PHP Simples para Gerenciar Atualizações

O script de verificação de atualizações é integrado diretamente ao plugin. Ele monitora eventos de atualização do WordPress e utiliza filtros como plugins_api e site_transient_update_plugins para fornecer informações de atualização dinamicamente.

2. Buscar Dados JSON no GitHub

O script consulta o arquivo JSON hospedado no GitHub para obter informações atualizadas sobre o plugin, como versão, descrição, URL de download e outros detalhes importantes.

3. Comparar a Versão Atual com a Mais Recente

Após obter os dados do JSON, o script compara a versão instalada do plugin com a versão mais recente disponível nos metadados. Se forem iguais, nenhuma ação é tomada. Se houver uma versão mais recente, o script encaminha as informações de atualização ao sistema padrão do WordPress.

4. Seguir o Fluxo de Atualização Padrão do WordPress

Se uma nova versão estiver disponível, o WordPress assume o controle utilizando seu mecanismo padrão de atualização. Isso garante uma experiência fluida e familiar para os usuários.

É isso!

Se você tiver dúvidas, precisar de ajuda na implementação ou quiser compartilhar seu feedback, deixe um comentário! Vamos colaborar para melhorar esta solução juntos!

Repositório GitHub para a GitHub Action: wp-self-host-updater-generator

Action no Marketplace do Github: wp-self-host-updater-generator

Repositório GitHub para o Script PHP: wp-self-host-updater-checker

FAQ

1. Funciona com MU-Plugins?

Parcialmente! O lado “servidor” no GitHub funciona perfeitamente. No entanto, como MU-Plugins não seguem o mesmo fluxo de atualização de plugins regulares, o script PHP precisa de ajustes. Já estou trabalhando nisso!

2. Funciona com Temas?

Ainda não! Algumas modificações são necessárias para suportar temas, mas essa funcionalidade será adicionada em breve.

3. Posso validar licenças antes de entregar atualizações?

Este fluxo é projetado para plugins “gratuitos”, então validação de licença não é suportada no momento. Estou explorando formas de adicionar isso no futuro.

4. Funciona com repositórios privados?

Quase! A Action funciona perfeitamente, mas o script PHP precisa de ajustes para usar tokens de autenticação em repositórios privados.

O post Como Auto-Hospedar Plugins do WordPress no GitHub e Entregar Atualizações apareceu primeiro em Eduardo Villão - PT-BR.

Com a API MutationObserver, você pode monitorar alterações no DOM e detectar quando um modal de popup do Elementor é injetado no <body>. Isso permite que você execute ações personalizadas sem depender de bibliotecas adicionais.

Por que Usar o MutationObserver

A API MutationObserver é um recurso nativo do JavaScript que permite observar mudanças no DOM, como:

• Adição ou remoção de elementos.
• Modificações nos atributos de elementos existentes.

No caso dos popups do Elementor, essa API é perfeita para detectar quando o modal é dinamicamente adicionado ao DOM.

Código para Detectar Popups do Elementor

Aqui está um snippet completo que você pode usar no seu projeto:

// Seleciona o elemento <body>
const body = document.body;

// Cria um MutationObserver
const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
        // Verifica se novos nós foram adicionados
        if (mutation.type === "childList") {
            mutation.addedNodes.forEach((node) => {
                // Verifica se o nó adicionado é um modal de popup do Elementor
                if (node.classList && node.classList.contains("elementor-popup-modal")) {
                    console.log("Popup do Elementor detectado:", node);
                    // Adicione sua lógica personalizada aqui
                }
            });
        }
    });
});

// Configura o observer para monitorar o <body>
observer.observe(body, { childList: true });

// Interrompe a observação quando não for mais necessária (opcional)
// observer.disconnect();

Como Funciona

1. Monitorando o <body>:

O elemento <body> é observado porque o Elementor injeta seus popups como nós filhos do <body>.

2. MutationObserver:

Usamos o MutationObserver para monitorar mudanças nos nós filhos do <body> configurando { childList: true }.

3. Filtrando Nós Adicionados:

Para cada nó adicionado, verificamos se ele possui a classe elementor-popup-modal, que identifica os popups do Elementor.

4. Ações Personalizadas:

Quando o modal é detectado, você pode executar qualquer lógica personalizada no bloco onde o console.log está localizado.

Caso de Uso Prático

Suponha que você queira aplicar uma animação personalizada quando um popup do Elementor aparecer. Você pode modificar o código assim:

if (node.classList && node.classList.contains("elementor-popup-modal")) {
    console.log("Popup do Elementor detectado:", node);
    node.style.opacity = 0; // Começa invisível
    setTimeout(() => {
        node.style.transition = "opacity 0.5s";
        node.style.opacity = 1; // Efeito de fade-in
    }, 0);
}

Por que Escolher Vanilla JS?

1. Sem Dependências:

Reduz o tamanho total do projeto eliminando bibliotecas como jQuery.

2. Melhor Performance:

Vanilla JavaScript geralmente é mais rápido, pois não possui o overhead de lidar com seletores e eventos adicionais.

3. Compatibilidade Moderna:

A API MutationObserver é suportada em todos os navegadores modernos, incluindo Edge e Safari.

É Isso!

Usar o MutationObserver para detectar popups do Elementor é uma solução elegante e eficiente, especialmente para desenvolvedores que preferem não depender do jQuery. Com este código, você pode personalizar totalmente como interage com os popups do Elementor, seja adicionando animações, rastreando eventos ou implementando outra lógica personalizada.

Se achou essa dica útil, compartilhe com outros desenvolvedores e deixe suas ideias de personalização de popups nos comentários!

O post Manipule Eventos de Popups do Elementor Sem jQuery apareceu primeiro em Eduardo Villão - PT-BR.

No mundo atual, onde performance e experiência do usuário são prioridades, escolher a biblioteca certa é fundamental. Uma solução que minimize o tamanho do bundle e melhore a usabilidade em dispositivos móveis, enquanto oferece validações robustas, pode fazer uma enorme diferença no seu projeto.

Bibliotecas Populares e Suas Limitações

Se você já precisou de máscaras para formulários, provavelmente encontrou bibliotecas como Inputmask, Cleave.js e IMask.

Embora essas bibliotecas sejam excelentes, elas vêm com algumas desvantagens:

Inputmask

• Poderosa e flexível, mas aumenta significativamente o tamanho do bundle (~20 KB gzipado).
• Não possui recursos como o atributo inputmode para uma melhor experiência em dispositivos móveis.

Cleave.js

• Simples e com suporte a máscaras dinâmicas.
• No entanto, carece de validação embutida ou configurações automáticas como minlength e maxlength.

IMask

• Oferece ótimos recursos com um tamanho moderado (~5 KB gzipado).
• É poderosa, mas pode ser excessiva para casos de uso mais simples.

Embora essas ferramentas sejam sólidas, senti que havia espaço para uma solução mais leve, flexível e focada na usabilidade em dispositivos móveis.

Apresentando Masky.js

Foi por isso que criei o Masky.js: uma alternativa ultra-leve (apenas 1.3 KB gzipado) que prioriza a performance sem abrir mão da flexibilidade e dos recursos essenciais.

Super Leve:

• Com apenas 1.3 KB gzipado, é uma das soluções mais compactas do mercado.
• Ideal para projetos onde o tamanho do bundle é crítico.

Amigável para Mobile:

• Define automaticamente o atributo inputmode com base na máscara, garantindo uma melhor experiência de digitação em dispositivos móveis.

Totalmente Personalizável:

• Suporte a máscaras personalizadas com prefixos, sufixos e até máscaras reversas.

Validação Embutida:

• Suporte nativo para validação de CPF e CNPJ (documentos brasileiros).

Automação:

• Calcula e aplica automaticamente os atributos minlength e maxlength com base na máscara.

Sem Dependências:

• 100% Vanilla JS, fácil de integrar com qualquer ambiente ou framework.

Comparação

Recurso	Masky.js	Inputmask	Cleave.js	IMask
Tamanho (Gzipado)	1.3 KB	20 KB	8 KB	5 KB
Dependências	Nenhuma	Nenhuma	Nenhuma	Nenhuma
Máscaras Personalizáveis
Prefixos/Sufixos
Validação de CPF/CNPJ
inputmode para Mobile
Validação de Min/Max
Máscaras Reversas

Como Usar o Masky.js?

A simplicidade é fundamental. Basta adicionar o atributo data-mask, e o Masky.js cuida do resto — prefixos, sufixos, validações e até ajustes automáticos de inputmode e minlength.

<!-- Simple Phone Mask -->
<input type="text" data-mask="(00) 00000-0000" />

<!-- Add Prefix and Suffix -->
<input type="text" data-mask="000-000" data-mask-prefix="+55 " data-mask-suffix=" ext" />

<!-- Built-in CPF Validation -->
<input type="text" data-mask="000.000.000-00" data-mask-validation="cpf" />

<script src="https://cdn.jsdelivr.net/npm/masky-js/dist/masky.min.js"></script>

Confira mais detalhes de uso na documentação.

Experimente o Masky.js

Se você está procurando uma solução de máscaras rápida, flexível e focada na performance, experimente o Masky.js!

GitHub: Masky.js

npm: Masky.js

Adoraria ouvir seus comentários ou sugestões!

O post Masky.js: Uma Alternativa Leve ao Inputmask, Cleave.js e IMask apareceu primeiro em Eduardo Villão - PT-BR.

Adicionando as máscaras ao formulário

Primeiro, você precisa baixar o plugin do diretório oficial do WordPress e instalar/ativar no seu site: https://wordpress.org/plugins/form-masks-for-elementor/

Agora é bem simples, abra o Editor do Elementor e adicione o seu widget de formulário. Em campo campo, na aba “avançado” você verá um novo select para você selecionar a máscara que deseja usar.

Importante: por enquanto, as máscaras funcionam apenas nos campo do tipo “text”.

Ficou com dúvida? Veja mais detalhes no vídeo

Fácil né?! Conta ai nos comentários o que achou!

O post Como adicionar máscara nos campos do formulário do Elementor – plugin gratuito apareceu primeiro em Eduardo Villão - PT-BR.

Há algum tempo atrás precisei fazer isso e achei aqui nas minhas anotações esses dias, então resolvi compartilhar!

O WooCommerce já tem uma action prontinha pra gente utilizar, e ela recebe o parâmetro da id do pedido que foi atualizado. Com isso, sempre que o seu gateway de pagamento enviar a info que o pagamento está ok esse gancho vai ser executado e você pode pendurar nele a ação que quiser.

No exemplo abaixo estou fazendo a atualização de algum campo do usuário, mas você pode fazer o que quiser.

function checkPayment( $order_id ) {
    $order = new WC_Order( $order_id );  
    /**
    * Faça o que você quiser aqui!
    * Exemplo atualizando dados do usuário após a confirmação do pagamento.
    */
    $user_id = $order->get_user_id();
    update_user_meta( $user_id, 'field_name', 'field_value' );    
}

add_action( 'woocommerce_payment_complete', 'checkPayment' );

Importante: essa action é executada se o método de pagamento executar woocommerce_payment_complete() ou $order->payment_complete(). A maioria faz isso, pois é um comportamento padrão/recomendado ao registrar métodos de pagamento. Mas vale a pena o lembrete.

Testa ai e me conta nos comentários!

Até a próxima!

O post Executar ação após o pagamento ser confirmado no WooCommerce apareceu primeiro em Eduardo Villão - PT-BR.

Alguns temas, plugins e até page builders trazem algumas opções de customização de estilo mais avançada para seus formulários. Mas, nem sempre você encontra exatamente o que gostaria.  E isso não significa que você não irá conseguir o resultado que deseja. Pois, embora simples, o contact form 7 é um plugin muito completo. Mas vamos ao que interessa.

Centralizar o botão de enviar do Contact Form 7

Para fazer isso é muito simples. Você precisará apenas criar o seu formulário de contato da forma que desejas, e acrescentar o seguinte código no seu editor de CSS ou no editor do tema:

input.wpcf7-form-control.wpcf7-submit {
    display: block;
    margin: 0 auto;
}

Espero que tenha gostado.

Até a próxima.

O post Como centralizar o botão enviar do Contact Form 7 apareceu primeiro em Eduardo Villão - PT-BR.

Você já precisou utilizar o widget de tabs (ou Abas) do Elementor, e precisava centralizar as tabs, mas não achou essas opções no widget? Você não é o único!

Tenho recebido com certa frequência essa dúvidas, então, sem muita enrolação, vamos pra solução!

Como centralizar as tabs?

É simples, você vai precisar utilizar um código CSS que pode ser inserido no próprio widget do Elementor (se você estiver usando a versão PRO) ou no editor de CSS do seu tema.

.elementor-tabs-wrapper {
    display: flex;
    justify-content: center;
}

E esse será o resultado final:

Espero que tenha ajudado!

Até a próxima!

O post Como centralizar as tabs do Elementor? apareceu primeiro em Eduardo Villão - PT-BR.