初心者のための
WORDPRESS
完全マニュアル


このサイトでは、初心者でも簡単にできる、開発知識のいらないWORDPRESSを使ったWEBサイトの作り方を、サーバーのセットアップから、テーマのカスタマイズ方法、プラグインの使い方、SEO対策やアフィリエイトなどの実際の運営方法まで、STEP BY STEPで紹介しています。

Contact Form 7で作ったコンタクトフォームをポップアップメニューにする方法 – 初心者のためのWordpress完全マニュアル

Contact Form 7で作ったコンタクトフォームをポップアップメニューにする方法

September 21, 2017 / 2 Comment / 5 views

今回は、以前紹介したContact Form 7の番外編ということで、作成したコンタクトフォームをポップアップメニューとしてナビゲーションに加える方法について、ご紹介したいと思います。

具体的にどういうことかと言いますと、このウェブサイトのナビゲーションメニューにあるContact Usをクリックしていただいたら、コンタクトフォームがポップアップウィンドウが出現するかと思います。

今回のチュートリアルでは、これと全く同じポップアップコンタクトフォームを【Popup Maker】というプラグインを使って作成したいと思います。 ちなみにこのプラグインはContact Form 7に限らず、広告からテキストファイルまで何でも出現させることができます^^

 

プラグインの扱いやすさ ★★★★★

カスタマイズ度 ★★★☆☆

コストパフォーマンス ★★★★★

総合評価 ★★★★☆

 

 

Popup Makerの使い方

 

 

プラグインのインストールと設定

 

では今回もまずは、プラグインをインストールするところから始めていきたいと思います。

まずはダッシュボードから、プラグイン>>新規追加の順にクリックし、Popup Makerを検索します。

検索結果の一番最初に出てくるので、今すぐインストールをクリックし、プラグインをインストールします。

インストールが終わったら、有効化をクリックし、プラグインを有効化します。

 

popup maker demo screen shot

 

プラグインを有効化すると、ダッシュボードの左サイドバーにPopup Makerが追加されます。

Add Popupをクリックして、新しいPopupを作成します。

タイトルは、自分のわかりやすいタイトルなら何でもいいです。

本文には、ポップアップ表示させたいコンテンツを入力します。今回のチュートリアルでは、Contact Form 7で作成したコンタクトフォームをポップアップ表示させたいので、コンタクトフォームのショートコードをコピーアンドペーストします。

 

popup maker demo screen shot

 

そのままスクロールダウンすると、Popupに関する設定項目が現れます。

ここでは必要最低限の設定のみしていきたいと思います。

Triggersではポップアップウィンドウが、ユーザーがクリックしたら開くのか、もしくは自動的に開くのかを設定することができます。

今回は後ほどポップアップウィンドウをナビゲーションメニューに加えるので、Click Openを選択します。

 

popup maker demo screen shot

 

Addをクリックします。

 

popup maker demo screen shot

 

Cookieについては今回は設定しません。

次にDisplay Settingにて表示サイズについて設定します。

プラグインのデフォルトサイズを指定してもいいですし、カスタムを選択してカスタムサイズにしていただいても構いません。

Min WidthとMax Widthは指定があるのみ、記入してください。記入しない場合は、自動で縮小します。

今回はMediumを選択してみました。

 

popup maker demo screen shot

 

Animationセクションにて、ポップアップウィンドウが表示されるアニメーションの設定をすることができます。

残念ながらあまりチョイスがありませんが、今回はFadeを選択します。

Animation Speedは、アニメーションにかかる時間を変更することができます。

 

popup maker demo screen shot

 

Positionセクションにて、ポップアップウィンドウが表示される位置について、設定することができます。

ここで設定したい項目は、Locationです。Middle Centerにするとポップアップウィンドウがウィンドウの真ん中に表示されます。

 

popup maker demo screen shot

 

最後にウィンドウを閉じるボタンを設定します。

Close Settingsセクションにて、ウィンドウを閉じるボタンの設定をすることができます。

デフォルトではテキストがCLOSEになっているので、変更したい人は変更してください。(例えば、閉じる等)

 

popup maker demo screen shot

 

設定の変更が終わったら、右サイドバーにある公開ボタンをクリックします。

 

 

ポップアップメニューをナビゲーションメニューに追加する

 

ダッシュボードの外観>>メニューから、ナビゲーションメニューの設定画面にいきます。

カスタムリンクをナビゲーションメニューに追加します。

URLは#、リンク文字列は、好きなメニュー名にしていただいて構いません。

必要事項を記入したら、メニューに追加ボタンをクリックします。

 

popup maker demo screen shot

 

作成したカスタムリンクのメニューが追加されたら、小さい三角の矢印をクリックします。

するとTigger a Popupという項目が追加されていて、先ほど作成したPopupが選べるようになっています。

作成したPopupを選択したら、メニューを保存をクリックします。

 

popup maker demo screen shot

 

トップページに戻って、追加したメニュー(私の場合はContact Us)をクリックすると、ポップアップウィンドウが出現するかと思います。

これで全ての設定は完了です^^

 

まとめ

 

 

今回のチュートリアルいかがだったでしょうか。

Popupを表示させるプラグインはたくさんありますが、このプラグインは特にナビゲーションメニューとの互換性があり、ナビゲーションメニューとして、ポップアップを出現させることができるので、Contact Form 7と紐づけてご紹介してみました^^

アニメーションエフェクトに関しては、他のプラグインと比べるとバリエーションが少ないですが、設定が簡単でお手軽に使えるので、初心者の方でも扱いやすいプラグインなのではないかと思います。

 

今回のチュートリアルに関してわからなかったところや質問などございましたら、お気軽にコメント欄、コンタクフォーム、またはSNSにてお気軽にお尋ねください。

また。Wordpressに関するテーマやプラグインに関するチュートリアルのリクエストも募集しています。

今回も最後までお付き合いいただき、ありがとうございました。

それではまた次回のチュートリアルでお会いしましょう!See you later <3

この記事をシェアする!

2 Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です