よく使うコード Archives | オレインデザイン

Contact Form 7にYubinBangoで郵便番号から住所を自動入力させる方法

投稿日: 2017年6月19日投稿者: 久野晃司

お問い合わせフォームや申し込みフォームなど、住所の入力を必要とするフォームにはよく付いています郵便番号を入力すると自動的に住所を入力してくれる機能ですが、導入するの大変なんじゃないの？と思いませんか？

僕も面倒なんだろうなぁと調べもせず勝手な先入観を持っていたのですが、ひょんな拍子で調べてみたらこんなライブラリを見つけまして、しかもWordPressで利用されるお問い合わせフォームを設置するプラグインの代表格と言っても過言ではないContact Form 7に導入する方法も試してみましたので共有してみます。

先にお伝えしておきます。めっちゃ簡単です。

YubinBangoライブラリとは

こちらのGitHubページで公開されているライブラリになります。

https://github.com/yubinbango/yubinbango

これまでにない設定方法（なんとclassを指定するだけ！）のまったく新しいライブラリが誕生いたしました！
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。

ほんと当たり前になったら、もっと導入が進んでユーザーも便利になるはず。

まずはライブラリを読み込む

まずはWordPressテーマ側、functions.phpにてYubinBangoライブラリを読み込みます。

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

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

Contact Form 7の設定

まずは、Contact Form 7のフォームを作成するところで、このようにフォームを作成します。詳しくは後述します。

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

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

<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>

<p>メッセージ本文<br />
    [textarea your-message] </p>

<p>[submit "送信"]</p>

お名前 (必須)

[text* your-name]

メールアドレス (必須)

[email* your-email]

Japan

郵便番号

[text your-zipcode class:p-postal-code minlength:8 size:8]

住所

[text your-address class:p-region class:p-locality class:p-street-address class:p-extended-address]

メッセージ本文

[textarea your-message]

[submit "送信"]

上記コードはこちらから引用させていただきました。

form内に国名（p-country-name)をJapanに指定

form内であればどこでも良いのですが、下記のコードをどこかに挿入しましょう。（上では7行目に掲載されています）

<span class="p-country-name" style="display:none;">Japan</span>

1	<span class="p-country-name" style="display:none;">Japan</span>

郵便番号入力inputにp-postal-codeをクラス指定する

郵便番号を入力させるフォーム部分にp-postal-codeをclass指定します。

郵便番号を最初の３桁と後の４桁とで分ける場合にも、同様に同じclass名を２つの入力フォームに設定します。（後述）

上の例では９行目に当たります。

都道府県、市町村区、町域、以降の住所の欄にそれぞれclassを設定する

下記の表にまとめたように、各入力フォームにクラスを設定します。

住所欄	指定するクラス名
都道府県名	`p-region`
市町村区	`p-locality`
町域	`p-street-address`
以降の住所	`p-extended-address`

formタグにh-adrクラスを設定する

設置するformタグにh-adrクラスを設定します。

Contact Form 7ではformタグは自動的に出力されるので、ショートコードに追記して追加します。

通常、このようなショートコードだと思います。

[contact-form-7 id="1234" title="YubinBango test"]

1	[contact-form-7 id="1234" title="YubinBango test"]

ここに、html_class="h-adr"という記述を加えて、

[contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"]

1	[contact-form-7 id="1234" title="YubinBango test" html_class="h-adr"]

としてあげることによって、formタグにclassを追加することができます。

郵便番号入力フォームを２つに、各項目をそれぞれのフォームにする場合

郵便番号入力フォームにp-postal-codeというクラスを付与しなくてはならないと上で書きましたが、その際にフォームを２つに分ける場合は後述しますと書きました。

また、都道府県や市町村区をそれぞれ別のフォームにしたい場合も合わせてサンプルコードを掲載しておきます。

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

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

<span class="p-country-name" style="display:none;">Japan</span>
<p>郵便番号<br />
    [text your-zipcode class:p-postal-code minlength:3 size:3] - [text your-zipcode class:p-postal-code minlength:4 size:4]</p>

<p>住所A<br>[text adress-a class:p-region]</p>

<p>住所B<br>[text adress-b class:p-locality]</p>

<p>住所C<br>[text adress-c class:p-street-address]</p>

<p>住所D<br>[text adress-d class:p-extended-address]</p>

<p>メッセージ本文<br />
    [textarea your-message] </p>

<p>[submit "送信"]</p>

お名前 (必須)

[text* your-name]

メールアドレス (必須)

[email* your-email]

Japan

郵便番号

[text your-zipcode class:p-postal-code minlength:3 size:3] - [text your-zipcode class:p-postal-code minlength:4 size:4]

住所A [text adress-a class:p-region]

住所B [text adress-b class:p-locality]

住所C [text adress-c class:p-street-address]

住所D [text adress-d class:p-extended-address]

メッセージ本文

[textarea your-message]

[submit "送信"]

このように分けることによって、郵便番号フォームを２つ埋められた瞬間に住所を自動入力してくれるようになります。

まとめ

勝手な先入観で「郵便番号からの住所自動入力導入は面倒」と思い込んでいましたが、実際に組み込むまでに５分くらいで完了しました。

実際にはスタイリングなどもありますので、もう少しかかるかとは思いますが、既存のフォームに導入するのもそれほど難しいことではないかと感じました。

ぜひ、こういった便利な機能を制作者が簡単に導入できるようになり、それが最終的にユーザーの利便性向上へと繋がるお手伝いに当記事がなれば幸いです。

[WordPress]Olein Designのfunctions.phpを詳しく解説します（コピペ利用可）

投稿日: 2017年6月12日2017年6月12日投稿者: 久野晃司

WordPressのテーマを制作するたびに毎回ゼロからソースコードを書いていくのはとても大変なことです。全てを暗記できるわけでもありませんし、リソースを見ながら書いていくことがほとんどだと思います。

毎回同じ記述をするのであれば、自分のテンプレートを持っておけばいいじゃないか！ということで、自分のテンプレートを作って作業効率化を図っています。

こちらのブログでも他にfunctions.phpについて書いている記事があるのですが、そちらへのアクセス数が他の記事に比べて多くの方に読んでいただけているようです。

ですので、テンプレートを解説して置いておけばどなたかのお役に立つのではないかと思いまして、今回は自前functions.phpのテンプレートの中身を解説して掲載してみます。

僕が使っているfunctions.phpのテンプレート

今回、掲載するためにコメントにて簡単な役割と参照URLを加えました。必要ない場合には削除して使ってください。

<?php

if ( ! function_exists( 'lab_setup' ) ) :

function lab_setup() {
	/*
	 * 自動フィードリンク
	 * 参照：https://wpdocs.osdn.jp/%E8%87%AA%E5%8B%95%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%B3%E3%82%AF
	 */
	add_theme_support( 'automatic-feed-links' );
	
	/*
	 * titleを自動で書き出し
	 * 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#Title_.E3.82.BF.E3.82.B0
	 */
	add_theme_support( 'title-tag' );
	
	/*
	 * アイキャッチ画像を設定できるようにする
	 * 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#.E6.8A.95.E7.A8.BF.E3.82.B5.E3.83.A0.E3.83.8D.E3.82.A4.E3.83.AB
	 */
	add_theme_support( 'post-thumbnails' );
	
	/*
	 * 検索フォーム、コメントフォーム、コメントリスト、ギャラリー、キャプションでHTML5マークアップの使用を許可します
	 * 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#HTML5
	 */
	add_theme_support( 'html5', array(
		'search-form',
		'comment-form',
		'comment-list',
		'gallery',
		'caption',
	) );
	
	/*
	 * テーマカスタマイザーにおける編集ショートカット機能の使用
	 * 参照：https://celtislab.net/archives/20161222/wp-customizer-edit-shortcut/
	 */
	add_theme_support( 'customize-selective-refresh-widgets' );
	
	/*
	 * カスタムメニュー位置を定義
	 * 参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus
	 */
	register_nav_menus( array(
		'global' => 'グローバルナビ',
	) );
	
}
endif;
add_action( 'after_setup_theme', 'lab_setup' );

/*
 * 動画や写真を投稿する際のコンテンツの最大幅を設定
 * 参照：https://wpdocs.osdn.jp/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%B9%85
 */
function lab_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );
}
add_action( 'after_setup_theme', 'lab_content_width', 0 );

