5

Estou tentando montar um template Wordpress. O que não consigo fazer ainda é chamar o script no tema filho que eu criei. O CSS deu certo, porém os scripts não. São vários, e me perdi em como colocá-los no functions.php.

Estou tentando montar o template com um framework já pronto que é o Metro UI CSS. Já pesquisei bastante e não entendi muito bem estas dicas, porque no meu caso são vários scripts.

3 Respostas 3

4

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
    
  2. 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:

  3. 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

2

Bem, não tenho certeza se entendi direito sua dúvida, mas se entendi, isso vai te resolver.

Use o wp_register_script:

wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');

ou então crie um método qualquer com o corpo como isso, no arquivo functions.php (na raiz do template):

function loadJS(){
    echo '<script type="text/javascript" src="'.bloginfo('stylesheet_directory').'/js/jquery.form.js"></script>';
}

e faça a chamada dele após sua declaração

loadJS();
1
  • Não deu certo, aqui o meu arquivo functions.php function my_init_method() { wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'); wp_register_script( 'widget.min', get_template_directory_uri() . '/js/jquery/jquery.widget.min.js'); wp_register_script( 'metro.min', get_template_directory_uri() . '/js/metro/metro.min.js'); } add_action('init', 'my_init_method');
    – Edizzz
    Commented 21/02/2014 às 2:25
0

Zuul, funcionou aqui usei o codigo

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' );

e meu codigo dentro do arquivo functions.php em javascript q estava dando conflito com outro codigo javascript usando jquery funcionou normalmente no wordpress. obrigado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .