フッターを表示する – WordPress実践制作【WPCafe編】

2025/10/22
PRACTICE
カフェサイトを作ろう
0comments
30views
約17分で読めます
9

前回、フッター用の共通情報を登録するでカスタムフィールドにデータを登録しました。

今回は、登録した情報をフッターに実際に表示していきます。

テーマオプション取得関数の作成

まずは、テーマオプションを取得する共通関数を作成します。

重複コードの問題

前回ヘッダーでSNS情報を表示する際、以下のコードを書きました。

header.php

<?php
$page = get_page_by_path('config');
$page_id = $page->ID;
$sns_list = SCF::get('opt_sns_list', $page_id);
foreach($sns_list as $sns_item) :
?>
<li>
    <a class="link sns-icon" href="<?php echo $sns_item['opt_sns_url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $sns_item['opt_sns_name']; ?>">
        <?php echo $sns_item['opt_sns_icon']; ?><?php echo $sns_item['opt_sns_name']; ?>
    </a>
</li>
<?php
endforeach;
?>

<?php
$page = get_page_by_path('config');
$page_id = $page->ID;
$sns_list = SCF::get('opt_sns_list', $page_id);
foreach($sns_list as $sns_item) :
?>
<li>
    <a class="link sns-icon" href="<?php echo $sns_item['opt_sns_url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $sns_item['opt_sns_name']; ?>">
        <?php echo $sns_item['opt_sns_icon']; ?><?php echo $sns_item['opt_sns_name']; ?>
    </a>
</li>
<?php
endforeach;
?>

PHP

SCF::get()はページIDを指定する必要があります。共通情報を管理している固定ページのスラッグは’config’とわかっていますが、スラッグからIDを取得する処理が必要です。そのため、以下の2行を毎回書く必要があります。

$page = get_page_by_path('config');
$page_id = $page->ID;

$page = get_page_by_path('config');
$page_id = $page->ID;

PHP

フッターでは複数の情報を取得するため、その度に同じコードを繰り返すことになります。

同様に、ACFで登録した住所を取得する場合も

$page = get_page_by_path('config');
$page_id = $page->ID;
$address1 = get_field('opt_address1', $page_id);

$page = get_page_by_path('config');
$page_id = $page->ID;
$address1 = get_field('opt_address1', $page_id);

PHP

と、同じような記述が必要になります。

これを共通化して、1行で書けるようにします。

functions-theme-contents.phpを作成

テーマディレクトリにfunctions-theme-contents.phpを作成します。

functions.phpで読み込み

functions.phpでfunctions-theme-contents.phpを読み込みます。

functions.php

<?php
    // 初期化
    require_once 'functions-theme-init.php';

    // JS／CSS読み込み
    require_once 'functions-theme-load.php';

    // コンテンツ関連
    require_once 'functions-theme-contents.php';

<?php
    // 初期化
    require_once 'functions-theme-init.php';

    // JS／CSS読み込み
    require_once 'functions-theme-load.php';

    // コンテンツ関連
    require_once 'functions-theme-contents.php';

PHP

get_theme_option関数を作成

functions-theme-contents.phpに以下の関数を記述します。

functions-theme-contents.php

<?php

function get_theme_option($key) {
    $page = get_page_by_path('config');
    $page_id = $page->ID;
    $value = SCF::get($key, $page_id);
    if(!$value) {
        $value = get_field($key, $page_id);
    }
    return $value;
}

<?php

function get_theme_option($key) {
    $page = get_page_by_path('config');
    $page_id = $page->ID;
    $value = SCF::get($key, $page_id);
    if(!$value) {
        $value = get_field($key, $page_id);
    }
    return $value;
}

PHP

関数の仕組み

この関数は以下の処理を行います。

get_page_by_path(‘config’)でスラッグが config の固定ページを取得
ページIDを取得
Smart Custom Fieldsで指定されたキーの値を取得
SCFで取得できない場合は、Advanced Custom Fieldsで取得
取得した値を返す

SCFとACFの両方に対応しているため、どちらのプラグインで登録した情報でも同じ関数で取得できます。

使い方

これによって以下のように簡潔に書けるようになります。

