Categories: wordpress

初心者でもできる!WordPressのヘッダーとフッターを簡単に変更する方法

WordPressでサイトを運営していると、「ヘッダーにロゴを追加したい」「フッターのコピーライトを変更したい」など、細かいデザイン調整をしたくなる場面が出てきます。ヘッダーとフッターは、サイト全体の印象を大きく左右する重要なパーツです。本記事では、初心者の方にもわかりやすく、WordPressのテーマを使ってヘッダーとフッターを変更する基本的な方法を解説します。カスタマイズに必要な知識や注意点もあわせて紹介しますので、ぜひ最後までご覧ください。


ヘッダーとフッターの役割とは?

ヘッダーはWebサイトの最上部に位置し、主にロゴ、ナビゲーションメニュー、連絡先などを表示する部分です。一方、フッターは最下部にあり、コピーライト表記、サイトマップ、外部リンク、SNSアイコンなどが配置されるのが一般的です。

この2つのパーツは、訪問者がどのページを見ても共通して表示されるため、ブランドイメージの統一や情報提供の面でも非常に重要です。


ヘッダーとフッターを変更する方法(基本編)

WordPressのテーマによって操作方法は多少異なりますが、多くのテーマでは「外観」→「カスタマイズ」から変更が可能です。

1. 外観メニューからカスタマイズへ

  1. WordPress管理画面にログインします。
  2. サイドバーの「外観」→「カスタマイズ」をクリックします。
  3. カスタマイズメニューが表示されるので、「ヘッダー」「フッター」または「サイト基本情報」などを選びましょう。

2. ヘッダーの変更項目

  • ロゴの追加:画像をアップロードしてロゴを設定。
  • サイトタイトルとキャッチフレーズ:文字で表現したロゴや簡易的な紹介文を表示。
  • メニューの配置:ナビゲーションメニューの位置と中身を編集。

3. フッターの変更項目

  • コピーライトのテキスト変更:多くのテーマではHTML入力で編集可能。
  • ウィジェットの追加:フッターにカスタムメニュー、テキスト、SNSリンクなどを追加。
  • 背景色・文字色の変更:テーマによってはデザインの微調整も可能です。

子テーマを使ってPHPファイルを編集する方法(中級者向け)

デザインの自由度を高めたい方は、header.phpfooter.phpを直接編集する方法もあります。ただし、直接編集するとテーマのアップデートで変更が上書きされる可能性があるため、「子テーマ」を使うのが基本です。

1. 子テーマの作成

  1. /wp-content/themes/ディレクトリに、新しい子テーマフォルダを作成。
  2. style.cssfunctions.php を作成し、親テーマを継承する記述を追加。
  3. WordPress管理画面から子テーマを有効化します。

2. ヘッダー・フッターの編集

  • header.phpを子テーマにコピーしてから編集。
  • footer.phpも同様に編集可能。

たとえば、フッターに以下のようなコードを追加することで独自のコピーライトを設定できます:

phpコピーする編集する<div class="custom-footer">
  <p>© <?php echo date('Y'); ?> あなたのサイト名. All Rights Reserved.</p>
</div>

プラグインを使った簡単カスタマイズ方法

テーマ編集に不安がある場合は、専用のプラグインを活用するのも一つの手です。

おすすめプラグイン

  • Elementor:ドラッグ&ドロップでヘッダーやフッターをデザイン。
  • Header Footer Code Manager:コードの挿入や管理が簡単。
  • Insert Headers and Footers:トラッキングコードなどの挿入に便利。

これらを使うことで、プログラミングの知識がなくても自由な編集が可能です。


テーマによる違いと注意点

テーマによって、編集可能な範囲や操作画面の仕様が異なります。有名テーマでの違いを簡単に紹介します。

1. Cocoonの場合

  • ヘッダーやフッターのカスタマイズ項目が豊富。
  • フッター下に「Powered by WordPress」が表示されるが、削除可能。

2. Lightningの場合

  • ウィジェットによる編集が中心。
  • シンプルな構造で初心者にも扱いやすい。

3. SWELLの場合

  • 高度なデザイン機能を搭載。
  • 独自ブロックによる編集が可能で自由度が高い。

カスタマイズ時の注意点

  1. バックアップを取る:編集前には必ずテーマのバックアップを取りましょう。
  2. キャッシュの削除:変更が反映されない場合は、キャッシュを削除して確認。
  3. レスポンシブ確認:スマホやタブレット表示でも崩れていないかをチェック。

まとめ

WordPressのヘッダーとフッターは、サイトの第一印象と信頼性に大きく関わる重要な要素です。カスタマイザーを使った基本的な編集から、子テーマやプラグインを使った高度なカスタマイズまで、方法はいくつかあります。自分のレベルや目的に応じて、最適な方法を選ぶことが成功のカギです。この記事を参考に、あなたのサイトにぴったりのデザインに仕上げてください。

upandup

Web制作の記事を中心に、暮らし、ビジネスに役立つ情報を発信します。 アフィリエイトにも参加しています。よろしくお願いいたします。