Simbo.de http://simbo.de Digitales Allerlei. Mon, 21 Jun 2010 13:50:13 +0000 http://wordpress.org/?v=2.9 en hourly 1 I love jazz. http://simbo.de/blog/2010/06/i-love-jazz/ http://simbo.de/blog/2010/06/i-love-jazz/#comments Mon, 21 Jun 2010 13:43:04 +0000 Simbo http://simbo.de/?p=478 Wordpress 3.0 “Thelonious” ist vor ein paar Tagen erschienen und bringt viele langersehnte Funktionen nun von Haus aus mit: individuelle Posts und Navigationen, Header- und Hintergrundbilder für jedes Post und vieles mehr…
Nehmt euch 3 Minuten und schaut euch das Video an!

]]> http://simbo.de/blog/2010/06/i-love-jazz/feed/ 1 The Survey 2009 http://simbo.de/blog/2009/12/the-survey-2009/ http://simbo.de/blog/2009/12/the-survey-2009/#comments Thu, 31 Dec 2009 18:18:28 +0000 Simbo http://simbo.de/?p=469 Zum dritten Mal in Folge führt A List Apart wieder am Jahresende eine Umfrage unter allen “Web-Workern” durch. Dabei werden zahlreiche Aspekte wie professionelle Fähigkeiten, Bildungsstand, Bezüge und Leistungen sowie Karriereaussichten unter die Lupe genommen.

It’s to help the world understand who we are and what we do that, each year since 2007, we’ve asked you, the members of the web design community, a few dozen questions about your professional life, and compared your answers to those of your colleagues. Each time we’ve asked, over 30,000 of you have kindly obliged with details about your salary, location, background, and more. The data that you provide and we analyze is the only significant information about our profession as a profession to be published anywhere, by anyone. That makes it important. That makes you and your answers very important indeed.

Wie jedes Jahr habe auch ich wieder teilgenommen und solltest Du dich auch zur “web design community” zählen, mach doch auch mit…

]]> http://simbo.de/blog/2009/12/the-survey-2009/feed/ 0 Depression – Wenn Promis am Leistungsdruck zerbrechen http://simbo.de/blog/2009/12/depression-wenn-promis-am-leistungsdruck-zerbrechen/ http://simbo.de/blog/2009/12/depression-wenn-promis-am-leistungsdruck-zerbrechen/#comments Sat, 19 Dec 2009 15:11:46 +0000 Simbo http://simbo.de/?p=463 Titanic Cover - Dezember 2009

Das Cover der aktuellen Ausgabe der Titanic fand ich einfach so gelungen, dass ich es niemandem vorenthalten möchte.

:)

]]> http://simbo.de/blog/2009/12/depression-wenn-promis-am-leistungsdruck-zerbrechen/feed/ 0 pretty_date – relative Zeitangaben in Worten http://simbo.de/blog/2009/12/pretty-date-relative-zeitangaben-in-worten/ http://simbo.de/blog/2009/12/pretty-date-relative-zeitangaben-in-worten/#comments Thu, 10 Dec 2009 15:52:06 +0000 Simbo http://simbo.de/site/?p=75 Die Funktion pretty_date() erwartet als Parameter ein beliebiges in englischer Textform angegebenes Datum (siehe strtotime) und liefert eine Zeitangabe in Worten relativ zum jetzigen Zeitpunkt zurück, z.b. “vor einer viertel Stunde”, “heute Morgen”, “gestern Abend” oder “vor 2 Wochen”.

string pretty_date ( [ string $datestr='' ] )

Definition der Datumsangaben

Liegt das Datum weniger als 12,5 Minuten in der Vergangenheit wird ein String in folgender Form zurückgeliefert:
“vor einer Sekunde”, “vor X Sekunden”, “vor einer Minute”, “vor X Minuten”
Bei weniger als 60 Minuten:
“vor einer viertel Stunde”, “vor einer halben Stunde”, “vor einer dreiviertel Stunde”
Bei weniger als 6 Stunden:
“vor einer Stunde”, “vor X Stunden”
Bei weniger als 36 Stunden:
“heute Vormittag”, “letzte Nacht”, “gestern Abend”, “vorgestern Nachmittag”…
Dabei gilt:

