Alábbiakban bemutatom, hogyan lehet egy egyszerű shortcode-ot készíteni, ami a megadott irányítószám alapján visszaadja a hozzá tartozó várost. Az irányítószám ellenőrzésére a GeoNames.org API-t fogjuk használni.

GeoNames

A példakód használatához szükségünk lesz egy GeoNames felhasználói fiókra, amit itt tudunk regisztrálni: [link] A sikeres regisztráció után kapunk egy megerősítő e-mailt, ami nekem spam-be landolt, ezért érdemes ott is körülnézni, ha 1-2 percen belül nem érkezik meg. A felhasználói fiókunk megerősítése után már be tudunk jelentkezni, de az API-hoz még nem férünk hozzá! Bejelentkezés után a felhasználói nevünkre kattintva, ami a jobb felső sarokban található, tudjuk engedélyezni a “Free Web Services” blokk alatt a “Click here to enable.” linkre kattintva. Fontos! Az alábbi kód-ban látható “demo” felhasználónevet ne használd mert 20.000 lekérdezési limit van rajta, amit rendszeresen elérnek, így nem lesz használható a keresés.

MU-PLUGINS

Az alábbi shortcode-ot a mu-plugins mappába mentsd postcode_search.php néven. Amennyiben nincs ilyen mappád, nyugodtan hozd létre (/wp-content/mu-plugins).

<?php
/*
Plugin Name: Postcode Search
Plugin URI: https://rajkailaszlo.hu/blog/geonames-api-shortcode/
Description: Postcode Search
Version: 1.0
Author: Rajkai László
Author URI: https://rajkailaszlo.hu
License: GPL2
*/


function hu_postcode_search() { 
 
return '
	<div id="postcode_search_container">
	<input type="number" id="postcode_search_input">
	<button id="postcode_search_button" type="button">Keresés</button>
	<div id="postcode_search_result"></div>
	</div>

	<script>
	/*GeoNames felhasználónév*/
	var username = "demo";
	
	$("#postcode_search_button").click(function(){
		if ($("#postcode_search_input").val()){
			$.ajax({
				url: \'https://secure.geonames.org/postalCodeLookupJSON\',
				dataType: "jsonp",
				data: {
						postalcode: $("#postcode_search_input").val(),
						country : "HU",
						maxRows: 1,
						username: username
					},
				success: function (data) {				
					if (data.hasOwnProperty("postalcodes")){
						if (data.postalcodes[0]){
							$("#postcode_search_result").html(\'<p class="postcode_search_true">A keresett irányítószámhoz tartozó város: \' + data.postalcodes[0].placeName + \' </p> \');
						} else {
							$("#postcode_search_result").html(\'<p class="postcode_search_false">Az irányítószám nem található Magyarországon: \' + $("#postcode_search_input").val() + \' </p> \');
						}
					}
					$("#postcode_search_input").val("");
				}
			});
		}
			
	});
	</script>
	';
 
}

add_shortcode('hu_postcode_search', 'hu_postcode_search'); 

Használat

A shortcode-ot a megszokott módon [hu_postcode_search] tudjuk megjeleníteni. Jelen állapotában elég puritán megjelenéssel bír, tetszés szerint formázható CSS használatával. Természetesen a fenti kód csupán példaként szolgál, érdemes bővíteni, például limitálni a bevihető karakterek számát vagy a különböző API válaszokat lekezelni.

Próbáld ki 🙂