WPBeginnerでは、WordPressサイトのヘッダーまたはフッターセクションにコードを挿入する必要がある多くのチュートリアルを作成しています。多くのユーザーにとって、WordPressにはこれらの領域にコードを挿入する組み込みの方法がないため、これは威圧的に感じられるかもしれません。
ただし、ヘッダーとフッターにコードを追加することは、Google Analytics、Google Search Console、Facebook Pixelなどの一般的なサービスを統合するために不可欠です。また、他のWordPressチュートリアルの一部としてカスタムCSSまたはJavaScriptを追加する必要がある場合もあります。
良いニュースは？テーマファイルを直接編集したり、サイトを壊してしまう心配をする必要はありません。無料のWPCodeプラグインを使用すれば、初心者でも安全かつ簡単にコードスニペットをヘッダーまたはフッターに追加できます。
このガイドでは、WordPressでヘッダーとフッターのコードを追加する方法をステップバイステップで説明します。
WordPressのヘッダーとフッターコードを追加する最良の方法
WordPressのヘッダーとフッターにコードを追加したい場合、3つの可能な解決策があります。
- テーマのheader.phpおよびfooter.phpファイルを編集して手動で
- テーマに組み込まれているヘッダーとフッターコード機能を使用して
- ヘッダーとフッターのWordPressプラグインを使用する
最初のオプションは初心者向けではありません。なぜなら、header.phpおよびfooter.phpファイルを直接編集して、ヘッダーとフッターのコードを手動で追加する必要があるからです。
この方法のもう一つの欠点は、テーマをアップデートするとコードが削除されてしまうことです。
2番目のオプションは、テーマに組み込まれた機能を使用することです。Elegant Themesのような一部のWordPressテーマでは、WordPressのヘッダーとフッターにコードやスクリプトをすばやく追加するための組み込みオプションが提供されています。
テーマに組み込まれた機能を使用している場合、それは安全で簡単なソリューションのように思えます。しかし、テーマを変更すると、ウェブサイトに追加されたすべてのコードスニペットが失われます。これには、Google Search Consoleでのサイト認証、Google Analyticsによるウェブサイト分析などが含まれます。
そのため、ヘッダーとフッターのプラグインを使用するという3番目のオプションを常にユーザーに推奨しています。このオプションは、WordPressにヘッダーとフッターのコードを追加する最も簡単で安全な方法です。
読者の皆様からの多くのリクエストを受け、私たちのチームはWPCodeプラグインを開発しました。
WPCode（旧Insert Headers and Footers）は、100％無料のコードスニペットプラグインです。これを使用して、WordPressのヘッダーとフッターに簡単にコードを追加できます。
WPCodeプラグインを使用する利点をいくつかご紹介します。
1. 🚀 簡単、高速、整理整頓: サイトのヘッダーとフッターにコードを簡単かつ迅速に追加できます。さらに、すべてのフッターコードとヘッダーコードを1か所に保存できるため、整理整頓できます。
2. ✅ エラーを防ぎます: スマートコードスニペット検証により、テーマファイルを直接編集した場合に発生する可能性のあるエラーを防ぐことができます。
3. 😌 テーマを気にせずアップグレードまたは変更できます: プラグインはヘッダーとフッターのコードを別の場所に保存するため、コードが消去される心配なく、テーマを更新または変更できます。
ヘッダーとフッターのスクリプト以外にも、WPCodeを使用して、テーマファイルを編集せずにカスタムPHP、JavaScript、CSS、HTML、およびテキストコードスニペットを簡単に挿入できます。
さらに、WPCodeにはスニペットライブラリが組み込まれており、最も役立つWordPressコードスニペットを見つけることができます。これにより、自動アップデート、REST API、XML-RPC、コメントなど、不要なWordPress機能をすばやく削除できます。
注意: 無料のWPCodeプラグインには、WordPressにヘッダーとフッターのコードを追加するために必要なものがすべて含まれています。ただし、プライベートクラウドスニペットライブラリ、コンバージョンピクセル、スケジュールされたスニペットなどの高度な機能が必要な場合は、WPCode Proにアップグレードできます。
詳細については、WordPressにカスタムコードを簡単に追加する方法に関するガイドをお読みください。
それでは、WPCodeプラグインを使用してWordPressにヘッダーとフッターのコードを簡単に追加する方法を見てみましょう。
WordPressのヘッダーとフッターにコードを追加する
まず最初に行うべきことは、無料のWPCodeプラグインをインストールして有効化することです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
プラグインを有効化したら、WordPress管理パネルからCode Snippets » Header & Footerに移動します。その後、「Header」ボックスが表示され、コードを追加できます。
下にスクロールすると、「本文」と「フッター」のボックスも表示されます。
コードを3つのボックスのいずれかに貼り付けるだけです。完了したら、設定を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。
プラグインは、コードをWordPressサイトのそれぞれの場所に自動的に読み込むようになります。
いつでも不要なコードを編集して削除できます。
プラグインは常にインストールおよび有効化しておく必要があります。プラグインを無効化すると、すべてのカスタムコードがサイトに追加されなくなります。
プラグインを誤って無効化しても、コードはWordPressデータベースに安全に保存されます。プラグインを再インストールまたは再アクティブ化するだけで、コードが再び表示されるようになります。
注意: 変更を保存した後、コードがウェブサイトのフロントエンドに正しく表示されるように、WordPressのキャッシュをクリアする必要がある場合があります。
初心者の多くがWPCodeプラグインを使用する最大の理由として、ウェブサイトにGoogleアナリティクスを追加することが挙げられます。その場合、無料のMonsterInsightsプラグインの使用をお勧めします。
MonsterInsightsは、WordPress向けの最高のGoogleアナリティクスプラグインです。数回のクリックでGoogleアナリティクスを適切に設定でき、WordPressダッシュボード内で役立つ統計情報を表示できます。
WordPressにGoogleアナリティクスをインストールする方法については、こちらのチュートリアルをご覧ください。WordPressにGoogleアナリティクスをインストールする方法。
動画チュートリアル
テキストの説明に従うのが好きでない場合は、WordPressにヘッダーとフッターのコードを追加する方法に関するビデオチュートリアルをご覧ください：
この記事で、WordPressにヘッダーとフッターのコードを簡単に追加する方法を学んでいただけたことを願っています。また、WordPressサイトにコードを表示する方法や、おすすめのWordPress開発ツールに関するガイドもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Rattanak
AdSenseは私のサイトにコピーコードを（headの間で）提供してくれますが、どこにコードをサイトに入れることができますか？プレミアムプランを使用しています！
WPBeginnerサポート
ラタナックさん、
WordPress.comのプレミアムプランではAdsenseを使用できません。そのためには少なくともビジネスプランが必要です。自己ホスト型WordPress.orgと無料WordPress.comブログの違いに関するガイドを参照してください。
管理者
MADHUSUDAN
こんにちは、
あなたのチームメンバーは私の問題を解決しようとしてくれており、時間通りです。しかし、返信を残せる場所を見つけました。
アフィリエイトプログラムの会社から製品を宣伝するために必要なメタタグをフロントページに追加しようとしています。チームメンバーから提案されたヘッダーとフッター追加プラグインを使用しましたが、追加して変更を保存した後、変更が見られません。メタタグを追加すると、サイトはどのように表示されますか？ちなみにメタタグは以下の通りです。
または、もう一つの方法は、.htmlのコードを持つ新しいページを追加することです。コピー＆ペーストしてみましたが、そのまま残ります。私のサイトはPHPサポートで、コードはHTMLだからですか？それともどうしてですか？
アドバイスとフィードバックをお待ちしております。
WPBeginnerサポート
マドゥスダンさん、
メタタグは、ウェブサイトのHTMLコード内にあります。ヘッダーセクションまたは末尾に追加されます。メタタグはウェブサイト上には表示されず、ウェブサイトの外観に一切変更を加えません。ソースを表示するか、インスペクトツールを使用することで、メタタグを表示できます。
管理者
アンジェラ
ヘッダー/フッタープラグインを追加しました。Facebookピクセルコードを追加して保存しました。しかし、特定のコンバージョンを追跡するために、このコードをウェブサイトの特定のページにインストールするにはどうすればよいですか？
Jen
このプラグインは問題なく常に使用しています。今日、それをインストールし、必要なコードを正しい領域に追加しました。ホームページを除くすべてのページにコードが表示されています。ホームページを除くすべてのページにコードが表示される理由は何ですか？
ジョン
この投稿では、フッターにどのようなスクリプトを入れるべきか教えてくれません。始めるための簡単なスクリプトは何ですか？簡単なフッターが欲しいだけです。
Sarthak
ここに問題があります。問題を解決していただけると大変助かります。
ウェブサイトのヘッダーにGoogle AdSenseのコードを追加する必要があるのですが、以前ヘッダーにInstant Articleのコードを追加しました。両方を維持するにはどうすればよいですか？
（初心者なので、あまりよくわかりません。助けてください。）
ジョージ・ビーズリー・ジュニア
ウェブサイトに「ヘッダーとフッターの挿入」をインストールしてみました。「設定/ヘッダーとフッターの挿入」に移動すると、次のエラーが表示されます。(致命的なエラー: 未定義の関数 wp_unslash() が /home/afvetrep/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php の 169 行目で呼び出されました)
どうすればよいですか？
WPBeginnerサポート
ジョージさん、
wp_unslash() は WordPress 3.6 以降の標準的な WordPress コア関数です。古いバージョンの WordPress を使用している場合は、WordPress を更新する必要があります。
WordPressの最新バージョンを使用しているにもかかわらずこのエラーが表示される場合は、お知らせください。トラブルシューティングをお手伝いします。
管理者
Frank
こんにちは。フッターにMailChimpのポップアップスクリプトを挿入すると、WPのメインナビゲーションメニューが壊れてしまいます。理由や修正方法について何かアイデアはありますか？最新バージョンのプラグインにアップグレードしましたが、問題は解決しません。よろしくお願いします。
Frank
この問題が発生する理由について、どなたか何かご存知ですか？
ありがとうございます！
リジュ
助けてください
外観にエディターが表示されません。
ウェブマスターツールの確認メタコードを入力する必要があります。ヘッダーを編集するにはどうすればよいですか？
助けが必要です
バムズ
どうもありがとうございます。このプラグインのどこにGoogle AdSenseコードを貼り付ければよいですか？ヘッダーですか、それともフッターですか？
リジュ
こんにちは、何も見えません
WBをAdSenseに接続しようとしています
モバイルを使用した後にWordPressにAdsense広告コードを追加できますか？
助けてください
echenze
こんにちは、Google AdSenseアカウントの確認のために提供されたコードを挿入するために、これもまだ使用できますか？
WPBeginnerサポート
はい、それには使用できます。
管理者
サミュエル
これは私の最高のプラグインの1つであり、ヘッダーとフッターにコードを追加するために頻繁に使用していますが、数時間前にプラグインを更新した後、エラーが発生しました [Fatal error: Can’t use function return value in write context in /home/campmmcg/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 102]
これを解決してください
WPBeginnerサポート
Samuelさん、こんにちは。
この問題はバージョン1.4.1で修正されました。プラグインをアップデートしてください。
管理者
ミーガン・ナット
これは本当に簡単でしたが、ウェブサイトのヘッダーが変わり、巨大になってしまいました！スライダーとコンテンツが巨大な白いボックスに押し下げられています。助けてください！
raunak
この素晴らしいプラグインをありがとう
でも、ヘッダーにGoogleの認証コードを貼り付けても機能しますか？
大規模な
この素晴らしい記事をありがとうございます。このプラグインをアフィリエイトプログラムの広告コードのような広告コードを挿入するために使用できますか？
Rizwan Amjad
こんにちは。このプラグインを使用しています。このように複数のコードを挿入することはできますか？
コード1
コード2
コード3
コード1を入力し、Enterキーを押し、次にコード2を入力してEnterキーを押します。
Googleの著者情報、アナリティクス、ウェブマスターなどのコードを挿入したいです。
WPBeginnerサポート
リズワンさん、
はい、各スニペットを貼り付けた後にEnterキーを押すことで、複数のコードスニペットを新しい行に配置できます。
管理者
Isabella
こんにちは。おそらく愚かな質問ですが、すでにFacebookスクリプトをヘッダーにインストールしていて、Hotjarから別のものをインストールしたい場合、以前のFacebookスクリプトは再インストールされないように削除しますよね？コードにはあまり詳しくないので、すみません。
ありがとう
WPBeginnerサポート
Isabellaさん、こんにちは。
はい、それは問題ありません。もしご不明な場合は、古いコードをコピーして、コンピューターにテキストファイルとして保存してください。
ポール
素晴らしいビデオです。非常に明確で役立ちます。チャンネル登録します。
dominion
こんにちは。WPテーマをインストールせずに、自分のテーマやテンプレートを使用する方法はありますか？
gajendra
素晴らしいプラグイン…。
Vladimír
これは素晴らしいプラグインですが、1年以上更新されていないようです。更新していただけますか？
ウラジーミル
Lauren
動画をありがとうございます。他のウェブサイトや自分でこのことを理解しようとしましたが、まだ確信が持てませんでした。あなたの動画は短く簡潔で、最終的に作業を完了するために必要なビジュアルを提供してくれました。改めてありがとうございます！
WPBeginnerサポート
You are welcome
管理者
nazanin
こんにちは、
WP（ダイナミックロゴ）からロゴを追加したいのですが
このプラグインはどこにありますか？
khalid
こんにちは、素晴らしい皆さん、FBインスタント記事のコードをインストールして追加しましたが、FBはまだコードがウェブサイトにないと言っています。
ヘッダーセクションに追加しました。
スザンヌ・ボール
「403 Forbidden」というエラーが表示されます
このサイトへのリクエストで、潜在的に安全でない操作が検出されました。
Googleスクリプトを挿入するとき
レネ・ヘッジス
ありがとうございます！サイト構築は全くの初めてで、コーディングの経験もありませんでしたが、これは分かりやすかったです！
WPBeginnerサポート
Glad you found it helpful.
管理者
haris
こんにちは、WP初心者です……WPでデータベースを作成し、テーブルの挿入などを行う方法を教えてください。
Marcelo Guimaraes
こんにちは！WPサイトにGoogle Analyticsコードを追加するためにInsert Headers and Footersを使用しています。サイトの各ページについて個別に心配する必要がありますか、それともこのビデオの指示に従ってコードをヘッダーボックス（Insert Headers and Footers > Settings）に追加するだけでサイト全体をカバーしていますか？
WPBeginnerサポート
サイト全体をカバーしています。
管理者
Luciferbui
Do you have html code or something, i need it to make my site faster
No more plugin
Thanks
Patrick Saad
こんにちは！
このプラグインを使用するのは初めてです。以下のスクリプトをヘッダーに追加することで、ウェブサイトをより安全にしたいと考えています。
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
私の質問は次のとおりです。この目的のためにあなたのプラグインを使用できますか？また、ヘッダー追加スクリプトは一度に1つずつ作成しますか、それともここで入力したとおりに作成しますか？
ご協力ありがとうございます！
WPBeginnerサポート
WordPressでHTTPヘッダーを設定するより適切な方法は、send_headersフックを使用することです。以下に例を示します。functions.phpファイルに入力します。
add_action( 'send_headers', 'add_header_xua' ); function add_header_xua() { header( 'X-UA-Compatible: IE=edge,chrome=1' ); }1-click Use in WordPress
管理者
Conrad Hall
こんにちは、
私はWPBeginner.comの初心者で、これが初めて見たチュートリアルです。率直に言って、チュートリアルに「ここにコードを追加できる2つのテキストボックスがあります。メタ情報、スクリプト、Googleアナリティクスなどをコピー＆ペーストして、「設定を保存」をクリックするだけです。このコードは、ヘッダーまたはフッターに出力されます。」と書かれていることに驚いています。
残念ながら、示されているコードの取得方法や使用方法を初心者が理解するのに役立つ情報へのリンクがありません。これにより、プラグインは私にとって無用なものとなっています。
このプラグインは、プライバシーポリシーやパブリッシャーの免責事項などのページに接続するために使用します。これを示すチュートリアルはありますか？もしあれば、このページからリンクしてください。
WPBeginnerサポート
フッター領域にナビゲーションメニューがあるテーマを使用している場合は、WordPressにナビゲーションメニューを追加する方法のガイドを参照してください。
管理者
リチャード・バウアー
ヘッダーは、テキスト、グラフィック、およびページへのリンクを含む静的なメニューにできますか？フッターも同様です。
は私のサイトであり、FrontPageを使用して開発されています。サイト全体をできるだけ簡単にWordPressに変換したいと考えています。すべてのリンクは、他のサイトページ、サイトのPDFおよびWordファイル、およびいくつかの外部リンクにリンクしています。フォーム、動的なデータベース、検索はありません。
どのような助けでも感謝します
marke
Genesis Simple Hooksのwp_headフックに挿入しても同じ結果ですか？私にはうまくいきました。
WPBeginnerスタッフ
はい、そうです。
Mary
WPに大きな変更がありましたが、このプラグインはまだ互換性がありますか？
ありがとうございます
WPBeginnerスタッフ
WordPressテーマが標準のwp_headerおよびwp_footer関数を使用していないようです。Twenty Thirteenのようなデフォルトのテーマに一時的に切り替えて、問題が継続するかどうかを確認してください。
Mufidah Kassalias
先日、最新のテーマバージョン（メジャーアップデート）にアップグレードしたところ、このプラグインを快適に使用できていました。プラグインがメニューを壊してしまい（原因を特定し、このプラグインが競合を引き起こしていることを確認するにはかなりの調査が必要でした）、無効化せざるを得ませんでした。ご想像の通り、これは良い解決策ではありません。なぜなら、Googleサイト認証、パブリッシャー情報、アナリティクストラッキングなどがサイトのヘッダーに存在しなくなったからです。問題を解決するために追加できるコードについて、何か提案はありますか？ありがとうございます。
WPBeginnerスタッフ
このプラグインで間違いないですか？テストしましたが、画像を正常にアップロードできました。
Andrea
こんにちは。画像を投稿に挿入するには、プラグインを無効にする必要があることに気づきました。これを修正する方法はありますか？それ以外はプラグインが大好きです！
Cha
コードがGoogleアナリティクスにデータを公開し始めるまで、どのくらい時間がかかりますか？
ヘンリエッタ
こんにちは、
たくさんの問題で助けてくれてありがとう – 最高のサイトです！ありがとう！
クリスタ
こんにちは。
Googleアナリティクスで人口統計情報を取得するために、1行のコードを更新しようとしています。ヘッダー（そして、以前のコメントで不要だと読んだフッターにも、常に設置していましたが）に正しく貼り付けたと確信しています。Googleアナリティクスでコードを検証するボタンをクリックしても、変更が認識されません。何度か試しました。これを解決する方法を教えていただけますか？よろしくお願いします！
WPBeginnerサポート
ヘッダーにアナリティクスコードを追加してみてください。
管理者
corlie
Brilliant! super easy to use
Julie
このプラグインを使用してJavaScriptコードを追加できますか？リダイレクトスクリプトのようなものですか？
ありがとうございます！
WPBeginnerサポート
JavaScriptコードを追加できます
管理者
Pedro
こんにちは、プラグインをインストールしたばかりですが、サイト全体にヘッダーコードを挿入できると理解しています。サイトごとに個別に機能するプラグインのバージョン/推奨事項はありますか？
ありがとうございます！
Bob
Genesisを使用しており、ウィジェットのように、ビジネスユーザー（コーダーではない）が一般的なフッターフィールドを入力できる、よりプラグアンドプレイなフッターを探しています。マーケットプレイスで見かけるウィジェットベースのフッターでさえ、「OK、ここにスペースがあります。ランダムなウィジェットにコードスニペットを追加してください」というレベルまでしか行かず、私のスキルをはるかに超えています。
その魔法が存在しない場合、wpbeginner.comで使用しているフッターコードをコピーして、情報を編集し、フッター1の位置にあるテキストウィジェットに貼り付けることはできますか？
編集スタッフ
理論的には、コードをコピーしてフッター領域に貼り付けることができます。ただし、スタイリングの問題が発生する可能性があります。
管理者
エイプリル・ウィットロウ
Googleアナリティクスに使用する場合、ヘッダーとフッターの両方に挿入しますか、それともフッターのみに挿入しますか？簡単な質問ですみません。学習の初歩段階です。
編集スタッフ
Header
管理者
Vince
特定のページにのみヘッダースクリプトを追加するにはどうすればよいですか？このプラグインは、すべてのページにスクリプトを追加する場合にのみ適用され、特定のページに追加する場合には適用されません。
Rya
「特定の」ページにのみヘッダー スクリプトを追加するにはどうすればよいですか？このプラグインは、すべてのページにスクリプトを追加する場合にのみ適用され、特定のページに追加する場合は適用されません。
以下の情報を使用して PHP を使用できます。
http://codex.wordpress.org/Conditional_Tags
スクリプトと組み合わせて使用してください。
Fayola
これを実行したところ、スクリプトがページのフッターに表示されました。しかし、Googleアナリティクスではまだトラッキングがインストールされていないと表示されます。助けてください！
編集スタッフ
キャッシュプラグインを使用していますか？もしそうなら、キャッシュをクリアしていただけますか？
管理者
Stan Peters
C:\tools\xampp\htdocs\wpfrontier\wp-includes\functions.php の 2758 行目で、ヘッダーに Google フォント コードを挿入するために使用したときに、Notice: wp_register_style が正しく呼び出されていません。スクリプトとスタイルは、wp_enqueue_scripts、admin_enqueue_scripts、または init フックが呼び出されるまで登録またはエンキューされるべきではありません。詳細については、WordPress のデバッグを参照してください。(このメッセージはバージョン 3.3 で追加されました。) という通知が表示されます。
編集スタッフ
このプラグインは主にアナリティクススクリプトやメタ情報のために作成されました。jQueryやその他のデザイン要素を挿入するために使用するものではありません。テーマファイルを編集せずに、ユーザーが簡単にヘッダーまたはフッターにタグを追加できるようにすることが目的でした。
管理者
Ed
同じ問題を抱えています。これに対する解決策はありますか？
Mladen
このプラグインでFBメタタグをヘッダーに追加しようとしましたが、うまくいきませんでした。アイデアは良いのですが。
編集スタッフ
このプラグインに動的なPHPコードを追加しようとしている場合、それは機能しません。このプラグインはPHPを実行しません。主に静的なメタタグの挿入用です。
管理者
Mladen
Well, I don’t know if those tags are dynamic or static
I tried the standard Facebook tags such as this:
<meta property="og:url" content="”/>
<meta property="og:title" content="” />
<meta property="og:description" content="ID)); ?>” />
<meta property="og:image" content="ID ) ) ?>” />
このプラグインは目的のために良いか教えていただけますか？ありがとうございます
編集スタッフ
いいえ、それはその目的には適していません。URL、タイトル、説明すべてにPHPタグが含まれており、動的だからです。
ガウタム・ドダマニ
素晴らしいプラグインですが、私のカスタムテーマにはすでにこのオプションがあります！テーマを変更した場合に備えて、この投稿をブックマークしておきます。
編集スタッフ
はい、主な目的はテーマに依存しないようにすることです。多くの場合、人々はアナリティクスコードなどをテーマのフッタースクリプト領域にこのように配置します。その後、テーマを切り替えるときにそれを忘れてしまいます。これにより、数日間のアナリティクスデータが失われます。
管理者