Lightning G3 のスキンを自作してみた話
DRILL LANCERこれは「Vektor WordPress Solution Advent Calendar 2021」15日目の記事です。
前回の記事ではまだ Lightning Pro ( G2 ) を使っていると書きました。
また、G3対応するためにスキンを独自開発しているという話もしました。
今回は独自スキンを開発したときのことについて書きます。
前回の記事は下記からどうそ！
Lightning Three Column Unit を G3 対応した話
なぜ G3 対応をしようと思ったか まずはじめに、このサイトはまだ Lightning Pro ( G2 ) を使ってます。 G3 対応するのはちょっと手間だと感じていたのとなかなかブログ記…
なぜ 独自スキンを作ろうと思ったか
まずはじめに、少し前まで Lightning Pro ( G2 ) を使っていました。
しかし、時代は G3 なのでいずれ G3 対応するつもりでした。
ただ、G3 対応するのはちょっと手間だと感じていたのとなかなかブログ記事を更新する気が起きなかったのとでずるずる伸びてきました。
なぜいまさら G3 対応する気になったのか、なぜこの記事を書いているのかというとブログを書く機会が与えられたからです。そう、Advent Calendar です。
また、このサイトは Variety をベースに細部を CSS や PHP で弄っていたのですが下記の点から独自スキンを作ることにしました。
- Variety が なかなか G3 対応されない点 ( Variety は Lightning + Lightning G3 Pro Unit のみでは再現不可能な部分がある )
- G2 まではスキン側にたくさんの機能が盛り込まれていたがその殆どが Lightning や Lightning G3 Pro Unit に移った
- 上記によってスキンが占めるウェイトはほぼデザインのみになった
- 上記によって Variety ベースにこだわる必要もないと判断した
というわけで今回は独自スキンを作ったときのことを書きます。
独自スキンを作るための手順
前提条件
これからの手順は下記が準備できている想定で展開していきます。
- node.js が使える ( npm コマンドや npx コマンドが使える )
- ZIP ファイルを圧縮・解凍できるアプリケーションがインストール済み
- VS Code が使える（色々便利なテキストエディタです。）
- 何かしらの開発用のローカル環境がある ( さすがにいきなり本番環境でやるのはおすすめしない )
- sass について基本的な知識がある
それでは手順紹介に移ります。
手順
スキンのベースとなるデータを入手
GitHub から Lightning G3 用のスキンのサンプルとなるデータを入手します。
画像の赤枠（Code）→青枠（Download ZIP）の順にクリックすると入手できます。
ZIP ファイルを解凍後フォルダを VS Code で開く
ダウンロード した ZIP ファイルを解凍して 展開されたフォルダを VS Code で開きます。
VS Code 内でターミナルを開いて npm install を実行する
この操作によって開発するのに必要なツールがインストールされます。
必要箇所を書き換える
書き換えるべきところは下記のとおりです。
「sample」や「Sample 」を別の文字列に書き換えると良いでしょう。
- lightning-skin-sample のディレクトリ名
- lightning-skin-sample.php のファイル名と中身
- package.json の中身
- gulpfile.js の中身
CSS・JS・PHP を編集する
CSS でデザインを変えたい場合は _scss フォルダ内のファイルを編集します。
その後 npm run sass を実行したあとブラウザキャッシュを削除して再読み込みすれば反映されます。
JS を使って動きをつけたりしたい場合は js/script.js を編集します。ただし公式では非推奨です。
ブラウザキャッシュを削除して再読み込みすれば反映されます。
PHP でフックを使用して HTML を書き換えたり追加したい場合は functions.php を編集します。ただし公式では非推奨です。
ブラウザを再読み込みすれば反映されます。
アップロード用の ZIP ファイルを作成
完成したと思ったらアップロード用のファイル作成に取り掛かります。
npm run dist か npx gulp dist を実行すれば必要最小限のファイルから構成されたプラグインフォルダが dist ディレクトリ内に出力されるので dist ディレクトリの中身を zip で圧縮します。
本番環境にアップロード
STEP 6 で作った ZIP ファイルを本番環境にアップロードして有効化すればそのプラグインが本番環境で稼働し始めます。
独自スキンを作ったときのこと
ビルド関連のコマンドと npm のスクリプトのコマンドに個人的に合わない部分があったのでそこは独自に修正しました。（ package.json・gulpfile.js）
また、私の場合１から CSS を作るのが面倒だったので Origin III から CSS (というか SASS ) を流用した上で作業しています。
Origin III の CSS や SASS は lightning/_g3/design-skin/oriogin3 から拝借可能です。
感想としましては G2 時代と比べてスキン作成の難易度はかなり下がったような気がします。
やはりスキン独自の機能がほぼ Lightning や Lightning G3 Pro Unit に移行したのが大きいと思われます。
何かしらのデザインを構築してそれを色々なサイトに使い回す際はスキン作成に挑戦してみると良いのでは？と思いました。
プラグインの入手先
今回もプラグインを作ったので需要はと思いつつもなんとなく配布してみます。
名前は Variety になんとなく響きが似ていてかっこよさげな Valkyrie を採用しました。他意はありません。
プラグインの入手先はこちら
まとめ
この記事の内容をまとめると下記のようになります。
- 気が向いたのでこのサイトを G3 対応すべく独自スキンを作った。
- 独自スキンを作るための前提条件・手順を紹介した。
- せっかくプラグインを作ったので需要はないとは思いつつ紹介しつつ公開することにした。
- ページヘッダー関連の機能は Variety にはなかったので Valkerie でも封印した。
- 最近暇とはなかなか言えない状況なので、原則ノーサポートということにした。
投稿者プロフィール
最新の投稿
Lightning2023年12月20日Lightning G3 Three Column Unit をアップデートした話- Lightning2021年12月15日Lightning G3 のスキンを自作してみた話
- Lightning2021年12月10日Lightning Three Column Unit を G3 対応した話
- Lightning2020年12月18日Lightning３カラム化計画 その２ ～プラグイン編～