/*
 * サイドバーを定義
 * 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar
 */
function lab_widgets_init() {
	register_sidebar( array(
		'name'          => 'Sidebar',
		'id'            => 'sidebar-1',
		'description'   => 'ここにウィジェットを追加',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'lab_widgets_init' );

/*
 * スクリプトを読み込み
 * wp_enqueue_styleについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style
 * wp_enqueue_scriptについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script
 */
function lab_scripts() {
	wp_enqueue_style( 'lab-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'lab_scripts' );


?>

<?php

if ( ! function_exists( 'lab_setup' ) ) :

function lab_setup() {

* 自動フィードリンク

* 参照：https://wpdocs.osdn.jp/%E8%87%AA%E5%8B%95%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%AA%E3%83%B3%E3%82%AF

add_theme_support( 'automatic-feed-links' );

* titleを自動で書き出し

* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#Title_.E3.82.BF.E3.82.B0

add_theme_support( 'title-tag' );

* アイキャッチ画像を設定できるようにする

* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#.E6.8A.95.E7.A8.BF.E3.82.B5.E3.83.A0.E3.83.8D.E3.82.A4.E3.83.AB

add_theme_support( 'post-thumbnails' );

* 検索フォーム、コメントフォーム、コメントリスト、ギャラリー、キャプションでHTML5マークアップの使用を許可します

* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_theme_support#HTML5

add_theme_support( 'html5', array(

'search-form',

'comment-form',

'comment-list',

'gallery',

'caption',

) );

* テーマカスタマイザーにおける編集ショートカット機能の使用

* 参照：https://celtislab.net/archives/20161222/wp-customizer-edit-shortcut/

add_theme_support( 'customize-selective-refresh-widgets' );

* カスタムメニュー位置を定義

* 参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_nav_menus

register_nav_menus( array(

'global' => 'グローバルナビ',

) );

}

endif;

add_action( 'after_setup_theme', 'lab_setup' );

* 動画や写真を投稿する際のコンテンツの最大幅を設定

* 参照：https://wpdocs.osdn.jp/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E5%B9%85

function lab_content_width() {

$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );

}

add_action( 'after_setup_theme', 'lab_content_width', 0 );

* サイドバーを定義

* 参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_sidebar

function lab_widgets_init() {

register_sidebar( array(

'name' => 'Sidebar',

'id' => 'sidebar-1',

'description' => 'ここにウィジェットを追加',

'before_widget' => '<section id="%1$s" class="widget %2$s">',

'after_widget' => '</section>',

'before_title' => '<h2 class="widget-title">',

'after_title' => '</h2>',

) );

}

add_action( 'widgets_init', 'lab_widgets_init' );

* スクリプトを読み込み

* wp_enqueue_styleについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

* wp_enqueue_scriptについて参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

function lab_scripts() {

wp_enqueue_style( 'lab-style', get_stylesheet_uri() );

}

add_action( 'wp_enqueue_scripts', 'lab_scripts' );

では、簡単に各箇所について説明していこうと思います。上のコードをコピペで使うのが一番簡単なんですが、もう一歩踏み出して理解したいという場合には、以下の説明にも目を通していただけると、理解のお手伝いになるかと思います。

if ( ! function_exists( ‘lab_setup’ ) )とは

まず、３行目のif ( ! function_exists( 'lab_setup' ) )という記述ですが、これは「lab_setupという関数がなければ以下を実行しなさい」という処理を行うためです。

なぜこのような記述を行うかというと、将来子テーマを利用した開発にも対応するためです。

実際のところ、クライアントワークでは制作して納品したWordPressテーマに対して、後ほど子テーマを利用して何かカスタマイズするというようなことはほとんどありません。

そういう観点から考えると、この記述は必要ないとも言えるのですが、この記述方法を覚えておくと公式に掲載するためのテーマ制作では必要になってきますし、納品したテーマファイルを永久にメンテナンスしていけるとも限りませんので、将来的にどのようなカスタマイズにも耐えるためには、このように記述しておく方が無難かな、と個人的には考えています。

add_theme_supportでRSSを表示

add_theme_support( 'automatic-feed-links' );という記述をすると、生成されるページのheadタグ内に投稿とコメントへのRSSフィードリンクを掲載してくれます。

実際出力されるコードというのは以下のようになります。

<link rel="alternate" type="application/rss+xml" title="lab &raquo; フィード" href="http://***.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="lab &raquo; コメントフィード" href="http://***.com/comments/feed/" />

1 2	<link rel="alternate" type="application/rss+xml" title="lab » フィード" href="http://*.com/feed/" /> <link rel="alternate" type="application/rss+xml" title="lab » コメントフィード" href="http://*.com/comments/feed/" />

こちらを挿入したい場合には記述するようにしましょう。一般的に記述しておいて問題ないかと思います。

add_theme_supportでタイトルを表示

add_theme_support( 'title-tag' );と記述することにより、headタグ内に自動てきにtitleタグにてページのタイトルを出力してくれます。

以前まではheadタグ内に下記のようにタイトルを出力させる方法が一般的でした。

<head>
	<title><?php the_title(); ?></title>
</head>

<head>

</head>

厳密に言うと、固定ページやアーカイブページなど状況によって書き出し方を変えていたりはしていたのですが、WordPress4.1バージョンから上記のような記述はせず、WordPress側からtitleタグを出力する機能が付きました。

あまり詳しいことはわかりませんが、プラグインなどの兼ね合いなども考えると、WordPressのガイドラインに沿った記述が望ましいと思いますので、この記述によりタイトルを出力するようにしています。

add_theme_supportでアイキャッチ画像を利用できるようにする

add_theme_support( 'post-thumbnails' );と記述することにより、投稿などにアイキャッチ画像をつけられる機能を有効にすることができます。

最近では、ブログ投稿にとってアイキャッチ画像の役割というのは、色々な意味で重要だと考えられてきているので、企業ブログなどにおいても必要になることも多いのではないかと思います。

また、「投稿ページだけ」や「固定ページだけ」というような使い方もできます。

add_theme_support( 'post-thumbnails' );
add_theme_support( 'post-thumbnails', array( 'post' ) );          // 投稿のみ
add_theme_support( 'post-thumbnails', array( 'page' ) );          // 固定ページのみ

add_theme_support( 'post-thumbnails' );

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 投稿のみ

add_theme_support( 'post-thumbnails', array( 'page' ) ); // 固定ページのみ

参照：関数リファレンス/add theme support | 4.2 投稿サムネイル

必要な状況に対応することも可能となっています。

add_theme_supportで各部分でHTML5マークアップを許可する

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );という記述により、指定した部分をHTML5でマークアップしてコードを書き出してくれます。

ここ最近ではHTML5を利用してはいけない状況はほとんどないかと思いますので、この記述も必須としています。

add_theme_supportでテーマカスタマイザー内で編集ショートカット機能を利用できるようにする

add_theme_support( 'customize-selective-refresh-widgets' );と記述することにより、管理画面内のカスタマイズ機能を利用する際に、編集ショートカットを利用できるようになります。

この機能については参照記事を見ていただくとわかりやすく書かれていますが、ほぼクライアントワークには必要ないかと思います。

自身や自社にて親テーマとなるものを作って置いて、クライアントごとに子テーマにて開発する…という方法を取るのであれば、この機能を使いこなしておくことによって、カスタマイズも簡単になり、テーマの使いやすさも向上しますので、テーマの評価も必然的に上がることは間違いありません。

が、先ほども書いたように、クライアントワークには必要ないことの方が多いので、必要な場合には記述してみてください。

register_nav_menus()でカスタムメニュー位置を定義する

register_nav_menus( array(
	'global' => 'グローバルナビ',
) );

register_nav_menus( array(

'global' => 'グローバルナビ',

) );

過去に書いたこちらの記事でも紹介していますが、カスタムメニューを利用する際に位置を定義するために記述します。

個人的にはクライアントの管理のしやすさや自由度、あとWordPressを利用する理由の一つとしてカスタムメニュー機能はとても大きいと考えていて、よく利用するのでテンプレートにも記載されています。

コンテンツ幅を設定

「コンテンツ幅を設定」と言われても、いまいちしっくりこないかもしれませんが、投稿や固定ページに画像などメディアを挿入することは多くあるかと思います。

その際に、あらかじめ設定してある複数の画像サイズなどから選択する形になるかと思うのですが、そこで設定される画像の最大値などを設定しておくことができます。

function lab_content_width() {
	$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );
}
add_action( 'after_setup_theme', 'lab_content_width', 0 );

function lab_content_width() {

$GLOBALS['content_width'] = apply_filters( 'lab_content_width', 640 );

}

add_action( 'after_setup_theme', 'lab_content_width', 0 );

そうしておくことによって、コンテンツ幅（主にブログ記事部分の横幅）に合わせたメディアを自動的に生成してもらえるので、無駄に大きな画像をそのまま記載することで画像サイズが肥大してしまうことも考えられるので、設定するようにしています。

サイドバーを定義

register_sidebarを利用してサイドバーを設定します。

こちらを定義しておくことによって、ウィジェットを利用できるエリアを作成することができます。

本来の使い方であれば、ブログの右（あるいは左）に常設されるサイドバーではありますが、それだけではなく、トップページのコンテンツ部分にも上手く利用することにより、ウィジェット機能を利用して上手くクライアント側でコンテンツを入れ替えたり更新したり変更したりすることができるように作れます。

色々な用途で利用することができますので、よく活用するようにしています。

各スクリプトを読み込む

よく他の制作会社様が作られたテーマなどを拝見することもあるのですが、一番多いのがスクリプトの直記述かなと感じています。

直接、head内にCSSやJavaScriptsファイルへのリンクを設定する方法ですね。静的ページを作る際には当然そのように書くのですが、WordPressではちょっと違ったりします。

WordPressのテーマにはheadタグの最後にwp_head()、bodyタグを閉じる前にwp_footer()という関数を記述することは、ご存知の方も多いかと思います。

便利で数あるプラグインを利用するためには必ずこの記述をしなくてはなりません。でないと、プラグイン側からのコードが完全に出力されないので、便利に使うことができないからです。

それと同じような仕組みで、テーマ側で利用するCSSファイルやJavaScriptsファイルもwp_head()やwp_footerを経由してリンクを設置する方法が推奨されています。

function lab_scripts() {
	wp_enqueue_style( 'lab-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'lab_scripts' );

function lab_scripts() {

wp_enqueue_style( 'lab-style', get_stylesheet_uri() );

}

add_action( 'wp_enqueue_scripts', 'lab_scripts' );

CSSを読み込む場合にはこちら、JavaScriptを読み込む場合にはこちらを参照していただくと、詳しい書き方が書いてあります。

まとめ

ざざざーっと走って書いてきましたが、個人的に使っているfunctions.phpのテンプレートはこのような感じになります。

このようなテンプレートを自分用に１つ持っていると、毎回同じようなことを書かなくてはならないという作業がなくなりますので作業の時短に繋がり、私たちフリーランスにとっては最終的に時給アップにも繋がるわけであります。

必要のない機能についてはコメントアウトしておけば、とりあえず良いですしね（最終的に消してしまえば良いわけですから）。ゼロから書くのが面倒なんです…。

みなさんのお役に経てば幸いです。