Categorieën
PHP WordPress

WordPress media bestanden met rare tekens

Onlangs hebben we een nieuwe WordPress website gelanceerd bij Pronamic. De opdrachtgever heeft deze website netjes gevuld op de ontwikkel- en testomgeving van Pronamic. Vervolgens hebben we deze verplaatst naar de productieomgeving. Hierbij liepen we echter tegen een probleem aan. Veel geüploade bestanden hadden in de bestandsnaam rare tekens, zoals copyright (©) tekens. Op de ontwikkel- en testomgeving leverde dit geen problemen op, maar helaas op de productieomgeving wel.

Aangezien het om een flink aantal bestanden ging was het handmatig aanpassen of opnieuw uploaden niet een optie. Ik kon helaas ook geen geschikte WordPress plugin vinden die dit probleem kon verhelpen. Om die reden heb ik zelf maar even een oplossing ontwikkeld. Allereerst heb ik een MySQL query bedacht die alles © tekens vervangt met een gewone c teken.

UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '©', 'c') WHERE meta_key = '_wp_attached_file';
UPDATE wp_postmeta SET meta_value = REPLACE(meta_value, '©', 'c') WHERE meta_key = '_wp_attachment_metadata';
UPDATE wp_posts SET guid = REPLACE(guid, '©', 'c') WHERE post_type = 'attachment';

Vervolgens moesten de bestanden in de WordPress uploads mag ook gewijzigd worden. Hiervoor heb ik eenvoudig PHP script geschreven en uitgevoerd in de uploads map:

<?php

$rdi = new RecursiveDirectoryIterator('./');
$rii = new RecursiveIteratorIterator($rdi);

foreach($rii as $file) {
	$name = $file->getPathname();

	$copyrightPosition = strpos($name, '©');

	if($copyrightPosition !== false) {
		$newName = str_replace('©', 'c', $name);

		$renamed = rename($name, $newName);

		echo $name, ' = ', $newName, ' = ', ($renamed ? 'renamed' : 'failed'), '<br />';
	}
}

Uiteindelijk heb ik voor de zekerheid alle afbeelding en bijbehorende thumbnails opnieuw laten generen met de Regenerate Thumbnails plugin. Mocht je ook ooit een dergelijke probleem hebben dan hoop ik dat je met bovenstaande code fragmenten dit snel kunt oplossen. Eventueel kan Pronamic ook een plugin voor je ontwikkelen die geautomatiseerd je probleem kan verhelpen. Mocht je nog vragen, opmerkingen en/of tips hebben laat dan gerust een reactie achter.

Categorieën
PHP WordPress

Gravity Forms custom posts

Via Gravity Form is het mogelijk om je bezoekers (concept)berichten te laten plaatsen. Je kunt hierbij gebruik maken van verschillende vooraf gedefinieerde velden. Helaas is het nog niet mogelijk om custom posts aan te maken. Gelukkig is deze functionaliteit met behulp van filters en hooks wel te realiseren.

function custom_gform_set_post_type($post_data, $form) {
	$classes = explode(' ', $form['cssClass']);

	$items = apply_filters('custom_gform_post_type_classes', array());

	foreach($items as $class => $post_type) {
		if(in_array($class, $classes)) {
			$post_data['post_type'] = $post_type;
		}
	}

    return $post_data;
}

add_filter('gform_post_data', 'custom_gform_set_post_type', 10, 2);

Vervolgens kun je met behulp van de volgende filter CSS classes koppelen aan een custom post type.

function dvt_gform_post_type_classes($ptc) {
	$ptc['opponent-form'] = 'opponent';

	return $ptc;
}

add_filter('custom_gform_post_type_classes', 'dvt_gform_post_type_classes');
Categorieën
PHP WordPress

Gravity Forms custom taxonomies dropdown

Via Gravity Form is het mogelijk om je bezoekers (concept)berichten te laten plaatsen. Je kunt hierbij gebruik maken van verschillende vooraf gedefinieerde velden. Helaas is er nog geen standaard veld beschikbaar voor custom post types en taxonomies. Gelukkig is deze functionaliteit met behulp van filters en hooks wel te realiseren.

Populate dropdown

function custom_gform_dropdown_terms($arguments, $withEmpty = true) {
	$terms = get_terms($arguments);

	$items = array();

	if($withEmpty) {
		$items[] = array('text' => '', 'value' => '');
	}

	foreach($terms as $term) {
		$items[] = array('value' => $term->term_id, 'text' => $term->name);
	}

	return $items;
}

function custom_gform_populate_dropdown($form) {
	$items = apply_filters('custom_gform_taxonomies_classes', array());

	foreach($form['fields'] as &$field) {
		$classes = explode(' ', $field['cssClass']);

		foreach($items as $class => $taxonomy) {
			if(in_array($class, $classes)) {
				$field['type'] = 'select';
				$field['choices'] = custom_gform_dropdown_terms($taxonomy);
			}
		}
	}

	return $form;
}

add_filter('gform_pre_render', 'custom_gform_populate_dropdown');

