VWSオンライン勉強会 #021 「Lightning G3 でのデザインスキンの作り方」レポート

422(木)にVWSオンライン勉強会 #021「Lightning G3 でのデザインスキンの作り方」を開催しましたので、振り返ってみたいと思います。

VWSオンライン勉強会 #021
まずは今月の新機能紹介

Lightning G3をあらためて
紹介します#wpvektorhttps://t.co/WHVHh3QYKe

— 株式会社ベクトル / Vektor,Inc. WordPress Solutions (@vektor_inc) April 22, 2021

Lightning G3 β版のご紹介

VWS勉強会では、まず最初に、最近追加した機能や仕様変更事項などについて紹介しています。

今回は勉強会にも使用する新世代のテーマ Lightning G3 についてを改めてご紹介させていただきました。

スライドにて Lightning G3 の特徴をご確認いただけます。

WordPressテーマ Lightning G3 from Hidekazu Ishikawa

弊社製品 新機能紹介

弊社製品のアップデートについて、デモをしながらご紹介しました。

VK Blocks Pro

• スライダーブロックで複数毎移動ができるようになりました
• アコーディオンブロックを追加しました
• 選択投稿リストブロックを追加しました

ExUnit

• Googleタグマネージャー機能を追加しました

Filter Search Pro リリースとリリース特価のご案内

WordPress公式ディレクトリに登録している絞り込み検索プラグイン「VK Filter Search」の機能を拡張するためのプラグイン「VK Filter Search Pro」の販売開始についてご案内しました。

VK Filter Search Proがあれば、不動産サイトの物件検索で見かけるような検索フォームをブロックで簡単に設置することができます。

ただいま2021年5月31日(月)までリリース特価19,800円にて販売中！お得なこの機会に是非ご購入ください。

勉強会本編
Lightning G3 でのデザインスキンの作り方

WordPressにはテーマの外観を変更することができる「スキン」機能があります。
今回は Lightning G3 β版 でのデザインスキンの制作フローをご紹介しました。

事前準備

• Lightning G3のサイトから、最新版の Lightning 14系（G3） テーマファイルをダウンロード・インストールして有効化
• 同じくLightning G3 のサイトから、最新版の「Lightning G3 Skin Sample 0.0.x」をダウンロードし解凍します。

準備ができましたら、いよいよカスタマイズ方法を見ていきましょう。

スキンサンプルを元にしたカスタマイズ方法

「Lightning G3 Skin Sample」のフォルダ解凍後、フォルダ内の「readme.md」ファイルに最新の手順が記載してありますので、それにしたがってカスタマイズを進めていきます。

勉強会ではこの手順を一つ一つ解説しつつ、ライブでカスタマイズ作業をしていきました。

1. プラグインのフォルダ名とファイル名を変更
2. プラグイン基本情報の変更
3. プラグインを有効化できるか確認してみましょう
4. スキン情報を変更
5. スキンを切り替えて有効化してみましょう
6. 一旦cssを削除してみましょう
7. 変数をさわってみよう

ちょっと高度な変更

日頃よく触っている方向けに、下記の設定をご紹介しました。

1. Sassでの編集について
2. パッケージのインストール
3. Sassの監視
4. distでの出力について

また、functions.phpも使えるが、スキン（デザイン）に関連するもの程度の記述にとどめ、スキンと関連しない機能である場合、別途マイプラグインなどとして設定したもらう方が良い、というお話などもありました。

本編の動画も合わせて御覧ください。

次回は 5/27(木)20:00〜開催

詳細が決まり次第ご案内いたします。

勉強会の開催は connpass でいち早くお知らせしています

勉強会については connpass やSNSにてお知らせしています。グループ「Vektor,Inc. Web Solutions」のメンバーになると、イベントが作成された時にメール通知が届きますので、ぜひご登録ください。興味ある勉強会を見逃すことなく参加できます。