WordPressテーマ「Cocoon」でヘッダーに問い合わせフォームを設置する方法

Cocoon ブログ作成

ワードプレステーマ「Cocoon」で、ヘッダーのグローバルメニューに問い合わせフォームを表示する方法をまとめました。

用語解説

ヘッダー

どのページが開かれても常に共通して表示されるWEB ページ上部の部分。

グローバルメニュー

サイトの主要コンテンツへのリンクが集約された目次。

ヘッダーの説明

問い合わせフォーム

読者がサイト管理者に問い合わせるための下記のような入力画面です。

問い合わせフォームの作成

問い合わせフォームの作成には、プラグイン「Contact Form 7」を使用します。

プラグイン「Contact Form 7」のインストール

ワードプレスメニューの「プラグイン」→「新規追加」を選択します。検索窓にContactと入力して、Contact Form 7を選択します。「今すぐインストール」「有効化」をクイックします。

プラグイン導入

プラグイン「Contact Form 7」の設定

ワードプレスメニューの「お問い合わせ」→「新規追加」を選択します。タイトルを「お問い合わせ」とし、保存ボタンをクリックします。フォームの内容を変更する必要はありません。

contact-form-7

ワードプレスメニューの「お問い合わせ」→「コンタクトフォーム」を選択します。先ほど作成した「お問い合わせ」のタイトルを選択します。表示されたショートコードをコピーします。

問い合わせフォーム

固定ページの作成

ワードプレスメニューの「固定ページ」→「新規追加」を選択します。タイトルを「お問い合わせ」とし、パーマリンクを「contact-form」とします。

本文に、さきほどコピーしたショートコードを貼付けます。必要に応じて、コンタクトフォームに表示するメッセージを入力し、ページを公開します。

固定ページの作成

コンタクトフォームの表示設定

ワードプレスメニューの「外観」→「メニュー」を選択します。固定ページのお問い合わせのページ左のチェックボックスをONにしてメニューに追加します。

「メニューの位置」の項目にある「ヘッダーナビ」「モバイルヘッダーナビ」のチェックボックスをONにします。(「フッターナビ」のチェックボックスをONにするとページ下部のフッターにもメニューが表示されます。これもONにしておくのがオススメです。)

「メニューを保存」ボタンを押して設定を保存します。

コンタクトフォーム

問い合わせフォームの確認

設置した問い合わせフォームが機能しているか確認します。自身のサイトを表示し問い合わせフォームを開きます。名前、メールアドレス、本文を入力して、テストメールを送ります。

フォームの表示に問題がないこと、テストメールがきちんと届くことを確認すれば設定完了です。

まとめ

以上、ワードプレステーマ「Cocoon」で、ヘッダーに問い合わせフォームを設置する方法をまとめました。まだ問い合わせフォームを設置していない方は是非参考にしてみてください。

コメント