WordPressでサイトを運営していると、「ヘッダーにロゴを追加したい」「フッターのコピーライトを変更したい」など、細かいデザイン調整をしたくなる場面が出てきます。ヘッダーとフッターは、サイト全体の印象を大きく左右する重要なパーツです。本記事では、初心者の方にもわかりやすく、WordPressのテーマを使ってヘッダーとフッターを変更する基本的な方法を解説します。カスタマイズに必要な知識や注意点もあわせて紹介しますので、ぜひ最後までご覧ください。
ヘッダーとフッターの役割とは?
ヘッダーはWebサイトの最上部に位置し、主にロゴ、ナビゲーションメニュー、連絡先などを表示する部分です。一方、フッターは最下部にあり、コピーライト表記、サイトマップ、外部リンク、SNSアイコンなどが配置されるのが一般的です。
この2つのパーツは、訪問者がどのページを見ても共通して表示されるため、ブランドイメージの統一や情報提供の面でも非常に重要です。
ヘッダーとフッターを変更する方法(基本編)
WordPressのテーマによって操作方法は多少異なりますが、多くのテーマでは「外観」→「カスタマイズ」から変更が可能です。
1. 外観メニューからカスタマイズへ
- WordPress管理画面にログインします。
- サイドバーの「外観」→「カスタマイズ」をクリックします。
- カスタマイズメニューが表示されるので、「ヘッダー」「フッター」または「サイト基本情報」などを選びましょう。
2. ヘッダーの変更項目
- ロゴの追加:画像をアップロードしてロゴを設定。
- サイトタイトルとキャッチフレーズ:文字で表現したロゴや簡易的な紹介文を表示。
- メニューの配置:ナビゲーションメニューの位置と中身を編集。
3. フッターの変更項目
- コピーライトのテキスト変更:多くのテーマではHTML入力で編集可能。
- ウィジェットの追加:フッターにカスタムメニュー、テキスト、SNSリンクなどを追加。
- 背景色・文字色の変更:テーマによってはデザインの微調整も可能です。
子テーマを使ってPHPファイルを編集する方法(中級者向け)
デザインの自由度を高めたい方は、header.php
やfooter.php
を直接編集する方法もあります。ただし、直接編集するとテーマのアップデートで変更が上書きされる可能性があるため、「子テーマ」を使うのが基本です。
1. 子テーマの作成
/wp-content/themes/
ディレクトリに、新しい子テーマフォルダを作成。style.css
とfunctions.php
を作成し、親テーマを継承する記述を追加。- 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の場合
- 高度なデザイン機能を搭載。
- 独自ブロックによる編集が可能で自由度が高い。
カスタマイズ時の注意点
- バックアップを取る:編集前には必ずテーマのバックアップを取りましょう。
- キャッシュの削除:変更が反映されない場合は、キャッシュを削除して確認。
- レスポンシブ確認:スマホやタブレット表示でも崩れていないかをチェック。
まとめ
WordPressのヘッダーとフッターは、サイトの第一印象と信頼性に大きく関わる重要な要素です。カスタマイザーを使った基本的な編集から、子テーマやプラグインを使った高度なカスタマイズまで、方法はいくつかあります。自分のレベルや目的に応じて、最適な方法を選ぶことが成功のカギです。この記事を参考に、あなたのサイトにぴったりのデザインに仕上げてください。