Skip to main content
1 de 4
Zuul
  • 35,8mil
  • 21
  • 99
  • 190

#Resposta

Existem algumas coisas a ter em conta para uma correcta inclusão de ficheiro de script na página:

  1. Ficheiro correcto

O ficheiro functions.php onde deves tratar da inclusão dos teus ficheiros de script está localizado em:

    /themes/nome-do-tema/functions.php
  1. jQuery a utilizar

Não deves remover o jQuery que já vem com o WordPress a não ser que tenhas a certeza absoluta que não vais quebrar alguma coisa por estares a alterar a versão para a que pretendes incluir:

  1. A função adequada para recolheres o caminho para o tema e sub-temas de forma a que exista uma atenção ao tema-pai e tema-filho é a get_stylesheet_directory_uri:

Retrieve stylesheet directory URI for the current theme/child theme. Checks for SSL.

Que traduzido:

Recolhe o caminho para a folha de estilos do tema/tema-filho actual. Verifica a presença de SSL.

Tendo em conta estas atenções, o teu código com base no comentário que deixaste na resposta do @Victor Mendonça ficaria da seguinte forma:

/**
 * Função onde adicionamos à lista de inclusões
 * todos os scripts que pretendemos incluir.
 */
function my_scripts() {

  // script 01
  wp_enqueue_script(
    'widget_min',
    get_stylesheet_directory_uri() . '/js/jquery/jquery.widget.min.js',
    array('jquery')
  );

  // script 02
  wp_enqueue_script(
    'metro_min',
    get_stylesheet_directory_uri() . '/js/metro/metro.min.js',
    array('jquery')
  );

  // ...
}

// adicionamos uma acção que chama a nossa função
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Nota:
Deverá funcionar assumindo que tens os ficheiros de script no local onde estás a indicar que eles estão e assumindo que já tens o jQuery presente.

Podes também verificar a saída dos caminhos em uso para garantir que estão a apontar para o local/ficheiro pretendido:

// caminho recolhido
echo get_stylesheet_directory_uri();

// caminho recolhido + restante até ao teu ficheiro
echo get_stylesheet_directory_uri() . '/js/metro/metro.min.js';

A função wp_enqueue_script é a responsável e recomendada para incluir na página ficheiros de script:

#Descrição

Links a script file to the generated page at the right time according to the script dependencies, if the script has not been already included and if all the dependencies have been registered. You could either link a script with a handle previously registered using the wp_register_script() function, or provide this function with all the parameters necessary to link a script.

This is the recommended method of linking JavaScript to a WordPress generated page.

Que traduzido:

Vincula um arquivo de script à página gerada no momento certo de acordo com as dependências do mesmo, caso o script não tenha sido incluído, e se todas as dependências foram registadas. Você poderia incluir um script com um identificador anteriormente registado usando o wp_register_script function (), ou fornecer esta função com todos os parâmetros necessários para incluir um script.

Este é o método recomendado para incluir JavaScript numa página gerada pelo WordPress.

#Parâmetros

A mesma aceita uma série de parâmetros para melhor controlarmos como o script deve ser incluído:

 <?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?> 

Parâmetros:

  • $handle

Nome utilizado como um identificado do script.

  • $src

Caminho para o ficheiro que contém o script.

  • $deps

Matrix com indicação das dependências que este script tem, um exemplo será:

    array('jquery') // indica que o script precisa de ter o jquery carregado para funcionar
  • $ver

Campo facultativo para indicar a versão do script.

  • $in_footer

Campo facultativo para indicar se o script ao invés de estar dentro do HEAD, deverá estar imediatamente antes do fecho do BODY.

#Exemplo de Utilização

Um exemplo simples sobre a utilização desta função:

/**
 * Função onde adicionamos à lista todos os scripts
 * que pretendemos incluir.
 */
function my_scripts() {

  wp_enqueue_script(
    'nome-do-script',
    get_template_directory_uri() . '/js/meu_ficheiro.js',
    array('jquery'),
    '1.0.0',
    true 
  );
}

// adicionamos uma acção que chama a nossa função
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Créditos da resposta

- Resposta dada pelo @b__ no SOEN
- Resposta dada pelo @Chip Bennett no WordPress
- Documentação do WordPress para add_action
- Documentação do WordPress para get_stylesheet_directory_uri
- Documentação do WordPress para wp_enqueue_script
- Don’t Dequeue WordPress’ jQuery da autoria de Eric Mann

Zuul
  • 35,8mil
  • 21
  • 99
  • 190