架空の温泉サイト

開発言語:HTML・CSS・jQuery・PHP
制作期間:約2週間

主な使用プラグイン:
Advanced Custom Fields PRO・Breadcrumb NavXT・MW WP Form・WP-PageNavi

ページ構成:
トップページ
└ ブログ ― ブログ詳細
└ お問い合わせ

プログラミング学習教材の課題にて、Adobe XDデザインカンプを元に作成。
HTMLのコーディングからWordPress構築まで行いました。

WordPressのプラグイン【Advanced Custom Fields PRO】を使用し、 「トップページ」の「本館の特徴」「おすすめプラン」「よくある質問」にカスタムフィールド(繰り返しフィールド)を実装しました。

WordPress構築の方法について

こちらではトップページのコーディング方法について、簡単にご説明します。

■トップページ(「本館の特徴」部分)

プラグイン【Advanced Custom Fields PRO】を使用し、繰り返しフィールドにて以下を登録。

↑赤枠の部分が、該当部分になります。入力項目は、以下の通りです。
・ラベル名:本館の特徴
・名前:repeat_features
・タイプ:繰り返しフィールド

サブフィールドには、以下を入力。

固定ページより、スケジュールの内容を登録。

上記、繰り返しフィールド・本館の特徴の内容の登録が完了後、以下を入力。

・繰り返しフィールドの開始

<?php if (get_field(‘repeat_features’, 137)) : ?>
<?php while (the_repeater_field(‘repeat_features’, 137)) : ?>

第1引数には、プラグイン【Advanced Custom Fields PRO】で登録したフィールドの【名前:repeat_features】を入力。

第2引数には、固定ページの【ポストID:137】を入力。

・サブフィールド

各項目を以下のとおり、入力。

画像:<img src=”<?php the_sub_field(‘features_pic’, 137); ?>” alt=””>
タイトル:<?php the_sub_field(‘features_title’, 137); ?>
説明文:<?php the_sub_field(‘features_text’, 137); ?>

いずれも、
第1引数にはプラグイン【Advanced Custom Fields PRO】で登録したサブフィールドの【名前】、第2引数には、固定ページの【ポストID:137】を入力。

以下、「おすすめプラン」「各種サービス」「よくある質問」も上記と同様に、プラグイン【Advanced Custom Fields PRO】にて実装。

■ トップページ(「ブログ」の部分)

最新の投稿5件を表示するため、以下の方法にて実装しました。

繰り返し表示したい要素の前に、以下を入力し、ループを開始。

各要素(カテゴリー名、記事リンク、記事タイトル)は、以下を入力。

カテゴリーは、変数 $categoryに代入し、もしカテゴリー名があったら、echo以下を出力('<div class=”blog__label”>’ . $category[0]->cat_name . ‘</div>’)。

記事リンク:<a href=”<?php the_permalink(); ?>”>
記事タイトル:<?php the_title(); ?>

<?php endforeach; ?>にて、ループ終了。