Como Incluir CSS e JS em Plugins WordPress da Forma Correta

Ao desenvolver plugins no WordPress, é comum precisar incluir arquivos de estilo (CSS) e scripts (JS) para personalizar o visual ou adicionar funcionalidades. A forma correta de fazer isso é usando as funções nativas wp_enqueue_style() e wp_enqueue_script().

✅ Estrutura Recomendada do Plugin

Antes de tudo, organize seus arquivos da seguinte forma:

/meu-plugin/
    meu-plugin.php
    /assets/
        /css/
            style1.css
            style2.css
        /js/
            script1.js
            script2.js

🎨 Como Incluir Arquivos CSS

Use wp_enqueue_style() para carregar os estilos:

function meu_plugin_enqueue_styles() {
    wp_enqueue_style('meu-plugin-style-1', plugin_dir_url(__FILE__) . 'assets/css/style1.css');
    wp_enqueue_style('meu-plugin-style-2', plugin_dir_url(__FILE__) . 'assets/css/style2.css');
}
add_action('wp_enqueue_scripts', 'meu_plugin_enqueue_styles');
// Ou para o admin:
// add_action('admin_enqueue_scripts', 'meu_plugin_enqueue_styles');

Explicação:

• plugin_dir_url(__FILE__) retorna o caminho público da pasta do plugin.
• wp_enqueue_style() carrega o CSS com um identificador único.

⚙️ Como Incluir Arquivos JS

Use wp_enqueue_script() para carregar scripts JavaScript:

function meu_plugin_enqueue_scripts() {
    wp_enqueue_script('meu-plugin-script-1', plugin_dir_url(__FILE__) . 'assets/js/script1.js', array('jquery'), null, true);
    wp_enqueue_script('meu-plugin-script-2', plugin_dir_url(__FILE__) . 'assets/js/script2.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'meu_plugin_enqueue_scripts');
// Ou para o admin:
// add_action('admin_enqueue_scripts', 'meu_plugin_enqueue_scripts');

Parâmetros úteis:

• Dependências (como 'jquery')
• Versão (pode ser null)
• true: carrega no rodapé (melhora performance)

---

🧩 Separando Admin e Front-End

Para evitar conflitos e garantir performance, separe o carregamento dos arquivos para admin e frontend:

function wpm_enqueue_styles_admin() {
    wp_enqueue_style('wpm-admin-style', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'wpm_enqueue_styles_admin');

function wpm_enqueue_styles_front() {
    wp_enqueue_style('wpm-front-style', plugin_dir_url(__FILE__) . 'assets/css/front-style.css');
}
add_action('wp_enqueue_scripts', 'wpm_enqueue_styles_front');

🔐 Carregar Arquivos Apenas em Páginas Específicas

Quer carregar CSS apenas quando o parâmetro de URL for específico? Use $_GET com condição:

function wpm_custom_login_enqueue_css() {
    if (isset($_GET['page']) && $_GET['page'] === 'gerar-token-de-acesso') {
        wp_enqueue_style('wpm-custom-login-css', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css', array(), '1.0');
    }
}
add_action('admin_enqueue_scripts', 'wpm_custom_login_enqueue_css');

🧪 Testando o Carregamento

1. Frontend: abra o site e use F12 → aba “Network” → filtre por “CSS” ou “JS”.
2. Admin: navegue até páginas do painel e repita o processo.

---

⚠️ Boas Práticas

• Evite carregar jQuery duplicado. Use-o como dependência.
• Use true no wp_enqueue_script() para carregar no rodapé.
• Use is_admin() se quiser condicionar arquivos apenas para o painel.

---

🧰 Exemplo Prático Completo

// FRONT-END
function wpm_enqueue_front_assets() {
    wp_enqueue_style('wpm-front-style', plugin_dir_url(__FILE__) . 'assets/css/front-style.css');
    wp_enqueue_script('wpm-form-cadastro', plugin_dir_url(__FILE__) . 'assets/js/wpm-form-cadastro.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpm_enqueue_front_assets');

// ADMIN
function wpm_enqueue_admin_assets() {
    wp_enqueue_style('wpm-admin-style', plugin_dir_url(__FILE__) . 'assets/css/admin-style.css');
}
add_action('admin_enqueue_scripts', 'wpm_enqueue_admin_assets');