メジャーバージョン Lightning 7.0 / Lightning Pro 2.0 をリリースしました。ファイル構造など変更していますので、子テーマなどでカスタマイズしている方はアップデートの際はテスト環境などで事前に表示テストをよろしくお願いいたします。
ダウンロード
開発中のバージョンは 無料版は下記よりダウンロードください。
Pro版はライセンス保有アカウントでVWSにログインの上、マイアカウント からダウンロードできます。
※開発中のバージョンのため動作・表示保証はまったくしていません。
不具合の報告はGitHubのissueに投稿ください。
Pro版ユーザーの方はフォーラムに投稿いただいても結構です。
従来バージョンとの大きな違い
Bootstrap4の対応
CSSフレームワークとして長い間Bootstrap3系を採用していましたが、今回のバージョンからBootstrap４に対応します。
デザインスキン毎に対応Bootstrapバージョンが違います
テーマ全体がいきなりBootstrap4に変わってしまうと既存のサイトが軒並み表示が崩れる事が予想されるため、Bootstrapのバージョンはデザインスキン毎に異なります。
外観 > カスタマイズ > Lightningデザイン設定 より、デザインスキンを「Origin II」に変更して保存すると、ベースのBootstrapが４になります。
OriginII の特徴
タブレットでのメニューの最適化
従来のBootstrap3版ではヘッダーのナビゲーションをマウスオーバーした際に下階層が展開する仕様で、他の多くのウェブサイトも同様の仕様がほとんどです。
しかしながら、この仕様の場合、幅の広いタブレットで閲覧した際に下階層をタップしたくても親階層のメニュー項目をタップした時点でページ遷移してしまうという問題がありますが、OriginIIではこれを解消しました。
タブレット表示の場合
タブレットのようなタッチデバイスでの閲覧の場合、下階層があるメニュー項目の右側にはプルダウン矢印が表示されます。
PCの場合はマウスホバーで展開するので従来通りで、展開用矢印は表示されません。
サブキャプションをつけない時の表示改善
Originだとサブキャプションがない分、上に文字が偏って表示されていましたが、 OriginII では上下中央になるように調整しました。
孫階層の展開改善
孫階層はホバーすると右側に出しており、そのため以下のような問題がありました。
- 一番右のメニューの場合、画面から外れてクリックできない
- マウスホバーが外れるとすぐにもどってしまうため孫階層以下がクリックしにくい
- 幅の広いタブレットなどのタッチデバイス端末では親階層をタップした時点で画面遷移してしまうのでそもそも孫階層が表示できない
OriginII では下階層メニュー項目展開用の下向き矢印をクリックする事で孫階層が表示されるようになっています。
ファイル構造の変更
今回ファイル構造を変更しています。子テーマでカスタマイズされている方は以下を熟読ください。
ファイル階層とファイル名の変更について
今回のバージョンから get_template_part で読み込んでいたファイル名/階層が変更になります。子テーマでカスタマイズされている方は十分注意してください。
とは言え、アップデートによってカスタマイズして利用しているユーザーの皆様が阿鼻叫喚地獄絵図にならないように旧ファイル名・階層でカスタマイズされたファイルがある場合はそちらを優先して読み込む互換処理をいれていますので、アップデートしたからといって大きな影響が出る事はないと思います。
ただし、コードが複雑化したり処理遅延の原因となるため、この互換処理は１年程度で削除する予定ですので、該当ファイルをカスタマイズしている方はファイル名の変更・階層の移動作業をよろしくお願いいたします。
ただし、親テーマ内に古い形式のファイルが残っている場合は誤動作の原因となるため、FTPなどで手動で更新する場合は、旧バージョンのlightningディレクトリを削除した上でアップロードしてください。
※管理画面からのワンクリックアップデートの場合は旧ファイルは自動で削除されるので問題ありません。
対象ファイル
| 変更前 | 変更後 |
| ./module_loop_post_meta.php | ./template-parts/post/meta.php |
| ./module_loop_post.php | ./template-parts/post/loop-post.php |
| ./module_pageTit.php | ./template-parts/page-header.php |
| ./module_panList.php | ./template-parts/breadcrumb.php |
| ./module_slide.php | ./template-parts/slide-bs3.php |
class名の変更について
従来のデザインスキンとBootstrap4対応版のスキン（OriginII）ではHTMLに出力されるclass名が一部異なります。独自にphpファイルやcssをカスタマイズしていて、デザインスキンをOriginIIなど今後リリースされるBootstrap4版のスキンに変更する場合はご注意ください。
特に注意してください
index.phpやheader.phpなど、旧バージョンのテンプレートファイルを子テーマに複製している場合はBootstrap4版のスキンに変更した時に壊れやすいです。以下のように変更されているので、親テーマのファイルと見比べて修正してください。
Lightning Pro 1系 / Lightning 6系以前
<header class="navbar siteHeader">Lightning Pro 2系 / Lightning 7系以降
<header class="<?php lightning_the_class_name( 'header' ); ?>">従来とBootstrap4版でのclass名が異なる箇所については下記参照ください。
メインカラムレイアウト用クラスの指定について
Gridシステムでのclass指定の廃止とその背景
Lightning は Bootstrap の利用を想定しているため、メインカラム（.mainSection）とサイドバー（.sideSection）のレイアウトを col-md-8 や col-md-4 などの グリッド用クラスで制御していましたが、Bootstrap4版スキンでは、以下の理由により.mainSectionと.sideSecctionのレイアウト指定のclass名がBootstrapのグリッド指定用classではなくなります。
そもそも12分割のサイズではない
12分割で 8 : 4 では .mainSection と .sideSection の間が狭すぎますが、従来のBootstrap3版のように col-md-3 col-md-offset-1 では col-md-offset-1 分の余白はさすがに広すぎるので結局幅をcssで上書きする事になる。
.col-md-8 指定ではブレイクポイントの変更に対応できない
従来 col-md-8 指定したとして、開発者側の仕様変更あるいはユーザーがカスタマイズで後からブレイクポイント変更したいとなったら場合に、col-lg-8 にクラス名を変更するのか、それとも col-md- のブレイクポイントをCSSで上書きという事になる。
テーマの出力するclass名が .col-md-8 指定じゃなくなる可能性 及び .col-md-8 にデザインカスタマイズするユーザーが発生してしまう
前者の場合、ユーザーが .mainSection ではなく .mainSection.col-md-8 などに対してCSSカスタマイズの記述をすると、テーマ側が吐き出すclass名がcol-lg-8 などに変更されるとカスタマイズされたCSSが適用されなくなる。
.col-md-8 というクラス名がついているのに md じゃないブレイクポイントになる可能性
.col-md-8 というクラス名がテーマ側で出力されているけれど、人によっては lg や sm のポイントで切り替えたいかもしれない。その時に class名がmdなのにlgのポイントで切り替わるようなCSSを上書き記述するというのは不自然である。
独自にテンプレートファイルを増やした時のクラスの指定方法
以下のルールになります。
通常
標準のテンプレートファイルは以下のようになっていますので、子テーマでカスタマイズなどされている方は修正してください。
<div class="<?php lightning_the_class_name( 'mainSection' ); ?>" id="main" role="main">
<div class="<?php lightning_the_class_name( 'sideSection' ); ?>">lightning_the_class_name() 関数を使う事で、Bootstrap3版のスキンとBootstrap4版のスキンで異なるclass名を出力しています。
実際に出力されるclass名の例
上記のソースコードは通常下記のHTMLを出力します。
<div class="col mainSection mainSection-col-two"></div>
<div class="col sideSection sideSection-col-two subSection"></div>1カラム
<div class="col mainSection mainSection-col-one"></div>
<div class="col sideSection sideSection-col-one subSection"></div>左カラム
<div class="col mainSection mainSection-col-two mainSection-pos-right"></div>
<div class="col sideSection sideSection-col-two sideSection-pos-left subSection"></div>
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。