公式ディレクトリ掲載・高速で使いやすいWordPressテーマ
  1. ホーム
  2. ドキュメント
  3. 【Apura】フッターを使いこなす。ウィジェット・配色・コピーライト表示のカスタマイズ完全ガイド

【Apura】フッターを使いこなす。ウィジェット・配色・コピーライト表示のカスタマイズ完全ガイド

  • 投稿者

サイトの一番下にある「フッター」は、ヘッダーやメインコンテンツに比べて後回しにされがちな場所です。しかし、運営者情報やナビゲーションリンク、SNSアイコン、コピーライト表示など、訪問者が「このサイトは誰が運営しているのか」「他にどんなページがあるのか」を確認する重要なエリアでもあります。

Apuraには、フッターのレイアウトや配色、ウィジェットエリアの表示・非表示、コピーライト文言までを管理画面から調整できるカスタマイザー「Footer」パネルが標準搭載されています。この記事では、Footerパネルでできる設定を順番に確認しながら、フッターウィジェットの配置方法や配色のカスタマイズ手順を解説します。記事の最後では、functions.phpを使ってコピーライト表示やフッターの構造そのものを拡張する方法も紹介しますので、開発者の方もぜひ参考にしてください。

Footerパネルとは？フッター全体の表示をコントロールする設定項目

「Footer」は、サイト全体のフッターに関する設定をまとめたカスタマイザーのパネルです。タブによって「General」と「Design」の2つに分かれています。

タブ主な内容
Generalフッターウィジェットの有効化・全幅表示・カラム数（PC/タブレット/モバイル）
Designフッター全体・ウィジェットエリア・コピーライトエリアの背景色・文字色・リンク色

また、Apuraのフッターは上から「フッターウィジェット」「フッターメニュー」「コピーライト」の3つの要素で構成されています。それぞれ個別に表示・非表示や内容を調整できます。

フッターウィジェットを使わない場合でも、フッターメニューとコピーライトはデフォルトで表示されます。最低限の設定だけでも、サイト名・現在の年・著作権表示が自動で出力される仕組みです。

設定画面を開く（外観 → カスタマイズ → Footer）

  1. WordPress管理画面で外観 → カスタマイズを開きます。
  2. Footerパネルをクリックします。
  3. 上部のタブでGeneralとDesignを切り替えながら設定します。

変更内容はプレビュー画面に即時反映されるため、画面をスクロールしてフッター部分を表示させながら作業すると、設定の効果を確認しやすくなります。

General設定：フッターウィジェットエリアを有効化する

Generalタブでは、フッター下部に表示する「ウィジェットエリア」のオン・オフとレイアウトを設定します。

フッターウィジェットを有効にする

Enable Footer Widgetsのトグルをオンにすると、フッターメニューの上にウィジェットエリアが表示されるようになります。オフのままでも、フッターメニューとコピーライトは通常通り表示されます。

全幅（フルワイド）で表示する

Footer Widgets Full Widthをオンにすると、ウィジェットエリアがサイトのコンテンツ幅（コンテナ幅）を超えて画面いっぱいに広がります。背景色を変えて帯状に見せたいときや、メインコンテンツより広いレイアウトでウィジェットを配置したい場合に有効です。

カラム数をデバイスごとに設定する

Footer Widgets Columnsでは、ウィジェットエリアを何列に分割するかを1〜4列の範囲で設定できます。この項目はPC・タブレット・モバイルでそれぞれ個別に値を指定できるため、たとえば「PCでは4列、タブレットでは2列、モバイルでは1列」のように、デバイスに応じて読みやすいレイアウトに切り替えることが可能です。

ウィジェットを配置する（外観 → ウィジェット）

カラム数を設定したら、実際にウィジェットを配置します。外観 → ウィジェットを開くと、「Footer 1」から「Footer 4」までの4つのウィジェットエリアが用意されています。先ほど設定したカラム数に応じて、Footer 1から順に表示されます（カラム数を2に設定した場合は、Footer 1とFooter 2が使われます）。

各エリアには、テキスト・画像・最新の投稿・カスタムHTML・メニューなど、標準ウィジェットを自由に組み合わせて配置できます。会社概要、連絡先、運営者情報、SNSリンク、サイト内のカテゴリーリンクなどを各カラムに振り分けると、ユーザビリティとSEOの両面で効果的です。

フッターメニューを設定する（外観 → メニュー）

ウィジェットエリアの下には、フッター専用のナビゲーションメニューを表示できます。外観 → メニューを開き、表示したいメニューを作成（または編集）したうえで、「メニューの位置」欄にあるFooter Menuにチェックを入れて保存してください。プライバシーポリシーや利用規約、お問い合わせページへのリンクをまとめておくと、サイトの信頼性向上にもつながります。

Design設定：配色をブランドカラーに合わせる

Designタブでは、フッターを構成する3つのエリア（フッター全体・ウィジェットエリア・コピーライトエリア）について、それぞれ個別に背景色・文字色・リンク色を設定できます。サイト全体のブランドカラーに合わせて調整することで、フッターだけが浮いて見えるのを防げます。

設定項目内容
Footer Background Colorフッター全体の背景色
Footer Widgets Area（Background / Text / Link Colors）ウィジェットエリアの背景色・文字色・リンク色（通常／ホバー）
Footer Copyright（Background / Text / Link Colors）コピーライトエリアの背景色・文字色・リンク色（通常／ホバー）

