ホームページ > ウェブフロントエンド > jsチュートリアル > WordPress_javascript スキルで JavaScript スクリプトを読み込む方法をすぐにマスターする

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

WBOY
リリース: 2016-05-16 15:24:57
オリジナル
1809 人が閲覧しました

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' );
ログイン後にコピー

概要

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート