WordPress ヘッダーまたはフッターへのコードの追加

さまざまな理由から、ある時点で WordPress サイトのヘッダーまたはフッターにコードを追加したい、または追加する必要がある可能性があります。 残念ながら、このプラットフォームには、すぐに使用できる簡単で直接的な方法が用意されていません。

良いニュースは、子テーマとfunctions.phpファイル、または WordPress プラグインの助けを借りて、これを簡単に修正できることです。 どの方法を選択しても、カスタム機能、ユーザー データ、およびパフォーマンス向上戦略を使用して、サイトを簡単に強化できます。

この投稿では、WordPress サイトのヘッダーとフッターにコードを追加する必要がある、または追加したい場合をいくつか説明します。 次に、これらの要素を編集してカスタム ヘッダーまたはフッターを作成できるようにする 2 つの方法について、順を追って説明します。 始めましょう！

WordPress のヘッダーとフッターのコードを編集する理由

WordPress のヘッダーまたはフッターを編集する理由はさまざまです。 おそらく最も明白なのは、カスタム コードを使用してサイトのスタイルを設定したい場合があり、このコードをヘッダーやフッターに追加する方法が必要な場合です。

ただし、これらは、Google Analytics で使用されるような追跡コードの主要な場所でもあります。 これらのコードは、ユーザーの行動に関する貴重な情報を提供し、マーケティングおよびコンテンツ戦略を強化することができます。

さらに、WordPress にはデフォルトでメタ タグが含まれていません。 これらはサイトのヘッダーに追加され、検索エンジンがページをクロールできるようにします。 現在は以前ほど関連性がなくなっていますが、ヘッダーに追加しても害はありません。サイトの可視性を高めるだけです。

最後に、レンダリングをブロックする JavaScript を「スクロールしなければ見えない位置」に移動する慣行に慣れているかもしれません。 これは通常、WordPress のフッターに追加することを意味し、そのコードを編集する必要があります。 この手法は、読み込み時間を短縮することで、サイトのパフォーマンスを向上させるのに役立ちます。

WordPress ヘッダーまたはフッターに手動でコードを追加する方法 (2 ステップ)

WordPress のヘッダーまたはフッターにコードを追加するには、主に 2 つの方法があります。 1 つ目はサイトのテーマを手動で編集する方法で、2 つ目はプラグインを使用する方法です。 テーマのファイルを手動で編集することはより危険で困難ですが、一部の上級ユーザーにとっては好ましい方法です。

ステップ 1: 子テーマを作成する

WordPress のヘッダーまたはフッターに手動でコードを追加するには、テーマのファイルの一部を編集する必要があります。 これを行う必要がある場合は、親テーマのファイルを直接いじるのではなく、子テーマを編集するのが常に賢明です。 これにより、テーマを更新するときに変更内容が失われるのを防ぐことができます。

幸いなことに、子テーマを手動で作成するプロセスは非常に簡単で、ヘッダーをカスタマイズするために必要な WordPress チュートリアルにアクセスできます。 ただし、ピンチで子テーマを作成する必要がある場合は、Child Theme Configurator などのテーマ ビルダー プラグインが役立ちます。

テーマ ビルダー プラグインを使用すると、ボタンをクリックするだけで子テーマを簡単に生成できますが、完全に手動の方法でも、メソッドをダウンさせればすぐに作成できます。

ステップ 2: 子テーマのfunctions.phpファイルを編集する

子テーマをセットアップしたら、そのfunctions.phpファイルにアクセスして編集する必要があります。 開始する前に、間違いを犯して以前の状態に簡単に復元したい場合に備えて、サイトをバックアップすることをお勧めします。

functions.phpファイルを編集する通常の方法は、ファイル転送プロトコル (FTP) と FileZilla などの FTP クライアントを使用することです。 ただし、WordPress ダッシュボードから特定のファイルを編集することもできます。 アクセスするには、 [外観] > [テーマ エディター]に移動します。

テーマのファイルを編集しようとしているという警告が表示されます。 [理解しました]ボタンをクリックして続行します。 次に、正しいファイルが選択されていることを確認します。 サイト エディターの右側のサイドバーで、テーマ関数 (functions.php)が選択されていることを確認します。

このファイルの末尾にカスタム コードを追加し、終了したら[ファイルの更新]をクリックします。

プラグインを使用して WordPress ヘッダーまたはフッターにコードを追加する方法 (2 ステップ)

場合によっては、WordPress テーマのファイルを手動で編集してフッターまたはヘッダー セクションにコードを追加する方が簡単な場合もありますが、通常はプラグインを使用する方が安全な方法です。 この記事では、ヘッダー、フッター、およびポスト インジェクションというタスクに最も人気があり評価の高いプラグインの 1 つを使用します。

ただし、WordPress プラグイン ディレクトリやその他の場所には、このタスクに役立つ多くのプラグインが用意されています。

ステップ 1: 選択したプラグインをインストールしてアクティブ化する

まず、使用するプラグインをインストールしてアクティブ化する必要があります。 これを行うには、プラグイン ディレクトリまたは別のオンライン マーケットプレイスからプラグインの.zipファイルをダウンロードし、サイトにアップロードします。 または、ダッシュボードで[プラグイン] > [新規追加]に移動します。

ここで、使用するフッターまたはヘッダー プラグインを検索できます。 どちらの方法を選択しても、 [インストール]ボタンをクリックしてこの手順を終了し、オプションが表示されたら[アクティブ化] をクリックします。

ステップ 2: コード スニペットをヘッダー、フッター、ポスト インジェクションに追加する

プラグインをインストールすると、ダッシュボードで[設定] > [ヘッダーとフッター]に移動できるようになります。

ここには、ヘッダーやフッターに含めるコード スニペット (Google アナリティクス トラッキング コードやカスタム JavaScript など) を追加するためのテキスト エディターがあります。

このページでできることはたくさんあります。 最初の 2 つのフィールドで、ヘッダー セクションにコードを追加できます。 左側のフィールドは、サイトのすべてのページにコードを追加します。これは、たとえば Google アナリティクスに役立ちます。 右側のフィールドは、ホームページにのみコードを追加します。

次のフィールドは、ページの本文とフッター コードにコードを追加します。 左側のフィールドはデスクトップ表示用で、右側のフィールドはコードのモバイル バージョン用です。 編集が完了したら、画面の下部にある[保存]ボタンをクリックすることを忘れないでください。

WP Engine でサイトのエクスペリエンスを改善する

WordPress Web サイトで最高のデジタル体験をユーザーに提供したいと考えていることは間違いありません。 WordPress のフッターまたはヘッダーにコードを追加することは、サイトのカスタマイズ、Google アナリティクスの実装、またはパフォーマンスの改善に役立つ戦術です。

WP Engine には、WordPress Web サイトのエクスペリエンスを新たな高みに引き上げるのに役立つさまざまな開発者リソースがあります。 今日それらをチェックしてください！