【WordPress】無料テーマのBizVektorを使ってみた-Contact Form 7

Total 1,069 views
この記事の所要時間は約 5分です。

BizVektor のお問合せフォーム用に「Contact Form 7」を導入してみます。

ただしいつものやり方で実装するとちょっと「?」というところがいくつかあったので、
その部分を中心に備忘録として残しておきます。

スポンサーリンク


 

追記 -2014.3.22-

BizVektor についてはこれまで度々カスタマイズの記事を書いてきましたが、バージョンアップの間隔が短く変更内容も一気にガラっと変わることも多いため、とうとうカスタマイズが追いつかなくなりました。
テーマが複雑でカスタマイズが難しいというのもあります。

よって BizVektor を使ってのサイト構築記事はちょっとお休みすることにしました。

ここは参考記事として残しておきますが、内容は古いバージョンについてのものです。ご了承ください。

 

イメージ画像

 

導入

Contact Form 7をインストールします。(インスト方法については割愛します)

同時に画像認証用プラグインの Really Simple CAPTCHA もインストールしておきます。

その後”お問合せ”用の新規固定ページを作り
スラッグを「contact」にします。

すると管理画面サイドバーに「お問い合わせ」が出現するのでそれをクリックし
画面が変わったら「コンタクトフォーム 1」をクリックします。

左画面はコード記入欄、右画面に「タグの作成」があるのでそこをクリックし
CAPTCHA を選択します。

キャプチャ画像

 

出てきた内容のうち
「このコードをコピーして左のフォーム内にペーストしてください。」の 2つを
左画面の適当なところ、通常は「お問合せの内容」の下あたりにペーストします。
(やるたびに番号が変わっちゃいます)

ここまでは通常の作業ですが、後々カスタマイズしやすいように
上の画像のフォームの黒っぽく塗ったコード記入場所に
予め divpクラス名などを書き込んでおきます。

後々変更する必要がなさそうな部分は
下の画像のようにこの時点で直接スタイルを書き込んでおいてもいいでしょう。
(自分のカスタマイズしやすいように適当に加筆してください。「*」をつけると必須項目になります)

2行目と8行目の「text」の前の半角スペースは都合上入れてあるだけなので実際にはありません。

お気づきの方もいるかもしれませんが、名前とメールアドレスには Akismetの機能も取り入れてあります。

これに関しては「Akismet によるスパムフィルタリング」もしくは「Contact Form7でAkismetを使う」をご覧ください。

 

ページ読み込みにこだわるなら

何もしないままだと自動的に全ページに
Contact Form 7用の js ファイルと css ファイルが読み込まれてしまいます。

これが嫌な人は、
固定ページのスラッグが contact のページのみ
同ファイルを読み込ませるようカスタマイズします。

まずは上記 2つのファイルの読み込みをすべてキャンセルさせるために
wp-config.php に以下を加筆します。
(加筆場所は『/* 編集が必要なのはここまでです ! …… */』の直前でいいと思います。また【】内のテキストはここでの説明用なので記載しないように)

続いて header.php
「contact のページのみ 2 つのファイルを読み込む」という if 文を加筆します。

これで OK です。

WordPress をアップデートさせると消えてしまうのでバックアップをとるか何かに別記載しておくのがよろしいかと。

 

最低限のカスタマイズでのレイアウト

何もいじってない状態だと下の画像のように表示されます。

キャプチャ画像

 

このままでも何の問題もありませんが
もう少し入力ボックスを狭くし、送信ボタンを目立たせてみます。

以下の CSS を子テーマの style.css に加えます。

どうでしょう、多少雰囲気が変わったでしょうか。

キャプチャ画像

 

エラーメッセージ

わざとエラーメッセージを出して、どう表示されるか確認してみましょう。

下画像はデフォルトの状態でわざとエラーメッセージを出してみたキャプチャ画像ですが
ボーダー下部のみ消えています。

調整ミスでしょうか。

キャプチャ画像

 

これはマージン下を調整すれば直りますので下記を加筆します。

設定後が下図です。

キャプチャ画像

実は固定ページのみですが、パンくずリストの最後が </ul> で終わるべきところ </li> で終わっていたりするバグも存在します。
開発元にこのことをメールしたら時期バージョンアップにて解消させますとのお返事をいただきました。

これは大勢に影響を与えないのでまだいいですが、細かなバグがデザインに大きく影響することもあるのでこのテーマを使う時は若干注意が必要です。

エラーメッセージ自体のカスタマイズもできます。

別にそこまでやらなくてもいいのですが
細かいところまでこだわりたい方のために。

 

「コンタクトフォーム 1」をクリックして出た画面の下の方に
「メッセージ」というブロックがあります。

そこの文面を書き換えるだけです。

キャプチャ画像

 

エラーメッセージをゴリゴリカスタマイズ

最初は知らなかったのですが、調べていくうちにテーマ自体に「Contact Form 7」用の CSS が書き込まれていました。

なのでカスタマイズする際どうやっても画面上に変化が見えない場合は、テーマ記述のオリジナル CSSを一度確認した方がいいです。

plain.css の場合は 400 行目あたりにその記載があります。

下図はデフォルトのエラーメッセージです。

キャプチャ画像

 

今回、多少の見栄えの変更ですがいろいろ書き換えてみました。

カスタマイズした CSS の内容は以下のようになります。
書いてない部分は変更の必要のない、言いかえれば plain.cssに既出のものと思ってください。

子テーマの css を確実に読み込ませるために、先頭は必ず「#content 」から始まるようにしてみました。

上記の CSS を当てた結果が下です。

キャプチャ画像

 

おまけ

送信完了時は「送信しました」のメッセージが出ます。
こちら↓がデフォルトのデザインです。

キャプチャ画像

 

そして上記 CSS 設定の場合がこちら↓。

キャプチャ画像

 

以上です。

参考サイト

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)