WordPressにヘッダーとフッターのコードを追加する方法(簡単な方法)

WPBeginnerでは、WordPressサイトのヘッダーまたはフッターセクションにコードを挿入する必要がある多くのチュートリアルを作成しています。多くのユーザーにとって、WordPressにはこれらの領域にコードを挿入する組み込みの方法がないため、これは威圧的に感じられるかもしれません。

ただし、ヘッダーとフッターにコードを追加することは、Google Analytics、Google Search Console、Facebook Pixelなどの一般的なサービスを統合するために不可欠です。また、他のWordPressチュートリアルの一部としてカスタムCSSまたはJavaScriptを追加する必要がある場合もあります。

良いニュースは?テーマファイルを直接編集したり、サイトを壊してしまう心配をする必要はありません。無料のWPCodeプラグインを使用すれば、初心者でも安全かつ簡単にコードスニペットをヘッダーまたはフッターに追加できます。

このガイドでは、WordPressでヘッダーとフッターのコードを追加する方法をステップバイステップで説明します。

WordPressにヘッダーとフッターのコードを追加する方法

WordPressのヘッダーとフッターコードを追加する最良の方法

WordPressのヘッダーとフッターにコードを追加したい場合、3つの可能な解決策があります。

  1. テーマのheader.phpおよびfooter.phpファイルを編集して手動で
  2. テーマに組み込まれているヘッダーとフッターコード機能を使用して
  3. ヘッダーとフッターのWordPressプラグインを使用する

最初​​のオプションは初心者向けではありません。なぜなら、header.phpおよびfooter.phpファイルを直接編集して、ヘッダーとフッターのコードを手動で追加する必要があるからです。

この方法のもう一つの欠点は、テーマをアップデートするとコードが削除されてしまうことです。

2番目のオプションは、テーマに組み込まれた機能を使用することです。Elegant Themesのような一部のWordPressテーマでは、WordPressのヘッダーとフッターにコードやスクリプトをすばやく追加するための組み込みオプションが提供されています。

テーマに組み込まれた機能を使用している場合、それは安全で簡単なソリューションのように思えます。しかし、テーマを変更すると、ウェブサイトに追加されたすべてのコードスニペットが失われます。これには、Google Search Consoleでのサイト認証、Google Analyticsによるウェブサイト分析などが含まれます。

そのため、ヘッダーとフッターのプラグインを使用するという3番目のオプションを常にユーザーに推奨しています。このオプションは、WordPressにヘッダーとフッターのコードを追加する最も簡単で安全な方法です。

読者の皆様からの多くのリクエストを受け、私たちのチームはWPCodeプラグインを開発しました。

WPCode

WPCode(旧Insert Headers and Footers)は、100%無料のコードスニペットプラグインです。これを使用して、WordPressのヘッダーとフッターに簡単にコードを追加できます。

WPCodeプラグインを使用する利点をいくつかご紹介します。

1. 🚀 簡単、高速、整理整頓: サイトのヘッダーとフッターにコードを簡単かつ迅速に追加できます。さらに、すべてのフッターコードとヘッダーコードを1か所に保存できるため、整理整頓できます。

2. ✅ エラーを防ぎます: スマートコードスニペット検証により、テーマファイルを直接編集した場合に発生する可能性のあるエラーを防ぐことができます。

3. 😌 テーマを気にせずアップグレードまたは変更できます: プラグインはヘッダーとフッターのコードを別の場所に保存するため、コードが消去される心配なく、テーマを更新または変更できます。

ヘッダーとフッターのスクリプト以外にも、WPCodeを使用して、テーマファイルを編集せずにカスタムPHP、JavaScriptCSS、HTML、およびテキストコードスニペットを簡単に挿入できます。

さらに、WPCodeにはスニペットライブラリが組み込まれており、最も役立つWordPressコードスニペットを見つけることができます。これにより、自動アップデート、REST API、XML-RPC、コメントなど、不要なWordPress機能をすばやく削除できます。

