作成済みの静的なレスポンシブ対応ランディングページにワードプレスで管理できるお問い合わせフォームを導入する手順(前半)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは、WPホームページ研究所の運営サポートチーム(@WP_LABO)です。

最近、ランディングページを海外製のフルレスポンシブ対応テンプレートで立ち上げて欲しいといった要望が少しずつ増えてきています。成果の出やすい本格的なランディングページ構築であればゼロからの構成作成が必要なので最低でも30万円は必要となってきます。しかし、スタートアップ企業であればランディングページからのコンバージョンは適度で良かったり、とりあえず看板だけを出しておきたいといった場合も多いので海外製のレスポンシブテンプレートは価格もお手頃なのでとてもありがたい存在です。

そういった状況で僕たちが使っている「LP専用テーマ(LPform)」があります。簡単に言えばhtmlで出来上がったランディングページ内に、ワードプレスで管理できるフォームをサクッと組み込める特別なテーマです。ちなみにランディングページ内へ設置したフォーム経由でお問い合わせがあった申込者別の履歴もすべてワードプレスで管理できる優れものです。顧客情報を取りこぼす心配もありません。

もし海外製のテンプレートをうまく活用して作業もあなた自身で行えばたった数千円でランディングページが立ち上げられます。本日は格安でランディングページを作成する手順をご紹介させていただきます。

今回は手順が長くなりそうなので2回に分けてご説明させていただきます。まず第一にランディングページを設置するURLを以下にしました。そしてランディングページ内に設置するお問い合わせフォームを管理するためのワードプレスURLは以下といたします。

▼ランディングページの設置URL
lp.wp-labo.com

▼ワードプレスの管理画面URL
lp.wp-labo.com/LPform/wp-admin

では、まずはレンタルサーバー内にサブドメインを設定しましょう。Mixhostのマイページにログイン。

メールアドレスとパスワードを入力して「ログイン」をクリック。

ログインしたら「該当サービス」をクリックしましょう。

次にショートカットから「サブドメイン」をクリックしてください。

サブドメインの作成が表示されたら、各項目を入力していきましょう。今回は、サブドメインには「lp」ドメインはドロップダウンメニュー(セレクトボックス)から「wp-labo.com」を選択、そしてドキュメントルートには「lp.wp-labo.com」と設定しました。入力後に「作成」をクリック。

作成が完了すると以下のメッセージが表示されます。

戻るをクリックしてサブドメインの画面へ戻りましょう。

無事設定が追加されました。ではワードプレスのインストールに入ります。左上のメニューをクリック。

Cpanelのトップページが開きます。

最下部のスクリプトからWordPressの自動インストール画面へ進みます。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」  2万を超えるお客様がご使用中!

すると以下の画面が開きます。

そして「Install Now」をクリック。

以下の画面が開いたら各情報を入力していきましょう。

上から順番に項目を埋めてください。

1つ目のWPバージョンは4系でも5系でもいづれでも構いません。2つ目は「https://」でSSLを選んでおき、3つ目にはさきほど追加したサブドメイン「lp.wp-labo.com」を選びましょう。そして4つ目のインストールディレクトリは「LPform」としておいてください。

次にサイト設定の項目を入力していきましょう。

サイト名にはSEOタイトルを適用して、サイト説明をメタディスクリプションで設定する前提にて文章を決定してください。マルチサイトを有効にするとワードプレスの管理が複雑になるのでチェックは外してください。

次に「管理者情報」を入力。

以下ではユーザー名とパスワードとメールアドレスを設定しています。右端にある鍵の画像をクリックすればセキュリティ性の高いパスワードが自動生成されますのでぜひご活用ください。

ユーザー名もパスワードもお好きなフレーズでご設定ください。

設定した内容は忘れずメモ帳などにコピーしておきましょう。

残りの項目はデフォルトのままでOKです。最下部にある「インストール」ボタンをクリックください。

インストールを実行すると進捗がプログレスバーで表示されます。

完了すると以下が表示されます。

早速、管理者URLをクリックしてログインしてみましょう。

管理者URLをクリックするとID、パスワードなしでログインが可能です。

専用テーマ「LPform」へ変更しておきましょう。管理画面の「外観 > テーマ」をクリックください。

そして「新規追加」をクリック。

次に「テーマのアップロード」をクリックしましょう。

すると以下の画面が表示されます。

デスクトップへ保存した「ZIPファイル」を「ファイルを選択」へドラッグしてください。

次に「今すぐインストール」をクリックしてください。

インストールが完了したら「有効化」をクリックしましょう。

すると以下の画面が表示されますので「プラグインをインストールする」をクリックしてください。

以下の画面が開いたらすべてインストールしていきましょう。

一番上のチェックボックスを有効にするとまとめてONになります。

全部にチェックを入れてドロップダウンメニュー(セレクトボックス)で「インストール」を選びます。

インストールを選択した状態で「適用」をクリックしてください。

まとめてインストール作業が開始されて完了すると以下が表示されます。

そして「ダッシュボードに戻る」をクリックしましょう。

ダッシュボードが開くと以下の画面が表示されて完了となります。

基本的な設定は以上にて完了となります。ここからはお問い合わせフォームをランディングページ側へ挿入する作業などを行ないます。ここからもう少しだけ作業が残っていますので一旦終了とさせていただきます。次回の記事で最終完結版として解説いたします。

▼次回の最終完結版記事はこちら
作成済みの静的なレスポンシブ対応ランディングページにワードプレスで管理できるお問い合わせフォームを導入する手順(後半)

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報だけでなくお好みの機能をいただければ専属スタッフが心を込めて真摯に対応させていただきます。お気軽にお問い合わせください。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください