Qual é a maneira preferida de adicionar arquivos javascript personalizados ao site?

67

Eu já adicionei meus scripts, mas queria saber a maneira preferida.
Acabei de colocar uma tag <script> diretamente no header.php do meu modelo.

Existe um método preferido de inserir arquivos js externos ou personalizados?
Como eu ligaria um arquivo js a uma única página? (Eu tenho a home page em mente)

    
por naugtur 19.08.2010 / 10:18
fonte

4 respostas

78

Use wp_enqueue_script() no seu tema

A resposta básica é usar wp_enqueue_script() em um gancho wp_enqueue_scripts para o front end admin_enqueue_scripts para admin . Pode parecer algo como isto (que assume que você está chamando do arquivo functions.php do seu tema; observe como eu faço referência ao diretório da folha de estilo):

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js" );
}

Esse é o básico.

Scripts pré-definidos e múltiplos dependentes

Mas digamos que você queira incluir o jQuery e o jQuery UI Sortable da lista de scripts padrão incluídos no WordPress e você quer que seu script dependa deles? Fácil, inclua os dois primeiros scripts usando as identificações predefinidas definidas no WordPress e para o seu script, forneça um terceiro parâmetro para wp_enqueue_script() , que é uma matriz das identificações de script usadas por cada script, assim:

<?php
add_action( 'wp_enqueue_scripts', 'mysite_enqueue' );

function mysite_enqueue() {
  $ss_url = get_stylesheet_directory_uri();
  wp_enqueue_script( 'mysite-scripts', "{$ss_url}/js/mysite-scripts.js", array( 'jquery', 'jquery-ui-sortable' ) );
}

Scripts em um plug-in

E se você quiser fazer isso em um plug-in? Use a função plugins_url() para especificar o URL do seu arquivo Javascript:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue' );

function my_plugin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url('/js/my-script.js',__FILE__), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION );
}

Versionando seus scripts

Observe também que acima atribuímos ao nosso plug-in um número de versão e o passou como um quarto parâmetro para wp_enqueue_script() . O número da versão é gerado na origem como argumento de consulta na URL para o script e serve para forçar o navegador a baixar novamente o arquivo possivelmente em cache se a versão for alterada.

Carregar scripts somente nas páginas onde for necessário

A 1ª regra do Web Performance diz para Minimizar solicitações de HTTP para que, sempre que possível você deve limitar os scripts para carregar somente onde necessário. Por exemplo, se você precisar apenas do seu script no admin, limite-o às páginas de administração usando o admin_enqueue_scripts hook:

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION );
}

Carregue seus scripts no rodapé

Se seus scripts são um daqueles que precisam ser carregados no rodapé, há um quinto parâmetro de wp_enqueue_script() que diz ao WordPress para atrasá-lo e colocá-lo no rodapé (supondo que seu tema não tenha se comportado mal e que, de fato, chama o gancho wp_footer como todos os bons temas do WordPress devem ):

<?php
define( 'MY_PLUGIN_VERSION', '2.0.1' );
add_action( 'admin_enqueue_scripts', 'my_plugin_admin_enqueue' );

function my_plugin_admin_enqueue() {
  wp_enqueue_script( 'my-script', plugins_url( '/js/my-script.js', __FILE__ ), array( 'jquery', 'jquery-ui-sortable' ), MY_PLUGIN_VERSION, true );
}

Controle granular refinado

Se você precisa de um controle mais refinado do que o Ozh tem um ótimo artigo intitulado Como: Carregar Javascript com o seu Plugin WordPress que detalhes mais.

Desabilitando scripts para obter controle

Justin Tadlock tem um belo artigo intitulado Como desativar scripts e estilos caso você queira:

  1. Combine vários arquivos em arquivos únicos (a milhagem pode variar com o JavaScript aqui).
  2. Carregue os arquivos somente nas páginas em que usamos o script ou o estilo.
  3. Pare de usar o! important em nosso arquivo style.css para fazer ajustes simples de CSS.

Passando Valores do PHP para o JS com wp_localize_script()

Em seu blog Vladimir Prelovac tem um ótimo artigo intitulado Melhor prática para adicionar código JavaScript a plugins do WordPress , onde ele discute o uso de wp_localize_script() para permitir que você defina o valor de variáveis em seu PHP do lado do servidor para ser usado posteriormente em seu Javascript do lado do cliente.

Controle realmente refinado com wp_print_scripts()

E, finalmente, se você precisar de um controle realmente refinado, você pode olhar para wp_print_scripts() como discutido em Beer Planet em um post intitulado Como incluir CSS e JavaScript condicionalmente e somente quando necessário pelos posts .

Epiloque

É sobre isso para Melhores Práticas de inclusão de arquivos Javascript com o WordPress. Se eu perdi alguma coisa (o que eu provavelmente tenho) não deixe de me informar nos comentários para que eu possa adicionar uma atualização para futuros viajantes.

    
por MikeSchinkel 19.08.2010 / 12:03
fonte
11

