WordPress ヘッダーとフッターに簡単にコードを挿入する：WPCode Insert Headers and Footersプラグイン

Last Updated: 2024 年 10 月 29 日 14のコメント
無料電子ブック AdSense ウェビナー

WordPressヘッダーやフッターにコードを追加する場合、いくつかの方法があります。 通常は、FTPに接続してテーマファイルを変更する方法を利用することができます。

FTPにアクセスできない場合、またはテーマファイルを変更したくない場合、または管理者ページから簡単にコードを挿入したい場合は、WPCode（以前の名前「Insert Headers and Footers」）プラグインを使用できます。

※Insert Headers and FootersプラグインはWPCodeに名称が変更されました。

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

WordPressでヘッダーとフッターにコードを追加するには、さまざまな方法があります。

  1. テーマがヘッダーとフッターにコードを入れるオプションをサポートしている場合は、そのオプションを使用してください。
  2. テーマ関数ファイルでenqueue関数を使用してヘッダーまたはフッターにコードを追加する
  3. 子テーマを作成し、 header.php または footer.php ファイルにコードを追加する
  4. WPCodeなどのプラグインを使用する

WordPress ヘッダーとフッターに簡単にコードを挿入できるWPCode（ライティング名Insert Headers and Footers）プラグイン

WordPress Insert Headers and Footersプラグイン

WPCodeプラグインを使用すると、Google Analytics、カスタムCSS、Facebook Pixel、 Naver アナルリックティクス、 Naver ウェブマスターツールを所有確認メタタグなどのコードを WordPress 管理者ページで簡単に追加することができます。

Yoast SEOやRank MathなどのSEOプラグインを使用している場合は、Google検索コンソールのサイト所有コードまたはBing Webマスターツールのサイト所有コードをプラグインオプションで追加できます。ただし、 Naver ウェブマスターツールサイトの所有権確認コードをサポートするSEOプラグインはありません。

Webホスティングに参加して使用する WordPress 置型では使用に制約はありませんが、 WordPress 加入型（WordPress.COM）では、プランに応じて制約があります。 たとえば、プレミアムプラン以下ではユーザーコードを追加できませんが、ビジネスプラン以上でプラグインを使用してユーザーコードを追加できます。 AdSense 広告掲載も可能です。 ビジネスプランを使用している場合は、このプラグインをインストールしてユーザーコードを簡単に追加できます。

このプラグインをインストールするには、 WordPress お知らせ»プラグイン»新規追加をクリックして、 WPコード（旧名「Insert Headers and Footers」）を検索してプラグインをインストールして有効にします。

WordPress WPCodeプラグインのインストール

このプラグインは、現在、100万以上のサイトに設置されて使用されています。 このプラグインを有効にした後、 WordPress 管理者ページ » Code Snippets » Header & Footer メニューをクリックして、ユーザーコードを追加することができます。

WordPress WPCodeプラグイン

ヘッダコードを入れると セクションにスクリプトが追加されます。 フッターコードを入れると タグのすぐ上にスクリプトが挿入されます。

JavaScriptの場合、この方法で追加するのではなく、WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「紹介する方法で追加すると、サイトの速度に影響が少なくなります。

テーマで提供される機能を使用して、ユーザーコードを追加する

Avada

一部のテーマでは、このプラグインで提供される機能を提供しています。 例えば、 Avada テーマは Avada » Theme オプション » 高機能 » Code Fields (Tracking etc.)ユーザーコードを入力することができます。

Avada テーマにユーザーコードの挿入

Avada テーマは Themeforestテーマの中で最も多くの販売を記録しているベストセリングテーマです。同様の販売量と機能を提供するテーマとしてDiviテーマがあります。

💡Avada テーマとDiviテーマのどちらが良いですか？

Enfold テーマ

Enfold テーマの場合見てみると、ヘッダーとフッターにコードを追加することができる別のオプションは提供されず、GoogleはアナリティックスのコードとGoogle Maps APIキーを挿入することができるオプションが提供さね。

Enfold テーマコードを追加する

グーグル・アナリティクスコードはSEOのプラグイン（例えば、All in One SEO）を通じて入力することができます。 そして、多くの有料テーマでGoogle Maps APIキーを追加するためのオプションを提供しています。

Diviテーマ

Diviテーマは Divi > Theme Options > Integrationであるいはにコードを追加することができます。

Diviテーマのコードを追加する

GeneratePress テーマ

