WPBeginner - 初心者のためのWordPressチュートリアル

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でヘッダーとフッターのコードを追加する方法（簡単な方法）

Updated: by Editorial Staff | レビュー Syed Balkhi | Reader Disclosure

シェア フェイスブックメッセンジャー 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にヘッダーとフッターのコードを簡単に追加する方法を見てみましょう。

動画チュートリアル

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で人気 今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 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

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

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Rattanak says

    Adsense give me copy code in to my site (between head) , where I can put code into my site?? I use premium plan!

    返信

  3. MADHUSUDAN says

    Hi,

    Your team member has tried to resolve my issue and they are on time .. but i just saw this place where we can leave a reply..

    I am trying to add a meta tag to my front page as required by my affiliate programm company to get to promote their product. I used add header and footer plug in as suggested by your team member and after adding and saving changes I do not see the changes .. how would the site look after adding the meta tag by the way the meta tag is as below

    OR the other option is to add a new page with their code which is .html . i tried to copy paste as but it remains as such. IS IT BECAUSE MY SITE IS PHP SUPPORT AND THE CODE IS HTML OR HOW?

    Hope to recieve your advice and feedback.

    返信

    • WPBeginner Support says

      Hi Madhusudan,

      The meta tags are located in your website’s HTML code. They are added in the header section or at the end. Meta tags are not visible on your website and do not make any change to your website’s appearance. You can still view the meta tag by viewing the source or using the inspect tool.

      返信

      管理者

  4. Angela says

    I have added the header/footer plug in. I added my facebook pixel code and hit saved. But how to I install this code to specific pages of my website so I can track certain conversions?

    返信

  5. Jen says

    I use this plug-in all the time with no issues. Today, I installed it and added my code needed into the correct area. Every page is showing the code except the home page. Any idea why every page would have the code except the home page?

    返信

  6. John says

    This post doesn’t teach what script to put in the footer though. What simple script can I use to get started? I just want a simple footer.

    返信

  7. Sarthak says

    I am having an issue her. It would be very helpful of you to resolve my issue.
    I have to add the code of google adsense in the header of my website, but earlier i had added the instant article code in the header, now what shold i do to keep both of them?
    (As i am the beginner, so i don’ know much about it. Help me please.)

    返信

  8. George Beasley Jr says

    I tried installing the “Insert Headers and Footers” into my website. When I go to “Settings/Insert Headers and Footers”, I get this error: (Fatal error: Call to undefined function wp_unslash() in /home/afvetrep/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 169)
    What do I do?

    返信

    • WPBeginner Support says

      Hey George,

      wp_unslash() is a standard WordPress core function since WordPress 3.6. If you are using an older version of WordPress, then you need to update WordPress.

      If you are using the latest version of WordPress and still seeing this error, then let us know and we will help you troubleshoot.

      返信

      管理者

  9. Frank says

    Hi. I am inserting a MailChimp popup script into the footer and this breaks my WP main navigation menu. Any idea why or how to fix it ? I just upgraded to your latest plugin version but the problem persists. Thanks.

    返信

  10. Riju says

    Please help me
    I can’t see any editor on appearance..
    I need to put webmaster tool verify meta code in how can I edit the header?
    Need help

    返信

  12. Riju says

    Hi, I can’t see any
    I’m trying to connect my WB with Adsense

    Can i add Adsense ad code on WordPress after using mobile???
    Please help

    返信

  13. echenze says

    Hi, can this still be used to insert the code that one is given for verification of a Google Adsense account?

    返信

  14. Samuel says

    This is one of my best plugins and i use em frequently to add codes to the header and footer, but something happen after i update the plugins few hours ago, it gave an error [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]

    Please resolve this

    返信

  15. Meaghan Nutt says

    This was really easy but it changed my header on the website and it is huge! It has pushed down my slider and my content for a huge white box. Help!

    返信

  16. raunak says

    hey thanks for this amazing plugin
    but could it work if i paste google verification code on the header

    返信

  17. massive says

    Thank you for this greate article, my question can I use this plugin to insert ad codes like ad codes of affiliates programs?

    返信

  18. Rizwan Amjad says

    Hellow.. i am using this plugin, I have a question that can i use this plugin to insert multiple codes in this way..

    Code 1
    Code 2
    Code 3

    Simply Code 1 and then Enter Button and code 2 and enter button.

    I want to insert codes likes google authorship, analytics, webmaster, etc.

    返信

      • Isabella says

        Hi, This is probably a silly question, but if I already installed a facebook script in the header and now want to install another one from Hotjar, I am deleting the prior Facebook script so it is not re- installed, correct? Sorry I am not well versed in code.

        Thanks

        返信

  22. Vladimír says

    This is grat plugin, I see it is more than one year without updates. Could you please update it?

    Vladimir

    返信

  23. Lauren says

    Thanks so much for the video. I tried to figure this out through other websites, and with my own brain, but I was still unsure. Your video was short and sweet, and finally gave me the visuals I needed to get the job done. Thanks again!

    返信

  25. khalid says

    hey amazing people, i installed and added FB instant article code but FB still says that the code is not in the website.

    I have added it to head section part.

    返信

    • Suzanne Ball says

      I get “403 Forbidden

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

      when I insert the google script

      返信

  26. Rene Hedges says

    Thank you! Being very new to site building, and with no experience with working with coding, this was easy to follow!

    返信

  28. Marcelo Guimaraes says

    Hello! I am using Insert Headers and Footers to add the Google Analytics code to my WP site. Do I need to worry about each page on my site separately or am I covering the entire site simply by following the instructions on this video and adding the code to the Headers box (Insert Headers and Footers > Settings)?

    返信

  30. Patrick Saad says

    Hello !

    This would be my first time using your plugin. I am hoping to render my web site more secure by adding these following scripts in the header :

    X-Content-Type-Options: nosniff

    X-Frame-Options: SAMEORIGIN

    X-XSS-Protection: 1; mode=block

    My questions are : Can I use your plugin to do this and if so do I make the header addition scripts one at a time or as I have typed them here.

    Thanks for your help !

    返信

    • WPBeginner Support says

      The more appropriate way to set HTTP headers in WordPress is by using the send_headers hook. Here is an example, it goes in functions.php file. 

      add_action( 'send_headers', 'add_header_xua' );
