Categorie archief: JavaScript

WordPress plugins en Grunt

Met behulp van Grunt is het mogelijk om bepaalde taken bij het ontwikkelen van bijvoorbeeld software te automatiseren. Ook bij het ontwikkelen van WordPress plugins kan Grunt handig zijn, zo heb ik vandaag de WordPress plugin “Pronamic iDEAL” uitgebreid met een Gruntfile. Momenteel zorgt Grunt er voor dat de JavaScript bestanden automatisch gecontroleerd worden op kwaliteit met JSLint. Ook worden alle PHP bestanden automatisch gecontroleerd met PHPLint. Aanvullend wordt ook automatisch de PHPUnit tests uitgevoerd.

De Gruntfile voor de “Pronamic iDEAL” plugin is te vinden op de GitHib repository:
https://github.com/pronamic/wp-pronamic-ideal/blob/develop/Gruntfile.js

Handige resources hierbij waren:

Gravity Forms dagen tussen datum berekenen

Een aantal weken terug werd ik gevraagd om het aantal dagen tussen twee Gravity Forms datum velden te berekenen. Na een zoektocht via Google kwam ik al snel een JavaScript oplossing tegen op Stack Overflow:

http://stackoverflow.com/a/2627493

Naar aanleiding van dit topic heb ik het volgende script geschreven die inhaakt op de twee Gravity Forms datum velden.

Dit kan erg handig zijn als je het aantal dagen tussen twee datum wilt gebruiken voor het berekenen van bijvoorbeeld een prijs.

WordPress menu met geluid

Onlangs kreeg ik de vraag hoe je een geluidsfragment kunt afspelen zodra je over een WordPress menu item heen gaat met je muis. Op internet is veel informatie te vinden over hoe je een geluidsfragment kunt afspelen, maar hoe integreer je deze netjes in een WordPress thema? In dit bericht beschrijf ik kort een mogelijk oplossing.

Allereerst is het handig om een map ‘audio’ aan te maken binnen je WordPress thema map. Binnen deze map kun je alle gerelateerde audio bestanden plaatsen die je wilt afspelen zodra men met de muis over een menu item gaat. Vervolgens voegen we aan het WordPress functions.php bestand een aantal functies toe:

/**
 * Menu audio
 *
 * @return array
 */
function prefix_menu_audio() {
	$dir = get_stylesheet_directory_uri();

	return array(
		'beep' => array($dir . '/audio/beep.mp3', $dir . '/audio/beep.ogg') ,
		'end' => array($dir . '/audio/end.mp3', $dir . '/audio/end.ogg')
	);
}

In bovenstaand code fragment worden 2 audio fragmenten gedefinieerd in 2 verschillende formaten, namelijk MP3 en OGG. Om deze audio fragmenten te kunnen afspelen moeten ze worden toegevoegd aan de HTML van de website. Dit kunnen we realiseren met behulp van de volgende functie:

/**
 * Menu beep HTML
 */
function prefix_menu_audio_html() {
	$html = '';

	$audio = prefix_menu_audio();

	foreach($audio as $id => $sources) {
		$html .= sprintf('<audio id="%s">', esc_attr($id));
		foreach($sources as $source) {
			$html .= sprintf('<source src="%s" />', esc_attr($source));
		}
		$html .= '</audio>';
	}

	echo $html;
}

add_action('wp_footer', 'prefix_menu_audio_html');

Met behulp van bovenstaande functie wordt er voor gezorgd dat de gedefinieerde audio fragmenten in een nette HTML5 formaat in de footer van de WordPress website worden geplaatst. Vervolgens kunnen we met behulp van een aantal regels code JavaScript / jQuery deze audio fragmenten afspelen. Om dit te realiseren maken we maken een JavaScript bestand menu-audio.js aan in de WordPress thema map.

jQuery(document).ready(function($) {
	$(".menu a").mouseenter(function() {
		$("#beep").trigger("play");
	});
});

Dit bestand kan met behulp van de volgende functie worden toegevoegd aan de WordPress website zodat deze wordt uitgevoerd:

/**
 * Menu beeps enqueue scripts
 */
function prefix_enqueue_scripts_menu_audio() {
	wp_enqueue_script(
		'menu-audio' ,
		get_stylesheet_directory_uri() . '/menu-audio.js' ,
		array('jquery')
	);
}

add_action('wp_enqueue_scripts', 'prefix_enqueue_scripts_menu_audio');

In dit voorbeeld wordt slecht 1 audio fragment afgespeeld voor alle menu items. Met een beetje WordPress en jQuery kennis is dit natuurlijk eenvoudig uit te breiden.

Update: Voor het gemak heb ik een kant en klare WordPress menu audio oplossing klaar gezet, welke uitgepakt kan worden in je thema map en geactiveerd kan worden door include 'menu-audio/menu-audio.php'; in je thema’s functions.php bestand te plaatsen.

WordPress GEO afstand

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!