すべてのカテゴリ

今回は前回紹介したWordPressのおすすめプラグインの中から「Contact Form 7」についてもう少し紹介したいと思います。Contact Form 7は、WordPressで最も人気のあるお問い合わせフォームプラグインの1つです。初心者でも簡単にフォームを作成でき、コードの知識がなくても直感的に使えるのが特徴です。ここでは、Contact Form 7の機能や使い方、メリットについて解説します。1. シンプルで直感的な使い方Contact Form 7の大きな魅力は、そのシンプルさにあります。インストール後、WordPressの管理画面からすぐにフォームを作成でき、わずか数クリックでお問い合わせフォームを設置することが可能です。コードを記述する必要がなく、あらかじめ用意されたテンプレートを使って、名前、メールアドレス、メッセージ欄などの基本的なフォーム要素をドラッグ＆ドロップで配置するだけです。また、作成したフォームは、WordPressページや投稿に簡単に埋め込むことができ、ショートコードを使って表示します。2. 柔軟なカスタマイズシンプルながら、Contact Form 7はカスタマイズ性も高いプラグインです。フォームのフィールドを自由に追加したり、フォームのデザインやレイアウトをカスタマイズしたりすることができます。たとえば、名前やメールアドレスだけでなく、電話番号やチェックボックス、ラジオボタン、ファイル添付のフィールドなども簡単に追加可能です。さらに、HTMLやCSSの知識があれば、フォームのデザインをより細かくカスタマイズすることができ、サイトのデザイン

今日は、WordPressでサイト制作を進めるうえで重要な**「テンプレート階層」と「固定ページの設定方法」**について学びました。最初は「なぜ同じページなのに表示が違うんだろう？」と疑問に思っていましたが、WordPressにはページごとに表示を切り替える仕組みがあり、それを理解することで制作の幅が大きく広がりました。WordPressには役割ごとのPHPファイルがあるWordPressでは、ページの種類によって使用されるPHPファイルが変わります。例えば、home.php … トップページsingle.php … ブログ記事の詳細ページpage.php … 固定ページarchive.php … 記事一覧ページというように、それぞれ役割が決まっています。この「テンプレート階層」を理解することで、「なぜこのページだけ表示が違うのか」が少しずつ分かるようになってきました。固定ページごとにテンプレートを切り替える方法今回は来店予約ページだけ専用のデザインにしたかったので、page.phpをコピーしてpage-reserve.phpを作成しました。そして、ファイルの先頭に次のようなコメントを書きます。このコメントを書くことで、WordPressの管理画面から**「テンプレート」**として選択できるようになります。固定ページごとに違うデザインを作れる便利な仕組みだと知り、とても勉強になりました。デフォルトテンプレートとの違い通常の固定ページはデフォルトテンプレート（page.php）を使用します。しかし、来店予約ページだけは来店予約テンプレート（page-reserve.php）を選択

いつの間にかエラーを吐き出していた。「メッセージの送信に失敗しました。後でまたお試しください。」？どうもsmtpサーバーのエラーっぽい？？ということでWP Mail SMTPというのをインストールしましたが、あれ？ま〜だ何か引っかかってんぞ？？どうもセキュリティ対策でcontactform7に入れた「reCAPTCHA」というのが引っかかってるみたいです。なのでコントロールするプラグインに移行し色々試したがダメ。面倒だなと思いながら放っておいたらスパムがいきなり増えた。ロシアとかｗ渋々調整することに……とりあえずエラー部分を慌てず切り分けてみた１）reCAPTCHAというのはGOOGLEのサービスですそちらの設定を確認しましょう。２）WORDPRESS側が勝手にアップデートしてそれと同時にContactForm7もアップデートしてreCAPCHAもV3にアップサイトキーとシークレットキーを置き換えるまずはこの２つを確認　GOOGLEの設定の中がV2になっていたらV3のアカウントを作り直してすぐに修正３）うちの場合それでも動かなかったのですが、サイトの基本構成を見直したところ単純なミスで動かなくなっていました。そちらも合わせて確認しましょう。この３つで大体動くようになります。これでもダメならreCAPTCHAを外部のプラグインにするとかの方法を試してください。

