劇団のホームページ用にWordPressテーマを作成した話
ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しております太田ヒロシです。
最近ではミュージシャンに関わらず、広くクリエイター、アーティスト向けのホームページ制作も承っています。
先日、ココナラで先ごろ立ち上げられた劇団のホームページ用にWordPressテーマ制作の依頼を受けました。
今回はその制作過程で苦労したところ、工夫したところなど。
まずは一応の完成品を↓（画像や文章はダミーのものです）
元になったデモサイトをカスタマイズしていく形で作っていきました。
EVENTページ
基本的にコンテンツ（ホームページの中身の画像や文章）はほぼ全て管理画面から入力することで更新できるように作ってます。
今回、一番悩まされたのがイベント情報ページでした。
ミュージシャンのホームページでは基本的にライブは1日と想定してシステムを組んでいます。
ライブ情報の投稿画面にて、デイトピッカーで選択されたライブ開催日を元に、日程を表示、並び替えの判定（開催日の近い順に並べる）、表示・非表示の判定（開催日を過ぎると自動的に非表示にする）を行っていました。
しかし劇団の場合、公演は基本的に1日ではなくて数日に渡ります。
これはどうしたもんか
結果、
・ページに実際に表示される日程はテキスト入力にして、ある程度自由がきくようにする
・並び順の判定のため開催日（開始日）の指定をデイトピッカーに
・表示、非表示の判定のため終了日の指定をデイトピッカーに
ということにしました。
もう少しスマートな方法がありそうな気もするのですが。。
一旦はこれでおさまりました。
あと、トップページにも日程とイベントタイトルのみ表示させているのですが、複数日開催のイベントの場合は「〜」が付くようにしました。
開催日（開始日）と終了日の値が一致してなければ「〜」を付けるという分岐をしています。
MEMBERSページ
元になったのは「WORKS」というページです。商品、製品、作品ページを想定して作っていました。
今回は劇団員の紹介ページということで
・写真を人物用に縦長に
・一覧性を保つため、カテゴリーと名前は写真の上に乗せる
・詳細ページでSNSのリンクが張れるように
あと、トップページでは商品、作品のつもりだったので最新の数件が表示される、という仕様でした。
ですが、MEMBERSの場合、それだと表示される人とされない人が出てくるのでスライド式にして全員が表示されるようにしました。
ちなみに投稿画面はこんな感じ
トップページ
元々はEVENT、MEMBERS、NEWSだけで少し寂しかったのでキャッチ部分を追加しました。
画像と文章がセットで、PCで閲覧の場合はブロックを追加する毎に左右入れ替わって表示されます。
ちなみにスマホだとこんな表示になります。
管理画面はこんな感じ。「ブロックを追加」で追加していけます。詳細ボタンを付けたいときはURLを入力します。
ABOUTページ
元々はただの自由記入欄だったのですが、劇団の紹介、主催・脚本家の方の紹介、運営会社の紹介があるということで写真と文章のセットでブロックを追加していけるようにしました。
会社概要は表にして、「行を追加」で項目を増やせるようにしました。
Googleマップも埋め込みリンクを貼り付けることで表示できます。
ページでの表示はこんな感じ↓
LINKページ
関連リンクのページも作りたいというご依頼でしたので、このページのみ一から作りました。MEMBERSページのデザインを踏襲する形で作成しました。カテゴリー分けにも対応。
その他
・フッターの背景
ロゴがネオンサイン的な色使いになるということだったのでフッターの背景とトップページのブロック毎の背景はそれっぽくしました。
・ヘッダーのデザイン
デモサイトでは違いますか、依頼をいただいた劇団のロゴが正方形に近く、どうしても小さく見えて目立たなかったのでファーストビューではヘッダーに高さを持たせてロゴを少し大きめに表示、スクロールすると縮むようにしました。
ページを開いたときはこう↓
スクロールするとこう↓
・フッターにメニューを追加
プライバシーポリシー的なページが必要になってくると思ったのでフッターにメニューを追加できるようにしました。
管理画面から追加できます。
まとめ
という感じでデモサイトをがっつりカスタマイズして作りました。
ほぼすべてのコンテンツ（ホームページの中身の画像や文章）は管理画面から更新いただけます。
今回作ってみていろいろヒントももらったのでzousanrecordsの方にも反映させていきます！
-----------------------------
ココナラでは各種依頼を承っております。
ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」はこちら
どうぞよろしくお願いいたします！
この記事が気に入ったらサポートをしてみませんか？