// SCFで登録した情報の取得
$sns_list = get_theme_option('opt_sns_list');
$contact_list = get_theme_option('opt_contact_list');
$opening_list = get_theme_option('opt_open_list');

// ACFで登録した情報の取得
$address1 = get_theme_option('opt_address1');
$address2 = get_theme_option('opt_address2');
$map = get_theme_option('opt_map');

// SCFで登録した情報の取得
$sns_list = get_theme_option('opt_sns_list');
$contact_list = get_theme_option('opt_contact_list');
$opening_list = get_theme_option('opt_open_list');

// ACFで登録した情報の取得
$address1 = get_theme_option('opt_address1');
$address2 = get_theme_option('opt_address2');
$map = get_theme_option('opt_map');

PHP

SCFとACFのどちらで登録した情報も、同じ関数で取得できます。

footer.phpのHTML部を作成

フッターのHTML構造を作成していきます。

地図セクション

footer.php

<section class="map">
    <?php echo get_theme_option('opt_map');?>
</section><!-- map -->

<section class="map">
    <?php echo get_theme_option('opt_map');?>
</section><!-- map -->

PHP

フッター本体

footer.php

<footer class="footer">
    <div class="container">
    
        <div class="footer_about">
            <a class="link" href="<?php echo home_url();?>">
                <div class="logo"><span class="logo-the">the</span><span class="logo-name">WPCafe</span></div>
            </a>

            <div class="wrapper">
                <p class="footer_about-address"><?php echo get_theme_option('opt_address1');?></p>
                <p class="footer_about-address"><?php echo get_theme_option('opt_address2');?></p>
            </div>
        </div><!-- footer_about -->

        <div class="footer_block">
            <h2 class="footer_block-title">Contact Info</h2>
            <ul class="footer_block-list">
<?php
    $contact_list = get_theme_option('opt_contact_list');
    foreach($contact_list as $contact_item) :
?>
                <li><span><?php echo $contact_item['opt_contact_icon'].$contact_item['opt_contact_text'];?></span></li>
<?php
    endforeach;
?>
            </ul>
        </div><!-- footer_block -->

        <div class="footer_block">
            <h2 class="footer_block-title">Opening Hours</h2>
            <dl class="footer_block-list-dl">
<?php
    $opening_list = get_theme_option('opt_open_list');
    foreach($opening_list as $opening_item) :
?>
                <dt class="caption"><?php echo $opening_item['opt_open_week'];?></dt>
                <dd class="contents"><?php echo $opening_item['opt_open_time'];?></dd>
<?php
    endforeach;
?>
            </dl>
        </div><!-- footer_block -->

        <div class="footer_block">
            <h2 class="footer_block-title">Follow Our Activity</h2>
            <ul class="footer_block-socials">
<?php
    $sns_list = get_theme_option('opt_sns_list');
    foreach($sns_list as $sns_item) :
?>
                <li>
                    <a class="link sns-icon" href="<?php echo $sns_item['opt_sns_url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $sns_item['opt_sns_name']; ?>">
                        <?php echo $sns_item['opt_sns_icon']; ?>
                    </a>
                </li>
<?php
    endforeach;
?>
            </ul>
        </div><!-- footer_block -->

    </div><!-- container -->
</footer>

<footer class="footer">
    <div class="container">
    
        <div class="footer_about">
            <a class="link" href="<?php echo home_url();?>">
                <div class="logo"><span class="logo-the">the</span><span class="logo-name">WPCafe</span></div>
            </a>

            <div class="wrapper">
                <p class="footer_about-address"><?php echo get_theme_option('opt_address1');?></p>
                <p class="footer_about-address"><?php echo get_theme_option('opt_address2');?></p>
            </div>
        </div><!-- footer_about -->

        <div class="footer_block">
            <h2 class="footer_block-title">Contact Info</h2>
            <ul class="footer_block-list">
<?php
    $contact_list = get_theme_option('opt_contact_list');
    foreach($contact_list as $contact_item) :
?>
                <li><span><?php echo $contact_item['opt_contact_icon'].$contact_item['opt_contact_text'];?></span></li>
<?php
    endforeach;
?>
            </ul>
        </div><!-- footer_block -->

        <div class="footer_block">
            <h2 class="footer_block-title">Opening Hours</h2>
            <dl class="footer_block-list-dl">
