Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

WPBeginnerでは、WordPressサイトの<header>セクションや<footer>セクションにコードを挿入する必要のあるチュートリアルを多く書いています。特にWordPressにはヘッダーやフッターにコードスニペットを追加するビルトインオプションが用意されていないため、これは大変な作業に感じられるかもしれません。

しかし、Google アナリティクス、Google Search Console、Facebook Pixelなどのウェブサービスと統合しようとすると、WordPressでヘッダーとフッターのコードを追加する必要がある。

WordPressのチュートリアルで、WordPressのヘッダーやフッターにカスタムCSSやJavaScriptコードを追加するよう求められることもあるでしょう。

幸いなことに、初心者には簡単な解決策がある。無料のWPCodeプラグインを使えば、WordPressテーマファイルを直接編集することなく、安全にコードを追加することができます。

この投稿では、WordPressでヘッダーとフッターのコードを簡単に追加する方法を紹介します。

How to Add Header and Footer Code in WordPress

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

WordPressのヘッダーとフッターのコードを追加したい場合、3つの解決策が考えられます:

  1. 手動で、テーマのheader.phpとfooter.phpファイルを編集する。
  2. テーマにビルトインされたヘッダーとフッターのコード機能を使って
  3. WordPressプラグインの使用

最初の設定は、header.phpとfooter.phpファイルを直接手動で編集してヘッダーとフッターのコードを追加する必要があるため、初心者には優しくない。

この方法のもう一つの欠点は、テーマの更新をインストールするとコードが削除されてしまうことです。

2つ目のオプションは、テーマのビルトイン機能を使うことです。Elegant Themesや StudioPressのGenesis FrameworkのようなWordPressテーマには、WordPressのヘッダーやフッターにコードやスクリプトを素早く追加するためのビルトインオプションが用意されています。

ビルトイン機能のあるテーマを使っているのであれば、安全で簡単な解決策のように思える。しかし、テーマを変更すると、サイトに追加したコードスニペットがすべて消えてしまいます。これには、Google Search Consoleでのサイト検証、Googleアナリティクスによるサイト分析などが含まれる。

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

読者からの多くのリクエストの後、私たちのチームはWPCodeプラグインを作りました。

WPCode

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

WPCodeプラグインを使用する利点は以下の通りです:

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

2.エラーを防ぐ:スマートコードスニペット検証は、テーマファイルを手動で編集した場合に発生する可能性のあるエラーを防ぐのに役立ちます。

3.安心してテーマのアップグレードや変更ができる:プラグインはヘッダーとフッターのコードを区切りの良い場所に保存するので、コードが消えてしまう心配をすることなくテーマの更新や変更ができます。

ヘッダーとフッターのスクリプトの他に、WPCodeを使って、テーマファイルを編集することなく、カスタムのPHP、JavaScriptCSS、HTML、テキストコードスニペットを簡単に挿入することができます。

さらに、WPCodeには、最も便利なWordPressコードスニペットをすべて見つけることができるスニペットライブラリがビルトインされています。これにより、自動更新、REST API、XML-RPC、コメントなど、不要なWordPress機能をすばやく削除することができます。

注:プライベートクラウドスニペットライブラリ、変換ピクセル、スケジュールスニペット、コードリビジョンなどの高度な機能が必要な場合は、WPCode Proにアップグレードすることができます。

詳しくは、WordPressでカスタマイザーコードを簡単に追加する方法をご覧ください。

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

動画チュートリアル

Subscribe to WPBeginner

動画チュートリアルを見たくない場合は、以下のテキスト版を読み進めてください:

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

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

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

Add code to header and footer with WPCode

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

Header and footer script boxes WPCode

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

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

残したくないコードはいつでも編集して削除できる。

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

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

注意:変更を保存した後、WordPressのキャッシュをクリアする必要があるかもしれません。そうすることで、あなたのサイトのフロントエンドにコードが正しく表示されます。

私たちは、初心者の多くがWPCodeプラグインを使用する最大の理由は、自分のサイトにGoogleアナリティクスを追加することであることがわかりました。そのために、私たちは実際に無料のMonsterInsightsプラグインを使用することをお勧めします。

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

ステップバイステップの手順については、WordPressにGoogleアナリティクスをインストールする方法のチュートリアルを参照してください。

