wordpress jquery 固定ページ

WordPressで固定ページにjQueryを読み込む方法【全手順解説】

WordPressの固定ページにjQueryを読み込む方法を、初心者向けに丁寧に解説します。header.phpを編集する方法に加え、プラグインを使わずに子テーマで安全に実装する方法も紹介します。

固定ページにjQueryを読み込むメリット

スライダーやアニメーションなど、動的なWebページを作成できる
よりリッチなユーザー体験を提供できる
サイトの表現力を高め、訪問者のエンゲージメントを向上させる

固定ページにjQueryを読み込む2つの方法

WordPressで固定ページにjQueryを読み込むには、主に以下の2つの方法があります。

1. header.phpにコードを追加する

WordPressのテーマファイルを直接編集する方法です。直接編集する場合は、子テーマを使用することを強くおすすめします。

メリット	デメリット
シンプルで簡単な方法	テーマのアップデートで上書きされる可能性があるため、子テーマの利用が必須

1-1. 子テーマの作成

子テーマの作成方法については、WordPress Codex - 子テーマを参照してください。

1-2. 子テーマのheader.phpにコードを追加

子テーマのheader.phpの</head>タグの直前に、以下のコードを追加します。

<script>
// jQueryの読み込み
// WordPressが提供するjQueryを使用
wp_enqueue_script( 'jquery' );
</script>

2. functions.phpにコードを追加する

WordPressのテーマファイルに記述するもう一つの方法です。こちらも子テーマを使用することが推奨されます。

メリット	デメリット
テーマのアップデートに影響されない	header.phpを編集するよりも少し複雑

2-1. 子テーマの作成

子テーマの作成方法については、WordPress Codex - 子テーマを参照してください。

2-2. 子テーマのfunctions.phpにコードを追加

子テーマのfunctions.phpに、以下のコードを追加します。

<?php
function my_scripts() {
  // jQueryの読み込み
  // WordPressが提供するjQueryを使用
  wp_enqueue_script( 'jquery' );

  // jQueryに依存するJavaScriptファイルの読み込み
  wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
?>

上記のコードでは、my-script.jsという名前のJavaScriptファイルを読み込んでいます。このファイルは、子テーマのjsフォルダ内に配置する必要があります。必要に応じて、ファイル名やパスを変更してください。

まとめ

WordPressで固定ページにjQueryを読み込む方法をご紹介しました。今回の内容を参考に、ぜひあなたのサイトにもjQueryを実装してみてください。

WordPressで固定ページにjQueryを読み込む方法【全手順解説】

固定ページにjQueryを読み込むメリット

固定ページにjQueryを読み込む2つの方法

1. header.phpにコードを追加する

1-1. 子テーマの作成

1-2. 子テーマのheader.phpにコードを追加

2. functions.phpにコードを追加する

2-1. 子テーマの作成

2-2. 子テーマのfunctions.phpにコードを追加

まとめ

関連QA

Q. jQueryを読み込んでも動かない場合は？

Q. WordPress以外でjQueryを読み込むには？

Q. jQueryの使い方についてもっと詳しく知りたい