Para complementar a maravilhosa ilustração do Mike sobre o uso de enfileiramentos, gostaria de salientar que os scripts incluídos como dependências não precisam ser enfileirados ...

Vou usar o exemplo no cabeçalho Scripts em um plug-in na resposta de Mike.

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('jquery-ui-sortable');
    wp_enqueue_script('my-script',plugins_url('/js/my-script.js',__FILE__),array('jquery','jquery-ui-sortable'),MY_PLUGIN_VERSION);
}

Isso pode ser reduzido para ler ...

define('MY_PLUGIN_VERSION','2.0.1');

add_action( 'wp_enqueue_scripts', 'my_plugin_enqueue_scripts' );
function my_plugin_enqueue_scripts() {
    wp_enqueue_script('my-script', plugins_url( '/js/my-script.js', __FILE__ ), array('jquery','jquery-ui-sortable'), MY_PLUGIN_VERSION);
}

Quando você configura dependências, o WordPress irá encontrá-las e enfileirá-las prontas para o seu script, para que você não precise fazer chamadas independentes para esses scripts.

Além disso, alguns de vocês podem estar se perguntando se a configuração de várias dependências pode fazer com que os scripts sejam exibidos na ordem errada, aqui, deixe-me dar um exemplo

wp_enqueue_script( 'first-script', 'example/path/example_script_1.js', array('second-script','third-script') );

Se o script dois for dependente do script três (ou seja, o script três deve ser carregado primeiro), isso não importaria, o WordPress determinará as prioridades de enfileiramento desses scripts e os exibirá na ordem correta. funcionou automagicamente para você pelo WordPress.

    
por t31os 13.11.2010 / 13:04
fonte
0

Para pequenos pedaços de scripts, que você pode não querer incluir em um arquivo separado, por exemplo, porque eles são gerados dinamicamente, o WordPress 4.5 e outras ofertas wp_add_inline_script . Esta função basicamente trava o script para outro script.

Digamos, por exemplo, que você esteja desenvolvendo um tema e deseje que seu cliente possa inserir seus próprios scripts (como o Google Analytics ou o AddThis) por meio da página de opções. Você poderia então usar wp_add_inline_script para pegar esse script no seu arquivo js principal (digamos mainjs ) assim:

$custom_script = get_option('my-script')
if (!empty($custom_script)) wp_add_inline_script ('mainjs', $custom_script);
    
por cjbj 31.10.2016 / 09:51
fonte
0

Minha maneira preferida é obter um bom desempenho, portanto, em vez de usar wp_enqueue_script , uso o HEREDOC com a API de Fetch para carregar tudo de forma assíncrona em paralelo:

$jquery_script_path = '/wp-includes/js/jquery/jquery.js?ver=1.12.4';
$jquery_dependent_script_paths = [
  get_theme_file_uri( '/assets/js/global.js' ),
  get_theme_file_uri( '/assets/js/jquery.scrollTo.js' ),
  get_theme_file_uri( '/assets/js/skip-link-focus-fix.js' ),
  get_theme_file_uri( '/assets/js/navigation.js' )
];
$jquery_dependent_script_paths_json = json_encode($jquery_dependent_script_paths);
$inline_scripts = <<<EOD
<script>
(function () {
  'use strict';
  if (!window.fetch) return;
  /**
   * Fetch Inject v1.6.8
   * Copyright (c) 2017 Josh Habdas
   * @licence ISC
   */
  var fetchInject=function(){"use strict";const e=function(e,t,n,r,o,i,c){i=t.createElement(n),c=t.getElementsByTagName(n)[0],i.type=r.blob.type,i.appendChild(t.createTextNode(r.text)),i.onload=o(r),c?c.parentNode.insertBefore(i,c):t.head.appendChild(i)},t=function(t,n){if(!t||!Array.isArray(t))return Promise.reject(new Error("'inputs' must be an array"));if(n&&!(n instanceof Promise))return Promise.reject(new Error("'promise' must be a promise"));const r=[],o=n?[].concat(n):[],i=[];return t.forEach(e=>o.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{r.push({text:e[0],blob:e[1]})})}))),Promise.all(o).then(()=>{return r.forEach(t=>{i.push({then:n=>{"text/css"===t.blob.type?e(window,document,"style",t,n):e(window,document,"script",t,n)}})}),Promise.all(i)})};return t}();
  fetchInject(
    $jquery_dependent_script_paths_json
  , fetchInject([
    "{$jquery_script_path}"
  ]));
})();
</script>
EOD;

E, em seguida, insira-os na cabeça, às vezes junto com estilos como este:

function wc_inline_head() {
  global $inline_scripts;
  echo "{$inline_scripts}";
  global $inline_styles;
  echo "{$inline_styles}";
}

Resultando na cascata que se parece com isso, carregando tudo de uma vez, mas controlando a ordem de execução:

Observação: isso requer o uso da API de busca, que não está disponível em todos os navegadores.

    
por Josh Habdas 17.04.2017 / 22:22
fonte