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

公開: 2020-10-30

コードを使用してWordPressWebサイトをカスタマイズするのは、恐ろしいことです。 多くの場合、構成を変更したり、新しいパラメーターを追加したりするためにコアファイルを掘り下げる必要があります。これは、間違った方法でサイトを破壊する可能性があります。

ただし、ヘッダーコードとフッターコードの追加ははるかに簡単になる傾向があります。 多くの場合、特定のコードスニペットをコピーして貼り付けるだけで済みます。 これは、ヘッダーファイルとフッターファイルにアクセスする方法を知っている場合、最も恐ろしい部分を過ぎたことを意味します。

この記事では、WordPressで手動とプラグインの両方でヘッダーとフッターのコードを追加する方法を説明します。 どちらのアプローチも非常に簡単なので、すぐに始めましょう。

WordPressでヘッダーとフッターのコードを追加する必要がある理由

Webサイトを運営している場合は、接続するためにコードを埋め込む必要がある少なくとも1つのサードパーティサービスに精通している可能性があります。

最も人気のある例には、Google Analytics、検索コンソール、Facebook Pixel、およびWebサイトの追跡を含む他の多くのツールが含まれます。

これらのサービスはすべて、Webサイトのヘッドタグの間に特定のスクリプトを追加する必要があります。 サイトのヘッダーは、スクリプト、タイトル、スタイルファイルなどの要素を含む重要なコンポーネントです。

ヘッダーファイルの例。

フッタータグは、対応するヘッドタグと同様に機能します。 技術的には、サイトのフッターにコードスニペットを追加する場合、ヘッダーにコードスニペットを含める場合と同じように実行する必要があります。

ただし、Webサイトは、スクリプトを含めた順序でスクリプトを実行することを理解することが重要です。 さらに、ヘッダーコードは  ページが読み込まれる前に実行され、フッターコードはページが読み込まれた後に実行されます。

選択するオプションがあり、Webサイトの最適化に関心がある場合は、JavaScriptをサイトのフッターに移動すると、読み込み時間を短縮できます。 ただし、一部のサービスでは、実行の問題を回避するために、ヘッダーにコードを追加するように明示的に要求されます。

経験則として、サービスがこれを要求した場合は、そのアドバイスに従うことをお勧めします。 その他のJavaScriptコードスニペットについては、WordPressサイトのフッターに配置してください。 CSSコードは常にヘッダーに入ります。

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

WordPressでよくあることですが、ファイルを手動で変更するか、プラグインを使用することで、同じ目標を達成できます。

プラグインのアプローチについて話すことから始めましょう。

1.ヘッド、フッター、ポストインジェクションなどのプラグインを使用する

プラグインを使用してWordPressのヘッダーファイルとフッターファイルにコードを追加するのが最も安全な方法です。 プラグインを使用すると、テーマファイルを手動で変更したり、スクリプトを適切な場所に追加していることを確認したりする必要はありません。

選択できる優れたプラグインはたくさんありますが、このジョブの推奨事項は、ヘッド、フッター、およびポストインジェクションプラグインです。

ヘッド、フッター、ポストインジェクションプラグイン

このプラグインを使用すると、コードのどこにコードスニペットを追加するかを細かく制御できます。 また、サイトのモバイルおよびデスクトップレンダリング用にさまざまなスクリプトを追加するオプションも提供します。

プラグインを追加するには、ダッシュボード内で[プラグイン]> [新規追加]に移動し、検索機能を使用してプラグインを見つけます。 インストールをクリックしてから、プラグインをアクティブにします。

プラグインがアクティブになると、 [設定]> [ヘッダーとフッター]に直接ジャンプできます。 コードスニペットを追加できる複数のフィールドが表示されます。

プラグインのヘッダーコード配置オプションを確認する

プラグインのオプションを掘り下げると、コードスニペットに多くの追加の配置が提供されていることがわかります。 ただし、ほとんどの場合、[ヘッド]タブと[フッター]タブに固執することができます。

グローバルコードの場合は、これらのスニペットを[すべてのページ]フィールド内に配置してください。 ただし、ホームページで実行するコードのみが必要な場合は、 [ホームページのみ]オプションを使用してください。

Webサイトへのコードの追加が完了したら、プラグインへの変更を保存して、準備が整います。

2.functions.phpファイルからコードスニペットを追加します

WordPressでヘッダーとフッターのコードを手動で追加することは複雑ではありませんが、プラグインのアプローチよりも多くの考慮事項が必要です。

コードをアクティブなテーマのheader.phpまたはfooter.phpファイルに直接追加できます。 これらのファイルは、アクティブなテーマのフォルダーを開いて内部を調べることにより、 / public_html / wp-content / themes /ディレクトリ内にあります。

FTP経由でヘッダーファイルとフッターファイルにアクセスする

これらのファイルには、ファイル転送プロトコル（FTP）を介してアクセスし、お気に入りのコードエディターを使用して編集できます。 ただし、ヘッダーファイルとフッターファイルを直接編集するのは面倒な場合があります。 これを念頭に置いて、手動アプローチの使用を計画している場合は、次の2つの推奨事項があります。

  1. テーマの子テーマを作成します。 このように、親テーマを更新するときにカスタマイズが失われることはありません。
  2. フックを使用して、 functions.phpファイルからコードを追加します。 これにより、ヘッダーファイルとフッターファイルを手動で編集するよりもクリーンなアプローチが提供されます。

理想的には、任意のタイプのテーマのカスタマイズを行う予定がある場合は、常に子テーマを使用する必要があります。 / wp-content / themesディレクトリ内のフォルダにある子テーマのfunctions.phpファイルにアクセスできます。

コードエディタでfunctions.phpファイルを開きます。 必要なコードを追加するには、 wp_headのいずれかを使用する必要があります  またはwp_footer   針。

次のコードスニペットは、カスタムコードをサイトのヘッダーに追加します。

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

コードをフッターに配置する場合は、 wp_headの代わりにwp_footerフックを使用できます。 必要に応じて、関数の名前（test_script）を変更することもできます。

関数.phpファイルの調整が完了したら、変更を保存することを忘れないでください。それだけです。 追加したコードはすべて、今は機能しているはずです。

結論

GoogleAnalyticsやFacebookPixelなどの多くのサードパーティサービスでは、Webサイトに接続できるようにコードスニペットをWebサイトに追加する必要があります。 ただし、これはWordPressのヘッダーとフッターにコードを追加する必要がある多くのケースの1つにすぎないため、その方法を知っておくとよいでしょう。

ヘッダーとフッターにコードスニペットを追加する方法は2つあります。 「ヘッド、フッター、ポストインジェクション」などのプラグインを使用するか、 functions.phpファイルからコードスニペットを追加できます。

WordPressでヘッダーとフッターのコードを追加する方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！