演劇舞台サイト

(実案件のデモサイト)

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

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

ページ構成:
トップページ
└ ニュース ― ニュース詳細
└ ストーリー
└ 著名人コメント
└ キャスト
└ 問い合わせ

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

WordPressのプラグイン【Advanced Custom Fields PRO】を使用し、 「トップ」「ストーリー」「著名人コメント」「キャスト」ページにカスタムフィールド(繰り返しフィールド)を実装しました。

セキュリティの関係上、アクセス制限をかけているため、お手数ではございますが
下記ID・passwordの入力の上、ご覧ください。

(ID/password:test-11)

WordPress構築の方法について

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

■トップページ(NEWSの部分)

最新の投稿5件を表示し、かつ、画像サイズが異なり、大サイズ(上段3つ)、小サイズ(下段2つ)を出し分けるため、以下の方法にて実装しました。

大サイズ(3つ)

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

各要素(リンク、サムネイル画像、投稿日時、記事タイトル)は、以下を入力。

リンク:<a href=”<?php the_permalink(); ?>” >
サムネイル画像:<?php the_post_thumbnail(‘medium’); ?>
投稿日時:<time datetime=”<?php the_time(‘Y-m-d’); ?>”> <?php the_time(‘Y.m.d’); ?> </time>
記事タイトル:<?php the_title(); ?>

⚠ class名は、除外しています。

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

・小サイズ(2つ)

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

各要素(リンク、サムネイル画像、投稿日時、記事タイトル)および、ループ終了方法は、上記と同じ。

■トップページ(Schedule部分)

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

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

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

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

上記、繰り返しフィールド・スケジュールの内容の登録が完了後、以下を入力。

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

<?php if (get_field(‘repeat_schedule’, 124)) : ?>
<?php while (the_repeater_field(‘repeat_schedule’, 124)) : ?>

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

第2引数には、固定ページの【ポストID:124】を入力。(以下のpost=124の部分)

・サブフィールド

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

イベント入力日時:<?php the_sub_field(‘event_date’, 124); ?>
イベント入力(場所):<?php the_sub_field(‘event_locate’, 124); ?>
リンク:<a href=”<?php the_sub_field(‘event_link’, 124); ?>”>
リンクテキスト:<?php the_sub_field(‘event_linktext’, 124); ?>

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