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

公開: 2021-09-06

WordPressのヘッダーとフッターにコードスニペットを追加する必要がある状況に精通していますか?

これは、Google AdSense、Google Analytics、Google SearchConsoleなどのサービスをWebサイトに統合しようとしたときによく発生します。

デフォルトでは、WordPressはヘッダーとフッターにコードを追加するオプションを提供していません。 しかし幸いなことに、初心者のための他の簡単な方法があります。

このガイドでは、WordPressでヘッダーコードとフッターコードを追加する方法について、2つの異なる方法を説明します。 最も簡単な方法は、WordPressプラグインを使用することです。 次の方法では、テーマのPHPファイルにコードスニペットを追加できます。

それでは、詳細を見ていきましょう!

目次

  • WordPressでのヘッダーとフッターのコードの追加–2つの簡単な方法
    • 方法1:プラグインを使用してWordPressヘッダーとフッターにコードを追加する
    • 方法2:WordPressでヘッダーとフッターのコードを手動で追加する
  • 結論

WordPressでのヘッダーとフッターのコードの追加–2つの簡単な方法

上記のように、プラグインを使用するか、WordPressのヘッダーとフッターに手動でコードを追加することができます。 手動の方法に比べてはるかに簡単で安全なため、単純なプラグインを使用することをお勧めします。

プラグインを使用してWordPressのヘッダーとフッターにコードを追加する利点は次のとおりです。

  • 簡単、高速、整理:プラグインの使用は、手動によるアプローチに比べてはるかに簡単で迅速です。 さらに、プラグインを使用すると、タスクが整理され、ヘッダーコードとフッターコードを1か所に保存できます。
  • エラーの防止:プラグインは使いやすく、初心者にも優しいです。 Webサイトで使用するために、カスタムコードを変更する必要はありません。 したがって、起こりうるエラーを防ぎます。
  • 変更はそのまま残ります:プラグインは、ヘッダーとフッターのコードを別の安全な場所に保存します。 したがって、テーマを更新または編集しても、設定はそのまま残ります。

そうは言っても、これらの両方の方法を使用して、WordPressにヘッダーとフッターのコードを追加するステップバイステップのプロセスを掘り下げてみましょう。

ただし、最初に、問題が発生した場合や以前の設定に戻したい場合に備えて、WordPressファイルをバックアップしてください

方法1:プラグインを使用してWordPressヘッダーとフッターにコードを追加する

WordPressにヘッダーとフッターのコードを追加するためのWordPressプラグインはたくさんあります。 ただし、Insert Headers andFootersプラグインを使用することをお勧めします。 このプラグインには、シンプルなインターフェイスと組み込みの機能があり、ヘッダーファイルとフッターファイルにコードを簡単に追加できます。

このプラグインを使用してWordPressにヘッダーとフッターのコードを追加する方法は次のとおりです。

  • WordPressダッシュボードで[プラグイン]> [新規追加]に移動します。
  • Insert Headers andFootersプラグインを検索します。
  • インストールしてアクティブ化します。
  • アクティベーション後、ダッシュボードの[設定]に移動します。 次に、[ヘッダーとフッターの挿入]オプションをクリックします。
  • ヘッダー、本文、フッターのコードを追加できるボックスが表示されます。
スクリーンショット名:header、body、footer.pngにコードを追加するオプション
  • ヘッダーボックスとフッターボックスにコードを追加するだけです。
  • 完了したら、[保存]ボタンをクリックします。

これで、プラグインは、サイトのそれぞれの場所に追加したコードを自動的にロードします。 コードを編集または削除するには、これらのヘッダーボックスとフッターボックスに戻ってコードを削除します。 最後に、変更を保存して続行します。

ノート:

  • このプラグインを常にインストールしてアクティブにしておく必要があります。 プラグインを無効にすると、WordPressはサイトへのコードの追加を停止します。
  • 変更を保存した後、WordPressのキャッシュをクリアする必要があります。 そうすることで、変更がWebサイトのフロントエンドに正しく表示されるようになります。

方法2:WordPressでヘッダーとフッターのコードを手動で追加する

手動による方法は、最初の方法よりも少し技術的です。 スニペットを準備してから、WordPressのfunctions.phpファイルに追加する必要があります。 変更を加える前に、必ずWordPressバックアップを作成してください。

親テーマを更新するとコードが上書きされるため、編集中に子テーマを使用することもお勧めします。 子テーマファイルをインストールして編集すると、後で設定が失われないようになります。

多くの開発者は、特定のWordPressテーマの子テーマを提供しています。 ただし、持っていない場合は、WordPressに子テーマをインストールする方法を確認してください

ここで、WordPressバックアップを作成し、子テーマをインストールした後、以下の手順に従って、ヘッダーとフッターのコードを手動で追加します。

ステップ1:コードスニペットの準備

ヘッダーとフッターには、次のスニペットフレームワークを使用できます。

ヘッダーのコードスニペット

/* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ ?> PASTE HEADER CODE HERE <?php };

フッターのコードスニペット

* Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ ?> PASTE FOOTER CODE HERE <?php };

これらのスニペットのそれぞれについて、以下を独自のものに変更してください。

  • 「ヘッダー/フッターのコードスニペットを説明してください」
  • 「your_function_name()」
  • 「ここにヘッダー/フッターコードを貼り付けます」

ステップ2:子テーマのfunctions.phpファイルにコードスニペットを追加する

ヘッダーとフッターのコードスニペットを準備したら、それらのコードをテーマのfunctions.phpファイルに追加する必要があります。

これがあなたがそれをすることができる方法です:

  • WordPress管理パネルから[外観]> [テーマエディター]に移動します。
テーマエディタの設定
  • functions.php 」ファイルをクリックします。
  • 次に、ファイルの最後にコードを貼り付けます。
  • [ファイルの更新]ボタンをクリックして、設定を保存します。
関数にヘッダーとフッターのコードを追加する

特定のページまたは投稿にコードを追加する場合は、次のように「 if 」ステートメントを追加できます。

ヘッダーの場合

 /* Describe the code snippet for your header */ add_action('wp_head', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE HEADER CODE HERE <?php };

フッターの場合:

 /* Describe the code snippet for your footer*/ add_action('wp_footer', 'your_function_name'); function your_function_name(){ if(is_single(73790)) { ?> PASTE FOOTER CODE HERE <?php };

:番号「 73790 」をページまたは投稿IDに置き換えてください。

結論

WordPressにヘッダーとフッターのコードを追加する主な理由は、Google AdSense、Google Analytics、Facebook Pixel、その他のツールなどのサードパーティのサービスを使用するためです。 ただし、さまざまな理由も考えられます。

理由が何であれ、プラグインを使用するか、functions.phpファイルにコードを追加することで、ヘッダーとフッターにコードを追加できます。 これらの方法はどちらも効果的ですが、初心者の場合は、最初の方法と推奨される方法を使用する必要があります。 それはより簡単で安全です。

さらに質問や懸念がある場合は、以下のコメントセクションでそれらを共有してください。