背景色を濃い色に変更した場合は、文字色・リンク色も合わせて明るい色に変更することで、文字が背景に埋もれて読めなくなる「コントラスト不足」を防げます。

コピーライト表示をカスタマイズする

デフォルトの表示内容

初期状態では、フッターの最下部に「西暦（年）＋サイト名」の形式でコピーライトが自動表示されます（例：© 2026 サイト名）。年はサーバーの現在時刻から自動取得されるため、毎年表示を更新する手間はかかりません。

Footer Bottomウィジェットエリアを使う

コピーライト表示のすぐ上には「Footer Bottom」という専用のウィジェットエリアが用意されています。外観 → ウィジェットからカスタムHTMLウィジェットなどを追加すれば、運営会社へのリンクや決済アイコン、サブブランドのロゴなどをコピーライトと並べて表示できます。コードを編集せずに追加情報を表示したい場合は、まずこのエリアの活用を検討してみてください。

functions.phpでコピーライトの文言を変更する

「© 年 サイト名」という標準フォーマット自体を変更したい場合は、apura_copyright_outputフィルターフックを使います。たとえば「運営者名」や「All Rights Reserved.」を追加したい場合は、子テーマのfunctions.phpに以下のコードを追加します。

<?php
/**
 * フッターのコピーライト表示をカスタマイズする。
 *
 * @param string $output     コピーライト全体のHTML。
 * @param string $creds_text 標準のコピーライトテキスト（&copy; 年 サイト名）。
 * @return string カスタマイズ後のHTML。
 */
function apura_child_custom_copyright_output( $output, $creds_text ) {
	// 表示したい運営者名（必要に応じて管理画面のオプション等から取得してください）。
	$owner_name = '株式会社サンプル';

	$custom_text = sprintf(
		/* translators: 1: 標準のコピーライト表示, 2: 運営者名 */
		esc_html__( '%1$s / Operated by %2$s. All Rights Reserved.', 'apura-child' ),
		wp_kses_post( $creds_text ),
		esc_html( $owner_name )
	);

	return '<div class="copyright"><div class="l-container">' . $custom_text . '</div></div>';
}
add_filter( 'apura_copyright_output', 'apura_child_custom_copyright_output', 10, 2 );

このフィルターは出力（表示）のみを扱うため、外部からの入力値をそのまま使う場合はesc_html()やwp_kses_post()で必ずエスケープしてください。フォーム送信などユーザー入力を伴う処理ではないため、nonce検証は不要ですが、管理画面のオプションから値を取得する場合はsanitize_text_field()で保存時にサニタイズしておくと安全です。

開発者向け：アクションフックでフッターを拡張する

Apuraのフッターは、複数のアクションフックの組み合わせで構成されています。プラグイン化を想定したカスタマイズを行う場合は、以下のフックを使うとテーマ本体を直接編集せずに要素を追加できます。

フック名実行タイミング
apura_footer_topフッター要素の最初（ウィジェットエリアより前）
apura_footer_mainフッターウィジェット・フッターメニューが出力される位置
apura_footer_bottomコピーライトが出力される位置
apura_after_footer<footer>要素の外側（トップへ戻るボタン等）

例として、コピーライトの直前に「お問い合わせはこちら」というリンクを追加するコードは以下のようになります。

<?php
/**
 * コピーライトの直前にお問い合わせリンクを出力する。
 *
 * @return void
 */
function apura_child_footer_contact_link() {
	$contact_url = home_url( '/contact/' );

	printf(
		'<div class="l-container"><p class="footer-contact-link"><a href="%1$s">%2$s</a></p></div>',
		esc_url( $contact_url ),
		esc_html__( 'お問い合わせはこちら', 'apura-child' )
	);
}
add_action( 'apura_footer_bottom', 'apura_child_footer_contact_link', 5 );

esc_url()でリンク先URLを、esc_html__()で表示テキストをそれぞれエスケープしています。リンクの出力のみでユーザー入力やフォーム送信を伴わないため、こちらもnonce検証は不要です。フォームを追加する場合は、別途wp_nonce_field()とcheck_admin_referer()（またはwp_verify_nonce()）による検証を組み合わせてください。

まとめ

Apuraの「Footer」パネルを使うことで、コードを書かずにフッターウィジェットの有効化・カラム数調整・配色変更ができ、さらに「Footer Bottom」ウィジェットエリアで追加情報も柔軟に配置できます。よりきめ細かい調整が必要な場合は、apura_copyright_outputフィルターやフッター関連のアクションフックを使うことで、テーマ本体を直接編集せずに安全に拡張できます。

  • まずはGeneral設定でフッターウィジェットを有効化し、カラム数を決める
  • Design設定で背景色・文字色・リンク色をブランドカラーに合わせる
  • コピーライトの文言を変えたい場合は、Footer BottomウィジェットまたはfunctionsPHPのフィルターを活用する

ヘッダーの設定方法については「Apuraのヘッダーをカスタマイズする方法」、投稿ページのレイアウト調整については「投稿ページ（シングル）のデザインをカスタマイズする方法」もあわせてご覧ください。

ページの先頭に戻る
検索:
検索: