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

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. このガイドは素晴らしいです!私は複数のクライアントのウェブサイトを管理しており、テーマを直接編集する代わりにWPCodeプラグインを使用することを強調してくれて、本当に嬉しいです。この点については私を信じてください。私はこの教訓を苦労して学びました!一度テーマをアップデートした際に、3人のクライアントのトラッキングコードがすべて消えてしまったことがあります。全く楽しくありませんでした。
    多くの頭痛の種を救ってくれたのは、クライアントサイトごとにヘッダーとフッターのコードをすべて追跡する簡単なスプレッドシートを保持していることです。各コードが何をするのか、どこで使用されているのかを示しています。テーマの変更中に非常に役立ち、どのサイトで何が実行されているのかを推測する必要がなくなりました。

  2. wpcodeをウェブサイトで使用するようになって以来、functions.phpファイルをいじる手間が大幅に省けました。
    2017年にコードをいじっていた頃を思い出すと、ひどいものでした。
    wpcodeを使えば、コードスニペットを挿入するのが簡単になるだけでなく、メンテナンスも容易になります。
    さらに、ちょっとした機能のために多くのプラグインを避けることができるようになります。

  3. このガイドをありがとうございます。
    以前は、テーマを更新した際にカスタムコードを失うのが怖くて、ヘッダーとフッターにコードを追加するのが大きな問題でしたが、その後子テーマを作成しましたが、それはそれで技術的でした。
    今では、WPcode を使ってコードを追加し、他のカスタムコードも簡単に実装できるようになりました。WPcode 自体にもすぐに使えるカスタムコードがいくつかあるので、さらに速くなりました。このプラグインは非常に便利です。ありがとうございます。

  4. WpCodeプラグインを数年間使用しており、本当に素晴らしいです。特にウェブサイトにコードを挿入することを恐れている初心者にとっては。このプラグインはほぼすべてのウェブサイトに必須です。多くの作業を節約でき、wpbeginnerには多くの既製のソリューションがあります。

  5. こんにちは
    WPCodeプラグインをインストールし、「グローバルヘッダーとフッター」タブのヘッダーフィールドにコードを挿入しました。このコードはポップアップを表示します。
    ウェブサイトはマルチサイトで、WPCodeはネットワーク全体で有効になっています。
    ポップアップは私のウェブサイトのホームページではよく表示されますが、Googleで検索した後に人々が着地する可能性のある他のページでは表示されません。
    どのページでもポップアップを表示させるにはどうすればよいですか?
    ありがとうございます

    • 念のため確認ですが、お使いのテーマには、別のヘッダーを使用したり、ヘッダーを削除したりする他のページのスタイルがありますか?

      管理者

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

    • コードが正しく追加されており、他のコードブロック内にコードを配置していない限り、好きなだけ追加できます。

      管理者

  7. こんにちは、コードを追加して保存をクリックしました。何も起こりませんでした。押す必要がある公開ボタンはありますか?

    • 追加したコードによります。すべてのコードに表示されるコンポーネントがあるわけではありません。また、サイトに変更が見られない一般的な理由として、サイトのキャッシュをクリアしてみてください。

      管理者

  8. こんにちは—簡単な質問です。プラグインをインストールしました。ヘッダーとフッターを表示するページを選択する方法はありますか?見えるのはページを選択する機能のないグローバルインストールだけです。よろしくお願いします!

    • 現在、このプラグインはサイトのヘッダーにコードを追加するためのものであり、ヘッダーの表示/非表示を行うものではありません。ヘッダーとフッターがサイトのどこに表示されるかは、テーマのテンプレートによって決まります。

      管理者

  9. プラグインをインストールしましたが(プラグインリストで有効になっていることも確認しました)、しかし「設定」メニューに表示されません。何か手順を飛ばしてしまったのでしょうか?解決策を教えていただけますか?
    よろしくお願いします。

    • いいえ、プラグインがアクティブであれば、サイトの設定を編集する権限がある限り、オプションが利用可能になるはずです。サイトの管理者であることを確認してください。それでも表示されない場合は、他のプラグインを無効にして、競合がないか確認してください。

      管理者

  10. こんにちは!質問があります!Google広告の呼び出しを追跡するために、グローバルサイトタグと電話スニペットを各ページのコードに追加しようとしています。「ヘッダーとフッター」プラグインがありますが、ここに貼り付けるだけで大丈夫ですか?それとも、どこに(ヘッダー、本文、フッター)投稿するかは関係ありますか?どうもありがとうございます!

  11. 必要なものに非常に近いですが、Googleはページごとに異なるメタデータを推奨しています。「サイトのすべてのページで同じまたは類似の説明を使用しても、個々のページがウェブ検索結果に表示されたときに役立ちません。これらの場合、定型文が表示される可能性は低くなります。可能な限り、特定のページを正確に説明する説明を作成してください。」プラグインをそれに応じて更新することを検討してください。

    • Our plugin is not for metadata, it is mainly for code to add things like Google Analytics tracking or for verification codes. If you want a plugin for adding metadata to individual posts, we would recommend taking a look at All in One SEO as that will give you far better control over your metadata :)

      管理者

  12. 質問があります。ヘッダーとフッター挿入プラグインを使用して追加したコードを削除するにはどうすればよいですか?テーマエディターを開いても、このプラグインで追加したコードが見つかりません。

    • プラグインを使用して追加されたコードは、プラグインの設定から削除された場合、またはプラグインがアンインストールされた場合に削除されます。

      管理者

  13. こんにちは、上記のプラグインをサイトに追加し、ヘッダーセクションにコードを追加しました。その後、あなたのサイトでテストしたところ、正常に保存されたと表示されました。

    ライブサイトに行ってもボットが表示されません。何が間違っているか教えていただけますか?よろしくお願いします。

    • 追加している特定のコードによります。コードのサポートに確認することをお勧めします。すべてのコードが何らかの形で表示されるように作られているわけではないため、正しく追加されているか確認してください。

      管理者

  14. このプラグインでアドレスバーの色を変更したかったのですが、貼り付けるたびにエラーメッセージが表示されます。

    私のコードは大丈夫ですか?

    • 特定のコードと、コードが追加される場所によって異なります。コードの配置場所については、コードを受け取った人に問い合わせる必要があります。

      管理者

  15. テーマを購入しましたが、ヘッダーやメニューにボタンアクションを追加できません。このプラグインは私を助けてくれますか???

  16. ヘッダーにできるだけ高くコードを追加するにはどうすればよいですか?ヘッダーの最初の数行にコードを配置する必要があります。コードの位置を制御するにはどうすればよいですか?

    ありがとう

    • コードの非常に具体的な場所が必要な場合は、コードを手動でファイルに追加する必要があります。

      管理者

  17. ヘッダーがないテーマ(例:WordPress 2021)では役に立ちません。無駄です。

    このプラグインがそれを行うと示唆されていました。しかし、それはできません。選択した画像がメニューとサイト名の上に挿入されるだけです。

    • 2021テーマにはヘッダーがありますが、ヘッダーとフッター挿入プラグインは、Googleアナリティクスなどのコードを挿入するためのものであり、ウェブサイトのヘッダーに写真を挿入するためのものではありません。ヘッダー画像を追加するためにこのプラグインを使用することは推奨しません。それがエラーの原因となっている可能性があります。

      管理者

  18. こんにちは、

    「Insert Footer and Header plugin」はすでにインストールしていますが、サイトから削除したい場合、挿入されたコードもヘッダーセクションから削除されるのでしょうか、それともプラグインなしで保存されたままになりますか?
    教えてください。

    • プラグインを削除した場合、追加されたコードも削除されるはずです。

      管理者

  19. Google Analyticsから、タグの直後にグローバルサイトタグコードを追加するように指示されています。このプラグインはそれを行いますか?それ以外の場合、サイトの*すべての*ページにこのコードを追加する方法がわかりません!

  20. これらの簡単な指示とプラグインを本当にありがとうございます!Pinterestからウェブサイトが削除され続ける理由がわかりませんでした!

  21. 各ブログ投稿のヘッダーとフッターは異なりますか?プラグインは各投稿用ですか?

    • プラグインを使用して追加されたコードは、すべての投稿とページに適用され、個々の投稿やページに個別のコードが適用されるわけではありません。

      管理者

  22. こんにちは、

    投稿エディタの下に「ヘッダー挿入」セクションが見つかりません。そのため、特定の投稿に異なるコードを挿入できるようにするには、どうすればその機能を有効にできますか?

    • 現在、当社のプラグインはサイト全体を対象としており、個々の投稿やページには対応していません。

      管理者

  23. すべてのページにすべてのコードを挿入するのではなく、ページの種類ごとに異なるコードをインストールするにはどうすればよいですか?

    • はい、可能な限りすぐにテスト済みのバージョンを更新するよう検討いたします。

      管理者

  24. このプラグインから保存を押すと、次のエラーが発生します。

    このサイトへのリクエストで、潜在的に安全でない操作が検出されました

    • セキュリティプラグインがアクティブかどうか、またはホストが設定したものが 있는지確認することをお勧めします。追加しようとしているコードを正しくコピーしたことも確認してください。

      管理者

  25. デモでは、一番上に何も表示されませんでした。
    これは私が使用しているコードジェネレーターからの指示です。
    コピーしたコードをHTMLページの末尾、閉じタグの直前に貼り付けてください。
    コードをテストしましたが、動作しません。「何か違うことをしていますか?」

    • まず、コードを生成したサポートに連絡して、コードが正しく機能するためにページで設定する必要がある特別なものがないか確認することをお勧めします。

      管理者

  26. こんにちは。特定のページセットにのみヘッダーコードを編集する必要があります。現在、必要なスクリプトをheader.phpファイルに追加しましたが、これはすべてのページにグローバルにコードを適用します。

    特定のページにのみスクリプトを追加する方法はありますか?

    • 特に推奨する方法はありません。別途指示がない限り、現時点ではページ固有のコードに関する推奨方法はありません。

      管理者

  27. 本当にありがとうございます!!!

    これが私のウェブサイトを永遠に破滅させるのではないかと思うと、この種のことは私を怖がらせます!!

    とても簡単に説明されていて、間違いなく購読します。

    毎日これに取り組む必要があります。

  28. テーマでカスタムヘッダー画像が許可されていない場合、このプラグインでカスタムヘッダー画像を作成できますか?やり方がわかりません。カスタムヘッダー機能のある古いテーマがあります。

  29. 相対パスを使用できますか?そうすれば、ヘッダーを変更せずにサイトを別のホストに移動できますか?もしそうなら、その起点(オリジン)はどこですか?

    いくつかの例を含めようとしましたが、Sucuri が悪意のあるものとして投稿をブロックしました。パスが表示されるのを好まないようです。

  30. やったー!とても興奮しています。Mailchimpのポップアップを機能させるのにとても苦労していましたが、このプラグインで簡単にできました!

  31. こんにちは。Headers and Footersプラグインをインストールし、フッター用のコードを追加しました。表示したいテキストは、Bentoの著作権表示の下、一番下にあります。フッター表示の一番上に私のフッターを表示させる方法はありますか?よろしくお願いします。

    • フッターのカスタマイズについては、テーマのサポートに連絡して、使用できる推奨オプションがあるかどうかを確認する必要があります。

      管理者

  32. ヘッダーセクションにinsert header and footerプラグインを使用してGoogleアナリティクスコードを既に追加しました。そこに再度AdSenseコードを追加するにはどうすればよいですか?

  33. チャイルドテーマのfunctions.phpファイルを使用してヘッダーとフッターのスニペットを追加するのはどうですか

    • それはあなたが実行できることですが、すべての初心者が子テーマを作成したい、またはその方法を理解しているわけではありません。そのため、この方法をお勧めします。

      管理者

  34. このプラグインのアクティベーションにより、ホスティングサーバーから自動的に一括メールが送信されます。これはスパムのように機能します。そのため、ウェブサイトから削除する必要があります。

    • このプラグインにはそのような機能はありません。サイトに悪意のあるコードがないことを確認するために、サイトをスキャンすることをお勧めします。

      管理者

  35. このプラグインをサイトに追加しましたが、プラグインをクリックしても何も表示されませんでした。古いバージョンのWPを使用していますが、それが理由かどうかはわかりません。

    • プラグインのセクションは、[設定] > [ヘッダーとフッターの挿入]の下にあるはずです。

      管理者

  36. チームの皆さん、こんにちは。

    FBピクセルベースコードは、そのプラグインのヘッダータグにコピー&ペーストされましたか?
    ウェブサイトのすべてのページに自動的に適用されますか?返信をお願いします!

  37. このプラグインで、bodyセクション(ヘッダー/フッターセクション以外)にコードを追加するにはどうすればよいですか?
    レンダリングブロッキングを回避するために、bodyセクションに特定のコードを追加したいです。

    • 現在、このプラグインには、サイトの本文に含めるコードを入力できる3番目の入力ボックスがあります。

      管理者

  38. 本当にありがとうございます!オンサイトメッセージングシステムのコードを追加するのに役立ちました。

  39. Hi,
    My site was built by a web developer who already included all sorts of code snippets in the section of my site.
    If I add new snippets of code using this plugin, will it overwrite the code that’s already there or just add the new code to the existing code?
    I don’t want to make a mess of my site… :-)
    Thanks!

    • このプラグインを使用してコードを追加すると、サイトに追加され、コードが置き換わることはありません

      管理者

  40. こんにちは!サイトにプラグインを追加しようとしましたが、プラグインを追加するにはビジネスページが必要ですか?プラグインなしでコードを追加できますか?

  41. こんにちは
    まず、ヘッダーとフッタープラグインをインストールし、その後Googleアナリティクスコードを貼り付けました。しかし、コードを貼り付けてウェブサイトを見ると、コードが無効になっているように表示されます。どうすれば解決できますか?

    • コードがヘッダーに追加されていない場合は、サイトのキャッシュをクリアすることをお勧めします。それがこの問題の最も一般的な原因です。

      管理者

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

      管理者

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

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

      管理者

コメントを残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。