質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

402閲覧

ワードプレス コンタクト7 郵便番号から住所を自動入力させる方法/Web ブラウザで表示される 郵便番号入力画面の form の HTML

chiiiiii

総合スコア23

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2019/05/30 10:17

編集2019/05/30 11:55

https://olein-design.com/blog/contact-form-7-with-yubinbango

こちらのサイトを元に実装しました。
ですがウンともすんとも言いません。

外観のテーマエディターのなかのfunction.phpに下記を実装しました。
イメージ説明

そしてお問い合わせのコンタクトフォームに
イメージ説明

こちらを実装しました。

<span class="p-country-name" style="display:none;">Japan</span> <p>郵便番号<br /> [text your-zipcode class:p-postal-code minlength:8 size:8]</p> <p>住所<br /> [text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]</p>

固定ページへショートコード html_class="h-adr"追加ついて
現在使用しているワードプレスのバージョンが5.11で、最新バージョンなのか下記の画面になり
どのように実装すればいいのかがわかりません。
イメージ説明
イメージ説明
イメージ説明
イメージ説明
イメージ説明

ショートコード作成しました。
イメージ説明

実際のサイト画面はこちらです。
イメージ説明
コンタクトフォームの方にショートコードを貼り付けたりするのでしょうか?

他の参考サイトも実装したのですがうまくいきませんでした。。
コメントお待ちしております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/05/30 10:28

質問タグにWordPressを足してください。
CHERRY

2019/05/30 10:30

WordPress 固有の質問と思いますので、WordPress タグを質問を編集して追加していただけないでしょうか?
CHERRY

2019/05/30 10:42 編集

また、Web ブラウザで表示される 郵便番号入力画面の form の HTML を質問に追記していただけないでしょうか。 ショートコード周りの記載がないので、確認ですが、 https://olein-design.com/blog/contact-form-7-with-yubinbango の「formタグにh-adrクラスを設定する」の部分は対応されていますか?
chiiiiii

2019/05/30 11:27

WordPressのタグがなく質問できなかったのでphpとさせていただきました。
guest

回答1

0

ベストアンサー

動作確認取れたので回答欄で...


https://olein-design.com/blog/contact-form-7-with-yubinbango
こちらのサイトを元に実装しました。
ですがウンともすんとも言いません。

こちらのサイトを参考に実装しました。
問題なく動作しました。

functions.php に追加

wp_enqueue_script( 'yubinbango', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array(), null, true );

フォームの定義
イメージ説明

固定ページにショートコード ( 旧エディタ )
イメージ説明

固定ページにショートコード ( Gutenbergエディタ )
イメージ説明
イメージ説明
左上の + をクリックして、ウィジェットにある「ショートコード」を選択します。(1枚目)
ショートコードの入力欄に Contact Form 7 のショートコードを記載します。

実行結果
イメージ説明
(キャプチャーではわかりませんが、郵便番号の最後の1桁をいれると住所がでます。)


質問でショートコード周りが確認できなかったのですが、 https://olein-design.com/blog/contact-form-7-with-yubinbango の「formタグにh-adrクラスを設定する」部分に記載されている

ここに、html_class="h-adr"という記述を加えて、
[contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"]
としてあげることによって、formタグにclassを追加することができます。

は、実施されているでしょうか?

この class を追加しない場合は、動作しませんでした。

投稿2019/05/30 10:52

編集2019/05/30 11:33
CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chiiiiii

2019/05/30 11:16 編集

そちらが追加できない状態です。 今フォームを実装しているのはお問い合わせのコンタクトフォームです。 固定ページを新規作成すると最新バージョンなのか、いただいたキャプチャと異なります。 どこに実装すればよろしいのかがわからないです。。。
CHERRY

2019/05/30 11:27

あ、ブロックエディタを使用されているのですね。 帰ったら、キャプチャーを追加します。
chiiiiii

2019/05/30 11:31

CHERRYさん 質問追加と固定ページについて編集いたしましたのでご確認のほどご教授お願いいたします。
chiiiiii

2019/05/30 11:33

ご親切にありがとうございます。 よろしくお願いいたします。
CHERRY

2019/05/30 11:34

Gutenberg エディタの入力画面を追加しました。
chiiiiii

2019/05/30 11:48

追加したのですが、自動出力してくれないです。。 ショートコードを追加した場合公開ボタンを押したあとは お問い合わせのコンタクトフォームのショートコードへ変更されるのでしょうか?
chiiiiii

2019/05/30 11:56

CHERRYさん 実装画面とサイトの仕様の画像追加いたしました。 ご返信お待ちしております。。。
CHERRY

2019/05/30 12:07

質問に記載されているフォームのコードと実際の画面と書かれているキャプチャーのフォームの内容が異なるようですが、画面キャプチャーのフォームにクラスは追加されていますか?
chiiiiii

2019/05/31 09:42 編集

初心者でよくわかってないのですが 実際のサイトの画像は、ワードプレス管理画面の左側の外観の上にあるお問い合わせのコンタクトフォーム1がそのままサイトに記載されているという状態です。 そしてお問い合わせのコンタクトフォーム1にはhtml_class="h-adr"をショートコードに入れ込めないです。
chiiiiii

2019/05/31 08:04

そのコンタクトフォームに記載されているのは現在下記になります。 <span class="p-country-name" style="display:none;">Japan</span> <tr> <th align="left">ご住所</br>郵便番号</th> <td>[text your-zipcode class:p-postal-code minlength:8 size:8]</td> </tr> <tr> <th align="left">都道府県</th> <td>[text your-address1 class:p-region class:p-locality class:p-street-address class:p-extended-address]</td> </tr> <tr> <th align="left">市区町村</th> <td>[text your-address2 class:p-locality] </td> </tr> <tr> <th align="left">番地・建物名</th> <td>[text your-address3 class:p-street-address class:p-extended-address] </td> </tr>
chiiiiii

2019/06/03 01:38

CERRYさんのおかげで無事郵便番号自動出力できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問