“Morgen”
(Tag beginnt) 05:00 – 9:00
“Vormittag”
09:00 – 11:30
“Mittag”
11:30 – 13:30
“Nachmittag”
13:30 – 18:00
“Abend”
18:00 – 22:30
“Nacht”
22:30 – 05:00 (Tag endet)
Bei weniger als 7 Tagen:
“vor einem Tag”, “vor X Tagen”
Bei weniger als 4 Wochen:
“vor einer Woche”, “vor X Wochen”
Bei weniger als 12 Monaten:
“vor einem Monat”, “vor X Monaten”
Bei weniger als 18 Monaten:
“vor einem Jahr”, “vor eineinhalb Jahren”
Bei mehr als 18 Monaten:
“vor X Jahren”

Quelltext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

function pretty_date( $datestr='' ) {
	$now = time();
	$date = strtotime($datestr);
	$d = $now-$date;
	if( $d < 60 ) {
		$d = round($d);
		return 'vor '.($d==1?'einer Sekunde':$d.' Sekunden');
	}
	$d = $d/60;
	if( $d < 12.5 ) {
		$d = round($d);
		return 'vor '.($d==1?'einer Minute':$d.' Minuten');
	}
	switch( round($d/15) ) {
		case 1:
			return 'vor einer viertel Stunde';
		case 2:
			return 'vor einer halben Stunde';
		case 3:
			return 'vor einer dreiviertel Stunde';
	}
	$d = $d/60;
	if( $d < 6 ) {
		$d = round($d);
		return 'vor '.($d==1?'einer Stunde':$d.' Stunden');
	}
	if( $d < 36 ) {
		// ein Tag beginnt um 5 Uhr morgens
		$day_start = 5;
		if( date('j',($now-$day_start*3600)) == date('j',($date-$day_start*3600)) )
			$r = 'heute';
		elseif( date('j',($now-($day_start+24)*3600)) == date('j',($date-$day_start*3600)) )
			$r = 'gestern';
		else
			$r = 'vorgestern';
		$hour_date = intval(date('G',$date)) + (intval(date('i',$date))/60);
		$hour_now = intval(date('G',$now)) + (intval(date('i',$now))/60);
		if( $hour_date>=22.5 || $hour_date<$day_start ) {
			$r = $r=='gestern' ? 'letzte Nacht' : $r.' Nacht';
		}
		elseif( $hour_date>=$day_start && $hour_date<9 )
			$r .= ' Morgen';
		elseif( $hour_date>=9 && $hour_date<11.5 )
			$r .= ' Vormittag';
		elseif( $hour_date>=11.5 && $hour_date<13.5 )
			$r .= ' Mittag';
		elseif( $hour_date>=13.5 && $hour_date<18 )
			$r .= ' Nachmittag';
		elseif( $hour_date>=18 && $hour_date<22.5 )
			$r .= ' Abend';
		return $r;
	}
	$d = $d/24;
	if( $d < 7 ) {
		$d = round($d);
		return 'vor '.($d==1?'einem Tag':$d.' Tagen');
	}
	$d_weeks = $d/7;
	if( $d_weeks<4 ) {
		$d = round($d_weeks);
		return 'vor '.($d==1?'einer Woche':$d.' Wochen');
	}
	$d = $d/30;
	if( $d<12 ) {
		$d = round($d);
		return 'vor '.($d==1?'einem Monat':$d.' Monaten');
	}
	if( $d<18 )
		return 'vor einem Jahr';
	if( $d<21 )
		return 'vor eineinhalb Jahren';
	$d = round($d/12);
	return 'vor '.$d.' Jahren';
}
]]> http://simbo.de/blog/2009/12/pretty-date-relative-zeitangaben-in-worten/feed/ 6 AJAX Kommentare http://simbo.de/blog/2009/12/ajax-kommentare/ http://simbo.de/blog/2009/12/ajax-kommentare/#comments Wed, 09 Dec 2009 16:44:26 +0000 Simbo http://simbo.de/site/?p=299 Es gibt zahlreiche Plugins für Wordpress, die dafür sorgen, dass Kommentare von Besuchern per AJAX eingetragen werden. Die meisten davon schaffen es nicht lange mit den aktuellen Versionen von Wordpress kompatibel zu bleiben und diejenigen die es schaffen, sind so überladen mit Schnickschnack und hässlichen Frontendgestaltungen, dass ich soviel Zeit brauche alles nach meinen Wünschen anzupasssen, da kann ich gleich alles von vornerein neu machen.

Zuerst mal brauche ich dafür ein PHP-Skript, dass nicht nur die Formulardaten verarbeitet und bei erfolgreicher Überprüfung ein neues Kommentar anlegt, sondern auch eine Ausgabe erzeugt, die man mit Javascript leicht verarbeiten kann.

Die normale Kommentarverarbeitung in Wordpress 2.8+

Ohne AJAX übernimmt die Datei wp-comments-post.php, die sich im Wordpress-Stammverzeichnis befindet, das Verarbeiten des Kommentarformulars. Kann ein Kommentar, aus welchen Gründen auch immer, nicht eingetragen werden, gibt das Skript über die Wordpress-interne Funktion wp_die() eine kleine HTML-Seite mitsamt Fehlerbeschreibung aus. Sollte nichts gegen das Erstellen des Kommentars sprechen, wird es angelegt und mit der ebenfalls Wordpress-internen Funktion wp_redirect() wird auf die zum Kommentar gehörende Artikelseite weitergeleitet.

Die Vermeidung von Doppelpostings und Flooding wird nicht direkt innerhalb von wp-comment-post.php geregelt, sondern im Zuge der Funktion wp_new_comment(). Die per Filter im Laufe der Funktion angewandten Funktionen wp_allow_comment() und check_comment_flood_db() (beide definiert in wp-includes/comment.php) sind dafür verantwortlich und liefern bei positivem Befund ebenfalls eine HTML-Seite per wp_die(). Aber hier haben die Wordpress-Entwickler bereits Vorarbeit geleistet: Ist eine Konstante namens DOING_AJAX definiert, wird bei Doppelpostings und Flooding stattdessen direkt die() verwendet und die Fehlermeldung als reiner Text ausgegeben.

Los gehts…

Ich nehme mir also die Datei wp-comments-post.php als Vorlage für mein PHP-Skript zur Formularverarbeitung mit AJAX. Dazu erstelle ich eine Kopie der Datei unter dem Namen new-comment.php und speichere diese im Unterverzeichnis ajax meines Themeordners. Falls bei einem zukünftigen Update von Wordpress die wp-comments-post.php verändert wird und ich somit meine new-comment.php neu erstellen muss, markiere ich vorsichtshalber alle geänderten Stellen im Quelltext um die Anpassungen später besser nachvollziehen und wiederholen zu können. Ich habe auf Wordpress.org auch bereits den Vorschlag gemacht, diese Anpassungen von Haus aus in wp-comments-post.php zu integrieren um die Implementierung von AJAX Kommentaren in Zukunft zu vereinfachen.

Damit das Skript innerhalb der Wordpress-Umgebung ausgeführt wird, muss der Pfad zu wp-load.php ziemlich am Anfang der Datei angepasst werden. Direkt davor füge ich define('DOING_AJAX',1); ein. Damit anstatt der HTML-Fehlerseiten reine Textnachrichten ausgegeben werden, ersetze ich alle Vorkommen von wp_die() durch die Funktion die(). Die letzten 3 Zeilen der Datei, die verantwortlich für den Redirect sind, kommentiere ich aus. In der Variablen $comment ist nun das Objekt des eben erstellten Kommentars gespeichert. Nachdem ich den Content des Kommentars gefiltert und das Datum formatiert habe, verwandle ich das Objekt in einen JSON-String und gebe ihn per die() aus. Das PHP-Skript liefert nun also im Fehlerfall eine Textmeldung zurück und im Erfolgsfalls das eben erstellte Kommentar.

Meine new-comment.php sieht jetzt so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

/**-----------------------------------------------------------------------------
 *	start	/wp-comments-post.php
 *	changes start with //## and end with //^^
 */
 
