Lightning ProからLightinng G3への移行時に抑えておきたい設定3選

初めまして！デザイナーとしてチームベクトルに参加しはじめた松田と申します。
普段はLightningやKatawaraなどでお客様のWordPressサイトを制作したり、デザインやイラスト制作を行なっております。

昨日対馬さんが書いた遊び心のある素敵な記事「うなさんの「できたよシート」に楽しい機能を追加実装しました」に引き続き、本日はLightning Proを使ってるけどLightning G3に変えて Lightning G3 Pro Unitを使ってみたいなあと思ってる人向けに記事を書いていきます！

実際に複数のサイトでLightning ProからLightning G3に移行をした経験から、抑えたいポイントをまとめました。

Lightning Pro から Lightning G3 + Pro Unit に変更する時に抑えたいポイント

基本的にはLightning Pro から Lightning 14系 + G3 Pro Unit に切り替え推奨手順の記事をご確認いただきながら作業することをお勧めします。

その上で、Lightning Pro から Lightning G3にテーマ変更するとLightning Proの設定がなくなる箇所があるので、その部分を押さえておきましょう。

大きく抑えたいポイントとしては以下の3つです。

この3つが対応できたらLightning Proの設定を維持しつつLightning G3に移行できるかと思います。

トップページウィジェット設定

Lightning Proでトップページをウィジェットの「トップページコンテンツエリア上部」「トップページコンテンツエリア左」「トップページコンテンツエリア右」「トップページコンテンツエリア下部」で作っている場合、Lightnig G3では表示されなくなります。

この時に対応する方法は主に2つあります。

トップページ用の固定ページを作りウィジェットのコンテンツを流し込む

こちらはLightning G3への移行前に行える作業です。基本的にはこの方法をおすすめします。

functions.phpのコードをコピペしてトップページコンテンツエリアを作る ※「トップページコンテンツエリア上部」のみ

こちらはLightning G3への移行後でないとできない作業です。

引き続きウィジェットで設定したい場合は、「トップページコンテンツエリア上部」でしたら以下の記事を参考にしてウィジェットエリアを設定できます。

カスタマイザー設定

ダッシュボードの 外観 > カスタマイズから設定してください。

Lightning Proの状態で以下の項目の内容をメモやスクリーンショットを撮っておくと、Lightning G3への移行が後々楽になります。メモは使用している設定だけで大丈夫です。

以下は見た目に大きく影響する項目をピックアップしています。

項目名	Lightning G3に移行するためにメモ
色	背景色、カラーパレット
背景画像	背景画像
メニュー	Header Navigartion、Footer Navigartion、Mobile Navigationと紐付いているメニュー
ウィジェット	本記事見出しのトップページウィジェット設定を確認
ホームページ設定	本記事見出しのトップページウィジェット設定を確認
追加 CSS	書いてある場合は念のためコピー
Lightning レイアウト設定	1カラムなど設定している箇所をメモ
Lightning ヘッダー上部設定	必要な設定をメモ
Lightning ヘッダー設定	必要な設定をメモ
Lightning トップページスライドショー	スライドタイトル、スライドテキスト、ボタンの文字、リンクURL、スライド画像をメモ
Lightning トップページ PR Block	アイコン、タイトル、サブテキスト、リンクをメモ
Lightning ページヘッダー設定	背景色、背景に被せる、被せる色の濃さ、文字色やページヘッダー画像などをメモ
Lightning アーカイブページ設定	表示件数や表示タイプを投稿タイプ別にメモ
Lightning フッター設定	フッター背景色、フッター文字色、フッター背景画像、フッターウィジェットエリア 数などをメモ
Lightning コピーライト設定	テキストをコピー
Lightning モバイル固定ナビ	表示設定やボタン、リンクや色などをメモ
Lightning Google タグマネージャー	Google タグマネージャー ID をコピー

投稿や固定ページの編集画面設定

Lightningデザイン設定やページヘッダー画像を個別に設定している投稿や固定ページの設定をメモしてください。

Lightning Proの状態で以下の項目の内容をメモやスクリーンショットを撮っておくと、Lightning G3への移行が後々楽になります。メモは使用している設定だけで大丈夫です。

Lightning デザイン設定

項目名	Lightning Lightning G3に移行するためにメモ
レイアウト設定	「共通設定を適用」の場合以外はメモ
ページヘッダーとパンくずリスト	表示しない設定をしている項目をメモ
余白設定	チェックが入っている場合はメモ
セクションベース設定	「デザインスキン標準」の場合以外はメモ
ヘッダー透過	チェックが入っている場合はメモ
追加 CSS	書いてある場合は念のためコピー
Lightning レイアウト設定	1カラムなど設定している箇所をメモ
Lightning ヘッダー上部設定	必要な設定をメモ
Lightning ヘッダー設定	必要な設定をメモ
Lightning トップページスライドショー	スライドタイトル、スライドテキスト、ボタンの文字、リンクURL、スライド画像をメモ
Lightning トップページ PR Block	アイコン、タイトル、サブテキスト、リンクをメモ
Lightning ページヘッダー設定	背景色、背景に被せる、被せる色の濃さ、文字色やページヘッダー画像などをメモ
Lightning アーカイブページ設定	表示件数や表示タイプを投稿タイプ別にメモ
Lightning フッター設定	フッター背景色、フッター文字色、フッター背景画像、フッターウィジェットエリア 数などをメモ
Lightning コピーライト設定	テキストをコピー
Lightning モバイル固定ナビ	表示設定やボタン、リンクや色などをメモ
Lightning Google タグマネージャー	Google タグマネージャー ID をコピー

ページヘッダー画像

項目名	Lightning Lightning G3に移行するためにメモ
ページヘッダー背景画像	設定している場合はメモ
ページヘッダー画像 ( モバイル )	設定している場合はメモ

デザインスキン「JPN Style」を使っている場合のポイント

JPN StyleのLightning G3対応版であるデザインスキン「VEKUAN」を使うと、JPN Styleで使っていた背景や見出しの設定をそのまま使うことができます。

VEKUANに移行する場合はカスタマイザー設定から「Lightning Skin JpnStyle 設定」の設定をメモしてください。

もしVEKUANを使わない場合は、カスタマイザー > Lightning フォント設定 でグローバルメニューとタイトルを明朝体に変更すると「JPN Style」のイメージに少し近づきます。

まとめと次回の予告

Lightning Pro を使ってるけどLightning G3 に移行したい方に向けて書いてみました。
実際にLightning Proから Lightning G3に移行したところ、機能もカスタマイズ性もより良くなり、とても使いやすいです！
ぜひ参考になさってください。

明日はIkuko Kanadaさんが「Lightningでネットショップ作る話」を書かれるそうです！ネットショップを作ってみたい方はぜひ読んでみてください。