ジェネレートテーマの有料版を使用している場合は、Elementを使用してヘッダーまたはフッターにコードを簡単に配置できます。

たとえば、GA4 トラッキング コードをヘッドに追加する場合は、フックで wp_head を選択できます。フッタ領域に追加する場合は、wp_footerフックを選択します。

GeneratePress テーマのフックを使用する方法については、次の記事を参照してください。

💡GeneratePress テーマフックを使用して目的の場所にコードを追加する

このようにテーマにユーザーコードを追加する機能を提供する場合は、Insert Headers and Footersなどのプラグインをインストールする必要なく、テーマが提供する機能を使用することをお勧めします。 （ただし、テーマを変えたらテーマオプションに追加したコードをもう一度追加してください。）

付録：WPCodeのコードスニペットライブラリ

WPCodeを使用している場合 コード スニペット » コード スニペットでいくつかのコードスニペットを利用できます。 Connect to the WPCode Libraryをクリックして登録すると、75種類の無料スニペットを活用できます。

付録：WPCodeのコードスニペットライブラリ

たとえば、自動更新時に送信される電子メール通知を無効にしたい場合 Disable Automatic Updates Emails コードスニペットを使用できます。

💡WordPress 自動更新メール通知を無効にする方法

メモ：

作者のアバター

ワードクラッカーはプロの英国翻訳家として活動しており、10年以上 WordPress 関連情報を提供する WordPress 情報パッケージのブログを運営している。また、 'WordPressを使用している人 Naver カフェも管理している。

14のコメント

コメント

  1. https://i.ibb.co/Z22zMHs/1016.jpg
    Yoastが言うGoogle所有確認コード、、上記のURL jpg画像では、googleで始まるテキストがGoogle所有確認コードですか？ HTMLコードを入れますか？それでは、よくやったと思いますが…そうですか？

    応答

    • 両方のプラグインはまったく同じ機能を持っているので、衝突するかどうかを残して1つだけ使用してください。 WPCodeを使用してください。

      応答

  3. Headerとheadとは違うことを知っています。 AdSense コードのようにhead部分に追加する必要があるのなら、Headerに追加すればいいのでしょうか？

    応答

  4. こんにちは〜先生
    Naver ウェブサイトに head コードを追加すると、良いという文をより書き換えます。 たとえば、仕事用携帯電話であることをキーワードをつかみ、headを追加したい場合は、、、

    Scripts in Headerにコードを入れると、セクションにスクリプトが追加されます。 Scripts in Footerにコードを挿入すると、タグのすぐ上にスクリプトが挿入されます。 こう言われましたが、、

    Scripts in Headerへ
    どのコードを入れるべきですか？

    Scripts in Body はこう述べています。 （下の領域はコピーしたものです。）

    var protect_id = 'c951';

    Scripts in Bodyには今入っているものが合っているのでしょうか？
    もしかして、ちなみに何を入れなければならないのでしょうか？

    ありがとうございます。〜

    応答

    • WordPress コメント欄にjavascriptコードを入れると、セキュリティ上の問題のため削除されます。
      マニュアルでhead部分に追加するようになっている場合は、Scripts in Headerに追加してください。

      応答

      • マニュアルでhead部分に追加するようになっている場合は、Scripts in Headerに追加してください。
        ㅡ>どんなものを追加しなければならず、正確に記載をお願いしてもよいでしょうか？
        （コピーして貼り付けることができますよㅠ）ありがとうございます。

      • Scripts in Headerにコードを挿入したら、セクションにスクリプトを追加するだけです。
        ㅡ>正確に私が何をコピーして入れればいいですか？ htmlなどこれはまったく文外なので...;;

      • どのコードを入れようとしているのかわからないので、正確な答えを出すことができないことをご了承ください。

        例えば、Google AdSenseの広告コードやグーグルアナリティクスのトラッキングコードを入れたい場合には、マニュアルを見るとヘッドセクションに追加することを案内しています。 その場合は、Scripts in Headerに入れてください。 JavaScriptコードの場合は、Scripts in Footerに追加して正しく機能するかどうかを確認できます。 問題がある場合は、ヘッダーセクションに追加してみてください。

  5. 本文では、
    Scripts in Headerにコードを入れると、セクションにスクリプトが追加されます。
    Scripts in Headerにエコードを入れればいいですか？
    これ

    応答

    • Scripts in Headerにコードを追加し、実際のページヘッダー部分にそのコードが追加されていることを確認してください。

      応答
カカオトーク相談 カトクサービス相談