Lightning G3 のスキンを自作してみた話

これは「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)の順にクリックすると入手できます。

STEP
1

ZIP ファイルを解凍後フォルダを VS Code で開く

ダウンロード した ZIP ファイルを解凍して 展開されたフォルダを VS Code で開きます。

STEP
2

VS Code 内でターミナルを開いて npm install を実行する

この操作によって開発するのに必要なツールがインストールされます。

STEP
3

必要箇所を書き換える

書き換えるべきところは下記のとおりです。

「sample」や「Sample 」を別の文字列に書き換えると良いでしょう。

  • lightning-skin-sample のディレクトリ名
  • lightning-skin-sample.php のファイル名と中身
  • package.json の中身
  • gulpfile.js の中身
STEP
4

CSS・JS・PHP を編集する

CSS でデザインを変えたい場合は _scss フォルダ内のファイルを編集します。

その後 npm run sass を実行したあとブラウザキャッシュを削除して再読み込みすれば反映されます。

JS を使って動きをつけたりしたい場合は js/script.js を編集します。ただし公式では非推奨です。

ブラウザキャッシュを削除して再読み込みすれば反映されます。

PHP でフックを使用して HTML を書き換えたり追加したい場合は functions.php を編集します。ただし公式では非推奨です。

ブラウザを再読み込みすれば反映されます。

STEP
5

アップロード用の ZIP ファイルを作成

完成したと思ったらアップロード用のファイル作成に取り掛かります。

npm run dist か npx gulp dist を実行すれば必要最小限のファイルから構成されたプラグインフォルダが dist ディレクトリ内に出力されるので dist ディレクトリの中身を zip で圧縮します。

STEP
6

本番環境にアップロード

STEP 6 で作った ZIP ファイルを本番環境にアップロードして有効化すればそのプラグインが本番環境で稼働し始めます。

STEP
7

独自スキンを作ったときのこと

ビルド関連のコマンドと npm のスクリプトのコマンドに個人的に合わない部分があったのでそこは独自に修正しました。( package.json・gulpfile.js)

また、私の場合1から CSS を作るのが面倒だったので Origin III から CSS (というか SASS ) を流用した上で作業しています。

Origin III の CSS や SASS は lightning/_g3/design-skin/oriogin3 から拝借可能です。

感想としましては G2 時代と比べてスキン作成の難易度はかなり下がったような気がします。

やはりスキン独自の機能がほぼ Lightning や Lightning G3 Pro Unit に移行したのが大きいと思われます。

何かしらのデザインを構築してそれを色々なサイトに使い回す際はスキン作成に挑戦してみると良いのでは?と思いました。

プラグインの入手先

今回もプラグインを作ったので需要はと思いつつもなんとなく配布してみます。

名前は Variety になんとなく響きが似ていてかっこよさげな Valkyrie を採用しました。他意はありません。

注意事項

  • このプラグインは私個人が趣味で作成したものです。株式会社ベクトルは一切関係ありません。
  • このプラグインを使用するには Lightning G3 Pro Unit が必須です。
  • 不具合修正はするかもしれませんが、導入は自己責任かつ原則ノーサポートということでお願いします。
  • 場合によっては場所を変えて月額制での有償サポートをする可能性はあります。
  • ページヘッダー関連の機能は封印しているので使えません。もともと Variety にはなかったので Valkerie では封印しました。
  • デモサイトはありません。このサイトがデモサイトのようなものです。

以上に同意できる方の中で興味がある方は下記よりダウンロードしてみてください。

プラグインの入手先はこちら

GitHub リポジトリはこちら

Github のリポジトリでも公開しています:Lightning G3 Valkyrie

ソースコードに興味がある方はぜひ見てみてください。

まとめ

この記事の内容をまとめると下記のようになります。

  • 気が向いたのでこのサイトを G3 対応すべく独自スキンを作った。
  • 独自スキンを作るための前提条件・手順を紹介した。
  • せっかくプラグインを作ったので需要はないとは思いつつ紹介しつつ公開することにした。
  • ページヘッダー関連の機能は Variety にはなかったので Valkerie でも封印した。
  • 最近暇とはなかなか言えない状況なので、原則ノーサポートということにした。
コメント

コメントを残す

メールアドレスが公開されることはありません。

コメントは日本語で入力してください。(スパム対策)

CAPTCHA