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

,

  1. Staff Blog
  2. WordPress
  3. 制作・運用ノウハウ
  4. Lightning ProからLightinng G3への移行時に抑えておきたい設定3選

アドベントカレンダー参加中!

この記事は「Vektor WordPress Solutions Advent Calendar 2023」の12月13日の記事になります。

初めまして!デザイナーとしてチームベクトルに参加しはじめた松田と申します。
普段は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への移行前に行える作業です。基本的にはこの方法をおすすめします。

  1. 固定ページの新規作成でトップページ用の固定ページを作成
  2. トップページと見比べながら、ブロックエディタでVK Blocksなどのブロックを使ってトップページを構築
    (おしゃれなトップページを作るならVK Pattern Libraryでデザインを選んでコピペするのもおすすめ!)
  3. ダッシュボードから、設定 > 表示設定 > ホームページ設定 > ホームページ まで移動し、セレクトボックスからトップページ用の固定ページ名を選んで保存

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

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

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

関連記事

Lightning G3 でトップページコンテンツエリア上部ウィジェットエリアを設定する

Lightning G3 では トップページコンテンツエリア上部ウィジェットを廃止しているので、使いたい方は下記のコードを子テーマのfunctions.phpなどに貼り付けてください。 この記事を書いた人 Matsuda […]

カスタマイザー設定

投稿や固定ページの編集画面設定は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 G3への移行後でないとできない作業です。

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でネットショップ作る話」を書かれるそうです!ネットショップを作ってみたい方はぜひ読んでみてください。

アドベントカレンダー参加者募集中!

参加者さんはベクトルグッズがもらえます!ぜひご参加ください!


この記事を書いた人

MatsudaKei
MatsudaKei
WordPressでは主にブロックエディターを活用したデザインのカスタマイズをしています。他にもイラスト制作を行っています。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。