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を実装してみてください。

関連QA

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

    A. jQueryが正しく読み込まれているか、ブラウザの開発者ツールで確認してください。また、JavaScriptのコードにエラーがないかどうかも確認しましょう。

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

    A. jQueryの公式サイトからダウンロードして、HTMLファイルに読み込むことができます。詳しくは、jQueryの公式サイトをご覧ください。

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

    A. jQueryの公式サイトには、豊富なドキュメントやチュートリアルが用意されています。ぜひ参考にしてみてください。 https://api.jquery.com/

その他の参考記事:jquery wordpress 動か ない