if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) {
	header('Allow: POST');
	header('HTTP/1.1 405 Method Not Allowed');
	header('Content-Type: text/plain');
	exit;
}
 
/** Sets up the WordPress Environment. */
//## require( dirname(__FILE__) . '/wp-load.php' );
define('DOING_AJAX',1);
require  '../../../../wp-load.php' ;
//^^
 
nocache_headers();
 
$comment_post_ID = (int) $_POST['comment_post_ID'];
 
$status = $wpdb->get_row( $wpdb->prepare("SELECT post_status, comment_status FROM $wpdb->posts WHERE ID = %d", $comment_post_ID) );
 
if ( empty($status->comment_status) ) {
	do_action('comment_id_not_found', $comment_post_ID);
	exit;
} elseif ( !comments_open($comment_post_ID) ) {
	do_action('comment_closed', $comment_post_ID);
	//## wp_die( __('Sorry, comments are closed for this item.') );
	die( __('Sorry, comments are closed for this item.') );
	//^^
} elseif ( in_array($status->post_status, array('draft', 'pending') ) ) {
	do_action('comment_on_draft', $comment_post_ID);
	exit;
} else {
	do_action('pre_comment_on_post', $comment_post_ID);
}
 
$comment_author       = ( isset($_POST['author']) )  ? trim(strip_tags($_POST['author'])) : null;
$comment_author_email = ( isset($_POST['email']) )   ? trim($_POST['email']) : null;
$comment_author_url   = ( isset($_POST['url']) )     ? trim($_POST['url']) : null;
$comment_content      = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null;
 
// If the user is logged in
$user = wp_get_current_user();
if ( $user->ID ) {
	if ( empty( $user->display_name ) )
		$user->display_name=$user->user_login;
	$comment_author       = $wpdb->escape($user->display_name);
	$comment_author_email = $wpdb->escape($user->user_email);
	$comment_author_url   = $wpdb->escape($user->user_url);
	if ( current_user_can('unfiltered_html') ) {
		if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) {
			kses_remove_filters(); // start with a clean slate
			kses_init_filters(); // set up the filters
		}
	}
} else {
	if ( get_option('comment_registration') || 'private' == $status->post_status )
		//## wp_die( __('Sorry, you must be logged in to post a comment.') );
		die( __('Sorry, you must be logged in to post a comment.') );
		//^^
}
 
$comment_type = '';
 
if ( get_option('require_name_email') && !$user->ID ) {
	if ( 6 > strlen($comment_author_email) || '' == $comment_author )
		//## wp_die( __('Error: please fill the required fields (name, email).') );
		die( __('Error: please fill the required fields (name, email).') );
		//^^
	elseif ( !is_email($comment_author_email))
		//## wp_die( __('Error: please enter a valid email address.') );
		die( __('Error: please enter a valid email address.') );
		//^^
}
 
if ( '' == $comment_content )
	//## wp_die( __('Error: please type a comment.') );
	die( __('Error: please type a comment.') );
	//^^
 
$comment_parent = isset($_POST['comment_parent']) ? absint($_POST['comment_parent']) : 0;
 
$commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'comment_parent', 'user_ID');
 
$comment_id = wp_new_comment( $commentdata );
 