<?php
    $opening_list = get_theme_option('opt_open_list');
    foreach($opening_list as $opening_item) :
?>
                <dt class="caption"><?php echo $opening_item['opt_open_week'];?></dt>
                <dd class="contents"><?php echo $opening_item['opt_open_time'];?></dd>
<?php
    endforeach;
?>
            </dl>
        </div><!-- footer_block -->

        <div class="footer_block">
            <h2 class="footer_block-title">Follow Our Activity</h2>
            <ul class="footer_block-socials">
<?php
    $sns_list = get_theme_option('opt_sns_list');
    foreach($sns_list as $sns_item) :
?>
                <li>
                    <a class="link sns-icon" href="<?php echo $sns_item['opt_sns_url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $sns_item['opt_sns_name']; ?>">
                        <?php echo $sns_item['opt_sns_icon']; ?>
                    </a>
                </li>
<?php
    endforeach;
?>
            </ul>
        </div><!-- footer_block -->

    </div><!-- container -->
</footer>

PHP

HTMLの構造

フッターは以下の5つのパートで構成されています。

パート	内容
地図	Googleマップの埋め込み
会社情報	ロゴと住所
お問い合わせ情報	電話番号、メールアドレスなどの連絡先
営業時間	曜日別の営業時間
SNS情報	SNSアイコンとリンク

それぞれでget_theme_option()関数を使ってデータを取得し、foreachループで出力しています。

_footer.scssを作成

フッターのスタイルを記述するSCSSファイルを作成します。

main.scssで読み込み

main.scssで_footer.scssを読み込みます。

main.scss

@use "common";
@use "header";
@use "footer";

@use "common";
@use "header";
@use "footer";

SCSS

_footer.scssのコード

_footer.scssに以下のコードを記述します。

_footer.scss

.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50vh;
    overflow: hidden;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        filter: grayscale(100%);
        transition: all 300ms ease-in-out;
        &:hover {
            filter: grayscale(0%);
        }
    }

}

.footer {
    padding: 4.0rem 0;
    background-color: white;
    
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.0rem;
        width: 1200px;
        margin: auto;

        .footer_about {
            width: 30%;

            .logo {
                display: flex;
                align-items: center;

            }

            .footer_about-copyright {
                font-size: 0.8rem;
            }

        }

        .footer_block {
            width: calc((70% - 2.0rem * 3) / 3 );

            .footer_block-title {
                margin-bottom: 0.5rem;
                font-size: 1.4rem;
                font-weight: 700;
            }

            ul {
                list-style: none;
            }
        }

        .footer_block-list {
            display: flex;
            flex-direction: column;
            gap: 0.25rem 0;
            .link {
                display: inline-flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                gap: 1.0rem;
            }

        }

        .footer_block-list-dl {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.5em 1em;
        }

        .footer_block-socials {
            display: flex;
            justify-content: center;
            gap: 1.0rem;
            margin-top: 1.0rem;
        }
    }

}

.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50vh;
    overflow: hidden;

    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
        filter: grayscale(100%);
        transition: all 300ms ease-in-out;
        &:hover {
            filter: grayscale(0%);
        }
    }

}

.footer {
    padding: 4.0rem 0;
    background-color: white;
    
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2.0rem;
        width: 1200px;
        margin: auto;

        .footer_about {
            width: 30%;

            .logo {
                display: flex;
                align-items: center;

            }

            .footer_about-copyright {
                font-size: 0.8rem;
            }

        }

        .footer_block {
            width: calc((70% - 2.0rem * 3) / 3 );

            .footer_block-title {
                margin-bottom: 0.5rem;
                font-size: 1.4rem;
                font-weight: 700;
            }

            ul {
                list-style: none;
            }
        }

        .footer_block-list {
            display: flex;
            flex-direction: column;
            gap: 0.25rem 0;
            .link {
                display: inline-flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                gap: 1.0rem;
            }

        }

        .footer_block-list-dl {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.5em 1em;
        }

        .footer_block-socials {
            display: flex;
            justify-content: center;
            gap: 1.0rem;
            margin-top: 1.0rem;
        }
    }

}

SCSS

SCSSのポイント

