WordPress_javascript スキルで JavaScript スクリプトを読み込む方法をすぐにマスターする

WordPress でスクリプト (CSS および JS、以下同じ) ファイルを読み込むには、ほとんどの人が header.php ファイルにリンク タグを直接追加するか、wp_head フックを介して head タグにリンク タグを直接追加します。 . この行為は公式の規範に反しています。

標準のスクリプト読み込み方法は、WordPress が公式に提供している機能を使用する必要があります (後述します)。1 つ目は、より安全で管理が容易であることです。はより便利で高速になり、テーマだけでなくスクリプトやプラグインも使用でき、スクリプトの管理、マウントの順序や場所の調整、その他のコンテンツも実行できます。

どのフックにロードされますか?

読み込みスクリプト関数を呼び出す前に、まず関数がどのフックで実行されるかを決定する必要があります。一般的に使用されるスクリプト読み込みフックは 4 つあります。つまり、wp_enqueue_scripts (フォアグラウンドでの読み込み)、admin_enqueue_scripts (バックグラウンドでの読み込み)、login_enqueue_scripts (ログインページでの読み込み（load）とinit（グローバル読み込み）。

最も一般的に使用されるのはおそらく wp_enqueue_scripts です。ここにマウントすると、スクリプトはフォアグラウンドでのみロードされます。

JavaScript スクリプトをロードします

たとえば、フォアグラウンドに JS をロードしたいとします。これは、テーマのルート ディレクトリの JS フォルダーにある Themes.js ファイルです。まず、wp_register_script() 関数を使用してスクリプト ライブラリに JS を追加し (スクリプトを登録し)、次に wp_enqueue_script() 関数を使用してスクリプトをマウントする必要があります。

function Bing_enqueue_scripts(){
  wp_register_script( 'themes_js', get_bloginfo( 'template_directory' ) . '/js/themes_js.js' );//注册 ID 为 themes_js 的 JS 脚本
  wp_enqueue_script( 'themes_js' );//挂载脚本
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

CSS スクリプトをロード

function Bing_enqueue_scripts(){
  wp_register_style( 'style', get_bloginfo( 'template_directory' ) . '/style.css' );
  wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

概要

この記事では、スクリプトのロード方法についてのみ簡単に説明します。スクリプト キュー メカニズムを適切に使用すると、プログラムの柔軟性が高まり、効率が向上します。