今日は、WordPressでお問い合わせフォームを作成する際によく使われる Contact Form 7 の設定確認と、フォームのデザイン調整を行いました。Contact Form 7のメール送信テストフォームを作成したら、まず大切なのが正常にメールが送信されるかの確認です。実際にフォームから送信を行い、お問い合わせ送信後に「ありがとうございました。メッセージは送信されました。」と表示されるか管理者宛にメールが届くか入力内容が正しく送信されているかを一つずつ確認しました。今回は最初メールが届かず焦りましたが、原因は迷惑メールフォルダに振り分けられていただけでした。フォームが正常に動作していても、送信先のメールサービスによっては迷惑メール扱いになることがあるため、受信できない場合は迷惑メールフォルダも確認することが大切だと学びました。Contact Form 7のCSS調整次に、お問い合わせフォームをスマートフォンでも使いやすくするため、CSSの調整を行いました。今回調整したポイントはこちらです。入力欄の高さを統一横幅を100%に設定し画面いっぱいに表示スマホでも文字が小さくならないようフォントサイズを調整日付入力欄（date）の高さを他の入力欄と揃えるボックスサイズを統一してレイアウト崩れを防止例えば日付入力欄には次のようなCSSを設定しました。.wpcf7 input[type="date"] {  width: 100%;  height: 56px;  min-height: 56px;  padding: 10px 16px;  font-size: 16px;  li

なんか急にめんどくさいメールがロシアからとかが増えたので、reCAPTCHAをセットしたけどうごかないってのは先日報告したが、その後劇的に全く来なくなった。テストはしてるから普通に問い合わせなどメールは来る。でもう一つ承諾確認ってのを入れておくと尚よしです。単なるチェックボックスでチェックしないとメールが送れないってだけのものですが、ロボット相手だとこれもちょい有効です。で、今日の本題Flamingoというのを入れておきましょう。入れておくと後でどんなメールがスパム判定されてるかよくわかります。仮に重要なメールが有ってもチェックできるので落とすことがないので便利ですよ。（スパム判定されたFlamingoのリストです）もちろん無料！です。

少し技術的な内容になります。Contat Form 7 の自動送信メールで、特定の項目が設定されないというお問い合わせを調査しました。Chromeのdev toolでelementsを確認したところ、チェックボックスとラジオボタンのみ値が設定されないことが分かりました。Contat Form 7 の設定は間違っていないので、バグと考えましたが、ネット上には情報が無く、最終手段のプラグイン更新を行いました。無事、更新完了しましたが、現象は変わらず。ただ、ブラウザバックしてからsubmitするとなぜかチェックボックス内容が反映するのです。ということは、初期表示の際にスクリプトで何かしているのかと考え、Contat Form 7 を読み込んでいるhtmlソースを確認すると、inputタグのvalueを更新するスクリプトを発見。inputタグはテキスト入力フィールドのように入力内容がvalueに設定される項目と、checkboxのようにvalueがあらかじめ設定されている項目があります。そのため、Inputタグ全て更新してしまうと、checkboxやradioの値がおかしくなってしまいます。しかもstyle=file はvalue更新NGのため、スクリプトエラーにもなります。今回は、checkboxとradioとfile のみ除外する処理を入れて無事対応完了となりました。

Wordpressで外せないプラグインの一つContactForm7体裁整えるのがいちいちめんどくさいのでそういうプラグインを探したがなかなかない。CSSで調整すりゃいいが納期を急がれてる時や項目の増減などと細かい対応が必要になる。？…そうだ！無ければ作ればいいやん。ん〜体裁はbootstrapの力も借りて・・・とま、やってみますか。