ナンバーガール公式サイトにならうシンプルなwordpress実装
ナンバーガールの公式サイトがwordpressをものすごくシンプルにカスタマイズしており
wordpress初心者の後輩にシンプルな使い方について説明するのに丁度良さそうだったので要点をまとめた。
せっかくなのでブログにも掲載しておく。
ナンバーガール・オフィシャルサイト 狂う目 | NUMBER GIRL official website
wordpressであることが見て取れる点
まず、読み込んでいるファイルがwp-contentからだったりすることからwordpressであることが明白。
そしてstyle.cssを見たところ、2014年のデフォルトテーマであるTwenty Fourteenを上書きしている事がわかる。
こちらのテーマはレスポンシブ対応されているので、一から作成するよりカスタムすることを選択したと思われる。
本テーマは2カラム、3カラムも対応しているテーマであるが
共通ヘッダー・コンテンツエリア・共通フッターだけというシンプルな1カラム実装。
Twenty Thirteenでもよかったくらいのシンプルさである。
余談：wordpress、隠すか隠さないか問題
できるだけ隠そうという姿勢で挑む場合もあって、それはプロジェクトによりけりなんだけど
今まで私は受託開発でコーポーレートなどを担当することが多かったので、のちのリニューアル時の事など考えるとテーマで切り替えできるのでテーマにパッケージ化したい気持ちがある。
wp感をあまり出さないようにしている例で言うと、渋谷すばる君のオフィシャルサイトがよく作られていると思う。
「wpで作っている」とtwitterで話題になっていたので見たんだけど、個別ページのbodyについているclassに少しwpを感じることができるなぁ、とか
多言語の実装がlangというパラメーターに値を持たせて切り替えているのが多言語プラグインのbogoっぽいかなぁ、という程度だった。
（wp製というソースは見つからなかったので偶然の一致かもしれないけど）
デザイン
font-familyがbodyに設定したfont-familyのみで、明朝体以外受け付けない感じが潔くていい。
body {font-family: "Hiragino Mincho ProN","游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif}以下子要素でfont-familyの上書きなどは行っていない。
グローバルバビゲーションやDiscographyの一部でserif系フォントを使っているが、それらはすべてimgである。
テキストは全部明朝という強い気持ちを感じる。ヤバイ。
サイトキーカラーは#BF2720、それ以外はない。#FFFと#BF2720のみ。さらにヤバイ。黒すら使ってない。バリヤバイ。
利用プラグイン
確認できたものだけ。
contact form 7
王道コンタクトフォームプラグイン。メール送信にもデータストアにも対応している。
このシンプルさだとメール送信のみじゃないかな。そんな気がするな。妄想だけど。
Shortcodes by Angie Makes
便利ショートコードが詰まっている。
あまり装飾の多いサイトではないので、意外な感じはする。
Biographyの個人SNSアイコンの表示あたりに使っているのだろうか。
コンテンツ
主なコンテンツは以下である。
- News
- Live
- Discography
- Biography
- Goods
- contact
news
「投稿」のカテゴリーが「news」のものを表示。
個別記事へのリンクは貼らず、一覧にすべて出す男気実装がなされている。
なぜそういう処理にしているか判断できるかというと、bodyのclassを見るとわかる。
(body_class, post_class)
また、htmlの要素も「article」で作成しており、IDが入っている。
wordpressの基本的な記事へのパーマリンクは「hoge.com?p={id}」なので打ってみると、公には導線が作成されていないnewsの個別記事にアクセスすることができた。
7/27 新宿LOFT公演でのグッズ販売に関してのご案内 | NUMBER GIRL official website(https://numbergirl.com/news/2019727senkoubuppan)
[
]
NEWSパーマリンクの一例
ちゃんとslugを設定していてえらい。
slugやメディアファイル名が日本語のままだと事故を誘発しがちなので気をつけるといいですね。
live
こちらもnewsと同様。
HTMLを見ると「カテゴリ別アーカイブ」というコメントアウトが見えて切ない。
discography
ここでやっと一覧→個別ページという一般的な遷移が行われる。
しかしこの一覧、まさかの固定ページ。例によって「投稿」の記事を持ってきているようなので、
「news」同様、archiveのテンプレートを利用するという選択肢がなかったのは、表示件数の問題だろうか。
表示件数は基本的には「設定 ＞ 表示設定 ＞ 1ページに表示する最大投稿数」で設定する。
functions.phpの中でフック処理を入れる事によりカテゴリによって件数を変更するというのも実現できるが
固定ページとして持って、固定ページのテンプレートの中で特定カテゴリの記事をget_posts()でひっぱって出す方が簡単だしフックで処理するよりシンプルでサイト全体の方針にあってるなぁと納得。
画像に関してはWPのcoreに含まれているMasonryが使われているのでレスポンシブ対応とか心配しなくていいですね。楽！
先述の通り、ディスコグラフィーの詳細ページは「投稿」の記事になっている。ここで注目してほしいのはURLである
通常このような実装になる
- /category/{category_slug}/ → アーカイブページ(archive)
- /{slug}/ → 固定ページ(page)
- /{category_slug}/{slug}/ → 投稿(single)
しかしこのサイトのURL設計は、こうである
- /{category_slug}/ → アーカイブページ(archive)
- /{slug}/ → 固定ページ(page)
- /{category_slug}/{slug}/ → 投稿(single)
カテゴリーベースを「.」に指定すると、URLからデフォルトの「category」を削除することができる
じゃあ/{category_slug}/にしたらカテゴリのアーカイブページになるんじゃないの？いい質問だね。
その上でカテゴリスラッグと同名のスラッグを持つ固定ページを作成すると、そちらが優先されるのだよ。
余談：投稿にするか、カスタム投稿タイプにするか。
違ったタイプの投稿を持つ場合には「カスタム投稿タイプ」を持つというやり方がある。
たしかに要素として「タイトル」「本文」「サムネイル（ジャケ写）」という構造なので、投稿でカテゴリわけしたほうがシンプルでよさそう。
biography
特定のclassの要素に対して、スクロールに応じてふわっと表示してくれるようなjsが記述されているので
バイオグラフィーやディスコグラフィーなどの画像のあるページではそれが実行されているようです。
goods
販売のシステムは外部サイト（カラーミーショップ）を利用。公式wordpressプラグインがあるので、そちらを利用しているのではないだろうか。
こうした「一部だけECサイト」みたいな実装の時ってヘッダーフッターが結局共通にならないという悩みがあると思うので
プラグインでページを生成できるのは非常にありがたいですね。
あと多分そろそろTシャツ届くから楽しみです。
contact
「利用プラグイン」で触れた通り、王道のプラグイン、contact form 7を使っている。
送信後は別ページに遷移しちゃったりするのだろうか。いやデフォルトの表示なんだろうな。見てみたいけどcontactする用事ないので想像の域を出ません。
総括
既存テーマをカスタマイズしつつURL設計などはしっかり押さえて、投稿タイプもpostのみに絞り、カテゴリで表示場所を分けるというシンプル運用。
非常にソリッドでナンバーガールらしさを感じる実装でしたね。
気になるところはjQueryの多重読み込みによるエラーが出ているので心配だなってところくらいです。
あと日比谷野音行けるのでめちゃくちゃ楽しみです。