【2020年最新版】WordPress (テーマ Lightning Pro) でランディングページを作る方法

ランディングページを作るのはけっこうめんどう

一部のテーマを除き、WordPress の固定ページでランディングページを作るのはけっこうめんどくさいです。

その理由は、WordPress の固定ページにはランディングページに不要な以下の部分が表示されるからです。

  • ヘッダー (ロゴ・ナビゲーション・バナー・ページタイトル・パンくずリスト など)
  • サイドバー
  • フッター

例えばこのサイトでは以下の部分が該当します。

WordPress サイトのヘッダー・フッター

このサイトで使用しているテーマ Lightning Pro は最近のバージョンになってかんたんにランディングページを作ることができるようになりましたので、そのやり方を紹介します。

ランディングページの作り方 (テーマ Lightning Pro)

以下のテーマ、プラグインを使用します。バージョンは2020年5月12日時点の最新のものです。

  • テーマ Lightning Pro 4.6.0 (有料)
  • プラグイン VK Blocks Pro 0.27.4 (Lightning Pro が必要)
  • プラグイン VK All in One Expansion Unit 9.18.1.0

Landing Page テンプレートは使いません

BizVektor テーマの頃から Lightning の少し前のバージョンまでは、テンプレートとして Landing Page を指定していましたが、最新版の Ligntning では非推奨 (not recommended) になりましたので、このテンプレートは使いません。

Landing Page テンプレートは使いません

VK All in one Expansion Unit 有効化設定

  • CSSカスタマイズ を有効にしておきます。
CSSカスタマイズ を有効にしておきます

文書の Lightning デザイン設定

作成するランディングページで、文書の Lightning デザイン設定を以下のようにします。

  • レイアウト設定を 1カラム (サブセクション無し) にする。
  • ページヘッダーとパンくずリスト の 表示しない にチェックをつける。
  • 余白設定 の siteContentの上下余白を無しにする にチェックをつける。
文書の Lightning デザイン設定

VK All in One Expansion Unit の設定

作成するランディングページで、VK All in One Expansion Unit の設定を以下のようにします。

  • ソーシャルボタンを表示している場合は、シェアボタンの非表示設定の ソーシャルボタンを表示しない にチェックをつける。
  • カスタムCSS に以下のように入力する。
    header.siteHeader { display:none; }
    footer.siteFooter { display:none; }
    body.device-mobile .vk-mobile-nav-menu-btn { display:none; }
    .mobile-fix-nav { display:none; }
VK All in One Expansion Unit の設定

コンテンツの作り方について

ランディングページはインパクトが大きい派手なデザインにしたいところですが、VK Blocks Pro の ブロックテンプレート を使うとコンテンツ制作作業が捗ります。

ランディングページの制作例

上記のやり方で作ったランディングページがこちらです。(上記の手順以外にもいろいろやってますが・・・)

更新情報を受取る

ホームページでお困りのこと、お気軽にご相談ください

効果が出るホームページを格安料金で制作いたします。リニューアル、スマホ対応、SNS連携、SEO対策、常時SSL化などもおまかせください。ホームページのちょっとしたデザイン変更や表示不具合の修正、更新作業のお手伝いもしています。

お困りのこと、なんでもお気軽にご相談ください。