function add_header_xua() {
	header( 'X-UA-Compatible: IE=edge,chrome=1' );
}
      Hosted with ❤️ by WPCode

      1-click Use in WordPress

      返信

      管理者

  31. Conrad Hall says

    Hi,

    I’m new to WPBeginner.com, and this is the first tutorial I have viewed. To be blunt, I’m stunned that a tutorial says “Here you see two text boxes where you can add your code. Simply copy and paste any meta information, scripts, Google Analytics, etc. and click “save settings”. This code will now be output to either your header or you footer.”

    Regrettably, there are no links to information that helps a beginner understand how to get, or use, any of the code indicated. This renders the plugin useless to me.

    My use for this plugin is to use it for connecting to pages such as privacy policy and publisher disclaimer. Is there a tutorial somewhere that shows this? if so, please link to it from this page.

    返信

  32. Richard Bauer says

    Can Headers be static menus that include text, graphics, and links to pages? Same for Footers.
    is my site and is developed using FrontPage. We want to simply convert the entire site to Word Press as simple as possible. All links are to other site pages, site PDF and Word files, and a few external links. No Forms, No dynamic database, NO searches.

    any help would be appreciated

    返信

  36. WPBeginner Staff says

    It seems like your WordPress theme does not uses the standard wp_header and wp_footer functions. Please try switching temporarily to a default theme like twenty thirteen and see if the problem persists.

    返信

  37. Mufidah Kassalias says

    I’ve been using this plugin happily until the other day when we upgraded to the latest theme version (a major upgrade). The plugin broke our menu (it took quite a bit of investigation to narrow it down and be sure it was this plugin causing the conflict), so I’ve had to deactivate it. As you can imagine this is not a great solution, since our Google site verification, publisher info, analytics tracking and so on no longer exist in the head of our site. Do you have any suggestions regarding additional code I could include that would resolve the problem? Thank you.

    返信

  39. Andrea says

    Hi there. I’ve noticed that I have to deactivate the plugin in order to see my images to insert them into a post. Is there way to fix this? I love the plugin otherwise!

    返信

  42. Krista says

    Hi there,
    I am trying to update my one line of code in google analytics to get demographic info. I am sure I have pasted it correctly into the header(and footer, which I have always had there, but just read in a previous comment is unnecessary.) When I clcik the button in google analytics to validate code, it does not recognize the change. Have tried several times. Could you help me figure out how to solve this, please? Thanks!

    返信

  45. Bob says

    I’m using Genesis and am looking for a footer which is much more plug and play such as a widget where typical footer fields can be entered by a business user (non-coder). Even the available widget-based footers I see in the marketplace only go as far as saying ok, here’s your space, now add a random widget with some code snippets (way beyond my skills).

    If that magic doesn’t exist, can I just copy the footer code you are using on wpbeginner.com, edit the info and paste it into a Text widget into my Footer 1 position?

    返信

  46. april whitlow says

    If I am using this for google analytics, do i insert it into the header and footer or just the footer. sorry for the simple question. I am at the very beginning of learning.

    返信

  47. Vince says

    How do you add header scripts in just “one specific” page? This plugin is only applicable if you are adding a script for all the pages, but is not applicable if you will add it in a specific page.

    返信

    • Rya says

      for “How do you add header scripts in just “one specific” page? This plugin is only applicable if you are adding a script for all the pages, but is not applicable if you will add it in a specific page.”
      You can use php w/ the following info:
      http://codex.wordpress.org/Conditional_Tags
      in conjunction with your scripts.

      返信

  48. Fayola says

    I did this and I see that the script appears in the footer of my page. However, Google Analytics still says that the tracking is not installed. Please help!

    返信

  49. Stan Peters says

    I get Notice: wp_register_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in C:\tools\xampp\htdocs\wpfrontier\wp-includes\functions.php on line 2758
    when I use it to insert google font code in header

    返信

    • Editorial Staff says

      This plugin is mainly created for analytics script, or meta information. This is not meant to be used for inserting jQuery or other design elements like those. The purpose was to allow users to easily add tags in their head or footer without editing theme files.

      返信

      管理者

  50. Mladen says

    I have tried to add FB meta tags in header with this plugin, but it didn’t work. The idea is good, though.

    返信

    • Editorial Staff says

      If you are trying to add dynamic PHP code in this plugin, then it would not work. This plugin does not execute PHP. It is mainly for inserting static meta tags.

      返信

      管理者

      • Mladen says

        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 ) ) ?>” />

        Can you tell me if this plugin is good for this purpose? Thanks

        返信

  51. Gautam Doddamani says

    a great plugin but my custom theme already has this option! will bookmark this post in case i change my themes.

    返信

    • Editorial Staff says

      Yeah it’s main purpose is to keep you from being theme dependent. Often people place their Analytics codes etc in their theme’s footer scripts area like this. Then they forgot about it when they switch themes. This causes them to lose analytics data for number of days.

      返信

      管理者

返信を残す

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

著作権 © 2009 - 2024 WPBeginner LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。

Awesome Motiveが管理する｜WordPressホスティングがSiteGroundが管理する

を手伝ってほしい。…

人気のある検索

ブログの開始 ワードプレス SEO WordPress パフォーマンス WordPress エラー WordPress セキュリティ オンラインストアの構築