$comment = get_comment($comment_id);
if ( !$user->ID ) {
	$comment_cookie_lifetime = apply_filters('comment_cookie_lifetime', 30000000);
	setcookie('comment_author_' . COOKIEHASH, $comment->comment_author, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
	setcookie('comment_author_email_' . COOKIEHASH, $comment->comment_author_email, time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
	setcookie('comment_author_url_' . COOKIEHASH, esc_url($comment->comment_author_url), time() + $comment_cookie_lifetime, COOKIEPATH, COOKIE_DOMAIN);
}
 
//##
// $location = empty($_POST['redirect_to']) ? get_comment_link($comment_id) : $_POST['redirect_to'] . '#comment-' . $comment_id;
// $location = apply_filters('comment_post_redirect', $location, $comment);
// wp_redirect($location);
$comment->comment_content = apply_filters('comment_text',$comment->comment_content);
$comment->comment_date = date('l, j. F Y G:i',strtotime($comment->comment_date));
die(json_encode($comment));
//^^
 
/**-----------------------------------------------------------------------------
 *	end	/wp-comments-post.php
 */

Jetzt da ich eine Datei habe, die meine AJAX-Anfrage verarbeiten und beantworten kann, kann ich das zugehörige Javascript basteln. Ein div wird beim Formular eingefügt um den Ladestatus oder eine Fehlermeldung anzuzeigen. Der Rest ist ein simpler jQuery.ajax()-Aufruf, der beim success-Event den zurückgelieferten Text als Fehlermeldung in besagtem div anzeigt oder, sollte der Text mit einem { beginnen, ihn als JSON-Objekt des neuen Kommentars behandelt. Aus den Kommentardaten lasse ich ein HTML-Konstrukt erstellen, das dem Kommentarlisteneintrag meines Templates entspricht, und füge es in dann in die Liste ein. Sollte es auf der Seite noch keine Kommentare geben, wird der gesamte notwendige Bereich mitsamt Überschrift erstellt und eingefügt. Den HTML-Teil und das Einreihen in das DOM sollte man natürlich an sein jeweiliges Theme anpassen. Bei mir sieht das dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

jQuery(document).ready( function() {
 
	// ajax comments
	if( jQuery('#commentform').length>0 ) {
		var ac = {
			form: jQuery('#commentform'),
			response: jQuery('<div id="response" />').hide()
		};
		ac.form.before(ac.response).submit(function(){
			jQuery.ajax({
				type: 'POST',
				url: TPLDIR+'ajax/new-comment.php',
				dataType: 'text',
				data: ac.form.serialize(),
				beforeSend: function() {
					ac.response.empty().removeClass('error success').addClass('loading').slideDown('fast');
				},
				success: function(r){
					if( r.substr(0,1)!='{' )
						ac.response.empty().removeClass('loading').addClass('error').text(r);
					else {
						ac.form.find('textarea').val('')
						ac.response.empty().removeClass('loading').addClass('success').text('Dein Kommentar wurde erfolgreich eingetragen.');
						c = eval('('+r+')');
						var comment_count = jQuery('ol.commentlist li').length;
						var comment_html = '<li id="comment-'+c.comment_ID+'" class="comment'+(c.user_id>0?' user':'')+(comment_count==0?' first':'')+'">'
							+'<div class="comment-count">'+(parseInt(comment_count)+1)+'</div>'
							+'<div class="comment-author">'+(c.comment_author_url!=''?'<a href="'+c.comment_author_url+'">'+c.comment_author+'</a>':c.comment_author)+'</div>'
							+'<div class="comment-date" title="'+c.comment_date+'">vor einer Sekunde'+(c.comment_approved==0?' (noch nicht freigeschaltet)':'')+'</div>'
							+'<div class="entry">'+c.comment_content+'</div>'
							+'</li>';
						if( comment_count == 0 )
							jQuery('<div class="comments"><h3 class="post-title">Bisher eine Reaktion</h3><ol class="commentlist">'+comment_html+'</ol></div>').hide().insertBefore('#respond').slideDown('medium');
						else {
							jQuery('#comments h3').text('Bisher '+(parseInt(comment_count)+1)+' Reaktionen')
							jQuery(comment_html).hide().appendTo('ol.commentlist').slideDown('medium');
						}
					}
					jQuery('#submit').blur();
				},
				error: function(XMLHttpRequest, textStatus, errorThrown){
					ac.response.empty().removeClass('loading').addClass('error').text("Fehler: Die AJAX-Anfrage ist fehlgeschlagen ("+textStatus+")");
					jQuery('#submit').blur();
				}
			});
			return false;
		});
	}
 
});

Damit alles noch akzeptabel aussieht, braucht es noch eine Loading-Animation, die ich mir bei Ajaxload.info erstelle, und eine Priese CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*----- ajax comments -----*/
 
#response {
	height:3em;
}
 
#response.loading {
	background: transparent url('images/loading.gif') top left no-repeat;
}
 
#response.success {
	color:#222222;
}
 