Koppel CSS class met taxonomy

Vervolgens kun je met behulp van de volgende filter CSS classes koppelen aan een taxonomy.

function dvt_gform_taxonomy_classes($tc) {
	$tc['taxonomy-level'] = 'level';
	$tc['taxonomy-region'] = 'region';

	return $tc;
}

add_filter('custom_gform_taxonomies_classes', 'dvt_gform_taxonomy_classes');

Terms opslaan per post

Tot slot zorgt het volgende code fragment er voor dat de terms worden opgeslagen bij de betreffende post.

function custom_gform_save_terms($lead, $form) {
	// Check if the submission contains a WordPress post
	if(isset($lead['post_id'])) {
		$items = apply_filters('custom_gform_taxonomies_classes', array());

		foreach($form['fields'] as &$field) {
			$classes = explode(' ', $field['cssClass']);

			foreach($items as $class => $taxonomy) {
				if(in_array($class, $classes)) {
					$value = (int) $lead[$field['id']];

					wp_set_object_terms($lead['post_id'], $value, $taxonomy);
				}
			}
		}
	}
}

add_action('gform_post_submission', 'custom_gform_save_terms', 10, 2);

Bronnen

Categorieën
JavaScript jQuery PHP WordPress

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!

Categorieën
WordPress

WordPress Shopp plugin vertalingen (nl_NL)

Voor een opdracht bij Pronamic hebben we gebruik gemaakt van de WordPress Shopp plugin. Deze plugin tovert elke WordPress installatie om naar een eenvoudige webwinkel.
De plugin is ontwikkeld door Ingenesis Limited (weblog) een bedrijf uit Springfield (Ohio, Verenigde Staten).

De plugin is standaard alleen in het Engels beschikbaar. Gelukkig kan de plugin dankzij het WordPress vertaalmechanisme eenvoudige worden vertaald. Hiranthi
van Illutic WebDesign uit Enschede heeft al een Nederlandse vertaling op de Shopp website geplaatst.

Helaas was deze vertaling ietwat gedateerd en ontbrak het .PO bestand.
Gelukkig kunnen .MO bestanden eenvoudig omgezet worden naar .PO bestanden.
Als je gebruik maakt van Poedit kun je hiervoor
het volgende commando gebruiken:

C:\Program Files\Poedit\bin
msgunfmt Shopp-nl_NL.mo > Shopp-nl_NL.po

Vervolgens kun je binnen Poedit dit .PO bestand bijwerken naar het
recentste .POT bestand van de Shopp plugin.

Voor het gemak heb ik de .PO en .MO bestanden online gezet:

Helaas zijn de vertalingen nog niet volledig en up-to-date:

67% vertaald, 1256 teksten (216 onzeker, 0 ongeldige symbolen, 188 niet vertaald

Categorieën
WordPress

Gravity Forms “datepicker” in het Nederlands

De Gravity Forms “datepicker” maakt gebruik van de jQuery UI datepicker. De teksten in deze datepicker zjin standaard in het Engels. De .po en .mo vertaal bestanden van Gravity Forms vertalen deze teksten helaas niet. Dit heeft te maken met dat de jQuery UI bibliotheek op een andere manier om gaat met vertalingen dan WordPress. Meer informatie hierover is te lezen op de i18n wiki pagina van de jQuery UI bibliotheek. De Nederlandse jQuery UI datepicker vertalingen zijn gelukkig gewoon beschikbaar in de jQuery UI code repository.

Voor het gemak kun je de vertaling ook downloaden vanaf mijn website. Zodra je dit bestand hebt gedownload moet je binnen je WordPress theme nog een koppeling maken naar dit bestand. Hiervoor plaats je het bestand in de volgende locatie binnen je theme:

httpdocs\wp-content\themes\je-eigen-theme-map\scripts\jquery.ui.datepicker-nl.js

De meeste logisch stap is om binnen je header.php bestand een link te maken naar dit bestand.

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.ui.datepicker-nl.js"></script>

In eerste lijkt dit goed te werken, maar helaas resulteert dit in bepaalde gevallen in JavaScript fouten. Zodra je namelijk een Gravity Forms formulier zonder datepicker gebruikt zul je de volgende foutmelding krijgen.

$.datepicker is undefined
/wp-content/themes/je-eigen-theme-map/scripts/jquery.ui.datepicker-nl.js
Line 4

Dit komt doordat Gravity Forms de datepicker scripts alleen toevoegt zodra deze nodig zijn. Dit is terug te zien in het volgende bestand van de Gravity Forms plugin:

httpdocs\wp-content\plugins\gravityforms\form_display.php

if(self::has_date_field($form)){
	wp_enqueue_script("gforms_ui_datepicker", GFCommon::get_base_url() . "/js/jquery-ui/ui.datepicker.js", array("jquery"), GFCommon::$version, true);
	wp_enqueue_script("gforms_datepicker", GFCommon::get_base_url() . "/js/datepicker.js", array("gforms_ui_datepicker"), GFCommon::$version, true);
	$jquery_enqueued = true;
}

Om die reden kun je beter controleren of de “gforms_ui_datepicker” JavaScript wordt gebruikt. Vervolgens kun je het script met de Nederlandse vertaling toevoegen. In het volgende code fragment is te zien hoe je dit doet:

/**
 * Gravity forms translate datepicker
 */
function custom_translate_datepicker() {
	if(wp_script_is('gforms_ui_datepicker')) {
		wp_enqueue_script('gforms_ui_datepicker_nl', get_bloginfo('template_directory') . '/scripts/jquery.ui.datepicker-nl.js', array('gforms_ui_datepicker'), false, true);
	}
}

add_action('wp_print_scripts', 'custom_translate_datepicker');

Bovenstaande code kun je toevoegen aan het bestand functions.php binnen je theme.

Categorieën
PHP WordPress

Gravity Forms tab index probleem

In één van de websites die ik bij Pronamic heb ontwikkeld had ik een probleem met de tabindex van een aantal Gravity Forms formulieren op 1 pagina. De tabindex van de invoervelden van deze formulieren begonnen namelijk allemaal op 1.

<input name="input_1" id="input_1_1" type="text" value="" class="medium" tabindex="1" />
<input name="input_1" id="input_4_1" type="email" value="" class="small" tabindex="1" />

Hierdoor was het niet mogelijk om met behulp van de TAB toets eenvoudig door de verschillende invoervelden te navigeren. Gelukkig was de oplossing na een zoekopdracht bij Google snel gevonden.

Sinds Gravity Forms v1.3.13 Beta 1 zijn er WordPress filters beschikbaar om de tabindex aan te passen. In de changelog van Gravity Forms is daarover het volgende opgenomen:

- Added filter to define the tab index start value.
	add_filter("gform_tabindex_4", create_function("", "return false;"));

De 4 in gform_tabindex_4 staat voor de unieke Gravity Form id. De volgende code zorgt er voor dat Gravity Form met id 4 begint met een tabindex van 100.

add_filter('gform_tabindex_4', create_function('', 'return 100;'));
Categorieën
WordPress

WordPress Google Maps

Er zijn al een flink aantal Google Maps plugins te vinden in WordPress Plugin Directory. De zoekopdracht “google maps” in de WordPress Plugin Directory levert al 212 resultaten op. Toch vonden we bij Pronamic deze plugins niet altijd even handig. De beschikbare plugins hebben namelijk vaak een aantal minpunten:

  • Google Maps API versie 2

    Veel bestaande Google Maps plugins werken nog met versie 2 van de Google Maps API. Om deze API te gebruiken moet je een zogenaamde API sleutel aanvragen. Deze sleutel moet vervolgens weer worden verwerkt in de plugin configuratie. In versie 3 van de Google Maps API is dit echter niet meer nodig.

  • WordPress Shortcode API

    Een groot deel van de plugins werken met de WordPress Shortcode API. Dit is een erg krachtige techniek, maar niet altijd even gebruiksvriendelijk. In de inhoud van een bericht of pagina is namelijk een shortcode te zien:

    [google-map-sc external_links="true" zoom="3"]

    De notatie en syntax van shortcodes zijn niet altijd voor iedereen even duidelijk.

  • Extra tabellen in database

    Enkele plugins creëren extra tabellen in je WordPress database om data in op te slaan. In veel gevallen is dat volgens mij nergens voor nodig en wordt daarmee alleen de database vervuilt. WordPress biedt genoeg functionaliteiten om extra data op te slaan bij een bericht of pagina.

  • Custom Post Types

    Bijna alle plugins zijn ontwikkeld voordat WordPress 3 was gelanceerd. Daardoor zijn de plugins niet altijd even goed aangepast op de nieuwe functionaliteiten van WordPress 3. Zo zijn veel bestaande plugins alleen gericht op berichten en pagina’s, maar niet op andere zelf gedefinieerde post typen.

Om die reden hebben we zelf een nieuwe Google Maps plugin ontwikkeld. Deze plugin maakt gebruik van de Google Static Maps API en de nieuwe Google Maps JavaScript V3 API. Hierdoor is het niet nodig om een API sleutel aan te vragen en zal ook zonder JavaScript ondersteuning een map weergegeven worden.

Wat met name leuk is aan deze plugin dat je per post type kunt aangeven of de Google Maps functionaliteit aan of uit moet staan. Als je als ontwikkelaar gebruik maakt van de register_post_type functie van WordPress is deze plugin erg interessant. Het is namelijk heel eenvoudig om de Google Maps functionaliteit toe te voegen aan je eigen gedefinieerde post type.

Categorieën
WordPress

Weblog remcotolsma.nl online

Ik heb de domeinnaam remcotolsma.nl al een tijdje in mijn bezit, maar deed er altijd weinig mee. Vanavond heb ik maar even de tijd genomen om er een WordPress installatie op te plaatsen. Verwacht echter nu niet dat ik dagelijks, wekelijks of maandelijks berichten ga plaatsen. Wil je meer over me weten, volg me dan op één van de volgende websites: