WPBeginner - WordPress Tutorials for Beginners

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

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

By Editorial Staff | | Reader Disclosure

ChatGPT Perplexity X LinkedIn WhatsApp

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、JavaScript、CSS、HTML、テキストコードスニペットを簡単に挿入することができます。

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

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

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

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

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でヘッダーとフッターのコードを追加する方法については、動画チュートリアルをご覧ください：

Subscribe to WPBeginner

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.

Popular on WPBeginner Right Now!

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Download Now

Reader Interactions

266件のコメントLeave a Reply

  1. Ever since I have used wpcode on my website, it has reduced many troubles of messing with the functions.php file.
    I remember messing with the code back in 2017 and it was horrible.
    wpcode makes it easy not only to insert the code snippets but also it helps in easy maintenance.
    Moreover, it gives power to avoid lots of plugins to get small functionalities.

    返信

  2. Thanks for this guide.
    Although adding code to the header and footer was once a big problem for me as I am afraid to loose the custom code when updating my theme, I then created a child theme for this but it was somehow technical.
    Now, I am using WPcode to add the code and implement other custom codes with ease, it’s even faster as there are some ready made custom code in WPcode itself. The plugin is very useful, thanks.

    返信

  3. I’ve been using the WpCode plugin for several years and it’s really great. Especially for newbies who are afraid to insert codes into the website. This plugin is almost a must on every website. It can really save a lot of work and here on wpbeginner there are a lot of ready-made solutions.

    返信

  4. Hello
    I’ve installed the WPCode plugin and I’ve inserted code in the header field in the “Global Header and Footer” tab. This code shows a popup.
    The website is multisite and WPCode is activated on all the network.
    The popup shows well in the home page of my website, but not on other pages where people can land after searching in Google.
    What I’ve to do to get the popup showing on any page ?
    Thanks

    返信

    • Just to be certain, does your theme have a style for your other pages that uses a different header or removes the header?

      返信

      Admin

  6. 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.

    返信

    • As long as the code is added properly and you’re not placing code within other blocks of code you can add as many as you would like.

      返信

      Admin

  7. Hello, I added the code and clicked save. Nothing happened. Is there a publish button I need to press?

    返信

    • It would depend on the code you added as not all code has a visible component, you may also want to try clearing any caching on your site for another common reason for not seeing any change on a site.

      返信

      Admin

  8. Hi — Quick question. I’ve installed the plugin. Is there a way to select which pages the header and footer show up on? All I see is a global install without the ability to select pages. Thanks!

    返信

    • At the moment the plugin is for adding code to your site’s header and not showing/hiding your header. Your theme’s templates would decide where your header and footer show on your site.

      返信

      Admin

  9. I have installed the plugin (and it shows as being activated in the plugin list) but it doesn’t show up in the “Settings” menu. Did I miss a step? Could you provide a solution?
    Thanks

    返信

    • No, the option should be available once the plugin is active as long as you have access to edit the site’s settings, you would want to ensure you are an admin on the site and if it is still not visible you would want to try disabling your other plugins to see if it is possibly a conflict with one of those plugins.

      返信

      Admin

  10. Hi! I have a question! I am trying to add the global site tag and phone snippet to my code on each page so I can track my google ad calls. I have the “Headers and Footers” plugin, can I just paste it here and I am good? Or does it matter where I post it (Header vs. Body. Footer)? Thanks so much!

    返信

  11. So close to being what’s needed! But Google strongly recommends using different metadata for every page. “Identical or similar descriptions on every page of a site aren’t helpful when individual pages appear in the web results. In these cases we’re less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. ” Please consider updating your plugin accordingly.

    返信

    • 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 :)

      返信

      Admin

  12. I have a question. How do you remove code that you added using the insert headers and footers plugin? When I open up the theme editor I can’t find the code I added using this plugin.

    返信

    • Code added using the plugin would be removed when removed from the plugin’s settings or the plugin is uninstalled.

      返信

      Admin

  13. Hello, hey I added the plugin above to my site and added the code to the header section. Then I tested with your site and it said it was saved successfully.

    But I don’t see the bot when I go to the live site. Could u tell me what I’m doing worng? Tnx.

    返信

    • It would depend on the specific code you are adding, we would recommend checking with the support for the code for if you added it correctly as not all code is made to have something visible.

      返信

      Admin

  14. I wanted to change the color of my address bar using this plugin but each time I paste it gives me an error message

    Is my code okay?

    返信

    • It would depend on the specific code and where the code is intended to be added. You would want to reach out to who you received the code from for where it should be placed.

      返信

      Admin

  15. I bought a theme but it does not let me add any button action in the header nor in the menu, do you think this plugin could help me???

    返信

  16. How can add the code in the header as high as possible? I need to put Code first of few lines in the header. How can I control the position of the code?

    Thanks

    返信

    • If you need a very specific location for the code, you would want to manually add the code to your files.

      返信

      Admin

  17. USELESS for a theme that does not have headers in the first place, like wordpress 2021. Useless.

    It was implied that this plugin would do that. It. Does. Not. ALL it does in insert a GIANT version of the picture you choose ABOVE your menu and site name.

    返信

    • The 2021 theme does have a header but, the Insert Headers and Footers plugin is for inserting code such as Google Analytics, not for adding photos to the header of your website. We would not recommend using this plugin for adding a header image as that would cause the errors you are running into.

      返信

      Admin

  18. Hey There,

    I have already installed “Insert Footer and Header plugin”, if I wanna to remove from site then the inserted code would also be removed from header section or still saved without plugin?
    Kindly light me.

    返信

  19. I’m being told by Google Analytics to add a Global Site Tag code immediately after the tag. Does this plugin do that? Otherwise, I have no idea how to add this code to *every* page on my site!

    返信

  20. Thank you SO much for these simple instructions and the plug-in. I could not figure out why my website kept deleting from Pinterest!

    返信

    • Code added using the plugin will be on every post and page and not individual codes for individual posts and pages.

      返信

      Admin

  25. Hey,

    I can’t find the “Insert Headers” section below my post’s editor? So how can I enable that function allowing me insert different code for specific post?

    返信

  28. I am getting the following error when hitting SAVE from this plug-in:

    A potentially unsafe operation has been detected in your request to this site

    返信

    • You would want to check if you have any security plugins active on your site or if your host has one set up. You may also want to ensure you copied the code you are attempting to add correctly.

      返信

      Admin

  29. On your demonstration you didn’t have anything come up on the top.
    This is the instructions from the code generator I am using;
    Paste the copied code into bottom of your HTML page just before the closing tag
    I tested the code and it does not work, “Am I doing something different? “

    返信

    • We would first recommend reaching out to the support of what has generated the code to ensure there isn’t anything specific about the code that needs to be set on your page for it to work correctly.

      返信

      Admin

  30. Hello. I need to edit the header code on a specific set of pages only. I have currently added the script I need to the header.php file, however this applies the code to all pages globally.

    Is there any way I can add the script to a specific set of pages only?

    返信

    • Unless I hear otherwise, we do not have a recommended method for page specific code at this time.

      返信

      Admin

  31. Thank you so much!!!

    This stuff scares me as I think I am going to doom my website forever!!

    So easily explained will definitely be subscribing.

    I need to work on this every day.

    返信

  32. If my theme does not allow custom header images, will this plugin allow me to make custom header images. Lost on how to do this. We have an old theme with custom header function

    返信

  33. Would i be able to use a relative path? so I can move the site to a different host without changing header? if so where is the origin?

    i tried to include some some examples but sucuri blocked the post as malicious. i guess it doesn’t like seeing paths.

    返信

  34. Yaaaaaaay! I am so excited. I was having so much trouble getting my Mailchimp pop-up to work, but this plugin did the job easy-peasy!

    返信

  35. Hi, I have installed the Headers and Footers plugin and added code for the footer. The text that I want displayed is at the very bottom, below the Bento copyright line. Is there a way to have my footer appear at the top of the footer display? Thanks

    返信

    • For footer customizations, you would want to reach out to your theme’s support to see if they have any recommended options you can use.

      返信

      Admin

  36. I have already put Google analytics code in the header section using insert header and footer plugin how can I add adsense code there again?

    返信

    • That would be something you can do but not all beginners want to or understand how to create a child theme, that is why we recommend this method.

      返信

      Admin

  38. This plugin’s activation active auto bulk mail sending from my hosting server. This is working like a spam. So I have to delete this from my website.

    返信

    • This plugin does not have anything like that, we would recommend scanning your site to ensure you do not have any malicious code on your site

      返信

      Admin

  39. I added this plugin to my site but nothing showed when I clicked on the plugin? I’m using an old version of WP but not sure if this is the reason why.

    返信

  40. Hi team,

    Does the FB Pixel Base Code was copied and paste on the header tag in that plugin.
    will it automatically apply to every page of the website? Please reply!

    返信

  41. How can I add a code in body section (not in the header/footer section ) with this plugin?
    I want to add certain code in the body section to avoid render blocking.

    返信

    • The plugin should currently have a third input box where you can include code that should be in the body of your site.

      返信

      Admin

  44. 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!

    返信

    • If you add code using this plugin it would be added to your site, it would not replace code

      返信

      Admin

  46. Hi! I tried to add the plugin to my site but you need to have a business page to add any plugins? Can I add the code without a plugin?

    返信

  47. hi
    First i have install header and footer plugin than after past my google analytics code . but my problem is once past the code and see my website, the code showing disable? How to solve it?

    返信

    • If the code is not being added to your header, you would want to clear any caching on your site as that is the most common root of that issue.

      返信

      Admin

    • 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.

      返信

      Admin

  49. 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?

    返信

  50. 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!

    返信

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Copyright © 2009 - 2025 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround

The WordPress® trademark is the intellectual property of the WordPress Foundation. Uses of the WordPress®, names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation. WPBeginner is not endorsed or owned by, or affiliated with, the WordPress Foundation.

I need help with…

Popular searches:

Starting a Blog WordPress SEO WordPress Performance WordPress Errors WordPress Security Building an Online Store