地図の表示

.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50vh;
    overflow: hidden;
}

.map {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 50vh;
    overflow: hidden;
}

SCSS

width: 100%で画面いっぱいの幅にしています。高さはheight: 0とpadding-bottom: 50vhの組み合わせで画面の高さの50%に設定しています。これは、iframeの高さをCSSで制御する際のテクニックです。これにより、地図を大きく表示できます。

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    transition: all 300ms ease-in-out;
    &:hover {
        filter: grayscale(0%);
    }
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    transition: all 300ms ease-in-out;
    &:hover {
        filter: grayscale(0%);
    }
}

SCSS

Googleマップのiframeにはデフォルトでwidthとheightが指定されていますが、CSSでwidth: 100%とheight: 100%を指定することで上書きできます。height: 100%は親要素（.map）の高さの100%という意味なので、親が50vhの場合、結果的に画面の半分の高さになります。

初期状態はグレースケール表示で、ホバー時にカラーになります。

フッターのレイアウト

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.0rem;
    width: 1200px;
    margin: auto;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.0rem;
    width: 1200px;
    margin: auto;
}

SCSS

display: flexでFlexboxレイアウトを使用し、width: 1200pxで幅を固定しています。

幅の計算

.footer_about {
    width: 30%;
}

.footer_block {
    width: calc((70% - 2.0rem * 3) / 3 );
}

.footer_about {
    width: 30%;
}

.footer_block {
    width: calc((70% - 2.0rem * 3) / 3 );
}

SCSS

.footer_aboutが30%、残りの70%を3つの.footer_blockで分割しています。

calc((70% - 2.0rem * 3) / 3)の計算式：

70%の領域から、gap（2.0rem）×3を引く
それを3で割って、各ブロックの幅を算出

定義リスト

.footer_block-list-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em;
}

.footer_block-list-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em 1em;
}

SCSS

営業時間は「曜日」（dt）と「営業時間」（dd）で構成されています。曜日はユーザーが自由に入力できるため、「月-金」「土」「日」など文字数が異なります。CSS Gridを使うことで、複数行のdtの幅を揃えることができます。auto 1frにより、左側（dt）は最も長い内容に合わせた幅、右側（dd）は残りの領域を使用します。

表示の確認

ブラウザで表示を確認しましょう。

地図が表示されているか
ホバーで地図がカラーになるか
ロゴと住所が表示されているか
お問い合わせ情報が一覧表示されているか
営業時間が整列表示されているか
SNSアイコンが表示されているか

まとめ

今回は、フッターの表示を実装しました。

学んだこと

テーマオプション取得の共通関数化：重複コードを削減
カスタムフィールドからのデータ取得：WordPressでコンテンツを管理
foreachループでの出力：登録したデータを表示
_footer.scssのスタイリング：FlexboxとGridを活用したレイアウト
地図の表示テクニック：iframeの高さをCSSで制御

重要なポイント

get_theme_option()関数でコードを簡潔に
SCFとACFの両方に対応したフォールバック機構
Flexboxで柔軟なレスポンシブレイアウト
CSS Gridで定義リストの幅を揃える
height: 0とpadding-bottomでiframeの高さを制御

次回予告

次回は、headの整理を行います。

現状のheadには、WordPress特有の余計なmeta情報などが出力されているので整理します。

引き続き、実際に手を動かしながら進めていきましょう。

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

フッター用の共通情報を登録する – WordPress実践制作【WPCafe編】

PRACTICE

フッターに表示する問い合わせ先、営業時間、住所、Googleマップの情報を登録します。SNS情報の登録方法の復習として、SCFとACFを使って固定ページ「共通情報」にカスタムフィールドを追加し、サイト全体で使う情報を一元管理します。

2025/10/22
0comments
30views

headタグの整理とセキュリティ対策 – WordPress実践制作【WPCafe編】

PRACTICE

WordPressのheadタグ整理とセキュリティ対策を実装します。デフォルトで出力される不要な情報を削除し、自分で必要なタグを適切な順序で出力できるようにします。また、バージョン情報の非表示、ユーザー列挙対策、REST API制限などのセキュリティ対策も実施。今後のサイト制作でも使える重要なノウハウを身につけます。