Como o WordPress introduz corretamente o JavaScript?Carregamento personalizado de arquivos JS e CSS

用Site WordPressprogramadores, desenvolvendoPlug-in do WordPressOu ao personalizar um tema WordPress, alguns recursos de script JavaScript e CSS são referenciados.

• Normalmente, as pessoas usam links, tags de script diretamente para HTML.
• Na verdade, o WordPress possui funções e métodos sofisticados integrados para fazer referência a scripts.
• Portanto, usar as referências de métodos internos do WordPress é mais profissional e mais extensível.

O método de citação falho

Existem dois métodos comuns de citação, tudo bem, mas não é perfeito ou razoável.

Tipo 1:tags de link referem-se a arquivos CSS

• As tags de script aplicam-se a arquivos JS.Não detalhado aqui.

Tipo 2:Use a função wp_head

• A função wp_head é usada para gerar algum conteúdo personalizado ou definido pelo sistema.
• Às vezes, usamos o seguinte código para fazer referência a esse arquivo:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Copie o código acima no arquivo functions.php para fazer referência aos arquivos correspondentes.

Mecanismo de recursos de scripts de enfileiramento do WordPress

Como todos sabemos, o WordPress tem muitos plugins:

• Quase todos os plugins fazem referência a algum arquivo de recurso.
• Inevitavelmente, haverá conflitos entre os recursos referenciados por dois plugins, que se tornarão instáveis ​​e poderão afetar a eficiência.

Use a função wp_enqueue_script

• Para referenciar um recurso no WordPress você deve usarwp_enqueue_scriptUma função que tem a palavra enfileirar no nome da função enfileirada ou classificada.
• Com a maneira do WordPress de enfileirar recursos (Enqueue Scripts), as referências são separadas dos arquivos correspondentes e do código principal.
• Se o usuário deseja desabilitar o recurso, ele pode excluí-lo, modificá-lo e comentá-lo sem modificá-lo a partir do código principal.

Além disso, algumas bibliotecas comumente usadas, como jQuery, jQuery UI, etc., são incorporadas ao WordPress.

Podemos usar a função wp_enqueue_script para chamar a biblioteca interna diretamente, o que economiza código e uma especificação mais clara.

Se você usar esta função para referenciar seus próprios arquivos JS e CSS, você precisará usarwp_register_scriptA função registra um identificador (handle) e então usawp_enqueue_scriptA função chama o recurso correspondente a este sinalizador.

Como importar corretamente arquivos JS e CSS no WordPress?

O WordPress fornece métodos de importação sensatos para métodos JS e CSS.

Você pode usar o seguinte código para importar o arquivo plugin.css para o plugin ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

O acima usa a função wp_register_script para criar um recurso com o identificador plugin_stylesheet.

Em seguida, adicione suas solicitações enfileiradas awp_enqueue_scriptsações estão em funcionamento.

Embora o nome da função seja um script, ele não tem nada a ver com o tipo de arquivo de recurso e é válido tanto para CSS quanto para JS.

A função wp_register_script não é tão simples assim, ela pode ter cinco parâmetros:

1) $ handle:Identificador de recurso.

• 由wp_enqueue_scripttransferir.

2) $src:A localização do recurso.

• Endereços relativos ou absolutos usam funções internas do WordPress para obter endereços, etc.
• ComumPosicionamentofunção templugins_url,get_template_directory_uriEspere

3) $deps:contar com.

• Se você está se referindo ao plugin jQuery e precisa confiar no jQuery para construir, você precisa preencher jQuery.
• Observe que ele é passado como uma matriz.

4) $ver:Versão do recurso, opcional.

5) $in_footer:Você coloca no fundo?

• Normalmente, os arquivos JS devem ser colocados na parte inferior da página, você pode definir esse parâmetro como True, deixar em branco ou False para sair no topo.

Vejamos um exemplo de referência de arquivo JavaScript mais completo ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

Os temas do WordPress usam wp_enqueue_script para importar recursos

Programadores no desenvolvimento de temas WordPress, usamwp_enqueue_scriptImportar recursos.

• Os exemplos acima são exemplos de recursos referenciados para o desenvolvimento de plugins do WordPress.
• O método referenciado no tópico é semelhante.

A principal diferença é usar a função correspondente para obter o diretório do tema para obter o endereço do arquivo de recurso sob o tema.

você pode usarget_template_directory_urifunção para obter o diretório do tema atual.

Se você estiver usando um tema filho, precisará usarget_stylesheet_directory_uriA função obtém o diretório do tema pai para obter os recursos correspondentes.