2025年7月～8月に掛けて、静岡県浜松市で活動している社会人軟式野球クラブ「KYOJO」様の Web サイトを新規制作しました。
やはり地元で活躍されている方のサイト制作は楽しいですね。私自身もかつては野球少年でしたので気持ちが入りましたね。
2020年に設立された若いチームですが、すでに全国大会出場を果たすなど注目を集めています。
今回は新規制作ということもあり、大まかな制作イメージと写真や雑誌のインタビュー記事などを参考にお任せでご依頼いただきました。そのため、デザインやページ構成含めてすべてを担当して制作しています。
マネージャの方が撮影した写真が豊富にあったことや雑誌記事などに情報がまとまっていてとても制作しやすかったです。
ご依頼いただいた KYOJO 創始者であり監督である永田様に明確なイメージがあったことも良かったです。
Web サイトの主な構成は以下の通りです。
| 項目 | 内容 |
|---|---|
| サーバ | XServer |
| CMS | WordPress |
| テーマ | Lightning G3 |
| カスタマイズ | 専用プラグイン |
レンタルサーバ + WordPress + 無料テーマという構成で初期コストを抑えました。
既存のプラグインで対応が難しいこのサイト専用のカスタマイズについては、専用のプラグインを作成してインストールしています。
主なカスタマイズ内容は以下になります。
細かいクエリの調整 (アーカイブページの読込数など) やフォント追加 (theme.json のカスタマイズ) などは省略しています。
| 項目 | 内容 |
|---|---|
| 投稿リストのテンプレート | Advanced Posts Blocks のテンプレートを専用のマークアップに変更 Swiper.js でスライド設定など |
| 投稿タイプ追加 (試合情報) | 試合情報を管理するためのカスタム投稿タイプを追加 初期テンプレートとして、あらかじめ整ったブロックを設定 |
| 投稿タイプ追加 (選手情報) | 選手情報を管理するためのカスタム投稿タイプを追加 初期テンプレートとして、あらかじめ整ったブロックを設定 |
| カスタムブロック追加 | メタデータをブロックエディタ上で表示・更新できるブロックを追加 投稿日時を埋め込めるブロックを追加 |
試合情報は以下のような編集画面で、必要な項目を埋めていくことで試合情報を登録します。
基本的にはフロント画面と同じ見た目で、見たまま編集ができるようになっています。
下の画像でフォーカスが当たっている *** となっている部分が、メタデータの表示・更新を行うブロックです。編集画面上で数値などを入力して投稿を保存すると自動的にメタデータに保存されて利用できるようになります。
(細かい解説記事は別途まとめます)
試合日時は、投稿日時を表示するブロックを使っています。
クリックすると投稿日時を設定するカレンダーをインスペクター上から選択して表示させます。表示形式も変更できるようにしてあります。
※試合予定は未来の日時になるので、予約投稿とならないようにフックで操作しています。
選手情報も同様にテンプレートの開いている個所を埋めていく形です。
試合情報同様に、見たままの編集ができるようにしています。
こちらも *** となっている部分はメタデータに保存されます。アイキャッチ画像ブロックやタイトルブロック、カテゴリーブロックなどを使って各種情報を投稿データと関連付けて登録ができるようになっています。
タイトル下のカテゴリには、投打とポジションが入ります。この部分は投稿のカテゴリを編集しないといけないのでちょっとわかりにくいです。カテゴリを表示するダイナミックブロックを作った方が良かったかもしれないです。(今後の運用で必要なら検討してもいいですね)
選手データは、独立したデータとして必要ではなかったので通常の投稿コンテンツとして保存されます。
こちらも必要ならカテゴリやメタデータに変更することも可能です。
本質的なところではありませんが、選手情報を Swiper.js で止まらずにスクロールしている部分で、左右のナビゲーションをボタンをクリックしたときにすぐに次のスライドに移動するようにするのが大変でした。なお、選手情報の並びはランダムになっています。
コメントを残す