#response.error {
	color:#aa1010;
}

Fertig.

Die Kommentare werden nun per AJAX eingetragen, es werden Ladestatus, Fehler- bzw. Erfolgsmeldungen am Formular angezeigt und das neue Kommentar wird direkt in die Kommentarliste eingefügt. Verschachtelte Kommentare habe ich in diesem Skript nicht beachtet, da ich sie bisher nicht nutze. Da aber im JSON-Objekt des Kommentars auch die ID des Elternkommentars enthalten ist, dürfte es ein Leichtes sein, die entsprechende Stelle im DOM zu finden und es dort einzufügen.

]]> http://simbo.de/blog/2009/12/ajax-kommentare/feed/ 13 WP-Syntax Quelltexte mit Lightbox-Effekt http://simbo.de/blog/2009/12/wp-syntax-quelltexte-mit-lightbox-effekt/ http://simbo.de/blog/2009/12/wp-syntax-quelltexte-mit-lightbox-effekt/#comments Tue, 08 Dec 2009 17:11:44 +0000 Simbo http://simbo.de/site/?p=217 Quelltexte brauchen Platz auf dem Bildschirm – sowohl in der vertikalen als auch in der horizontalen. Ihnen innerhalb einer Webseite angemessenen Platz zu verschaffen, würde so ziemlich jedem Seitentemplate wortwörtlich den Rahmen sprengen. Trotzdem wollen Quelltexte im Detail betrachtet werden ohne ständig in zwei Achsen scrollen zu müssen. Nach dem ich mich mit diesem Problem nun fast den ganzen Tag beschäftigt habe, bin ich denke ich mittlerweile zu einer sehr gute Lösung gekommen.

Mit Hilfe von jQuery wird zu jedem von WP-Syntax erzeugten Quelltextfeld ein Link “Fenster vergrößern” eingefügt. Klickt man auf den Link, wird ähnlich wie bei Lightbox/Thickbox-Effekten eine abdunkelnde Ebene eingeblendet, die einen Klon des betreffenden Quelltextfeldes enthält. Dieser Klon passt sich je nach Browserfenstergröße an, um die zur Verfügung stehende Fläche großzügig auszunutzen. Um das Overlay wieder auszublenden kann man entweder die Tasten ESC oder Q drücken, auf “Fenster schließen” klicken oder einfach in den abgedunkelten Hintergrund. Eine Demonstration ist an jeder Quelltextbox hier auf der Seite zu sehen.

Die nötigen Anpassungen der Stylesheets in der Datei styles.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

/*----- wp_syntax lightbox (wsl) -----*/
 
#wsl-wrap, #wsl-overlay, #wsl-box {
	position:fixed !important;
	position:absolute;
	z-index:9999;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
 
#wsl-overlay {
	background-color:#000000;
	cursor:pointer;
}
 
#wsl-box {
	text-align:left;
	width:auto;
	height:auto;
}
 
#wsl-close {
	background:#222222;
	text-align:center;
	color:#bbbbbb;
	cursor:pointer;
	padding: 2px 0 2px 0;
}
 
#wsl-close.hover,
#wsl-close:hover {
	color:#bb5500;
}
 
#wsl-box .wp_syntax {
	background:#ffffff;
	margin:0;
	max-height:none;
	height:auto;
	width:auto;
}
 
.wsl-open {
	color:#666666;
	cursor:pointer;
	float:right;
	font-size:10px;
}
 
.wsl-open.hover,
.wsl-open:hover {
	color:#bb5500;
}

Falls nicht sowieso schon geschehen, das Registrieren und Einreihen des Javascripts, abhängig von jQuery, in der Datei functions.php:

1
2

wp_register_script('scripts',TPLDIR.'scripts.js',array('jquery'));
wp_enqueue_script('scripts');

Zu guter Letzt das Herzstück, der Javascript-Code, in der Datei scripts.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