注意: 無料のWPCodeプラグインには、WordPressにヘッダーとフッターのコードを追加するために必要なものがすべて含まれています。ただし、プライベートクラウドスニペットライブラリ、コンバージョンピクセル、スケジュールされたスニペットなどの高度な機能が必要な場合は、WPCode Proにアップグレードできます。

詳細については、WordPressにカスタムコードを簡単に追加する方法に関するガイドをお読みください。

それでは、WPCodeプラグインを使用してWordPressにヘッダーとフッターのコードを簡単に追加する方法を見てみましょう。

WordPressのヘッダーとフッターにコードを追加する

まず最初に行うべきことは、無料のWPCodeプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

プラグインを有効化したら、WordPress管理パネルからCode Snippets » Header & Footerに移動します。その後、「Header」ボックスが表示され、コードを追加できます。

WPCodeを使用してヘッダーとフッターにコードを追加する

下にスクロールすると、「本文」と「フッター」のボックスも表示されます。

ヘッダーとフッターのスクリプトボックス WPCode

コードを3つのボックスのいずれかに貼り付けるだけです。完了したら、設定を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。

プラグインは、コードをWordPressサイトのそれぞれの場所に自動的に読み込むようになります。

いつでも不要なコードを編集して削除できます。

プラグインは常にインストールおよび有効化しておく必要があります。プラグインを無効化すると、すべてのカスタムコードがサイトに追加されなくなります。

プラグインを誤って無効化しても、コードはWordPressデータベースに安全に保存されます。プラグインを再インストールまたは再アクティブ化するだけで、コードが再び表示されるようになります。

注意: 変更を保存した後、コードがウェブサイトのフロントエンドに正しく表示されるように、WordPressのキャッシュをクリアする必要がある場合があります。

初心者の多くがWPCodeプラグインを使用する最大の理由として、ウェブサイトにGoogleアナリティクスを追加することが挙げられます。その場合、無料のMonsterInsightsプラグインの使用をお勧めします。

MonsterInsightsは、WordPress向けの最高のGoogleアナリティクスプラグインです。数回のクリックでGoogleアナリティクスを適切に設定でき、WordPressダッシュボード内で役立つ統計情報を表示できます。

WordPressにGoogleアナリティクスをインストールする方法については、こちらのチュートリアルをご覧ください。WordPressにGoogleアナリティクスをインストールする方法

動画チュートリアル

テキストの説明に従うのが好きでない場合は、WordPressにヘッダーとフッターのコードを追加する方法に関するビデオチュートリアルをご覧ください:

WPBeginnerを購読する

この記事で、WordPressにヘッダーとフッターのコードを簡単に追加する方法を学んでいただけたことを願っています。また、WordPressサイトにコードを表示する方法や、おすすめのWordPress開発ツールに関するガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

267 CommentsLeave a Reply

    • 特定のページでヘッダーが表示されない件については、ページ固有のテンプレートが原因である可能性も考えられますので、ご利用のテーマのサポートにご確認ください。

      管理者

  1. プラグインをありがとうございます!サイトにFBピクセルを追加するために使用しましたが、ランディングページがあり、訪問者が詳細を確認した後のサンキューページで別のピクセルイベント(リード)が必要です。プラグインを使用して特定のページにスクリプトを追加できますか?

    • 現時点では、当面の間、プラグインはデフォルトですべてのページにコードを追加します。

      管理者

  2. こんにちは、フッターのフォントサイズを変更する方法はありますか?
    免責事項のテキストを大量に入力してみましたが、大きすぎます。

    事前に感謝します!

  3. ヘッダーとフッター挿入プラグインを使用しました。とても簡単で役立ちました!本当にありがとうございます!

    • WordPress.comサイトを指している場合、現在無料プランではAdsenseを許可していません。

      管理者

  4. ウェブサイトをAdSenseに接続してアカウントを設定しようとしています。
    今のところ、Googleはコードを確認していません。

    • サイトのキャッシュをクリアしたことを確認してください。最も一般的な理由の一つです。

      管理者

  5. ヘッダー/フッタープラグインのインストールが無料であることに関するメッセージ/広告を変更する必要があります。ページのビジネスプランを購入しない限り、無料ではありません。

  6. 1つのヘッダーまたはフッターセクションにいくつのコードを追加できますか?つまり、FacebookコードやGoogleコードなどのコードを1つのヘッダーセクションに2つまたは3つ使用できますか?

  7. PHPをヘッダーセクションに追加できますか?Yoastのパンくずリストコードをヘッダーに追加して、テーマファイルを編集する必要がないようにしたいのですが。

  8. プラグインに、例えば
    AdSenseコードやYouTube認証コードのように、複数のヘッダーコードを追加できますか?

  9. こんにちは、サイトのヘッダーにJavaScriptを追加しようとしていますが、保存をクリックすると「ページが見つかりません」と表示されます。

    • パーマリンクを再保存し、ホスティングプロバイダーにサイトでページが保存されないエラーが発生していないか確認することをお勧めします。

      管理者

  10. 動画をありがとうございます。コードをコピーしましたが、ヘッダーを有効にできません。どうすればよいですか?

    • プラグインがインストールされていれば、[設定] > [ヘッダーとフッターの挿入] の下でコードを追加できるはずです。

      管理者

  11. こんにちは。プラグインをインストールして動作しました。しかし、1つ以上のコードを追加するにはどうすればよいですか?そのままコピーすればよいですか、それともコードをコピーするためにスペースを作る必要がありますか?

    • 後でコードを編集する必要がある場合は、通常、新しいコードを次の行に追加するのが最善です

      管理者

  12. 「ヘッダーとフッターの挿入」プラグインを更新できません。
    エラーメッセージ: 更新エラー: プラグインの以前のバージョンを削除できません。(スペイン語からの翻訳)

    プラグインを削除しようとすると、「insert-headers-and-footers-old/ihaf.phpを完全に削除できませんでした。」(スペイン語からの翻訳)

  13. このプラグインにアクセスするには、どのロールが必要ですか?管理者専用ですか、それともエディターにも提供できますか?

  14. こんにちは、

    ヘッダーコードを挿入した後、「保存」をクリックすると、ページ404エラーに自動的にリンクします。どうすれば修正できますか?

  15. ヘッダーセクションに複数の異なるコードを追加できますか?例えば、Google AnalyticsからのコードとBlogmoteからのコードを同時に追加できますか?

  16. 別のプラグインを持っていますが、それはほとんど同じように機能しますが、単一のページで使用したり、スクリプトが追加されるページをカスタマイズしたりできます。

    WpBeginnerプラグインを試しているのは、皆さんのことを信頼しているからです。

    両方をサイトに追加しても問題が発生する可能性はありますか?

    サイト全体にあなたのものを使用し、個々のページのヘッダーまたはフッターに何かを追加するために別のものを使用するのですか?

  17. こんにちは。
    フッターセクションで何かを更新しようとしています。
    以前にこのプラグインをダウンロードしてインストール/使用したことがあり、現在も正常に動作しています。しかし、編集しようとすると、設定の上にカーソルを合わせたときに、ドロップダウンメニューが表示されず、「ヘッダーとフッターの挿入」に移動できません。アカウント設定ページにしか移動しません。緊急でメーリングリストのオプションを更新する必要があるので、助けてください!よろしくお願いします!

    • 設定エリアに移動すると、ヘッダーとフッターの挿入メニュー項目を表示するための他のオプションが展開されます。

      管理者

  18. WPbeginnerさん、ありがとうございます。

    Google Search Consoleコードを追加してプラグインを保存しようとしましたが、エラー404にリダイレクトされました。

    何が間違っている可能性がありますか?

  19. コードを挿入した後、プラグインを無効化して削除すべきですか?

    プラグインを非アクティブ化すると、コードはすぐに削除されますか?

    • プラグインは有効にしておく必要があります。プラグインを無効にすると、追加したコードは含まれなくなります。

      管理者

  20. こんにちは。このプラグインをしばらく使用しており、非常に役立つと感じています。
    しかし、WordPress 5 にアップデートしようとしていますが、ダウンロードページには「4.9.9まで互換性あり」と記載されています。これは心配になります。WordPress 5 で動作しますか、またアップデートの予定はありますか?よろしくお願いします。

  21. こんにちは。

    ヘッダーとフッタープラグインを推奨していただきありがとうございます。問題を防ぐために、コードを単一の投稿にのみ追加しました。

    ただし、コードがあるページでのみ、ドロップダウンメニューが表示されなくなっていることに気づきました。JavaScriptの修正方法はありますか?

    http://www.phhsolicitors.co.uk/calc/

    お役に立てれば幸いです。

    メリークリスマス!!!!

  22. サイトに追加しましたが、読み込みは問題なく行われるものの、ヘッダーバーの常に一番上にコードが表示されてしまいます。これを修正する方法がわかりません。

  23. プラグインでGoogleサーチコンソールのコードをすでに挿入しましたが、ヘッダー領域に複数のコードを追加する方法を詳しく説明してください。同じヘッダーセクションにAdsenseコードを追加するにはどうすればよいですか?

    • 新しいコードは次の行に追加します。各コードは自分で閉じられるように、コード全体をコピーしたかのように扱います。

      管理者

  24. テーマのヘッダーにHTMLコードを追加するにはどうすればよいですか?どこにあるのかよくわかりません。Xthemeを使用していますが、外観とエディターに行くように言われた人もいますが、エディターがありません。

    GoogleアナリティクスのためにウェブサイトのヘッダーにGtagを追加する必要がありますが、プラグインを使いたくありません。

  25. このプラグインについて質問があります。
    異なるサイトのコードを複数(例:Google Analytics コード、Webmaster のコード、Adsense 広告コード)挿入できますか?コードの数によってパフォーマンスに影響はありますか?Google Analytics と WordPress の分析(WP Statistics)で違いが見られるためです。
    また、ヘッダーとフッターにコードを配置する際の違いは何ですか?
    お忙しいところ申し訳ありませんが、よろしくお願いします。
    迅速なご回答をお待ちしております。

      • 彼らが尋ねたように、コードをヘッダーまたはフッターに配置する違いは何ですか?

        ありがとうございます!

        • ヘッダーに配置するとコードが早く実行されるため、ヘッダーに配置した場合に悪いスクリプトが原因で読み込みが妨げられる可能性が低くなります。

  26. こんにちは、このプラグインを使用してさらに多くのスクリプトを追加することは可能ですか?たとえば、AdSenseとPushCrewのコードを追加する必要があります。

    可能であれば、コードを一つずつコピーして貼り付けるだけでよいですか?

    ありがとう

  27. Hi

    ページ65のヘッダーを無効にしたい場合、そのブーリアンフィルターをどのように使用しますか?

    よろしくお願いいたします。
    クヌート

  28. 今のところ順調です。改行やテキストのセンタリングを行うコードをサイトで検索しようとしています。これらの説明へのURLはありますか?

  29. 本当にありがとうございます。これで問題が解決しました。テーマのコードで発生するエラーコードを解決する方法があれば、それも知りたいです。ソースコードを表示すると、53個のエラーがあります。

  30. これはプレミアムアカウントやビジネスアカウントでも利用可能だといいのですが。サイトにコードを埋め込む別の方法はありますか?

  31. ヘッダー・フッタープラグインをインストールし、関連コードを入力して保存しました。ヘッダーエディターのヘッダースクリプトを見ると、入力したばかりの関連コードが表示されません。アドバイスをお願いします。
    ありがとうございます。

  32. こんにちは、特定の投稿や特定のカテゴリの投稿にのみヘッダーコードを挿入する方法はありますか?

  33. プラグインを使用してヘッダーコードを追加しようとすると、403 Forbiddenページが表示されます。これを回避するにはどうすればよいですか?一時的にセキュリティを無効にしてみましたが、効果はありませんでした。

  34. こんにちは、マルチサイト向けのこのようなオプションを探しています。

    ネットワーク全体で一般管理者のようなオプションが必要なのですが、これを設定すると、すべてのサブサイトのヘッダーに表示されます。

    現在、すべてのサブサイトのプラグイン設定でこれを設定する必要があります。

    このメニューのプラグインオプションを、サブサイトごとではなく、ネットワークオプションの下などに配置する方法はありますか?

    他に利用できるオプションはありますか?

    ありがとう

  35. こんにちは、コードが挿入されたかどうかを確認する方法はありますか?サイトのソースコードやheaders.phpファイルでも検出できません。このプラグインが機能しない可能性はありますか?

    • Riddhiさん、

      コードを追加して変更を保存すると、サイトのソースコードでコードを確認できるようになります。ヘッダーコードは<head>タグと</head>タグの間、フッターコードは</body>タグの前に追加されます。

      管理者

  36. ヘッダーの既存のヘッダーを置き換えることなく、ヘッダーに画像を追加する方法はありますか?つまり、左側にはすでにロゴがあり、右側にはソーシャルメディアリンク付きの検索バーがあります。中央は空です。画像のソースページにリンクする画像ウィジェットを追加したいです。ウィジェットコードは挿入する準備ができていますが、header.phpファイルにはHTMLが表示されません。PHPはわかりません(HTMLはかなりよくわかります)。
    フッターにウィジェットを追加しましたが、テーマにフッターのHTML(HTMLテーブル)があるので簡単でした。しかし、それはページの先頭にあるべきです。

  37. 情報ありがとうございます。ヘッダーにHTMLのAdSenseコードを貼り付けるのに非常に苦労していました。この情報は非常に役立ちました

  38. インストール後にこの通知をどこでも無効にできますか?
    すべてのマルチサイトクライアントにこの通知を表示する必要はありません!

  39. プラグインのヘッダーまたはフッターセクションにコードを追加すると、すべてのページに適用されますか?ありがとうございます。

      • こんにちは

        コードを(投稿ではなく)単一のページヘッダーに追加するにはどうすればよいですか?そのページにのみ表示されるようにするには?

        • ロランドさん、こんにちは。

          このプラグインは、すべてのページと投稿にヘッダーとフッターのコードを追加します。単一のページにのみ追加したい場合は、コードをテーマに手動で追加し、条件付きPHPタグで囲む必要があります。例:

          if (is_page( 22 )) { // your code goes here } 

          22を実際のページIDに置き換えることを忘れないでください。

  40. こんにちは、KeyReplyからフッターウィジェットの埋め込みコードを再追加しました。
    何が間違っているのかわかりません。PC(WPにログイン中)からはフッターウィジェットが見えますが、他のデバイス(PCまたは携帯電話)ではウィジェットが表示されません。何かアイデアはありますか?

  41. クライアントのWordPressサイトに「ヘッダー・フッター挿入」プラグインをインストールしましたが、設定の下でクリックすると空白のページが表示されるだけです。テキストを挿入できるフィールドがありません。

  42. こんにちは。
    ホームページのトップと他のいくつかのページのトップにHTML5バナー広告を設置しようとしています。お客様がその形式でしかバナー広告を配信したくないとのことで、ローテーションバナーとして各画像がプロモーションしている異なるURLにリンクするようにしたいのです。このコードはどこに配置すれば表示されますか?プラグインをダウンロードして配置しようとしましたが、何も機能しません。通常はJPGとリンクのみを受け付けていますが、このお客様はHTML5以外では配信しないとのことなので、この販売を失いたくありません。ご協力ありがとうございます!ジェラルディン

  43. こんにちは、このプラグインのシンプルさが気に入っています。ただし、1つ気になる点があります。

    マルチサイト設定で、「インストールありがとうございます…」というダッシュボードの通知を無効にするにはどうすればよいですか?

    クライアントサイトすべてにその通知を見せる必要はありません。

    プラグインを使わない解決策があればありがたいです。できれば、アクションなどを削除するだけで済むと嬉しいです。

    • それは、通知を無効にできないということですか?(プラグインをハッキングせずに)