WordPressでヘッダーとフッターのコードを簡単に追加する方法について、この投稿がお役に立てれば幸いです。WordPress サイトにコードを表示する方法についてのガイド、または専門家が選ぶ最高の WordPress 開発ツールもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

266件のコメント返信を残す

  1. Shahad

    my header and footer in not showing in particular page..how can i solve it

    • WPBeginner Support

      You would want to check with your specific theme’s support for the header not appearing on a specific page as it could be a page specific template causing you issues.

      管理者

  2. Lio

    Thanks guys for your plugin! I used it to add FB Pixel to my site, but now I have a landing page and I need a different Pixel event (Lead) on the Thank You page after visitors confirm their details. Can I use the plugin to add the script to a specific page?

    • WPBeginner Support

      Not at the moment, for the time being, the plugin adds the code to all pages by default

      管理者

  3. Keith

    Hi, is there a way to change the font size of the footer?
    I tried keying in a chunk of disclaimer text but it is too large.

    Thanks in advance!

  4. katrina

    I used your insert headers and footers plugin and it was soooo easy and helpful! Thank you so much!

    • WPBeginner Support

      You’re welcome, glad our plugin was helpful :)

      管理者

  5. Deeksha

    Hello,
    Can I add google adsense code to my free blog”s header?

    • WPBeginner Support

      If you mean a WordPress.com site then they currently don’t allow Adsense on their free plan.

      管理者

  6. Jeremy

    I’m trying to connect my website to adsense in order to set up an account.
    So far google did not see the code.

    • WPBeginner Support

      You may want to ensure you’ve cleared any caching on your site as one of the most common reason

      管理者

  7. PJ

    You need to change your messaging/advertising regarding header/footer plug-in being free to install. It is not free unless you have purchased the Business plan for your page.

  8. Dipak

    How many codes we can add in single header or footer section, I mean can i use two or three codes in single header section like facebook code google code etc.

    • WPBeginner Support

      You could certainly add as many codes as you need in the header section depending on your needs.

      管理者

  9. Michael

    Was wondering if PHP can be added in the header section. Like adding Yoast’s Breadcrumb code to the header so I don’t have to go into my theme files.

    • WPBeginner Support

      At the moment the plugin does not allow PHP code to be added.

      管理者

      • Michael

        Thank you for your reply. Will, that ability be added in the future?

        • WPBeginner Support

          Currently, it is not planned but we will certainly look into it as a possibility if the need increases :)

  10. moschino

    pls can i use both facebook tracking pixel and google analytics on a single wp page?

    • WPBeginner Support

      Yes, you can.

      管理者

  11. Ray Sagacious Ashia

    Can You add more than one header code, to the plug-in, for example
    AdSense code and YouTube Verification code.

    • WPBeginner Support

      Yes, you can :)

      管理者

  12. Adewale Mudasiru

    Hi, I’m trying to add a javascript to my site header but on click on save it says page not found

    • WPBeginner Support

      You may want to try resaving your permalinks and checking with your hosting provider that they are not receiving an error on your site that would be preventing the page from saving.

      管理者

  13. Poonam Kandpal

    Thank you so much for your video, although I have copied the code still I’m not able to enable my header. How to do it?

    • WPBeginner Support

      If the plugin is installed you should be able to add the code under Settings>Insert Headers and Footers

      管理者

  14. Faris Naqib

    Hi. I already install the plugin and it’s work. But how to add more than 1 code? Just copy like that or I need to make 1 space to copy the code

    • WPBeginner Support

      In case you need to edit the code later, it is normally best to add the new code on the next line

      管理者

  15. rodrigo

    Cant update “Insert Headers and Footers Plugin”.
    Error message: Update Error: Not possible to eliminate previous version of plugin. (translation from spanish)

    When trying to remove the plugin: ” insert-headers-and-footers-old/ihaf.php could not be removed completely .” (translation from spanish)

  16. Arp

    What role is needed to access this plugin – is it for admins only or can it be provided to editors too?

    • WPBeginner Support

      The plugin is set up to only allow admins access at the moment.

      管理者

  17. Marcus

    Hi,

    After I insert the Header code, when I click “save”, will auto link to Page 404 error. How can I fix it?

  18. Judy

    Can I add multiple/different codes in the headers sections? ie. one from google analytics and one from blogmote

    • WPBeginner Support

      As long as you paste the code so it is separate code then you certainly can.

      管理者

  19. Jon

    I have another plugin it seems to work almost exactly the same way only it can be used on a single page or customized as to which pages the script is added.

    I am trying the WpBeginner plugin just because I trust y’all.

    Am I likely to run into problems having both added to my site?

    Using yours for the whole site, and the other one for adding something only to the header or footer of an individual page?

    • WPBeginner Support

      Normally you shouldn’t but if you run into any conflicts you can reach out to the plugins supports

      管理者

        • WPBeginner Support

          You’re welcome :)

  20. maddy

    Hello,
    I’m trying to update something in my footer section.
    I have already downloaded and installed/ used this plug in previously and it is working currently. However, when I try to go edit it, when my cursor is hovering over settings…. no drop out menu appears to go to –>insert header and footer. It only takes me to my account setting page. Please help me because I need to update my mailing list options asap! Thank you!

    • WPBeginner Support

      If you go to your settings area, it should expand the other options for you to be able to see the Insert Headers and Footers menu item.

      管理者

  21. SirPhren

    Thanks WPbeginer,

    I tried saving the plugin when I added my google search console code, it redirected me to error 404.

    What could be wrong?

  22. Kanyi Daily

    Should i deactivate and delete the plugin after inserting the code?

    Will the code be deleted as soon as the plugin is deactivated?

    • WPBeginner Support

      You would want to leave the plugin active, if you deactivate the plugin the code you’ve added will no longer be included.

      管理者

  23. Kirsty Bennetts

    Hello. I’ve been using this plugin for some time and find it invaluable.
    However, I am about to update to WordPress 5 but on the download page, it says ‘Compatible up to 4.9.9’. This makes me wary – will it work with 5 and are there plans to update it? Thank you.

    • WPBeginner Support

      Glad our article was helpful :)

      管理者

  24. ken doughty

    Hiya,

    Thanks for recommending the Header and Footer plugin, and I have added code to just a single post only to prevent any issues.

    I’ve noticed though, that my dropdown menu has stopped showing (just on the page with code). Do you have a Javascript fix, please?

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

    Hope you can help.

    Merry Xmas!!!!

  25. Heather

    I have added this to my site. It reads it just fine, but prints the code across the top of my header bar EVERY time! Not sure how to fix this.

  26. Kendra

    Plsss explian in details how to add more than one code in the headers space, cos i have already inserted ,google search console code with the pluggin how am i going to add the adsene code in the same headers section

    • WPBeginner Support

      You would add the new code on the next line as if you copied the entire code for each they should close themselves.

      管理者

  27. Yovann

    How do I add a HTLM code in the header of my theme. I dont quite understand where it is. I use Xtheme and some people said to go to appearance and editor, but I dont have no editor.

    I need to add the Gtag in the heard of my website for Google analytics and I dont want to use a plug in

  28. mohamed ballouti

    I want to ask you about this plugin.
    Can I put more than one code from different sites (eg Google Analytics code, Webmaster’s code, and Adsense ad code) Will the number of codes affects their performance because I see a difference in terms of visitors Google Analytics and WordPress analytics(WP Statistics)?
    And the difference between placing the code in the header and in the footer?
    Thank you sorry for bothering you
    I hope you will respond quickly.

    • WPBeginner Support

      Hi Mohamed,

      Yes you can add code from multiple sites like Analytics, Webmaster tools, and so on.

      管理者

      • Samantha

        Like they asked, what is the difference between placing the code in the header or footer?

        Thanks!

        • WPBeginner Support

          The code would be run sooner when placed in your header which makes it less likely to prevent loading due to a bad script when placed in the header

  29. Gerardo

    Hi, is it possible use this plugin to add more scripts? For example i need to add the AdSense and PushCrew codes.

    If possible, just copy the code one under the other?

    Thanks

  30. Knut

    Hi

    How do I use that bolean filter if I want to disable the header on page 65?

    Brgds.
    Knut

    • WPBeginner Support

      Hi Knut,

      Here is the sample code that you can use to exclude header from any page using the page ID.

      add_filter( 'disable_ihaf_header', 'hide_header_on_page_id' );
      function hide_header_on_page_id() {
        if( is_page( 65 ) ) {
          return false;
        }
        return true;
      }
      

      管理者

      • Marvin

        Code added under your footer or header code in the plugin?

        • WPBeginner Support

          Hi Marvin,

          No, this code will be added in your theme’s functions.php file.

  31. Tom S.

    So far so good. I’ve been trying to search your site for code to insert line breaks and center text. Any urls to these explanations?

  32. Faith

    Thank you so so much. That solved my problem. I would also love to know if there’s a way to solve the error code I get in my theme codes. I’ve got 53 error when I view the source code.

  33. Claire Plaisted

    I wish this was available for Premium Accounts as well as Business. Is there another way to embed code in your site

  34. Iboro William

    This has been quite helpful!

  35. Mo

    I’ve installed header and footer plugin, entered the relevant code and saved it. When I look in header script in header editor I can’t see the relevant code I’ve just entered. Please advise.
    Thank you.

  36. Alex

    Hello, is there a way to insert header code only to certain posts or to posts in a certain category?

  37. Randy Trelka

    When I try to add header code using the plug in I get a 403 forbidden page. How do I get around this? I temporarily tried to turn off my security but that didn’t help.

  38. Prolete Atienza

    Hi, Iam looking for option like this but for a multi-site,

    but I need is like a general admin for network-wide option,
    where when i config this, it will show to the header on all sub-site,

    currently, I need to set this for every sub-site plugin config.

    is there any way to have the plugin option of this menu under network option or something and not per sub-site.

    is there any other option i can use/do.

    thanks

  39. Riddhi

    Hey, is there anyway to check if the code has been inserted ? Can’t detect it in my site source code nor in the headers.php file. Is is possible for this plugin to not be working ?

    • WPBeginner Support

      Hi Riddhi,

      Once you add the code and save your changes you will be able to see the code in your site’s source code. For header code you will find it between <head> and </head> tags. Footer code will be added before the </body> tag.

      管理者

  40. Debbie

    Is there a way to use this to add an image in the header that does not replace the existing header? In other words, I already have a logo there on the left, and a search bar with social media links on the right. The center is empty. I want to add an image widget which links to the source page of the image. I have the widget code ready to insert, but there is no HTML showing in the header.php file. I do not know PHP (i do know HTML quite well).
    I added the widget to the footer, which was easy because in my theme there IS HTML (an HTML table) in the footer. But it is supposed to be at the top of the pages.

  41. Ralph Machin

    Any idea when this plugin will be updated for WP 4.9.1? Looks like it’s only compatible up to 4.8.4

  42. Jesse

    Thank you so much for information. I have been so much problem with pasting html adsense code in header. This information helps me a lot

  43. Gareth Parmar

    So, can I disable this notification after install anywhere?
    I don’t need all my multisite clients to see this notification!!

  44. Brandon

    When I add my code into the header or footer section in the plugin, does it apply it across all my pages? Thanks.

      • Rolland

        HI

        How do i add the code to a single page header (not a post) so it appears only on that page?

        • WPBeginner Support

          Hey Rolland,

          This plugin will add header and footer code to all pages and posts. If you want to add it to just a single page, then you will have to manually add your code to your theme and surround it with a conditional php tag. For example:

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

          Don’t forget to replace 22 with your actual page ID.

  45. melody

    hi, I just re-added my footer widget embedded code, it’s from keyreply.
    I don’t know what’s went wrong, I could see my footer widget from my pc(while I am logged in WP), however any other devices(pc or mobile phone), the widget is not showing. any ideas?

  46. Prava

    im a new leaner and im facing problem in converting footer content in to dynamic wordpress content

  47. Wendy K

    I installed the insert headers and footers plugin on my clients Wordpress site but when I click on it under settings it just shows a blank page. There are no fields available for me to insert text into.

  48. Geraldinesmythe

    Hi,
    I’m trying to install an html5 banner ad at the top of my home page and a few other page tops. I have a customer that wants to only deliver their banner ad in that format so that as a rotating banner each image links to a different url we’re promoting. Where do I put this code to make it show up? I’ve tried downloading some plugins to place it but nothing is working. We normally just accept jpgs and links but I don’t want to lose this sale as she won’t deliver other than in html5. Thanks for your help! Geraldine

  49. Gareth

    Hi, I love the simplicity of this plugin. There is one annoying point however.

    How can I disable the dashboard notice “Thank you for installing….” in a multisite set up.

    I don’t need all my client sites seeing that notice.

    A solution that doesn’t involve another plugin would be appreciated, preferably I can just remove an action or something.

    • Gareth

      Does that mean that I can’t disable the notice? (without hacking the plugin)

返信を残す

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