jQuery(document).ready( function() {
	// wp-syntax lightbox (wsl)
	if ( (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) && jQuery('.wp_syntax').length>0 ) {
		var wsl = {
			wrap	:	jQuery('<div id="wsl-wrap"></div>'),
			overlay	:	jQuery('<div id="wsl-overlay"></div>').css('opacity',0.7),
			box	:	jQuery('<div id="wsl-box"></div>'),
			close	:	jQuery('<div id="wsl-close">Fenster schlie&szlig;en</div>'),
			open	:	jQuery('<div class="wsl-open">Fenster vergr&ouml;&szlig;ern</div>'),
			speed	:	'fast',
			fadeIn	:	function(wp_syntax) {
						wsl.box.empty()
							.append(wsl.close.clone(true))
							.append( wp_syntax );
						wsl.fit();
						wsl.wrap.fadeIn(wsl.fade);
						return false;
					},
			fadeOut	:	function() {
						wsl.wrap.fadeOut(wsl.fade);
						return false;
					},
			fit	:	function() {
						var ww = jQuery(window).width(),
							wh = jQuery(window).height(),
							mw = Math.floor(ww*0.94),
							mh = Math.floor(wh*0.94)-20;
						wsl.box.css({
							width: mw+'px',
							left: Math.floor(ww*0.03)+'px',
							top: Math.floor(wh*0.03)+'px'
						}).find('.wp_syntax').css({
							maxWidth: mw+'px',
							maxHeight: mh+'px'
						});
					}
		};
		jQuery.each([ wsl.close, wsl.overlay ], function(i) {
			var el = jQuery(this);
			el.click( function(){ return wsl.fadeOut() } )
				.hover( function(){el.addClass('hover')}, function(){el.removeClass('hover')} );
		});
		jQuery('body').append( wsl.wrap.append(wsl.overlay).append(wsl.box).hide() );
		jQuery('.wp_syntax').each( function(i) {
			var wp_syntax = jQuery(this);
			wp_syntax.css('margin-top',0).before( wsl.open.clone().click( function(){ return wsl.fadeIn(wp_syntax.clone()) } ) );
		});
		jQuery(window).resize( function() {
			wsl.fit();
		}).keydown( function(ev) {
			switch(ev.keyCode) {
				case 27: // [Esc]
				case 81: // [Q]
					wsl.fadeOut();
				break;
			}
		})
	}
});
]]> http://simbo.de/blog/2009/12/wp-syntax-quelltexte-mit-lightbox-effekt/feed/ 0 Rauch, Licht, Kaffeeflecken oder einfach gute Pinsel http://simbo.de/blog/2009/12/rauch-licht-kaffeeflecken-oder-einfach-gute-pinsel/ http://simbo.de/blog/2009/12/rauch-licht-kaffeeflecken-oder-einfach-gute-pinsel/#comments Tue, 08 Dec 2009 06:22:46 +0000 Simbo http://simbo.de/?p=421 Auf Colorburned gibt es hochwertige Brush-Sets für Photoshop und Illustrator gratis zum Download. Das Angebot reicht von einer großen Auswahl an normalen Farbpinseln über Tropfen-, Flecken- und Deformationseffekte bis hin zu Lichtreflexionen, Rauch- und Feuereffekten. Sowas kann man immer gut gebrauchen…

Colorburned Photoshop Smoke BrushesColorburned Smoke BrushColorburned Light BrushesColorburned Paint Brushes

http://colorburned.com/brushes/

]]> http://simbo.de/blog/2009/12/rauch-licht-kaffeeflecken-oder-einfach-gute-pinsel/feed/ 0 WP-Syntax und fehlerhaftes Escaping? http://simbo.de/blog/2009/12/wp-syntax-und-fehlerhaftes-escaping/ http://simbo.de/blog/2009/12/wp-syntax-und-fehlerhaftes-escaping/#comments Mon, 07 Dec 2009 18:51:57 +0000 Simbo http://simbo.de/site/?p=91 Der Wordpress Plugin WP-Syntax leistet bei mir hervorragende Arbeit bei der Einbindung von Quelltexten aller Art in meine Artikel. Leider wurden bisher des öfteren Zeichen wie <, > und & innerhalb der Quelltexte im Content als die jeweiligen HTML-Sonderzeichencodes &lt;, &gt; und &amp; angezeigt. Zuerst hatte ich fälschlicherweise den Verdacht, es liegt an den Content-Filtern des Plugins selbst, da dieses Thema auch auf anderen Seiten (z.B. hier und hier) bereits diskutiert wird.

