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

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

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

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

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

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

総合評価　★★★★☆

Popup Makerの使い方

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

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

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

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

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

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

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

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

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

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

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

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

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

Addをクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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