Blogの公式キャラクター「パンD」です。7のカスタマイズ方法を紹介します。みなさんも使用したことがあると思います。7」をより実用的に使用するカスタマイズ方法をまとめました。ここに書いていることでフォーム周りに関する大抵のことには対応できると思います。記事に出てくるショートコードは半角スペースを消してください。[]の前後の半角スペースです。そのままだと展開されちゃいました。7」で郵便番号からの住所自動入力に対応する方法を紹介します。3の説明を引用しときます。最近はAjax技術の浸透により、郵便番号を入力すると自動的に住所が表示されるWebフォームも増えてきました。ところがこれまで公開されていた郵便番号検索プログラムは、設置するためにサーバ側の設定が必要となるものや、郵便番号データを設置者自身でメンテナンスする必要があるものなど、設置者にとっては手間のかかるものでした。ajaxzip3は、既存のHTMLにたった2行のコードを追加するだけで誰でも簡単に設置し使用できるライブラリです。プログラミングやサーバの設定は必要ありません。3を使用する方法を解説します。7の設定コンタクトフォームの編集ではこんな感じでタグを入力します。3スクリプトを読み込みます。3の関数を実行する指定をします。3のサンプルの「郵便番号、住所ともにワンボックスのパターン」のフォームが出来上がります。郵便番号ワンボックス、都道府県とそれ以降のフィールドのパターンいくつか他のバリエーションも紹介します。3のサンプルの「郵便番号ワンボックス、都道府県とそれ以降のフィールドのパターン」です。都道府県のプルダウンと住所を下記のように分けます。3のタグを読み込むこんな感じのコードを入力します。いろんなバリエーションも、引数にフィールドのIDを指定するだけで柔軟に対応できるのです。3のサンプルの「郵便番号3桁-4桁形式、都道府県と市区町村とそれ以降のフィールドのパターン」です。郵便番号のフィールドを二つに分けて都道府県のプルダウンと住所も二つのフィールドに分けます。3のタグを読み込むこんな感じのコードを入力します。いろんなバリエーションも、引数にフィールドのIDを指定するだけで柔軟に対応できるのです。7」で確認用メールアドレスのフィールドを追加する方法です。お問い合わせフォームを入力していると、大抵は確認のためメールアドレスを2回入力させられると思います。7」はデフォルトのままだと確認用メールアドレスのフィールドを作成するとこが出来ません!日々のバージョンアップで、確認用メールアドレスのフィールドを作成できるようになっても良さそうなんですがいつまでもできるようにならないので、きっと今後実装されることは無いのでしょう。7」で確認用メールアドレスのフィールドを作成できるようにする方法を紹介します。functions.phpに確認用メールアドレスフィールドのコードを追加するまずfunctions.phpに下記のコードを追加します。7」の編集画面はこんな感じで設定します。</p>これだけです。必要なさそうだけど一応サンプルも作りました。7」で確認画面を表示する方法です。普通のお問い合わせフォームは送信する前に確認画面を表示して、送信する前にユーザーが内容を確認してOKだったら送信する。いう流れのものが多いですね。7」で確認画面を表示する方法を紹介します。Blogのお問い合わせフォームをご覧ください。confirm」というプラグインをインストールして有効化してください。インストールの仕方は割愛します。7」の編集画面に「確認ボタン」と「戻って編集ボタン」が追加されます。「確認ボタン」は文字通り確認画面に飛ぶボタンです。飛ぶといってもAjaxなので実際にページ遷移はしないです。「戻って編集ボタン」は確認画面でミスを発見した時に戻れるボタンです。7」のコードの「送信ボタン」と同じとこに追加します。"Back"]</p>これでとりあえずの確認画面を表示する動作は実装できます。confirm」には、この3つのシチュエーションそれぞれに要素を表示したい場合のクラスが用意されています。wpcf7c-elm-step1入力画面のみに表示されます。class="wpcf7c-elm-step1">入力画面のみに表示</p>wpcf7c-elm-step2確認画面のみに表示されます。class="wpcf7c-elm-step2">確認画面のみに表示</p>wpcf7c-elm-step3送信完了画面のみに表示されます。class="wpcf7c-elm-step3">送信完了画面のみに表示</p>これを使いこなせば、リセットボタンや確認画面で「内容に間違いがなければ云々」的なテキストを表示することができます。role="alert">内容に間違いがなければ「送信」をクリックしてください。</p>確認画面のinputのborderを消す確認画面のinput要素には「wpcf7c-conf」というクラスがついているので、CSSでborder等を消してやると普通の確認画面ぽくできます。confirm」の詳しい使い方は作者さんサイトを見てください。7に確認画面をものすごく簡単に付けられるプラグインフィールドの値を引数で受け取るたとえばシチュエーションによってフォームの送信先を変えたい場合があると思います。この項では、そんな状況に対応できる方法を紹介します。7」で追加したフィールドに入れる流れ例えば送信先のアドレスをURL引数で受け取る場合はこんな感じですね。//kotori-blog.com?mail=○○@kotori-blog.com受け取った引数を実際に送信先としてセットするには、以下の流れが必要になります。7」の設定で、そのフィールドを送信先として設定するここで厄介なのは3です。7」の仕様上フォームはショートコードで生成するので、普通のやり方だとURL引数をフィールドのvalueとして指定することができません。そのあたりを順を追って解説していきましょう。7」の設定画面からフィールドを追加するだけです。フィールド名を後々使用します。7」は「type=”hidden”」のフィールドを追加できないため、実際にページにフィールドを表示したくなければCSSで消してください。フォームのページでURL引数を受け取るこんな感じでURL引数を渡してあげましょう。ここでは「mail」がメールアドレスを値として持っているということにします。//kotori-blog.com/contact?mail=○○@kotori-blog.comfunctions.phpにコードを追加する下記コードをfunctions.phpに追加します。7」側で指定したフィールド名「mailadd」を判定してvalueの値に「mail」の値を格納しています。因みに、複数の値を扱いたい場合はハイライトした部分を同じルーチンで増やすだけです。7」の設定画面で「mailadd」を送信先として指定してやれば完了です。7」をより幅広く使用するマストなポイントを押さえたつもりです。7」の標準機能として実装してほしいものですがそう簡単にいかないのが世の中というものです。関係ないけど最近内容の薄っぺらいNAVERまとめの記事が検索上位に来てるのが地味にうざいと感じています。綺麗にまとめてくれてる記事が上に表示されてるのは有意義なのですが、ちょいちょい「え?」って感じのうっすいまとめ記事が上位に来ちゃってるのはいかがなものかと思います。地味に第2弾スタンプのせたりしつつ終わりにしたいと思います。7の使い方・引数で情報を受け渡す方法ありがとうございました。Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。@KoToRi_blog基本フォロー返します。RSSを登録するRSSはこちらから。Feedly使ってる人はこちらから。Search」[WordPress]2011.08.20コメントはっし大変参考になりました!ありがとうございます!!NAVERまとめの下り、同じことを思ってる人が居て安心しました。いつか内容の濃いコンテンツが上位に来るようになることを期待したいです。kotoriblogはっしさんコメントありがとうございます。この記事を書いた当初はNAVERまとめ強かったですけど、やっぱり最近は質の悪い記事は下の順位になってきてますね。いつのまにかこの記事の順位もNAVERまとめの記事を抜いていたようです笑NAVER記事の順位が勝手に下がったといった方が正しいかもしれませんが。この記事は私のお気に入りにも関わらず、イマイチ反応が無かったのでコメントいただけて嬉しいです。ししどお世話になっております。自動で住所が入りませんでした。なにか特別なやり方があるのでしょうか?お時間ありましたらご返信頂きたいです。kotoriblogししどさんコメントありがとうございます。googlecodeのサービス終了にともない、ajaxzipがgithubに移動していたことによるリンク切れが原因でした。ししどさんのご指摘のおかけで修正できました。ありがとうございます。記事も修正いたしました。マルファン症候群を本物のマルファン症候群患者が徹底解説!マルファン症候群ブログはじめます。私はマルファン症候群です。