Aber wie sich herausstellte, lag es nicht an WP-Syntax, sondern an der aktivierten Option “falsch verschachteltes XHTML automatisch korrigieren” unter “Einstellungen / Schreiben” in der Wordpress Konfiguration. Die ersetzte nicht nur fälschlicherweise die Sonderzeichen zweifach, wodurch am Ende die Zeichencodes im Artikel angezeigt werden, sondern fügte sogar oftmals ein zweites </pre> hinter dem Quelltext ein und sorgte somit dafür, dass das XHTML erst recht falsch verschachtelt wurde.

Option deaktivert. Ein Problem weniger.

]]> http://simbo.de/blog/2009/12/wp-syntax-und-fehlerhaftes-escaping/feed/ 0 Nützliche Konstanten für Wordpress Templates und Plugins http://simbo.de/blog/2009/12/nutzliche-konstanten-fur-wordpress-templates-und-plugins/ http://simbo.de/blog/2009/12/nutzliche-konstanten-fur-wordpress-templates-und-plugins/#comments Mon, 07 Dec 2009 17:20:52 +0000 Simbo http://simbo.de/site/?p=160 Für wiederholt in Templatedateien und Pluginscripts verwendete Variablen und Funktionen mit konstanten Rückgabewerten lohnt es sich, in der functions.php Konstanten anzulegen und diese stattdessen zu verwenden. Das spart nicht nur Tipparbeit sondern verbessert auch die Performance.

Ich verwende meist folgenden Code-Block als Vorlage:

1
2
3
4
5
6
7
8

define('HOME', get_option('home').'/' );
define('NAME', get_bloginfo('name') );
define('TPLPATH', ABSPATH.'wp-content/themes/'.get_option('template').'/' );
define('TPLDIR', get_bloginfo('template_directory').'/' );
define('IMGDIR', TPLDIR.'images/' );
define('UPLOADDIR', get_option('upload_url_path').'/' );
define('TAGURL', HOME.get_option('tag_base').'/' );
define('CATURL', HOME.get_option('category_base').'/' );
]]> http://simbo.de/blog/2009/12/nutzliche-konstanten-fur-wordpress-templates-und-plugins/feed/ 0 Der Favicon Spickzettel http://simbo.de/blog/2009/12/der-favicon-spickzettel/ http://simbo.de/blog/2009/12/der-favicon-spickzettel/#comments Mon, 07 Dec 2009 15:11:47 +0000 Simbo http://simbo.de/site/?p=154 Zu jedem Webprojekt muss früher oder später auch ein Favicon produziert und eingebaut werden. Und immer wenn es wieder einmal soweit ist, brauche ich die folgenden Informationen griffbereit:

Defaultgrößen und -Farbtiefen für Favicons:

  • ICO: 16×16 oder 32×32 und 16 bis 16 Millionen Farben
  • GIF und PNG: 16×16 und 256 Farben

Achtung: Internet Explorer bis einschließlich Version 8 unterstützt ausschließlich das ICO-Format.

Die Verknüpfungen im XHTML-Header zu den Favicons – auch hier braucht der IE mit “shortcut icon” eine Extrawurst:

1
2
3

<link rel="SHORTCUT ICON" href="http://simbo.de/favicon.ico" />
<link rel="icon" type="image/vnd.microsoft.icon" href="http://simbo.de/favicon.ico" />
<link rel="icon" type="image/png" href="http://simbo.de/favicon.png" />

ICO Dateien unter Ubuntu erstellen

Das Programm icotool, dass im Paket icoutils (universe) enthalten ist, kann alles was nötig ist. Hier die wichtigsten Parameter:

1
2
3

icotool -x *.ico				# alle ICO nach PNG
icotool -c icon.png -o icon.ico			# ein PNG nach ICO
icotool -c -o icon.ico 1.png 2.png 3.png	# mehrere PNGs zu einem ICO
]]> http://simbo.de/blog/2009/12/der-favicon-spickzettel/feed/ 0