見出し画像

劇団のホームページ用にWordPressテーマを作成した話

ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しております太田ヒロシです。

最近ではミュージシャンに関わらず、広くクリエイター、アーティスト向けのホームページ制作も承っています。

先日、ココナラで先ごろ立ち上げられた劇団のホームページ用にWordPressテーマ制作の依頼を受けました。
今回はその制作過程で苦労したところ、工夫したところなど。

まずは一応の完成品を↓(画像や文章はダミーのものです)

元になったデモサイトをカスタマイズしていく形で作っていきました。

EVENTページ

基本的にコンテンツ(ホームページの中身の画像や文章)はほぼ全て管理画面から入力することで更新できるように作ってます。

今回、一番悩まされたのがイベント情報ページでした。
ミュージシャンのホームページでは基本的にライブは1日と想定してシステムを組んでいます。

ライブ情報の投稿画面にて、デイトピッカーで選択されたライブ開催日を元に、日程を表示、並び替えの判定(開催日の近い順に並べる)、表示・非表示の判定(開催日を過ぎると自動的に非表示にする)を行っていました。

画像1

しかし劇団の場合、公演は基本的に1日ではなくて数日に渡ります。

これはどうしたもんか

結果、
・ページに実際に表示される日程はテキスト入力にして、ある程度自由がきくようにする
・並び順の判定のため開催日(開始日)の指定をデイトピッカーに
・表示、非表示の判定のため終了日の指定をデイトピッカーに
ということにしました。

画像2

もう少しスマートな方法がありそうな気もするのですが。。
一旦はこれでおさまりました。

あと、トップページにも日程とイベントタイトルのみ表示させているのですが、複数日開催のイベントの場合は「〜」が付くようにしました。
開催日(開始日)と終了日の値が一致してなければ「〜」を付けるという分岐をしています。

画像3

MEMBERSページ

元になったのは「WORKS」というページです。商品、製品、作品ページを想定して作っていました。
今回は劇団員の紹介ページということで
・写真を人物用に縦長に
・一覧性を保つため、カテゴリーと名前は写真の上に乗せる

画像4

・詳細ページでSNSのリンクが張れるように

画像5

あと、トップページでは商品、作品のつもりだったので最新の数件が表示される、という仕様でした。
ですが、MEMBERSの場合、それだと表示される人とされない人が出てくるのでスライド式にして全員が表示されるようにしました。

画像6

ちなみに投稿画面はこんな感じ

画像8

トップページ

元々はEVENT、MEMBERS、NEWSだけで少し寂しかったのでキャッチ部分を追加しました。
画像と文章がセットで、PCで閲覧の場合はブロックを追加する毎に左右入れ替わって表示されます。

画像7

ちなみにスマホだとこんな表示になります。

画像9

管理画面はこんな感じ。「ブロックを追加」で追加していけます。詳細ボタンを付けたいときはURLを入力します。

画像10

ABOUTページ

元々はただの自由記入欄だったのですが、劇団の紹介、主催・脚本家の方の紹介、運営会社の紹介があるということで写真と文章のセットでブロックを追加していけるようにしました。

画像12

会社概要は表にして、「行を追加」で項目を増やせるようにしました。
Googleマップも埋め込みリンクを貼り付けることで表示できます。

画像13

ページでの表示はこんな感じ↓

画像11

LINKページ

関連リンクのページも作りたいというご依頼でしたので、このページのみ一から作りました。MEMBERSページのデザインを踏襲する形で作成しました。カテゴリー分けにも対応。

画像19

その他

・フッターの背景

ロゴがネオンサイン的な色使いになるということだったのでフッターの背景とトップページのブロック毎の背景はそれっぽくしました。

画像14

・ヘッダーのデザイン
デモサイトでは違いますか、依頼をいただいた劇団のロゴが正方形に近く、どうしても小さく見えて目立たなかったのでファーストビューではヘッダーに高さを持たせてロゴを少し大きめに表示、スクロールすると縮むようにしました。

ページを開いたときはこう↓

画像16

スクロールするとこう↓

画像16

・フッターにメニューを追加

プライバシーポリシー的なページが必要になってくると思ったのでフッターにメニューを追加できるようにしました。

画像17

管理画面から追加できます。

画像18

まとめ

という感じでデモサイトをがっつりカスタマイズして作りました。
ほぼすべてのコンテンツ(ホームページの中身の画像や文章)は管理画面から更新いただけます。

今回作ってみていろいろヒントももらったのでzousanrecordsの方にも反映させていきます!

-----------------------------

ココナラでは各種依頼を承っております。

ミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」はこちら

どうぞよろしくお願いいたします!

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
4
ミュージシャンのホームページ制作をお手伝いしています。WordPressテーマ「zousanrecords」制作。自身のバンドでは主にボーカル、ギター、作曲を担当。4枚のアルバムを全国発売。関空開港20周年ソング制作。 https://wp.zousanrecords.com/