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

Lightning G3 β版のご紹介

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

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

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

Lightning G3について(特徴は51ページから)

弊社製品 新機能紹介

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

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」をダウンロードし解凍します。
解凍後の Skin Sample のフォルダ内

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

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

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

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」のメンバーになると、イベントが作成された時にメール通知が届きますので、ぜひご登録ください。興味ある勉強会を見逃すことなく参加できます。

Follow me!

初心者でも簡単!無料WordPressテーマ

100%GPL / 商用利用可能

Lightning は WordPress公式ディレクトリに登録されているカスタマイズ性の高いテーマです。
デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

VWSオンラインコミュニティー

オンラインコミュニティでは、より良いテーマ・プラグイン開発のため、機能改善・追加要望などの書き込み大歓迎です!
ユーザー同士の交流や意見交換の場としてもお気軽にご参加ください。
※質問はフォーラムでのみ対応となります。