Op de website van Pronamic is in de voettekst een leuke GEO functionaliteit opgenomen:
In dit bericht zal ik beschrijven hoe je deze functionaliteit kunt toevoegen aan je eigen WordPress website. Allereerst voegen we aan footer.php de volgende code toe:
<div id="location-footer" class="geolocation">
<?php get_template_part('geo', 'location-footer'); ?>
</div>
Vervolgens maken we binnen de theme map het bestand geo-location-footer.php aan. Binnen dit bestand plaatsen we de volgende code:
<?php
global $distanceToHQ;
if(isset($distanceToHQ) && $distanceToHQ < 50): ?>
Volgens GeoIP bent u minder dan 50 km verwijderd van een kopje koffie en een goed gesprek over internet. Kom vrijblijvend eens <a href="/contact/">bij ons langs</a>. Volgt u ons trouwens al op <a href="http://www.twitter.com/pronamic">Twitter</a>?
<?php else: ?>
Wij komen graag eens bij u langs voor een goed gesprek. Neem vrijblijvend <a href="/contact/">contact</a> met ons op. Volg ons op <a href="http://www.twitter.com/pronamic">Twitter</a>.
Bekijk onze foto's op <a href="http://www.flickr.com/groups/pronamic/">FlickR</a> of wordt lid van onze groep op <a href="http://pronamic.hyves.nl/">Hyves</a>.
<?php endif; ?>
Vervolgens voegen we de volgende code toe aan functions.php.
/**
* Calculate distance between to points and return it in the specified unit
*/
function rt_calculate_distance($lat1, $lon1, $lat2, $lon2, $unit) {
$theta = $lon1 - $lon2;
$dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
$dist = acos($dist);
$dist = rad2deg($dist);
$miles = $dist * 60 * 1.1515;
$unit = strtoupper($unit);
if($unit == 'K') {
return ($miles * 1.609344);
} else if($unit == 'N') {
return ($miles * 0.8684);
} else {
return $miles;
}
}
/**
* Calculate distance between to points and return it in the specified unit
*/
function rt_distance($location1, $location2, $unit) {
return rt_calculate_distance($location1->latitude, $location1->longitude, $location2->latitude, $location2->longitude, $unit);
}
////////////////////////////////////////////////////////////
/**
* AJAX
*/
function rt_ajax_geo() {
$hqLocation = new stdClass();
$hqLocation->latitude = 53.056079;
$hqLocation->longitude = 6.200763;
$clientLocation = new stdClass();
$clientLocation->latitude = (float) filter_input(INPUT_POST, 'latitude', FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION);
$clientLocation->longitude = (float) filter_input(INPUT_POST, 'longitude', FILTER_SANITIZE_NUMBER_FLOAT, FILTER_FLAG_ALLOW_FRACTION);
global $distanceToHQ;
$distanceToHQ = rt_distance($hqLocation, $clientLocation, 'K');
$element = filter_input(INPUT_POST, 'element', FILTER_SANITIZE_STRING);
get_template_part('geo', $element);
die();
}
add_action('wp_ajax_rt_geo', 'rt_ajax_geo');
add_action('wp_ajax_nopriv_rt_geo', 'rt_ajax_geo');
////////////////////////////////////////////////////////////
function rt_geo_scripts() {
$key = 'INSERT-YOUR-KEY';
wp_register_script('google-jsapi',
'https://www.google.com/jsapi?key=' . $key
);
wp_register_script('rt-geo-script',
get_bloginfo('template_directory') . '/js/geo.js' ,
array('google-jsapi', 'jquery') ,
'1.0'
);
wp_enqueue_script('rt-geo-script');
}
add_action('template_redirect', 'rt_geo_scripts');
Je moet voor het gebruik van deze functionaliteit een Google JS API key aanvragen. Vervang de tekst INSERT-YOUR-KEY in bovenstaande code met je eigen API key.
De laatste stap is om binnen je theme map het JavaScript bestand geo.js aan te maken in de map js met de volgende inhoud:
jQuery(document).ready(function($) {
if($.isPlainObject(google.loader.ClientLocation)) {
var clientLocation = google.loader.ClientLocation;
$(".geolocation").each(function() {
var element = $(this);
var data = {
action: "rt_geo" ,
element: element.attr("id") ,
latitude: clientLocation.latitude ,
longitude: clientLocation.longitude
};
$.post("/wp-admin/admin-ajax.php", data, function(response) {
element.html(response);
});
});
}
});
Als het goed is zou je nu een dynamisch blok in je footer moeten hebben die geüpdate wordt zodra de afstand tussen de bezoeker en je locatie bekend is. Je kunt uiteraard geo-location-footer.php helemaal naar je eigen wens aanpassen. Daarnaast kun je een onbeperkt aantal GEO elementen toevoegen. Mocht je vragen, opmerkingen, verbeteringen, etc. hebben laat dan even een reactie achter!
