Gutenbergを採用したブロックエディター対応テーマ「Lightning」と、フルサイト編集に対応したブロックテーマ「X-T9」はどちらも開発元は同じくVector,inc(株式会社ベクトル)の製品で、同じ系譜ですが、機能や性能が微妙に異なっています。
また長期的にテーマを使っていくため、アートフレアでもカスタマイズを加えていますがその内容についても言及します。
https://www.vektor-inc.co.jp/post/change-wordpress-theme-lightning-to-x-t9/
性能比較表
| 性能・機能(順不同) | Lightning | X-T9 |
|---|---|---|
| 公式サイト | https://lightning.vektor-inc.co.jp/ | https://x-t9.vektor-inc.co.jp/ |
| 管理画面 | 標準(黒×青 系) | 区別しやすいように、茶色系に設定しています。 |
| テーマ | ヘッダーや記事一覧、記事テンプレートそのものは、PHPやHTMLタグを記入して編集するか、無理やりCSSで調整するしかなかった | ほぼ「すべての部分」がブロックエディターで編集できるので、多彩なカスタマイズが可能で、開発も低負荷(非デザイナーでも扱える) |
| ウィジェット | サイドバーやヘッダー・フッターなどで活用していた | ブロックテーマではウィジェットという機能は原則「ない」 複数箇所で使うパーツは「再利用ブロック」で。 |
| CTA | Ex unitの機能で採用していた | 標準使用するケースが少ないのでoffに。また上記の通り「再利用ブロック」で賄える。 |
| ヘッダーメニュー(ナビゲーション) | wpの機能 外観→「メニュー」が自動で並ぶ | 「メニュー」を操作しても自動では変更されないので「エディター」のヘッダーパーツを編集する必要がある |
| メガメニューなど | プラグインで対応できた | 未検証(小規模サイト想定なので、基本的に用いない) |
| ヘッダー・フッター | フックでウィジェットを配置し、ウィジェット編集でボタンなどを配置。やや構造に制限があった。 | パーツそのものを、エディターで自由に編集できるので制限がない。非デザイナーでも簡単。 |
| メディア | – | プラグインを導入し自動的にWebpに変換、およびSVG形式に対応 |
| WEBフォント | CSS&header.phpで読み込み・有効化 | エディターの「スタイル」からノーコードでGoogleフォントやttfファイル等を読み込め設定できる。 |
| ページレイアウト | ページヘッダー非表示、2カラムなどは固定ページのサイドバーで選べた。 | 「テンプレート」を変更することで可能。テンプレートは別途エディターからも制作できる。 |
| VK Blocks Pro | – | 変更なし、これまで同様のブロックを使える ただし不要なスタイルは無効化し、極力シンプルに。 |
| ブロックインサーター | – | ほぼ使うことがない「埋め込み」ブロックは非表示に設定 |
| ページヘッダー | ページタイトルと固定ページで設定した「ページヘッダーサブタイトル」が並ぶ | ページタイトルとカスタムフィールド「ページヘッダー・サブテキスト」値が並ぶ。並び方は「エディタ」で自在に変更できる。 |
| パンくずリスト | カスタマイザーで位置、非表示などをスイッチできた | 「パンくずリスト」というブロックを配置する必要あり |
| CSS ファイル | 基幹・標準となる core-style.css 案件ごとのPCカスタマイズ style.css 案件ごとのレスポンシブ対応 resposive.css | 構成は、これまでと同様 ただし、X-T9用に微調整やアップデートも実施 |
| プライバシーポリシーページ | – | 基本方針としてページ制作に含める(制定日、社名変更の必要あり) |
| 404ページ | 固定ページを作り、リダイレクト処理をしていた | ページテンプレート「ページ:404」にて編集 |
| 記事のループ部分 | 並べ方や表示要素は制御できたがレイアウトや順序はCSSで制御していた | クエリーループブロックで編集できるので、自由度が高い。(後述) |
| 記事ページ下部の「次の記事、前の記事」 | 自動で出力された | 設置はできるが、記事タイトルのみで、細かな制御ができない。基本OFF想定でよい。 |
| H1タグ | TOP:headerのサイトタイトルがH1 TOP以外:ページヘッダーがh1 と自動制御されていた | headerパーツもブロックなので、条件分岐が出来ない。TOPには別途MVのキャッチコピーなどでH1タグを設けるべき。記事詳細ではArticle要素を用いてh1を重複を妥協。 |
| ハンバーガーナビ | テーマが自動で「別々のHTML」を生成していた | ブロックがそのまま出力され、CSSで見た目を制御している *ブレイクポイントは600px |
記事ループ(クエリーブロック)について
- 「抜粋」は自動で続きを読むボタンが表示されるので、カスタムスタイルで「ボタンなし」を追加している。
- ブロックで編集できるので例えば見出しのレベルを変えたり、タクソノミーの表示有無、アイキャッチのアスペクト比など、自由に編集できる。
- 逆に、要素やブロックレイアウトはある程度クエリーループを理解できていないと難しい部分もある。
現状未対応箇所
- 固定ページ2カラムなどの変則レイアウトページ
- メンバーシップ機能やEC機能には未対応
- メガメニュー、多階層メニューなど
- ハンバーガーメニュー内のバナーやCVボタン
- ページ内リンクのヘッダー差分・

