Webサイト開設を知らせるカウントダウンページをプログラミング不要で作る方法【WordPress】

Webサイト開設を知らせるカウントダウンページをプログラミング不要で作る方法【WordPress】 WordPress

こんにちは、mickです。

Webサイト開設を知らせるWebページを用意したい
そのWebページはプログラミングを不要で作りたい
Webページはカウントダウンでワクワクを伝えたい

こんな要望に応えます。

WebサイトがWordPressなら、プラグインひとつで簡単にWebサイトの開設を知らせるカウントダウンページをつくることができます。

WP Maintenance Mode の拡張機能を使う

Webサイトをメンテナンス画面にするプラグイン WP Maintenance Mode。

もちろんプログラミングの知識不要

このWP Maintenance Modeには拡張機能があって、それを使うと簡単にWebサイトの開設を知らせるカウントダウンページが簡単にできます。

カウントダウンページには次のような機能を追加できます。

  • メール宛のお問い合わせボタン追加
  • TwitterやFacebook、InstagramなどのSNSボタン追加
  • 背景画像の指定
  • メールアドレス登録ボタン追加
  • テキストはHTMLでカスタマイズが可能
  • etc…

とざっと並べただけでも機能が豊富なことが伝わると思います。

WP Maintenance Modeの基本的な使い方

WP Maintenance Mode でつくったメンテナンス画面
WP Maintenance Mode でつくったメンテナンス画面

WP Maintenance Modeのインストールや基本的な使い方は前に記事を書いてます。

WP Maintenance Modeでカウントダウンページをつくる

WP Maintenance Mode でつくったカウントダウンページ
WP Maintenance Mode でつくったカウントダウンページ

WP Maintenance Modeの「デザイン」でテキストと背景画像を決めます。
そして「モジュール」でカウントダウン機能をオンにします。

コンテンツを設定する

「デザイン」タブにある「コンテンツ」でテキストや文字色を設定する
「デザイン」タブにある「コンテンツ」でテキストや文字色を設定する

まずは、「デザイン」タブにある「コンテンツ」でテキストや文字色を設定します。
テキストはHTMLが使えるので、CSSも使った自由な表現をすることができます。

タイトル(HTMLタグ)は、確認した範囲では入力がカウントダウンページに反映されていません。
なので、そのままでいいです。

「設定を保存」をして設定を反映しておきます。

背景画像を設定する

背景は3種類から選べる
背景は3種類から選べる

カウントダウンページは背景を簡単に設定することができます。

  1. カスタムカラー
  2. アップロードされた背景画像
  3. 既定の背景画像

と、設定方法を3種類から選べます。

カスタムカラー

背景を単色で設定できます。
値は「#000000から#ffffff」まで使えます。

アップロードされた背景画像

背景に自分の画像を設定できます。
画像をメディアライブラリから選んだり、アップロードしたりできます。

背景画像のサイズは 1920×1280 px であること

既定の背景画像

背景にWP Maintenance Modeプラグインが用意している画像を使うことができます。
迷ったら、この既定の背景画像を使いましょう。

カウントダウンをWebページにつける

カウントダウンの設定をする
カウントダウンの設定をする

「モジュール」タブの「カウントダウン」でカウントダウンを設定できます。

  • 「カウントダウンを表示しますか?」を「はい」にする。
  • 「開始日」には「Webサイトを開始する日時を設定する」
  • 「色」で「カウントダウンの文字色を決める」

「設定を保存」すれば設定は完了です。

「カウントダウン(残り時間)」については、使い方がわかりにくいです。
実際に使ってみると、設定通りのカウントダウンにならないんです。
なので、「開始日」を使いましょう。

「開始日」は、ビジュアル(GUI)で簡単に設定できます。

開始日はビジュアルで簡単に設定できる
開始日はビジュアルで簡単に設定できる

カウントダウンページをカスタマイズする

カスタマイズしたカウントダウンページ

WP Maintenance Modeでつくるカウントダウンページは、次のようなカスタマイズが簡単です。

  • SNSボタンを追加する
  • お問い合わせフォームを追加する
  • メールアドレス登録フォームを追加する

これらはすべて「モジュール」タブで設定することができます。

メールアドレス登録フォームを追加する

メルマガ用メールアドレス登録を設定する
メールアドレス登録を設定する

「モジュール」タブにある「登録」で、メールアドレス登録の設定ができます。
この機能を使えば、あらかじめユーザーにメールアドレス登録してもらい、Webサイトの準備ができたらメールで通知できるようになります。

メールアドレスの登録があったとき
メールアドレス登録状況はCSVで確認できる
メールアドレス登録状況はCSVで確認できる

メールアドレス登録状況はCSVで確認できます。
わかりにくいですが「購読者リストが空です」をクリックすると登録内容を「初期化」します。

SNSボタンを追加する

URLを入力したSNSだけを画面に表示できる
URLを入力したSNSだけを画面に表示できる

これ、便利です。

「モジュール」タブにある「ソーシャルネットワーク」で、SNSの設定ができます。
該当のSNSのURLを入力した分だけが、カウントダウンページにアイコンとして表示できるようになっています。

お問い合わせフォームを追加する

お問い合わせの内容が届くメールアドレスを設定する
お問い合わせの内容が届くメールアドレスを設定する

「モジュール」タブにある「お問い合わせ」で、お問い合わせフォームをつくってユーザーからダイレクトにメッセージを受け取ることができます。

受け取る先は「メールアドレス」で設定したメールアドレスになります。

「効果」に関しては、設定しても違いがわかりませんでした。
なので、デフォルトのままでいいです。

まとめ。

Webサイト開設を知らせるWebページをプログラミング不要で作る方法を紹介しました。

手順をまとめると3ステップでOK。

  1. WP Maintenance Modeをインストールして有効化する
  2. 「デザイン」で表示する画面を決める
  3. 「モジュール」でカウントダウンとSNSを設定する

裏(開発サイド)ではWebサイトの開発をしながら、表(ユーザー)ではカウントダウンページを表示できる。
WP Maintenance Mode は便利。ほんとオススメです。

LightStart – Maintenance Mode, Coming Soon and Landing Page Builder
Easy Drag & Drop Page Builder that adds a splash page to your site that it's perfect for a coming soon page, maintenance...

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2020/12/26