WordPress Twenty Sixteen カスタマイズ 12 「お問い合わせページ」「Contact Form 7」プラグイン

ごけたです。
「プラグイン」を幾つインストールしているか
表示しているサイトをまだ見たことがありません。
この記事を書いている時点でこのサイトには21個入っています。
多い。確実に多いですね。

はじめに
固定ページで「お問い合わせ」ページ」を作成
プラグイン「Contact Form 7」をインストールする
プラグイン「Contact Form 7」の設定
ショートコードを固定ページに貼り付ける
プラグイン「Contact Form 7」の詳細設定
フォームタグ
メールタグ
メッセージタグ
その他の設定
今回はここまで
さいごに

はじめに

今回はWordpress Twenty Sixteen カスタマイズその12
「お問い合わせページ」編です。

プラグインの「Contact Form 7」を使用して「お問い合わせ」ページを作成。
作成したページをカスタマイズしていく構成になっています。

ここではメニューの「固定ページ」から「お問い合わせ」ページの作成、
プラグイン「Contact Form 7」のインストール、有効化から
設定方法までを行っています。

ページ構成
OSはWindows、ブラウザーはchrome、レンタルサーバーはエックスサーバーです。
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。

固定ページで「お問い合わせ」ページ」を作成

まずは「お問い合わせページ」を作ります。

Wordpresの管理画面のメニュー欄から「固定ページ」→「新規追加」を選択クリックします。

タイトル欄に「お問い合わせ」と入力します。

「テキスト入力欄」

「テキスト入力欄」にカーソルを置くと「パーマリンク」が表示されます。
「編集」ボタンをクリック→「お問い合わせ」を削除してページ名を入力します。

※「お問い合わせ」日本語のままにするとWebが理解しません。
ローマ字で「otoiawase」でも、英語で「contact」でも、その他でも
半角英字で入力して、「OK」ボタンをクリックします。

右側の「公開」ボタンをクリックします。

※この時点では表示場所の設定をしていません。
トップページには表示されていません。
表示場所の設定はあとで行います。

ここで一旦固定ページから離れます。

プラグイン「Contact Form 7」をインストールする

Wordressの管理画面のメニューから「プラグイン」→「新規追加」を
選択クリックします。

「プラグインを追加」ページ右上の「プラグインの検索」に
「Contact Form 7」と入力します。検索後「Contact Form 7」が表示されます。

表示枠の「今すぐインストール」をクリック→「有効化」をクリックします。

インストール、有効が成功すると、

メニュー欄中段に「お問い合わせ」が表示されます。

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

管理画面のメニュー欄の「お問い合わせ」→「新規追加」を選択クリックします。

「コンタクトフォームを追加」ページ内の「ここにタイトルを入力」欄に
「お問い合わせ」と入力します。
ページ右上か下にある「保存」をクリックします。

「お名前」、「メールアドレス」、「本文」の入力欄と、「送信ボタン」を
表示させるよう設定しています。これだけで基本設定は完了です。

ショートコードを固定ページに貼り付ける

ページ右上か下にある「保存」をクリックして表示される
ページ内上部の「ショートコード」をコピーします。

固定ページ内の「お問い合わせ」ページに戻り、テキスト入力欄に
ショートコードを貼り付けて右上の「公開」をクリックします。

「お問い合わせページ」の表示場所を設定すれば完了です。
至って簡単です。

表示場所の設定はまた別で致します。

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

「Contact Form 7」では「お問い合わせ」ページの入力方法や
スパム対策など細かい設定が可能です。

フォームタグ

このタグで入力に関する主な設定を行います。

※表示の都合でカッコの表示が [ ] が「」になっています。

テキスト

「テキスト」がお問い合わせの「名前」の箇所になります。

[code]
<label> お名前 (必須)
[text* your-name] </label>
[/code]

の「＜/label＞」の後ろにカーソルを合わせておきます。

「フォーム」タグのメニュー一覧から

「テキスト」をクリックすると「フォームタグ生成: テキスト」ウインドが表示されます。

一番上の「項目タイプ」の「必須項目」にチェックを入れると
「名前」の後ろに「(必須)」と表示されます。
ここはチェックを入れます。

ウインド下の

「タグを挿入」欄の「text text-xxx」
の後ろに「*」が付き「text* text-xxx」となります。
※「text*」と入力されましたが「(必須)」で表示されます。

「名前」には

「既に「text-xxx」と入力されていますが、
削除してフォーム初期設定の「your-name」と入力します。

「デフォルト値」は

「このテキストを項目のプレースホルダーとして使用する」に
チェックを入れた場合に入力します。入力方法の例えを入力します。

※「プレースホルダー」はフォーム内に表示される説明のことです。
説明自体はユーザーがフォームにカーソルを合わせるか、
文字列を入力した時に消える設定になっています。
※Twenty Sixteenでは入力すると消えます。ここは名前の入力欄ですから「例)ごけた (ニックネーム可能)」といった感じです。

「デフォルト値」と「このテキストを項目のプレースホルダーとして使用する」に
チェックを入れた時の「タグを挿入」欄は
「text* your-name placeholder “例) ごけた (ニックネーム可)”」となります。

「Akismet」は

プラグイン「Akismet」を利用している場合は、
チェックを入れておくとスパムメール対策になりますが「テキスト」では入れません。

「ID属性」と「クラス属性」は、

CSSでデザインカスタマイズをする場合は任意の名前を設定します。
ここでは空欄にします。

ここで「タグを挿入」ボタンをクリックします。

[code]
<label> お名前 (必須)
「text* your-name」 </label>「text* your-name placeholder "例) ごけた (ニックネーム可)"」
[/code]

＜/label＞の後ろに今設定したタグが追加されています。
このままページ右上か下にある「保存」ボタンをクリック。
ページ上部に表示される「ショートコード」をコピー。
固定ページに作った「お問い合わせ」ページの「テキスト」欄にペースト。

「変更をプレビュー」ボタンをクリックしてみると、
「お名前 (必須)」、「入力枠」、「例)ごけた (ニックネーム可能)」がある
「入力枠」と表示されてしまいます。

ただの「入力枠」は不要です。
「text* your-name」を削除します。
その場所に「text* your-name placeholder “例) ごけた (ニックネーム可)”」を
「カット&ペースト」します。

[code]
<label> お名前 (必須)
「text* your-name placeholder "例)ごけた (ニックネーム可)"」 </label>[/code]

最終的にこうなります。

下の表示に合わせて改行とスペースが入ってしますが、
[code]
<label> お名前 (必須)
「text* your-name placeholder "例)ごけた (ニックネーム可)"」 </label>
[/code]
でも
[code]
<label> お名前 (必須)「text* your-name placeholder "例)ごけた (ニックネーム可)"」 </label>
[/code]
でも問題ありません。

※ページ右上か下にある「保存」をクリックします。
※一度、固定ページの「お問い合わせページ」に
ショートコードが貼ってあれば、「コンタクトフォーム」で変更を行って
「保存」ボタンだけクリックすれば、固定ページの「お問い合わせページ」に
「変更箇所」が自動的に更新されます。変更の度に「ショートコード」をコピペする必要はありません。
これは他の設定でも同様です。

メールアドレス

[code]
<label> メールアドレス (必須)
[email* your-email] </label>
[/code]

の「＜/label＞」の後ろにカーソルを合わせておきます。

「フォーム」タグのメニュー一覧から「メールアドレス」をクリックすると
「フォームタグ生成: メールアドレス」ウインドが表示されます。

一番上の「項目タイプ」の

「必須項目」にチェックを入れると「名前」の後ろに「(必須)」と表示されます。
ここはチェックを入れます。