WordPressランディングページの作成方法

LIQUID PRESS INFORMATION

ランディングページ(LP)の作り方、設定方法をご紹介します。
Gutenberg対応「LIQUID LP」テーマでは、LPに関する項目を簡単に設定することができます。

対象テーマ

一般/SEO/SNS設定

ここではランディングページに特化した設定についてご紹介します。
サイト全般の一般的な設定については、テーマ設定マニュアルをご覧ください。

ランディングページマニュアル

管理画面>外観>テーマのサポート からランディングページマニュアルPDFをご覧頂けます。
PDFではLPのPDCA/運営方法について掲載されています。作成方法についてはこのページをご覧ください。

Gutenberg

ビジュアルエディターGutenbergによる記事作成、複製方法等について
詳しくはGutenbergの使い方をご覧ください。

レイアウト

管理画面>外観>カスタマイズ>レイアウト から設定します。

レイアウト


サイトのレイアウトについて2カラム/1カラムを選択できます。
※LPテンプレートは1カラムになります。

ヘッダーボタン

LPのヘッダーにボタンを自動表示する/しないを選択できます。
LP内の最初のボタンブロックと同じ内容がヘッダーに自動表示されます。

ヘッダーメニュー自動表示

LPのヘッダーにメニューを自動表示する/しないを選択できます。

自動表示する場合、LPで 高度な設定>HTML アンカー を設定した見出し2(H2)がページ内リンクとして表示されます。 HTML アンカーは半角英数字で指定します。見出し3以降は設定してもヘッダーメニューには表示されません。
LPテンプレート以外のページでは、管理画面>外観>メニュー 「Global Menu」の内容が表示されます。

ヘッダータイトルのリンク先

LPのヘッダータイトル(ロゴ)のリンク先についてサイトTOP/ページTOPを選択できます。
ページTOPを選択した場合はページ最上部までスクロールします。

アイキャッチ画像

投稿/固定ページ内にアイキャッチ画像を表示する/しないを選択できます。
また、一覧ページにアイキャッチ画像を表示する/しないを選択できます。
※LPテンプレート内には表示されません。

固定表示するページのタイトル

TOPページの固定表示セクションのタイトルを指定できます。

固定表示するページのタグ

TOPページに固定表示する投稿or固定ページのタグのスラッグを指定します。
3件以上ある場合は改行して表示されます。表示順は日付の新しい順です。
投稿または固定ページに指定したタグを付けると自動的に表示されます。
タグの名前が「サービス」、タグのスラッグが「service」の場合、「service」を指定します。

新着記事表示

TOPページに新着記事の一覧を表示する/しないを選択できます。

固定ページ(LPテンプレート)

ランディングページは固定ページで作成/管理できます。
ランディングページを作成する場合は、固定ページの属性>テンプレート「LP」を選択します。
TOPページに設置する場合はこちらをご覧ください。

テンプレート:LP

  • デフォルトテンプレート:通常の固定ページ
  • LP:ランディングページ

サンプルページのインポート

LPのサンプルページをインポートして利用することができます。

1. 管理画面>ツール>インポート>WordPress インポーターの実行 からサンプルファイル(liquid-lp-sample.xml)を選択して「アップロードしてインポート」を押下します。
※「今すぐインストール」と表示される場合は、WordPressインポートツールをインストールします。 2. インポートする投稿者:既存のユーザーを選択し、「添付ファイルをダウンロードしてインポートする」にチェックして「実行」を押下します。
3. 管理画面>固定ページ に3種類の下書きがインポートされています。編集して公開してください。
写真は含まれていません。固定ページから設定してください。

ランディングページ(プロダクト)

ランディングページ(リード)

ランディングページ(サービス)

オプション設定

高度な設定>「追加 CSS クラス」を追加することで様々なオプションを設定できます。
サンプルページではあらかじめ設定されています。

追加 CSS クラス

オプション一覧

ブロック CSS クラス オプション 効果
カバー lp-cover lp-skew 画像の下部が斜めになります。
lp-loop カバー内の太字テキストをカンマで区切ると、テキストが順に切り替わります。
lp-big 大きく表示されます。
lp-anime 画像の透明度がアニメーションします。
lp-head-static ヘッダー固定表示が解除されます。
ボタン lp-button 立体的なボタンになります。
カラム lp-buttons ボタンを横に並べる際に使用します。
lp-item LPに最適なデザインになります。
lp-plan 料金表のデザインになります。
lp-banner バナーを横に並べる際に使用します。
lp-step フローを示すデザインになります。
lp-faq よくある質問のデザインになります。
メディアと文章 lp-media LPに最適なデザインになります。
リスト lp-list LPに最適なデザインになります。
テーブル lp-table LPに最適なデザインになります。
段落 lp-circle-item 丸いアイテムになります。
icon-* アイコンフォントを表示します。
アイコンのみ表示する場合は本文に半角スペースを入力します。
共通 huwa スクロールでふわっと表示します。
shadow 影を付けます。
border ボーダーを付けます。
rounded 角丸にします。
※共通のオプションは、ブロックやその内容によって対応できない場合があります。

Bootstrap 4

LIQUID PRESS テーマは、Bootstrap 4 のCSSクラスにも対応しております。
使用可能なCSSクラスについて詳しくは下記をご覧ください。
https://getbootstrap.com/docs/4.1/getting-started/introduction/

ホームページ設定

管理画面>設定>表示設定>ホームページの表示 から、TOPページにする固定ページ(LP)を選択できます。

  • ホームページ:選択したページがTOPページになります。
  • 投稿ページ:選択したページが新着記事ページになります。

LIQUID PRESS

» WordPressテーマ一覧

PageTop