WordPressは、複数のPHPテンプレートファイルをアセンブルして、ブラウザでユーザーに読み取り可能なコンテンツをレンダリングします。WordPressテーマには、header.php、footer.php、single.php（投稿用）、page.php（ページ用）、sidebar.phpファイルが含まれ、最新のテーマは追加のテンプレートセクションを使用してメインコンテンツを生成します。
これらのテンプレートはすべて、ブラウザでWordPressページを表示すると、きちんと組み立てられて表示されます。通常、これらのファイルを変更する必要はなく、カスタム機能を挿入するために利用できるプラグインがあります。ただし、場合によっては、WordPressのヘッダーセクションとフッターセクションにコードを挿入する必要があります。
この記事では、プラグインを使用しない場合と使用する場合の方法について説明します。
ヘッダーまたはフッターにコードを挿入するのはなぜですか？
ヘッダーセクションとフッターセクションは、さまざまなコード統合やサイトへの機能の追加に便利です。WordPressサイトのヘッダーとフッターにコードを挿入する必要がある最良の例をいくつか示します。
- Google AdSenseの自動広告コード、または他の広告プログラムのマストヘッド入札広告コードを挿入します。
- GoogleAnalyticsとFacebookPixelトラッキングコードをインストールします。
- Bing Webmaster Tools、Google Search Console、Baidu、Yandex、およびPinterestなどの他のプラットフォームからキャプチャを挿入します。
- フッターのGoogleFontsスタイルシートやJavaScriptなどのカスタムCSSをヘッダーに追加します。
- Yoast SEOなどのプラグインを使用する場合は、ブレッドクラムなどのカスタムコンポーネントをヘッダーに挿入します。
ご覧のとおり、必要に応じてリストが長くなります。
WordPressのヘッダーセクションとフッターセクションにコードを追加する
デフォルトでは、WordPressはヘッダーセクションとフッターセクションにコードを挿入するオプションを提供していません。簡単なオプションは、ファイルを直接編集してコードを挿入することです。ただし、この目的で使用できるプラグインもあります。この記事では、WordPressサイトのヘッダーセクションとフッターセクションにコードを追加するXNUMXつの方法について説明します。
- WordPressテーマのheader.phpファイルとfooter.phpファイルを手動で編集します。
- ヘッダーとフッターの挿入プラグインを使用して、ファイルを編集せずにコードを追加します。
また、いくつかのテーマを使用して、wp_headフックとwp_footerフックを使用してヘッダーとフッターにコードを挿入する方法についても説明します。
WordPressのヘッダーとフッターのコードを手動で挿入する
このオプションでは、WordPressサイトのテーマのheader.phpまたはfooter.phpファイルを編集する必要があり、初心者向けではない場合があります。
- まず、コードスニペットを準備するか、サードパーティのサイトからコピーすることから始めます。ヘッダーとフッターのコードの準備ができたら、サイトダッシュボードの[外観]メニューにカーソルを合わせて、[テーマエディター]タブをクリックします。
- 受信した警告メッセージを無視し、[編集するトピックの選択]ドロップダウンリストからアクティブなトピックを選択します。
- 現在のビューの右側にある「header.php」または「footer.php」ファイルを選択します。
- ヘッダーの場合は、必ず終了「」タグの下にコードを貼り付けてください。その後、フッターのコードは「」の下に配置する必要があります。「ラベル。場合によっては、終了タグの前にコードを挿入する必要がある場合もあります。
- 最後に、[ファイルの更新]ボタンをクリックして、追加されたスニペットを使用してサイトへの変更を保存します。
必ずサイトをテストし、プラグインした機能が期待どおりに機能することを確認してください。
プラグインを使用してWordPressヘッダーとフッターコードを挿入する
デフォルトでは、WordPressでは[外観]> [カスタマイズ]> [追加のCSS]セクションでカスタムCSSをWebサイトに追加できます。ただし、このセクションにJavaScriptを挿入することはできません。コードを挿入するために利用できる無料のプラグインとプラグインがたくさんあります。ここでは、「WPBeginner Insert HeaderandFooter」を使用して説明します。プラグインは、初心者が簡単に使用できる非常にシンプルなインターフェースを備えています。
- まず、「ヘッダーとフッターの挿入」プラグインをインストールしてアクティブにします。WordPressサイトのダッシュボードから、[プラグイン]メニューにカーソルを合わせ、[新規追加]をクリックします。
- 検索プラグイン機能を使用して「ヘッダーとフッターを挿入」を検索し、「今すぐインストール」ボタンをクリックします。インストールプロセスが完了したら、プラグインを「アクティブ化」します。
- [設定]メニューに移動し、[ヘッダーとフッターの挿入]サブメニューを見つけてクリックします。
- プラグインは、コードを挿入するためのスクリプトをヘッダー、本文、およびフッターに配置するためのXNUMXつのボックスを提供します。それまでは、Google Analyticsなどのサードパーティプロバイダーが、コードスニペットを配置するボックスを指示します。それ以外の場合は、コードを挿入する場所を正確に知っていることを確認してください。
- これらのコードを適切なコードに貼り付け、[保存]をクリックしてサイトの変更を完了します。
- コードスクリプトは、サイトが実行されている特定の場所に自動的にロードされるようになりました。
コードをさらに編集してプラグインをアクティブに保つことができます。プラグインを非アクティブ化すると、カスタム機能の追加が妨げられ、以前にサイトに追加されたすべてのスクリプトが無効になります。
誤って「InsertHeaderand Footer」プラグインが非アクティブ化またはアンインストールされた場合、コードはサイトデータベースに残ることに注意してください。プラグインを再インストールまたは再アクティブ化するだけで、以前のコードを機能させることができます。また、プラグインのヘッダーとフッターのコードスニペットに変更を追加して保存するときは、WordPressサイトのキャッシュをクリアすることをお勧めします。
テーマを使用してヘッダーとフッターを編集する
テーマファイルを手動で編集する場合でも、プラグインを使用する場合でも、挿入するコードはWebサイト全体に影響します。特定の投稿またはページにのみカスタムコードを挿入するには、Insert HTML Snippetsなどのプラグインを使用するか、GutenbergエディターでカスタムHTMLブロックを試す必要があります。ただし、GeneratePressPremiumやAstraProなどの最新のテーマを使用してヘッダーとフッターにコードを挿入できます。これらのテーマは、標準のwp_headフックとwp_footerフックを使用し、カスタム制限を適用できるようにします。たとえば、ページに影響を与えることなく、XNUMXつの投稿にブレッドクラムを挿入するだけです。
ここでは、手順にAstra Proテーマを使用します。「要素」オプションを使用して、GeneratePressPremiumテーマで同様の手順を実行できます。
- Astra Proアドオンをインストールした後、[外観]> [Astraオプション]に移動します。
- [カスタムレイアウト]オプションをアクティブにして、そのオプションの[設定]リンクをクリックします。
- [新規追加]ボタンをクリックして、挿入するコードをボックスに貼り付けます。
- [カスタムレイアウト設定]セクションで、[レイアウト]ドロップダウンメニューをクリックし、[フック]オプションを選択します。
- [アクション]ドロップダウンリストで、ヘッダーセクションにwp_headを選択し、フッターセクションにwp_footerを選択します。
- スニペットをXNUMXつだけ使用する場合は、「優先度」を空白のままにします。ただし、同じフック位置に複数のコードを挿入する場合は、必ず優先順位を設定してコードを挿入してください。10、20、30などを優先順位として使用でき、最も低いものが他よりも優先されます。
- 必要に応じて、上下の間隔の詳細をピクセル単位で指定します。
- [表示]ドロップダウンメニューで、コードを表示する場所を選択します。特定の投稿、ページ、カテゴリを選択したり、Webサイト全体を挿入したり、投稿、ページ、またはWebサイトで使用されているカスタム投稿タイプなどの特定の投稿タイプを挿入したりできます。
- [ユーザーロール]ドロップダウンリストで、コードをアクティブにするユーザーロールを選択します。
すべての設定が完了したら、[公開]ボタンをクリックして、変更を有効にします。
Insert Header andFooterプラグインを使用する理由
テーマファイルを編集したり、カスタムテーマを使用したりすることには多くの欠点があるため、プラグインのアプローチに固執します。プラグインを使用することで得られるメリットのいくつかを次に示します。ただし、技術者でない場合や初心者の場合を除きます。
- プラグインストアは別の場所にスクリプトを追加するため、アップグレード、更新、またはテーマの変更中にコードが消去されることを心配する必要はありません。プラグインはサイトのテーマとは独立して機能するため、子テーマも必要ありません。
- ヘッダーとフッターにカスタムコードを簡単かつ迅速に追加できます。さらに、これは単一の場所でコードスニペットの編成を維持するのに役立ちます。
- WordPressテーマの編集を選択するときに間違いが発生する可能性があるため、プラグインを使用すると、そのような間違いを回避、防止、回避するのに役立ちます。
最終的な考え
多くの場合、WordPressサイトの外観を変更したり、方法を変更したり、その他の機能を追加したりする必要があります。いずれの場合も、技術的な傾向がない場合は、プラグインメソッドを使用してヘッダーコードとフッターコードを挿入することを忘れないでください。AstraやGeneratePressなどのテーマはこれに役立ちますが、プレミアムバージョンを購入する必要があります。また、テーマの変更が難しくなる可能性があり、その時点で使用するプラグインを探す必要があります。
