WordPress はどのように JavaScript を適切に導入していますか?JS および CSS ファイルのカスタム読み込み

用WordPressのウェブサイトプログラマー、開発中WordPressプラグインまたは、WordPress テーマをカスタマイズするときに、一部の JavaScript および CSS スクリプト リソースが参照されます。

• 通常、人々は link や script タグを直接 HTML に使用します。
• 実際、WordPress には、スクリプトを参照するための高度な関数とメソッドが組み込まれています。
• そのため、WordPress の組み込みメソッド参照を使用すると、より専門的で拡張性が高くなります。

欠陥のある引用方法

XNUMX つの一般的な引用方法があります。

タイプ1：リンクタグは CSS ファイルを参照します

• スクリプト タグは JS ファイルを適用します。ここでは詳しく説明しません。

タイプ2：wp_head 関数を使用する

• wp_head 関数は、カスタムまたはシステム定義のコンテンツを出力するために使用されます。
• このファイルを参照するために、次のコードを使用することがあります。

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

• 上記のコードを functions.php ファイルにコピーして、対応するファイルを参照します。

WordPress エンキュー スクリプトのリソース メカニズム

ご存知のように、WordPress には多くのプラグインがあります。

• ほとんどすべてのプラグインは、何らかのリソース ファイルを参照します。
• 必然的に、XNUMX つのプラグインによって参照されるリソース間で競合が発生し、不安定になり、効率に影響を与える可能性があります。

wp_enqueue_script 関数を使用する

• WordPress でリソースを参照するには、使用する必要がありますwp_enqueue_scriptエンキューまたはソートされた関数の名前に単語 enqueue が含まれる関数。
• リソースをエンキューするこの WordPress の方法 (エンキュー スクリプト) を使用すると、参照は対応するファイルとコア コードから分離されます。
• ユーザーがリソースを無効にしたい場合は、コアコードから変更せずに削除、変更、およびコメントできます。

また、jQuery、jQuery UI などの一般的に使用されるいくつかのライブラリが WordPress に組み込まれています。

wp_enqueue_script 関数を使用して、組み込みライブラリを直接呼び出すことができます。これにより、コードが節約され、仕様がより明確になります。

この関数を使用して独自の JS および CSS ファイルを参照する場合は、wp_register_scriptこの関数は、識別子 (ハンドル) を登録してから使用します。wp_enqueue_script関数は、このフラグに対応するリソースを呼び出します。

WordPress に JS および CSS ファイルを適切にインポートする方法は?

WordPress は、JS および CSS メソッドの適切なインポート メソッドを提供します。

次のコードを使用して、plugin.css ファイルをプラグインにインポートできます ▼

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

上記は wp_register_script 関数を使用して、識別子 plugin_stylesheet を持つリソースを作成します。

次に、キューに入れられたリクエストをwp_enqueue_scriptsアクションが実行されます。

関数名はスクリプトですが、リソースファイルの種類に関係なく、CSS、JSどちらでも有効です。

wp_register_script 関数は実際にはそれほど単純ではなく、XNUMX つのパラメーターを持つことができます。

1) $ハンドル:リソース識別子。

• 由wp_enqueue_script移行。

2) $ソース:リソースの場所。

• 相対アドレスまたは絶対アドレスは、WordPress 組み込み関数を使用してアドレスなどを取得します。
• 一般ポジショニング関数はplugins_url、get_template_directory_uriなどなど。

3) $deps:頼る。

• jQuery プラグインについて言及していて、jQuery ビルドに依存する必要がある場合は、jQuery に記入する必要があります。
• 配列として渡されることに注意してください。

4) $ver:リソース バージョン、オプション。

5) $in_footer:一番下に入れますか？

• 通常、JS ファイルはページの下部に配置する必要があります。このパラメーターを True に設定し、空白のままにするか、False に設定して上部に出力することができます。

より完全な JavaScript ファイルの参照例を見てみましょう ▼

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

WordPress テーマは wp_enqueue_script を使用してリソースをインポートします

WordPressテーマ開発のプログラマー、使用wp_enqueue_scriptリソースをインポートします。

• 上記の例は、WordPress プラグイン開発の参照リソースの例です。
• このトピックで参照されている方法も同様です。

主な違いは、対応する関数を使用してテーマ ディレクトリを取得し、テーマの下のリソース ファイル アドレスを取得することです。

あなたが使用することができますget_template_directory_uri現在のテーマ ディレクトリを取得する関数。

子テーマを使用している場合は、使用する必要がありますget_stylesheet_directory_uriこの関数は、親テーマのディレクトリを取得して、対応するリソースを取得します。