422(木)にVWSオンライン勉強会 #021「Lightning G3 でのデザインスキンの作り方」を開催しましたので、振り返ってみたいと思います。
Lightning G3 β版のご紹介
VWS勉強会では、まず最初に、最近追加した機能や仕様変更事項などについて紹介しています。
今回は勉強会にも使用する新世代のテーマ Lightning G3 についてを改めてご紹介させていただきました。
スライドにて Lightning G3 の特徴をご確認いただけます。
弊社製品 新機能紹介
弊社製品のアップデートについて、デモをしながらご紹介しました。
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」ファイルに最新の手順が記載してありますので、それにしたがってカスタマイズを進めていきます。
勉強会ではこの手順を一つ一つ解説しつつ、ライブでカスタマイズ作業をしていきました。
- プラグインのフォルダ名とファイル名を変更
- プラグイン基本情報の変更
- プラグインを有効化できるか確認してみましょう
- スキン情報を変更
- スキンを切り替えて有効化してみましょう
- 一旦cssを削除してみましょう
- 変数をさわってみよう
ちょっと高度な変更
日頃よく触っている方向けに、下記の設定をご紹介しました。
- Sassでの編集について
- パッケージのインストール
- Sassの監視
- distでの出力について
また、functions.phpも使えるが、スキン（デザイン）に関連するもの程度の記述にとどめ、スキンと関連しない機能である場合、別途マイプラグインなどとして設定したもらう方が良い、というお話などもありました。
本編の動画も合わせて御覧ください。
次回は 5/27(木)20:00〜開催
詳細が決まり次第ご案内いたします。
勉強会の開催は connpass でいち早くお知らせしています
勉強会については connpass やSNSにてお知らせしています。グループ「Vektor,Inc. Web Solutions」のメンバーになると、イベントが作成された時にメール通知が届きますので、ぜひご登録ください。興味ある勉強会を見逃すことなく参加できます。
この記事を書いた人
- Marketer
- 株式会社ベクトルでリモートワークしながら、香港拠点でお仕事しております。北京語と広東語と英語をいずれも中途半端に操ります。VWS 勉強会の賑やかし担当。WordCamp Asia 2020&2023 実行委員。アジアをうろうろ。
最近の投稿
フルサイト編集対応ブロックテーマ
WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。
パターンを使って
よりクオリティの高いサイトに
パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。
ブロックエディターで
ABテストを
自由に作成できる VK AB Testing
VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。