SNS情報の管理と表示 – WordPress実践制作【WPCafe編】

2025/10/20
PRACTICE
カフェサイトを作ろう
0comments
56views
約7分で読めます
5

前回、ナビゲーションメニューの実装を完了し、各ページへのスムーズな移動が可能になりました。

今回は、ヘッダーにソーシャルメディアのリンクを実装します。SNS情報を管理画面で一元管理し、それをテーマ側で取得して表示する方法を学びます。

SNS情報の管理方法

SNSの情報を管理する方法はいくつかあります。

カスタマイザーを使う
独自のオプションページを作成する
プラグインでオプションページを作成する
固定ページにカスタムフィールドを追加する

今回は、固定ページにカスタムフィールドを追加する方法を採用します。

各方法の比較

それぞれの方法について、メリット・デメリットを確認しましょう。

カスタマイザーを使う場合

WordPressの標準機能「カスタマイザー」（外観 → カスタマイズ）を使って管理する方法です。

メリット: リアルタイムプレビューで変更を確認できる
デメリット: 繰り返し項目（複数のSNS）の実装が複雑で、コードでの実装に手間がかかる

独自のオプションページを作成する場合

WordPressの管理画面に独自のオプションページを作成する方法です。

メリット: 自由度が高く、独自のUIを構築できる
デメリット: ページの作成だけでなく、一つ一つの項目の入力や保存処理を作る必要があり、実装に手間がかかる

プラグインでオプションページを作成する場合

「ACF Extended」などのプラグインを使ってオプションページを作成する方法です。

メリット: 手軽にオプションページを作成できる
デメリット: 有料版が必要

固定ページにカスタムフィールドを追加する場合（今回採用）

固定ページを用意し、そこにカスタムフィールドを追加する方法です。

メリット: 無料プラグイン（ACF・SCF）で繰り返し項目を簡単に実装でき、コストをかけずに効率的に作成できる
メリット: 1つの固定ページで、SNS情報だけでなく、店舗の住所や連絡先、営業時間など、全ページ共通の情報をまとめて管理できる

今回、固定ページを選んだ理由

今回はSNS情報を管理するためにオプションページを用意しますが、今後、店舗の住所や連絡先、営業時間など、全ページ共通の情報を管理する必要があります。

固定ページを使った方法であれば、これらすべての共通情報を1つのページで簡単に管理できます。

費用をかけずに効率的にオプションページを作成できるため、今回はこの方法を採用します。

使用するプラグイン

今回は、無料のプラグインを使用します。

ACF (Advanced Custom Fields): 単一の独自項目を固定ページや投稿などに追加するプラグイン
SCF (Smart Custom Fields): 繰り返しの独自項目を固定ページや投稿などに追加するプラグイン

ACFで繰り返し項目を使うには有料版が必要なため、今回はSCFを使います。

固定ページ「共通情報」を作成

まず、共通情報を管理するための固定ページを作成します。

作成手順

固定ページ → 新規追加
タイトル: 「共通情報」
スラッグ: 「config」（任意）
表示順: 9999（任意）
公開範囲: 「公開」（一旦公開で作成）

注意点

現時点ではあえて「公開」としています。SCFのバグにより「非公開」のページに項目を追加できないため、SCF設定後に「非公開」に変更します。

SNS情報の管理項目を設定

SNS情報の管理方法として、以下の2つのアプローチが考えられます。

Facebook、X（Twitter）、Instagramなど、SNSを固定してそれぞれの情報を設定する
SNSを固定せず、自由にSNS情報を設定できるようにする

今回は後者を採用します。これにより、将来的に新しいSNSを追加する際も柔軟に対応できます。

管理する項目は以下の3つです。

SNS名称
SNSアイコン
URL

SCFでフィールドを作成

Smart Custom Fields → 新規追加
タイトル: 「SNS情報」（任意）
サブフィールド追加ボタンをクリック
繰り返し: ON
グループ名: 「opt_sns_list」（任意）

フィールドの追加

以下の3つのサブフィールドを追加します。

タイプ	ラベル	名前
テキスト	SNS名	`opt_sns_name`
テキスト	SNSアイコン	`opt_sns_icon`
テキスト	SNS URL	`opt_sns_url`

表示条件の設定

表示条件で「固定ページ」を選択
投稿 / 固定ページのIDで固定ページ「共通情報」を選択
公開をクリック

これで、共通情報ページにSNS情報を管理する項目が設定できました。

SNS情報を登録

固定ページ → 共通情報を開いて編集します。

以下のようにSNS情報を登録します。

SNS名	SNSアイコン	SNS URL
Facebook	`<i class="fa-brands fa-facebook-f"></i>`	https://www.facebook.com/xxxx
X	`<i class="fa-brands fa-x-twitter"></i>`	https://x.com/xxxx
Instagram	`<i class="fa-brands fa-instagram"></i>`	https://www.instagram.com/xxxx

xxxxはご自身のアカウントに合わせて変更してください。
アイコンはFont Awesomeを使用しています。

固定ページを非公開に変更

SCFの設定と情報の登録が完了したら、固定ページ「共通情報」を「非公開」に変更します。これにより、ネットに公開されず、内部的にのみ参照できるようになります。

表示側の実装

それでは、登録したSNS情報をヘッダーに表示するコードを作成します。

header.phpにコードを追加

header.phpに以下のコードを追加します。

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

コードの解説

固定ページの取得

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

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

PHP

get_page_by_path()を使って、スラッグ「config」の固定ページを取得し、そのIDを取得します。

SCFデータの取得

$sns_list = SCF::get('opt_sns_list', $page_id);

$sns_list = SCF::get('opt_sns_list', $page_id);

PHP

SCF::get()を使って、指定したページIDから「opt_sns_list」フィールドのデータを取得します。取得されるデータは配列形式です。

ループ処理

foreach($sns_list as $sns_item) :

foreach($sns_list as $sns_item) :

PHP

取得したSNS情報を1つずつ処理します。各SNS項目（$sns_item）は連想配列で、以下のキーでアクセスできます。

$sns_item['opt_sns_name']: SNS名
$sns_item['opt_sns_icon']: SNSアイコン
$sns_item['opt_sns_url']: SNS URL

リンクの出力

<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>

<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>