テンプレート Twenty Twenty-Four を使って自社サイトをどこまで再現できるか？ その調査レポートの第1回では、その特長と基本構造について調べてみた。
Twenty Twenty-Four の特長
自分で WordPress を使う際は、いつもスクラッチでテンプレートを書いているので、テーマを使うことは既存サイトの修正を頼まれたときとなる。たいていは、様々に手が入っていて、どこがどうなっているのか理解するまでに時間がかかっていたものだ。
そういうこともあり、リリース時から使ってきた WordPress であるが、テーマ活用はまだ素人の域といってもいいかもしれない。なので、まずは Twenty Twenty-Four の特長について理解したい。WordPress 日本語サイトのTwenty Twenty-Four の紹介を読みながら設定をすすめていく。
ユースケースの選択
ユースケースについては、以下のように記載されている。
このテーマでは3通りの異なるユースケースについて掘り下げられています。まずアントレプレナーとスモールビジネス向け、次にフォトグラファーとアーティスト向け、最後にライターとブロガー向けのユースケースです。
とはいえ、「ユースケース」を設定できる機能があるわけではなく、それぞれのユースケースにあわせたテンプレートが用意されているということのようだ。で、スモールビジネス向けと思われるフロントページのテンプレートを選択してみた。見た目は次のようになる。
これを、以下のように組み込んでいきたい。
この時点で、「slick スライダーをキービジュアルの場所に配置するにはどうすればよいか？」、「PCで見た場合、コンテンツ部分（1200px）の両側のウィンドウサイズ全体に施しているデザインをどう実現すればよいか？」という 2 つの大きなテーマがわきおこってきた。
ソースコードを見てみる
ソースコードを見てみると、ある程度想定していたとはいえ、総行数741行。PC全画面表示での縦長は5375px。デフォルトのままで、各ブロックのマージンも大きめに取っていて、たいしたコンテンツ記述がない状態でこれは、えらいこっちゃ！ かも知れない。現在の当サイトの HTML コードの行数は 444 行だ。PC全画面表示での縦長は7423px。つまり、テーマを使うと、HTML はかなり冗長になるのだ。
- head 部（2行目から242行目）
- dns-prefeth が使用されているが、これは、Jetpack プラグインを使用して EasyCron と連携しからだろうか。多くの CSS ファイル読み込みとインライン指定は、多彩なブロックエディタの装飾用だろう。
- body 部（243行目から597行目
- 全体が div で囲まれ、header。2重 div のなかに、div で囲まれたサイト名（ロゴ）部の h1 と nav 。同階層に main 部。div に囲まれ、キービジュアルの figure。同階層にまた div だ。そのなかは、冒頭に h1。それ以下は、いくつかのブロックが並び main を閉じているようだ。
- footer 部（598行目から692行目）
- footer 自体が div で囲まれている。
- その下
- いくつかの script が並んでいる。Jetpack のものが行数を結構占めている。
基本構造
で、基本構造を絵にしてみた。
これを見ると、「PCで見た場合、コンテンツ部分（1200px）の両側のウィンドウサイズ全体に施しているデザインをどう実現すればよいか？」については、現状ではできない。div.wp-block-group は、section に該当するが、h2 をその外に置いているので、それ単体を内容とするdiv.wp-block-group を挿入しなければならないということになる。main を100%にして、div.wp-block-group にCSS指定すれば、セクションごとの全画面デザインはを実現できるだろう。
次いで、「slick スライダーをキービジュアルの場所に配置するにはどうすればよいか？」だが、div.wp-block-group にスライダー用ブロックを用意すれば何とかなりそうだ。できるかどうかは別として。
ここまで見ると、かなり元テンプレートをいじらなければならないことが分かってきた。となると、小テンプレートを用意・選択して、それをいじっていったほうがよさそうだ。
まとめ
今回の記事はここまでで、次の課題についてまとめておこう
次の記事の課題
- 子テーマを作成する。
- header、footer 部に現サイトをエミュレートできるようにデータ登録する。
- main 部を登録していくために、スライダー用のブロックを用意できるかどうかを調査する。
それでは、ここまで読んでいただいた方、ありがとうございました。次回は、現サイトを WordPress でエミュレートするために用意した上記課題を施した後の、Twenty Twenty-Four を使ったサイトURLを公表します！