以前、Flutterで郵便番号検索アプリの作成方法をご紹介しましたが、今回は、WordPressで郵便番号検索プラグインを作成してみようと思います。
目次
プラグインファイルの作成
STEP
ローカルにディレクトリの作成
まず最初に、プラグイン用のディレクトリを作成します。今回は、ローカルのデスクトップにzipcode_search_pluginという名前でディレクトリを作成します。
STEP
ファイルの作成
作成したディレクトリ内に、zipcode_search_plugin.phpの名前で、ファイルを作成します。
STEP
プラグインヘッダーの作成
zipcode-search-plugin.php ファイルの先頭に、以下のプラグイン情報を記述します。
<?php
/**
* Plugin Name: Zipcode Search Plugin
* Description: A plugin to search addresses from Zipcode using ZipCloud API.
* Version: 1.0
* Author: Your Name
*/設定ファイルの作成
WordPressプラグインに環境設定ファイルを導入します。この環境設定ファイルは、APIのURLやパラメータ名などを管理し、プラグインの設定を柔軟に変更できるようにします。
STEP
config.phpの作成
プラグインディレクトリ内に config.php という名前のファイルを作成します。
このファイルに、設定可能な項目を配列または定数として定義します。
例えば、以下のように設定を定義できます。
<?php
// config.php
return array(
'API_URL' => 'https://zipcloud.ibsnet.co.jp/api/search',
'ZIPCODE_PARAM' => 'zipcode'
);STEP
設定ファイルの読み込み
プラグインのメインファイル内で、この設定ファイルを読み込みます。
// zipcode-search-plugin.php
$config = include(plugin_dir_path(__FILE__) . 'config.php');ショートコードの作成
STEP
フォームの作成
プラグイン内で、ショートコードを定義してフォームを生成します。
function zipcode_search_form() {
$form = '<form action="" method="post" id="zipcode-search-form">
<label for="zipcode">郵便番号:</label>
<input type="text" name="zipcode" id="zipcode" required>
<input type="submit" value="検索">
</form>
<div id="address-result"></div>';
return $form;
}STEP
ショートコードの追加
上記フォームを生成するショートコードを追加します。
add_shortcode('zipcode_search', 'zipcode_search_form');AjaxとJavascriptの作成
STEP
Ajaxの作成
このプラグインで、Ajaxを使ってZipCloud APIにリクエストを送り、結果を表示します。
function zipcode_search_scripts() {
wp_enqueue_script('zipcode-search-ajax', plugin_dir_url(__FILE__) . 'js/zipcode-search.js', array('jquery'), null, true);
wp_localize_script('zipcode-search-ajax', 'zipcodeSearch', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'zipcode_search_scripts');
function zipcode_search_ajax_handler() {
$zipcode = $_POST['zipcode'];
$response = wp_remote_get("https://zipcloud.ibsnet.co.jp/api/search?zipcode=$zipcode");
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (isset($data['results'][0])) {
$result = $data['results'][0];
echo $result['address1'] . $result['address2'] . $result['address3'];
} else {
echo '住所が見つかりませんでした。';
}
wp_die();
}
add_action('wp_ajax_zipcode_search', 'zipcode_search_ajax_handler');
add_action('wp_ajax_nopriv_zipcode_search', 'zipcode_search_ajax_handler');STEP
Javascriptファイルの作成
プラグインディレクトリ内に js ディレクトリを作成し、その中に zipcode-search.js というファイルを作成します。このファイルにはAjaxリクエストを記述します。
JavaScript
jQuery(document).ready(function($) {
$('#zipcode-search-form').submit(function(e) {
e.preventDefault();
var zipcode = $('#zipcode').val();
$.post(zipcodeSearch.ajax_url, {
action: 'zipcode_search',
zipcode: zipcode
}, function(data) {
$('#address-result').html(data);
});
});
});プラグインの完成
STEP
zipcode-search-plugin.php
完成したzipcode-search-plugin.phpを下記に記述します。
PHP
<?php
/**
* Plugin Name: Zipcode Search Plugin
* Description: A plugin to search addresses from Zipcode using ZipCloud API.
* Version: 1.0
* Author: Hidemasa Nakada
*/
// config.php から設定を読み込む
$config = include(plugin_dir_path(__FILE__) . 'config.php');
function zipcode_search_form() {
$form = '<form action="" method="post" id="zipcode-search-form">
<label for="zipcode">郵便番号:</label>
<input type="text" name="zipcode" id="zipcode" required>
<input type="submit" value="検索">
</form>
<div id="address-result"></div>';
return $form;
}
add_shortcode('zipcode_search', 'zipcode_search_form');
function zipcode_search_scripts() {
wp_enqueue_script('zipcode-search-ajax', plugin_dir_url(__FILE__) . 'js/zipcode-search.js', array('jquery'), null, true);
wp_localize_script('zipcode-search-ajax', 'zipcodeSearch', array('ajax_url' => admin_url('admin-ajax.php')));
}
add_action('wp_enqueue_scripts', 'zipcode_search_scripts');
function zipcode_search_ajax_handler() {
global $config;
$zipcode = isset($_POST['zipcode']) ? sanitize_text_field($_POST['zipcode']) : '';
$api_url = $config['API_URL'];
$param_name = $config['ZIPCODE_PARAM'];
$response = wp_remote_get("$api_url?$param_name=$zipcode");
if (is_wp_error($response)) {
echo 'APIリクエスト中にエラーが発生しました。';
wp_die();
}
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (isset($data['results'][0])) {
$result = $data['results'][0];
echo $result['address1'] . $result['address2'] . $result['address3'];
} else {
echo '住所が見つかりませんでした。';
}
wp_die();
}
add_action('wp_ajax_zipcode_search', 'zipcode_search_ajax_handler');
add_action('wp_ajax_nopriv_zipcode_search', 'zipcode_search_ajax_handler');
zipcode_search_plugin.phpの解説
- 2〜7行目：プラグイン情報
-
プラグインの名前、説明、バージョン、作者名が定義されています。これはWordPressがプラグインを識別するために必要な情報です。
- 10行目：設定の読み込み
-
プラグインは同じディレクトリにある config.php から設定を読み込みます。この設定ファイルにはAPIのURLとパラメータ名が含まれています。
- 12〜21行目：ショートコードの定義
-
- zipcode_search_form 関数は、郵便番号を入力するためのHTMLフォームと、検索結果を表示するための div を生成します。
- この関数はショートコード [zipcode_search] にマッピングされており、このショートコードをWordPressのページや投稿に挿入することでフォームを表示できます。
- 23〜27行目：スクリプトの追加
-
- zipcode_search_scripts 関数は、必要なJavaScriptファイルをページに追加します。このJavaScriptはAjaxを使用して非同期に郵便番号検索を行います。
- wp_localize_script を使用して、AjaxリクエストのURLをJavaScriptに渡しています。
- 29〜55行目：Ajaxハンドラーの定義
-
- zipcode_search_ajax_handler 関数は、Ajaxリクエストを処理します。この関数は、フォームから送信された郵便番号を受け取り、ZipCloud APIにリクエストを送信します。
- 郵便番号は sanitiza_text_field を使用してサニタイズされ、APIリクエストは wp_remote_get を使用して行われます。
- APIのレスポンスはJSON形式で受け取り、解析され、適切な住所情報がユーザーに表示されます。
- この関数は、WordPressのAjaxアクションフック wp_ajax_ と wp_ajax_nopriv_ に登録されています。
- 36〜40行目：エラーハンドリング
-
APIリクエスト中にエラーが発生した場合、適切なエラーメッセージが表示されます。また、検索結果が見つからない場合にもメッセージが表示されます。
STEP
zipcode_search.js
JavaScript
jQuery(document).ready(function($) {
$('#zipcode-search-form').submit(function(e) {
e.preventDefault();
var zipcode = $('#zipcode').val();
$.post(zipcodeSearch.ajax_url, {
action: 'zipcode_search',
zipcode: zipcode
}, function(data) {
$('#address-result').html(data);
});
});
});zipcocde_search.jsの解説
- 1~12行目：jQueryの準備
-
jQuery(document).ready(function($) { // コードブロック });- jQuery(document).ready(function($) {…}); : この構文は、DOM（Document Object Model）が完全に読み込まれ、操作可能になった時点で、内部の関数を実行するようにjQueryに指示します。
- function($) {…} : $ 記号を引数として使用し、jQueryオブジェクトに対して操作を行います。これは、他のライブラリとの競合を避けるための「無衝突モード」です。
- 2〜11行目：フォームのサブミットイベントハンドラー
-
$('#zipcode-search-form').submit(function(e) { // イベントハンドラーの内容 });- $(‘#zipcode-search-form’).submit(function(e){…}) : この構文は、ID zipcode-search-form （郵便番号検索フォーム）のサブミットイベントに関数をバインドします。
- function(e) {…} : イベントオブジェクト e を引数として渡し、イベントに関連する情報を取得できるようにします。
- 3行目：デフォルトのフォーム送信を防止
-
e.preventDefault();e.preventDefault() : このメソッドは、フォームのデフォルトの送信動作（ページのリロードを伴う通常のHTTPリクエスト）をキャンセルします。
- 4行目：郵便番号の取得
-
var zipcode = $('#zipcode').val();var zipcode=$(‘#zipcode’).val() : フォーム内の input 要素（ID zipcode）から郵便番号を取得します。
- 5〜10行目：Ajaxリクエストの送信
-
$.post(zipcodeSearch.ajax_url, { action: 'zipcode_search', zipcode: zipcode }, function(data) { // コールバック関数の内容 });jQueryの post メソッドを使用して、指定したURL（ zipcodeSearch.ajax_url ）にAjaxリクエストを送信します。このリクエストは非同期で行われ、ページのリロードは発生しません。
- 第二引数には送信するデータ（ここではアクション名と郵便番号）が含まれています。
- function(data) {…} : リクエストが成功した際に実行されるコールバック関数です。この関数はサーバーからのレスポンス（ data ）を受け取ります。
- 9行目：結果の表示
-
$('#address-result').html(data);サーバーからのレスポンス（住所情報）を、ID address-result の要素にHTMLとして挿入します。
STEP
ディレクトリ構成
念のため、ディレクトリ構成を下記に記述しておきます。
プラグインのインストール
STEP
Zipファイルを作成
- デスクトップにあるzipcode_search_pluginを右クリック
- “zipcode_search_plugin”を圧縮をクリック
- これでzipcode_search_plugin.zipファイルが作成されます。
STEP
ダッシュボードを開く
- WordPessのダッシュボードを開き、プラグイン＞新規プラグインを追加をクリックします。
- プラグインのアップロードをクリック
- ファイルを選択＞今作成したZipファイルを選択
- 今すぐインストールをクリック
- 有効化をクリック
これでプラグインのインストールは完了です。
ショートコードの配置
STEP
コードブロックの追加
作成したプラグインを配置したい箇所に [/] ショートコードのブロックを作成します。
STEP
ショートコードの記述
作成したコードブロックに下記のショートコードを記述します。
[zipcode_search]
STEP
表示テスト
下記の様に住所が表示されればOKです。
STEP
追加：全角半角変換
このままでは、全角文字が入力された場合、エラーになりますので、全角文字、全角ハイフン、長音が含まれても住所を検索できるように、zipcode_search_ajax_hanler関数を修正します。
function zipcode_search_ajax_handler() {
global $config;
$zipcode = isset($_POST['zipcode']) ? sanitize_text_field($_POST['zipcode']) : '';
// 全角を半角に変換
$zipcode = mb_convert_kana($zipcode, 'aK', 'UTF-8');
// 全角・半角ハイフン及び長音を除去
$zipcode = str_replace(array('-', '−','ー'), '', $zipcode);
$api_url = $config['API_URL'];
$param_name = $config['ZIPCODE_PARAM'];
//以下は同じです。
コメント