bueltge.de [by:ltge.de] » StyleSheet

Simple Media Queries Tester

Frank Bültge — Tue, 21 Dec 2010 09:18:21 +0000

CSS Media Queries dringen immer weiter vor und die Möglichkeiten der Anpassung bei der Größe einer Website an die den entsprechenden Client bzw. die Bildgröße des Browsers werden notwendiger. Die Media Queries sind eine Lösung, die ihre Vor- und Nachteile haben. Beim Einsetzen empfand ich es manchmal als Nachteil, dass ich mir nicht alle Größe gleichzeitig ansehen konnte. Warum also nicht einfach ein kleines Script und das iframe-Element sinnvoll gebrauchen.
Wer mag und dies braucht, der findet hier nun eine simple und einfache Lösung oder kann auch gern das laufende Script in meinem "Test-Labor" nutzen. Die Version hat auch einige weitere Spielereien inne, so kann man außerdem die Werte der iframes anpassen und diese Daten speichere ich mittels der DOM Storage-API innerhalb eines Browsers lokal. Meine Lösung im Labor hat keinen Fallback und sollte nur mit Browsers sauber laufen, die die Möglichkeit der Storage API unterstützen.

Die Lösung kann beliebig erweitert und verbessert werden, viel Freude damit.

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.





	 

	Simple Media Queries Tester 

	
	 

	



	
		Simple Media Queries Tester
	

	
		
		
		Test your URL
		Test URL
			
			
		
		
		keine Seite geladen - Adresse Eingeben';
		}
		?>
	

	
		
		© 2010 bueltge.de · Impressum

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Einfaches Autoresize für die WordPress Hintergrundbild-Funktion

Frank Bültge — Fri, 03 Dec 2010 13:22:01 +0000

Mit WordPress 3.0 wurde die Möglichkeit im Theme geschaffen, dass der User einfach ein Hintergrundbild hochladen und nutzen können. Das Bild wird mittels CSS im Hintergrund positioniert. Damit ist es nicht ganz so einfach, dass die Möglichkeit des Autoresize schafft und der Hintergrund sich an die Größe des Browsers anpasst. Es gibt einige schöne Möglichkeiten für diese Anforderung, ich möchte kurz eine sehr einfache Möglichkeit mittels CSS aufzeigen, da so die Funktion von WordPress nicht angefasst werden muss.

Die folgende Syntax muss innerhalb des Stylesheet integriert werden. Dazu kann auch ein Child-Theme angelegt werden, wenn das Originaltheme nicht verändert werden sollte. Die Werte müssen mit !important versehen werden, da ansonsten die Werte von WordPress genutzt werden, das Überschreiben dieser Werte ist nicht anders möglich. Damit wird der Hintergrund immer an die Größe des Browsers angepasst - aber Achtung: dies ist nicht immer die optimale Lösung, da die Bilder dazu in der eigentlichen Größe verändert werden, heißt also, dass ein sehr schmaler Bildausschnitt das Bild extrem verzerrt. Der Beispielscreenshot ist da wenig empfindlich, da die Wolken dies vertragen können und trotzdem ein angenehmes Hintergrundbild liefern - im Gegensatz zum Standard, in dem das Bild wie in der Vorschau gekachelt wäre; bei anderen Bildern kann dies sehr unschön aussehen.


body {
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-attachment:fixed !important;
	-o-background-size: 100% 100%, auto !important;
	-moz-background-size: 100% 100%, auto !important;
	-webkit-background-size: 100% 100%, auto !important;
	background-size: 100% 100%, auto !important;
}

Das CSS ist nicht in allen Browsern nutzbar, siehe Übersicht, liefert daher nur in den aktuellen Browsern den erwarteten Effekt. Der Internet Explorer, Browser kann man ihn ja schlecht nennen, hat hiermit so seine Schwierigkeiten.

Eine Alternative ist es den Callback für die Funktion mitzugeben und eine eigene kleine Funktion in der functions.php abzulegen, die sich um das Ausgeben des CSS kümmert. Die folgende Funktion tut dies statisch, fragt also nur das Bild ab und nutzt die Werte aus dem Backend nicht.


function fb_header_callback() {

  $background = get_background_image();
  if ( !$background )
    return;

  if ( $background ) {
    $image = " background-image: url('$background');";

    $style  = 'background-repeat:no-repeat;';
    $style .= 'background-position:center center;';
    $style .= 'background-attachment:fixed;';
    $style .= '-o-background-size: 100% 100%, auto;';
    $style .= '-moz-background-size: 100% 100%, auto;';
    $style .= '-webkit-background-size: 100% 100%, auto;';
    $style .= 'background-size: 100% 100%, auto;';

    $style .= $image . $style;
  }
?>


Diese Funktion muss in der Funktion als Callback mitgeben, sie kann natürlich beliebig angepasst werden. In der functions.php des Themes sollte es, wenn es die Background-Image-Funktionalität schon gibt, die Funktion add_custom_background() geben. Dieser muss im ersten Parameter mit der neuen Funktion erweitert werden und nun wird der Standard-Callback von WordPress nicht mehr aufgerufen. 

	// This theme allows users to set a custom background
	add_custom_background( 'fb_header_callback' );

Als Hinweis, der Style wird dann via Hook wp_head direkt im head ausgegeben, eher unschön - wie ich finde, und daher solltet ihr diese Formatierung wohl besser im Stylesheet ablegen, da sie eh statisch ist und nicht vom User angepasst werden kann. Ebenso ist wichtig das der Hook auch im Theme vorhanden ist, was aber auch für andere Plugins oder Funktionen wichtig ist.
Werte aus dem Backend nutzen
Als letzter kleiner Tipp für eure eigenen Anpassungen möchte ich noch zeigen, wie man die Werte aus dem Backend bekommt und nutzt.

Die Hintergrundfarbe der Optionen zum Hintergrundbild wird mit folgender Funktion zurück gegeben:
$color = get_background_color();
Das Bild bekommt via:
$background = get_background_image();
Und einzelne Einstellungen zum Style werden via get_theme_mod($name); abgefragt:

Der folgende kleine Schnipsel gibt die gesetzten Werte zum Theme zurück.

$mods = get_theme_mods();
var_dump($mods);

Dies könnte beispielsweise für das Standard Theme Tweny Ten wie folgt aussehen

string 'Twenty Ten' (length=10)

array
  'background_image' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_image_thumb' => string 'http://localhost/wpbeta/wp-content/uploads/2010/12/apple-touch-icon.png' (length=71)
  'background_repeat' => string 'no-repeat' (length=9)
  'background_position_x' => string 'center' (length=6)
  'background_attachment' => string 'scroll' (length=6)
  'background_color' => string '' (length=0)

Aufgrund dieser Werte im Array kann man beispielsweise den Wert background_repeat holen,
$repeat = get_theme_mod( 'background_repeat' );
der in diesem Beispiel no-repeat zurück gibt.
Mit den anderen Werten kann man genauso verfahren; eine Menge an Spielraum und Möglichkeiten.

Zum den Themen CSS und Hintergrund findet man einen ausführlichen Artikel bei Chris: Perfect Full Page Background Image


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Inspiriere mit maximal 10k HTML5
Frank Bültge — Mon, 02 Aug 2010 08:16:07 +0000
Es ist an der Zeit, zurück zu den Ursprüngen zu finden und sich auf die Optimierung mit Blick auf Größe der Website Gedanken zu machen - so oder so ähnlich interpretiere ich den Wettbewerb für Menschen, die Websites machen.
Vor zehn Jahren haben A List Apart einen Aufruf gestartet Much Ado About 5K. Weniger als 5 kByte waren zulässig um kleine Websites zu machen - diese Arbeiten sind aus meiner Sicht in erster Linie Anregung zu eigenen Gedanken und Inspiration für neue Arbeiten. Die Gemeinschaft der Webentwickler diskutiert gerne und so sind diese Formen der Themenanregung beliebt. Neben der Größe der Website von 10 k gibt es einige weitere Bedingungen - Standards: html5 und die Darstellung in Firefox, IE9, Safari und Chrome & diverse Bibliotheken - und damit ist zehn Jahre später ein neuer Wettbewerb 10k Apart durch fast das gleiche Team ins Leben gerufen. Zeit ein wenig Spaß zu haben und eine eigene kleine Arbeit bereit zu stellen.




Auch ich habe mich ein wenig von der vielen Arbeit erholt und mal eine kleine Spielerei gemacht, die man nun dort als App besichtigen kann - nichts besonderes, aber unterhaltsam und eine schöne Abwechslung. Ich wollte jeden Tag einen neuen Wert geben und uns die Erinnerung an jeden neuen Tag geben - 10k sollten dabei dicke reichen und so habe ich html5, CSS3 und JavaScript eingesetzt. Ebenfalls spiele ich mit den Animationsmöglichkeiten von CSS3, die allerdings aktuell nur in Webkit-Browsern wie Safari und Chrome laufen. Schaut es euch an und vielleicht nutzt es dem Lernen und dem Verständnis der neuen Mittel. Aber vielleicht motiviert es euch auch um ebenfalls an der Challange zu 10k Apart teilzunehmen.

Die Gallerie hat schon jetzt tolle Sachen dabei - auch wenn nicht alle Apps die 10k einhalten - zumindest wenn man mit Libraries wie jQuery arbeitet  . Aber im Ende ist es eine tolle Aktion und die Teilnahme inspiriert. Es macht Spaß mit den neuen Möglichkeiten zu arbeiten und kein ToDo für alte Browser zu implementieren.
* Alternativ kann man sich die Spielerei auch in meinem kleinen Labor ansehen.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Stylesheet laden, wenn die WordPress Galerie im Beitrag ist
Frank Bültge — Wed, 20 Jan 2010 00:06:37 +0000
Im Bezug auf die bessere Gallery ist es eigentlich nicht nötig das Stylesheet zu laden, wenn es keine Galerie gibt, insofern ist es also lohnend, wenn man im Vorfeld prüft, ob die Gallery im Beitrag genutzt wird und nur dann das Stylesheet laden. Dazu muss man die Beitrag parsen und das kann man auf zwei Arten tun.



Die klassische Lösung ist den Content in der Ausgabe zu parsen und den Shortcode zu suchen, klassisches PHP strstr. Je nach Ergebnis wird das Stylesheet geladen.

if ( strstr($post->post_content, '[gallery') ).

Dies kostet natürlich Zeit und Performance, was man eigentlich meiden möchte. Insofern ist es besser, wenn man den Beitrag im Vorfeld parsen kann. In diesem Zusammenhang gibt es einen Tread im Forum von WordPress, welches genau dazu eine erstklassige Lösung von WhiteShadow hat und diesen Ansatz kann man natürlich auch für das Laden des Stylesheet nutzen, wenn es um die Gallery geht.

// onyl css, when post has a gallery
function gallery_stylesheet($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_style( 'gallery-stylesheet', get_bloginfo('stylesheet_directory') . '/gallery.css', false, false, 'screen' );

	return $posts;
}
add_action('the_posts', 'gallery_stylesheet');

Diesen Ansatz kann man natürlich auch nutzen für das Laden von Scripten,

// onyl js, when post has a gallery
function my_script($posts) {
	if ( empty($posts) )
		return $posts;

	$found = false;

	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}

	if ($found)
		wp_enqueue_script( 'my-script', get_bloginfo('stylesheet_directory') . '/script.js', false, false, true );

	return $posts;
}
add_action('the_posts', 'my_script');

Weitere Hinweise zum Einbinden von JavaScript- und CSS-Dateien gibt es in einem anderen Beitrag zum Thema.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Neue Templates für Kategorien
Frank Bültge — Wed, 02 Dec 2009 08:00:18 +0000


Um das Design oder die Inhalte im Bezug auf eine bestimmte Kategorie anzupassen, musste man bisher eine Abfrage im Theme oder in einem Plugin nutzen. Mit Version 2.9 wird WordPress in der Template-Hirarchie erweitert und man kann nun auf Grund des Slug eigene Templates erstellen.



Ein Beispiel soll es verdeutlichen; diverse Beiträge werden als Kurznews ausgegeben, ein Microblog also. Daher lege ich eine Kategorie mit diesem Namen an und nutze den generierten Slug.

Die Darstellung dieser Beiträge in der Kategorie-Übersicht soll eine andere sein. Bisher musste man dazu folgenden Abfrage integrieren:

if ( is_category('microblog') ) {
	// hier die Ausgabe oder Integration des Stylesheet für Kategorie Microblog
}

Mit WordPress 2.9 reicht das entsprechende Template category-microblog.php und dieses Template wird gezogen, wenn man in der Kategorie des Slug microblog ist. Alternativ geht es auch weiterhin mit der ID, die sich aber ändern kann. Über den Namen des Slug ist die Identifizierung eindeutig und einfach.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Wartungsmodus Designs - die Teilnehmer & Gewinner
Frank Bültge — Tue, 01 Sep 2009 10:18:54 +0000
Bis gestern lief das Gewinnspiel zu meinem Plugin Wartungsmodus, wo ich um neue Designs bat. Die Teilnahme war nicht sonderlich groß, wie ich fand; um so schöner, dass die, die sich beteiligt haben, so schöne und unterschiedliche Designs gesandt haben.

Alle Entwürfe sind in das Plugin eingeflossen und sind damit für alle Nutzer des Plugins Wartungsmodus nutzbar.
Bevor ich die Gewinner der Bücher bekannt gebe, möchte ich aber die Entwürfe und die Teilnehmer kurz vorstellen, so dass ihr Beitrag am Plugin nicht nur durch ein Danke von mir, diverse Backlinks und eventuell ein Gewinn eines Buches gewürdigt wird, sondern dass auch die Leser meines Blogs einen Einblick bekommen oder ein neues Gesicht im Web entdecken.

Die Liste ist ohne Wertung und entspricht der zeitlichen Einsendung von Designs zum Aufruf in meinem Blog.




The Truck


David war der Auslöser für die Idee, denn er sandte ohne Aufforderung ein Design für das Plugin. Damit fing alles an und ich schrieb eine erweiterte Version, die nun komplett neu ist und neue Designs aufnehmen kann. Alternativ wurde die Möglichkeit implementiert, dass man eigene Stylesheets hinterlegen kann. Ebenso hat die Frontend-Ausgabe des Plugins drei Hooks, um Inhalte zu steuern.
David ist 24 Jahre alt, Grafikdesigner, Webdesigner und Webentwickler aus Köln. Geboren wurde er in der kleinen aber feinen Stadt Plauen, in der er auch die Zeit bis zu seinem 23 Lebensjahr verbrachte.

Er machte einen Realschulabschluss und anschließend eine zweijährige Ausbildung zum Datenverarbeitungskaufmann. Nach zwei Jahren und erfolgreichem Abschluss folgte der Zivildienst. Danach ging es noch einmal zurück auf die Schulbank um das vermisste Abitur (Fachabitur) nachzuholen. ...


The Sun


Nicki war nach dem Aufruf zum Mitmachen der erste Teilnehmer und schnell war sein Design integriert. Wer sein Photoblog besucht, wird schnell merken, dass das Ziel von Nicki vornehmlich darin liegt, seine eigene Idee zu verwirklichen und dass die Liebe zum Detail in ihm steckt.
... Meine Ansichten ändern sich: Die Kamera ist nicht der Mittelpunkt von Allem, aber es ist wunderbar mit ihr kreativ zu sein.


The FF Error


Thomas wollte schon immer eine Seite für die Anwendung „Wartungsmodus“ im alten Firefox-Error-Stil machen und mein Plugin kam da gerade recht.

Leider macht Thomas nicht mehr so viel öffentliche Lösungen für WordPress, denn die waren in der Vergangenheit eine Bereicherung.
Thomas entwickelt Webseiten, die originell, praktisch, übersichtlich und effektiv sind.


Monster


Sebastian spielt gern, in diesem Fall spielte er Illustrator. Daher kam eine schöne Idee raus und wurde ebenso schnell in mein Plugin aufgenommen.
Seitdem ich kein World of Warcraft mehr spiele, habe ich zuviel Freizeit. Eine Alternative musste her.

Da mich (bis auf WoW) Computer spiele nicht wirklich lange beschäftigen können, habe ich beschlossen mir eine kleine Internetpräsenz aufzubauen. Bloggen ist ja sowieso hip und deswegen darf mein mal mehr mal weinger sinnvoller Beitrag natürlich nicht fehlen. ...


Chastely


Florian war vom Plugin begeistert und schon war die Idee, ein Design bei zusteuern, geboren.
Einfach aus Leidenschaft fürs Web.


Only Typo


Robert ist geschätzter Freund, Kollege und Teilnehmer des Gewinnspiels. Um so schöner, dass sich auch direkte Freunde beteiligen und ein weiteres Design zum Plugin bei steuern. Robert ist vorrangig im Mikroblogging-Kreis aktiv.


Paint


Marvin beherrscht nicht nur seine Grafik-Anwendung, dass er sie aber beherrscht zeigt sein Design sicher. Ich danke für diesen Farbklecks und habe es ebenso gern in das Plugin integriert.


Animate


Das Design von Sebastian arbeitet mit Flash und so ist ein weiter Hook in das Frontend des Plugins eingeschlossen. Nur so war die wahlweise Integration sauber umsetzbar. Nun kann der Besucher mit ein wenig animierten Witz vertröstet werden.
Erfolg - eine Teamsache!


Damask


Fabian spielt in seinem Design mit der Idee des Damasttuch und setzt daher auch auf die Muster uns Struktur. Sicher eine Idee, die nicht nur mir gefällt.
In den letzten Jahren habe ich viel Zeit inverstiert meine (X)HTML und CSS Kenntnisse zu erweitern und auf die neuesten Standards zu setzen.


Lego


Alex ist Spieler, scheint mir, und die Zeit mit Lego ist noch in guter Erinnerung. Scheinbar kommt daher sein Design-Vorschlag, der das Plugin ebenso gut bereichert.
Seit Juli 2006 schreibe ich auf BlogDrauf.de über Dinge, die mein Leben berühren. Weil ich blog drauf habe!


Gewinner des Gewinnspiels
Im Artikel zum Gewinnspiel habe ich ja darauf hingewiesen, dass ich unter den Teilnehmern diverse Bücher zum Thema Webdesign verlose und darum im folgenden die Bücher und ihre Gewinner.

Ich wünsche allen Gewinnern viel Freude an den Büchern und bitte euch, dass ihr mir eure Adresse für den Versand zukommen lasst. Ich versende die Bücher dann zeitnah an euch.

Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis von Manuela Hoffmann geht an Florian Andreas Vogelmaier
Little Boxes, Teil 1. Webseiten gestalten mit CSS. Grundlagen von Peter Müller geht an Sebastian Schmiedel
Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr von Peter Müller geht an Nicki Steiger
CSS - Webdesign mit Style. Praxis, standardkonforme Lösungen, Referenz von Ralph Schulz geht an Marvin Labod
Der CSS-Problemlöser: Über 100 Lösungen für Cascading Stylesheets von Rachel Andrew geht an Alex Frison

Fazit
Ein wenig bin ich schon enttäuscht, dass die Teilnehmerzahl so gering ist, schiebe es einfach mal auf das schöne Wetter. Bei denen, die sich beteiligt haben, bedanke ich mich recht herzlich! Ebenso danke ich denen, die Hinweise und Wünsche zum Plugin geliefert haben, so dass ein Plugin entsteht, was einen Mehrwert liefert.
Natürlich können auch weiterhin Ideen und Designvorschläge an mich gesandt werden, einen Buchpreis wird es dafür sicher nicht mehr geben, dafür aber ein Danke von mir, den Nutzern und Links auf die eigene Site.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Gewinnspiel: neue Designs für Wartungsmodus gesucht
Frank Bültge — Sat, 08 Aug 2009 09:31:27 +0000
Das Plugin Wartungsmodus nutze nicht nur ich vielfach und über die lange Zeit habe ich daran kaum geändert. Nun kam aber David Hellmann mit einem wunderbaren Designvorschlag und so habe ich das Plugin komplett neu erstellt und diverse Optionen übernommen und die Möglichkeit geschaffen, dass man das Design der Site im Wartungsmodus wählen kann. Ebenso kann man nun diverse Optionen wählen und muss nicht am Code ändern.
Das Plugin ermöglicht es registrierten Nutzern das Backend weiterhin zu nutzen und alle Nutzer, die die Rechte haben am Design zu ändern (Objekt: switch_themes), können auch das Frontend im aktiviertem Theme sehen. Damit kann man live am Blog schrauben und kontrollieren, ohne das Besucher etwas mitbekommen. Sie werden vertröstet und bekommen eine Information über die voraussichtliche Wartezeit.


Trotzdem war mir wichtig, dass es einfach und unkompliziert in der Nutzung ist und so gibt es keine eigene Seite im Backend für die Einstellungen, die werden direkt beim Aktivieren des Plugins ermöglicht und der Wartungsmodus ist aktiv, wenn man das Plugin aktiv hat.

Ebenfalls habe ich die Site so aufgebaut, dass ich recht einfach neue Designs ergänzen kann, was mich zu der Idee brachte: Sendet mir eure Designvorschläge und ich baue sie in das Plugin ein.
Wie geht das?
Um neue Designs für den Wartungsmodus zu hinterlegen, benötige ich das Stylesheet von euch und die entsprechenden Bilder, wenn es notwendig ist. Wird der Text Wartungsmodus als Bild ausgegeben, so benötige ich dass auch als PSD-Format und mindestens in englischer und deutscher Sprache als Bild (PNG oder JPG), da das Plugin mehrsprachig arbeiten kann.
Um nun aber das CSS zu schreiben, bedarf es einem Markup und das sieht wie folgt aus. Auf Basis dieses Markup möchte ich Stylesheets von euch.





	Blogname - Maintenance Mode




	
		WP Dev
	

	

		Maintenance Mode
		Sorry for the inconvenience.
Our website is currently undergoing scheduled maintenance.
Please try back in 231 weeks.
Thank you for your understanding.
		Admin-Login
	

	
		Plugin by: 
	




Was hat man davon?
Diese Frage werden sich sicher wieder einige stellen und ich hoffe einfach, dass man hier den Mehrwert erkennt, mir ein Feedback gibt und seinen Anteil am Plugin leistet. Im weiteren macht CSS Spaß und so sollte es nicht schwer sein, ein so einfaches Markup zu stylen.
Zusätzlich werde ich natürlich die Autoren des jeweiligen Designs auf der Plugin-Seite bei wordpress.org listen, der Dank der Nutzer ist euch damit sicher. Ebenfalls wird ein Link optional auf der Site sein, die den Wartungsmodus aktiv hat; also abhängig vom Design wird das Favicon des jeweiligen Ideengebers gelistet. Da das Plugin unter GNU-Lizenz fällt, ist es möglich, diesen Link im Backend von WordPress zu deaktivieren.
Gibt es was zu gewinnen?
Trotzdem soll es als zusätzlichen Anreiz einige Gewinne geben und so habe ich mir überlegt, dass ich gern etwas Platz in meinen Buchregalen haben will. Daher werde ich ausmisten und einige Bücher zum Thema Web abgeben, die sicher der eine oder andere lesen möchte. Insofern denke ich, dass es lohnend ist, hier ein wenig CSS zu machen und mir ein Design für den Wartungsmodus einer Seite zukommen zu lassen.
Zu gewinnen gibt es:

Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis von Manuela Hoffmann
Little Boxes, Teil 1. Webseiten gestalten mit CSS. Grundlagen von Peter Müller
Little Boxes, Teil 2. Webseiten gestalten mit CSS. Navigation, Inhalte, YAML & mehr von Peter Müller
CSS - Webdesign mit Style. Praxis, standardkonforme Lösungen, Referenz von Ralph Schulz
Der CSS-Problemlöser: Über 100 Lösungen für Cascading Stylesheets von Rachel Andrew

Die Bücher werde ich per Zufall verlosen und im Anschluss versenden.
Zeitrahmen?
Prinzipiell kann man mir immer gern neue Designs zukommen lassen; ich werde die dann einbauen. Das Gewinnspiel wird bis zum letzten Tag des Monats gehen, also bis zum 31. August 2009.
Sendet mir also eure Stylesheets, noch besser ein Zip mit allen Daten und ich sage schon jetzt vielen Dank dafür.
Noch der Hinweis: sollten sehr viele Design-Vorschläge kommen, so werde ich die besten auswählen lassen und dann in das Plugin übernehmen. Aber bis dahin bin ich erst mal auf eure Ideen und Umsetzungen gespannt und hoffe, dass ihr trotz Sommerloch ein wenig Lust auf CSS habt oder gern eines der Bücher gewinnen wollt.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WP Basis Theme in (x)HTML5
Frank Bültge — Tue, 28 Jul 2009 13:18:48 +0000


Das WP Basis Theme erfreut sich großer Beliebtheit und die Arbeit daran wird von diversen Leuten unterstützt, sei es mit Übersetzungsarbeit, Fehlerkorrekturen, Verbesserungsvorschlägen oder Tests. Daher auch hier nochmal Danke an alle Helfer!
Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.



Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Arbeit mit...
Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

HTML 5
html5doctor
HTML5 Validator
HTML5 enabling script

Warum das alles?
Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.
Wie komme ich daran?
Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.
Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Debug Objects - WordPress Plugin
Frank Bültge — Tue, 07 Jul 2009 10:46:28 +0000
Das Plugin Debug objects gibt dem User, der die entsprechenden Rechte mitbringt, im Standard der Administrator, eine große Anzahl von Informationen an die Hand. Es werden Werte und Inhalte ausgelesen und im Frontend des Blog dargestellt um Fehler zu analysieren aber auch um WordPress besser zu verstehen und an die Anforderungen anzupassen. Daher ist es für Entwickler und Leute, die WordPress besser verstehen wollen, geeignet.



Das Plugin gibt in diversen Tabs Informationen zu; im folgenden eine Liste von diversen Möglichkeiten, auch wenn das Plugin wesentlich mehr ausgibt. Je nach Arbeitsweise können diverse Reiter besonders interessant sein oder weg fallen. Aktuell habe ich aber keine Optionen hinterlegt, die das steuern sollen.

PHP
Speichernutzung
Betriebssystem
Server
WordPress Version
Sprache
sehr umfangreiche Definitionen von diversen Konstanten
Cookie Definitionen
Dateirechte
Eigene User- und Usermeta-Tabellen
FTP- und SSH Definitionen
Query informationen
Conditional Tags; wert des Tags
Theme informationen
Template informationen
Cache inhalte
Hooks und Filter
Funktionen, die auf Hooks und Filter ansprechen
inhalte von Arrays zu Hooks und Filtern
alle definierten Konstanten

Das Plugin kann mit meinem Plugin Debug Queries zusammen arbeiten und damit die Analyse und Optimierung des Blog genutzt werden. Debug Queries wird in die Ausleitung integriert und ist auch nur für User mit den entsprechenden Rechten möglich. Damit kann die Analyse und Optimierung der Performance an WordPress verbessert werden.
Das Plugin filtert keinerlei Werte und sollte nur zur Information und Optimierung eingesetzt werden, es ist nicht im Livebetrieb des Blog empfohlen. Für Entwickler kann es schnell Daten liefern, die die Einsatz in einer Entwicklungsumgebung befürworten.
Beispielscreenshot des ersten Tab

Download:












Ist die Arbeit nicht 1 Euro wert?

Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.

Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Der Download ist im offiziellen Repository von WP zu finden: wordpress.org/extend/plugins/debug-objects/ oder nutzt den Installer direkt im Administrationsbereich von WordPress
Historie
Seit geraumer Zeit bietet das WordPress Plugin Repository die Möglichkeit der Ausgabe des Changelog an und so werde ich direkt am Plugin, in der Readme die Historie pflegen - daher bitte ich, dass ihr euch dort die Änderungen anschaut, so dass ich ein wenig hier pflegen muss: Changelog.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress Design Tweaks
Frank Bültge — Tue, 28 Apr 2009 07:27:08 +0000
Mit WordPress 2.7 wurde uns ein neues Design im Backend beschert, diesmal mit viel Aufwand und Analyse um ein angenehmes Arbeiten zu ermöglichen und möglichst viel Inhalt strukturiert darzustellen. Aus meiner Sicht ist das gelungen und die Arbeit mit WordPress war für mich persönlich noch nie so angenehm. Da ich aber WordPress vorrangig im Unternehmensumfeld einsetze, die Corporate Identity auch im Backend realisiere und Anwender von Laie bis Profi habe, sind die Anforderungen doch extrem unterschiedlich. Dabei habe ich bisher auf mein Plugin Adminimize gesetzt, das Backend auf die Anforderungen reduziert und das Design dem Corporate Design angepasst.
Aktuell macht Jane Wells im WordPress Team sich einige Gedanken zum Backend Design und ruft zu Ideen auf, die das Backend nicht neu gestalten, nur optimieren, so dass Nutzer nicht verschreckt werden. Aus meiner Sicht ist es gerade da sinnvoll, dass man die Hooks in WordPress nutzt und optionale Design einbringt, die der jeweilige Nutzer wählen kann. SO hole ich auch diverse Designs in Backend und überlasse die Wahl dem Nutzer. Lediglich die übergeordneten Themen, wie Farben und Logo, gebe ich im Rahmen des Corporate Designs vor. Da ich Adminimize in den letzten Nächten erweitert haben, besonders gepuscht durch den Spendenmarathon der lieben Leserin Samantha Phoumarath.




Der obige Screenshot mag auf den ersten Blick nicht sonderlich das Design von WordPress verändern, aber es ist anders, anders in der Arbeitsweise - Header und Menu sind fix, so dass man aus jeder Scrollposition darauf zugreifen kann. Eine ganze Reihe von Nutzern empfinden das Arbeiten so besser und angenehmer. Als Hinweis sei aber vermerkt, dass meine jetzige Lösung nur in Browsern funktioniert, die fixed via CSS akzeptieren.
Im weiteren habe ich diverse Bereiche verkleinert, so sind Meta Boxen wesentlich schmaler; es ist mehr Platz ohne den Whitespace zu reduzieren.
Im weiteren habe ich ein alternatives Design im Plugin untergebracht, welches den Header verändert und die Navi damit um 50 Pixel nach oben holt. Auch dies wird gern genutzt, wobei hier schon der Wunsch des fixed Menu aufkam, aber bisher nicht umgesetzt wurde.

Vielleicht hat der eine oder andere Ideen, Wünsche und Hinweise zum Plugin, zum Design, die Kommentarfunktion steht offen.
Das Plugin selbst ist vorrangig für andere Zwecke erstellt und verfügt aktuell über sehr viele Optionen, so kann man den Bereich Schreiben Beitrage und Seiten einschränken, die Oberfläche der Links beeinflussen, globale Bereiche verändern, HEader-Bereiche einschränken, verändern, Dashboard und Footer deaktivieren, umleiten mit eigenen Inhalten befüllen oder auch eigene Optionen hinzubringen, in dem man Klassen und IDs hinterlegt, einen Namen vergibt und diese dann wieder abhängig von der Benutzerrolle, wobei auch eigene Rollen unterstützt werden, deaktivierbar sind.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Link vs. @import
Frank Bültge — Thu, 09 Apr 2009 18:51:06 +0000
Die Implementierung von Stylesheets kann man mit unterschiedlichen Anweisungen machen und ich bekomme immer wieder die Frage, warum ich mich für  entschieden habe und nicht via @import die Stylesheets einbinde.

Gerade in meinem Basis-Theme für WordPress scheint das aufzufallen und diverse Nutzer zu stören.

Der klare Umschwung ist bei mir nach dem Lesen des Buches „High Performance Websites“ von Steve Souders, Chief Performance Yahoo! bei Yahoo!, gefallen und ich löse nun alles per .

Nun ist mir aber die öffentlich zugängliche Seite des Buchautors wieder unter gekommen und dort publiziert Steve einen Beitrag zum Thema. Diesen Link möchte ich damit einfach mal als Begründung, Rechtfertigung oder Lesetipp hier präsentieren.

Die klare Aussage: Kein @import nutzen.
Spannender Artikel, der sicher bei dem einen oder anderen Veränderungen hervorruft. Daher der Tipp, den Beitrag don’t use @import zum Buch zu lesen.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



CSS Naked Day 2009
Frank Bültge — Mon, 06 Apr 2009 06:44:24 +0000


Ich habe vor einigen Wochen schon mal darauf hingewiesen: auch in diesem Jahr gibt es in alter Tradition den Naked Day, nun zum vierten mal. Websites sind aufgerufen sich nackt dem Leser zu präsentieren, ohne Gewand des Stylesheets mit reinem Markup stellen sich diverse Websites der Öffentlichkeit - Datum ist der 9.April 2009.
Hintergründe, wieso, weshalb und warum sind im Artikel und in den Kommentaren zum Naked Day ´08 und im folgenden Artikel zu finden.
Auch in diesem Jahr kann man sich wieder registrieren und Code-Unterstützung integrieren, um sich nicht händisch um das de- und aktivieren des Stylesheets zu kümmern.
Der Naked Day ist eine kontroverse Aktion, der eine mag diese Idee und der andere hasst sie. Entscheidet selbst, lest die Hintergründe, denkt darüber nach oder diskutiert in geeigneter Runde. Aus meiner Sicht kann ein Naked Day nicht nur schamlos sein, er kann die Makel und Verbesserungen hervorrufen, die in der Basis statt finden und nicht via Schönheits-OP mit CSS.
View this site in alternate languages: English, Czech, Chinese, French, Korean
Die Idee
Hinter dieser Aktion steht die Idee die Webstandards zu fördern. Dazu gehören der korrekte Gebrauch von (x)HTML, semantisches Markup, hierarchische Struktur und zu letzt das Spiel der Wörter - der Inhalt. Es ist an der Zeit, deinen  der Öffentlichkeit zu zeigen. Damit zeigt man, dass gute Webseiten auch ohne Design leserlich sind.


Wie macht man mit?
Fülle das kleine Formular aus und deine Webseite wird in die offizielle Liste aufgenommen.
Am 9.April 2009 werden alle Formatierungen der Webseite entfernt, völlige Befreiung vom Design.
(optional): Setze den folgenden Hinweis am obersten Punkt deiner Seite.

What happened to the design?
To know more about why styles are disabled on this website visit the

Annual CSS Naked Day website for more information.

Dieser Hinweis dient unter anderem als Hinweis für deine Besucher und sie wissen schnell warum und wieso dein  nackt ist.
Warum wieder?
Einige Leser sind interessiert und wollen wissen, warum es am 9.April zu dieser Aktion kommt.

Die Aktion soll auf einen Dienstag, Mittwoch oder Donnerstag fallen (Viel-Traffic-Tage)
Möglichst in der ersten Woche des April
Es soll nie am 1.April sein (internationaler Scherz- und Streichtag)
Es soll ausreichend Zeit zur Ankündigung sein

Einbinden via PHP
Um die nackten Tatsachen zu zeigen, kann man mittels PHP-Funktion den Naked Day automatisch einleiten. Folgende Funktion dient dieser Aufgabe.

WordPress User hinterlegen diese Funktion beispielsweis ein der Datei functions.php oder direkt im Template, die header.php. Alternativ kann auch das Plugin „WordPress Naked Day“ genutzt werden.

= $start && $now <= $end ) {
    return TRUE;
  }
  return FALSE;
}
?>

Die Funktion gibt TRUE aus, wenn es sich um den 9.April 2008 handelt. Daher gilt es nun die Funktion auszuwerten und jeweils zu reagieren. Dazu muss der Link zum Stylesheet in die if-Abfrage.


...
';
} else {
  echo '
...


In WordPress sollte das dann in der header.php eingepflegt werden. Das könnte dann beispielsweise so aussehen:

';
} else { ?>
	


Warte… sind das 48 Stunden?
Das ist richtig. CSS Naked Day dauert für den Zeitraum eines internationalen Tages. Vom technischen Standpunkt aus ist der „9. April“ überall in der Welt 48 Stunden lang. Um zu garantieren, dass die Website für jeden auf der ganzen Welt  Nackt ist, sind die 48 Stunden pure Nacktheit zu präsentieren.
Tools und Plugins
Die Aktion ist unter einer ganzer Reihe von Entwicklern bekannt und so gibt es auch eine große Anzahl von Tools und Plugins um die Aktion zu unterstützen. Schau die auf der Aktions-Seite um, dort findet man eine aktuelle Liste der Tools und Plugins; um nur Einige zu nennen: WordPress Plugin, PHP class, Rails Helper, Serendipity Plugin, LifeType Plugin, ...


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Ausgabe des WordPress Admin für Seiten, Beiträge und Kommentare anpassen
Frank Bültge — Thu, 02 Apr 2009 08:10:42 +0000
Je nach Arbeitsweise empfindet es der eine oder andere Nutzer im Backend von WordPress recht störend, dass man maximal 20 Beiträge, Seiten und Kommentare pro Seite gelistet bekommt. Gerade wenn man mit vielen Übersichten arbeiten muss und eine schnelle Verbindung hat, dann kann eine erhöhte Anzahl nützlich sein. Wie man das anpasst und ein wenig mit CSS in der Darstellung optimiert, dazu hier einige Tipps.


Ab WordPress Version 2.8
Mit WordPress 2.8 kommt ein neuer Wert in die nutzereigenen Optionen pro Seite im Backend. Damit kann jeder Nutzer seine Vorlieben in dem Umfang der Beiträge, Seiten und Kommentare einstellen. Will man das ganze übergreifend lösen und auch schon im Vorfeld von WordPress 2.8, dann kann die folgende Syntax helfen.

Alternative Plugin
Einbetten sollte man die Syntax in ein Plugin, um die Lösung zu kapseln.

Ich stelle hier bewusst kein Plugin zur Verfügung, da mich Support der bestehenden Lösungen eh schon überfordert. Es ist also eher als Basis für Leute gedacht, die hier ansetzen wollen und als Speicher für mich, wenn ich es wieder mal benötige.
Einige Bemerkungen habe ich direkt am Quellcode hinterlegt, so dass es verständlicher wird. Ebenso lade ich eine CSS-Datei, der Inhalt ist im Anschluss zu finden, die bei der großen Anzahl an Einträgen, dass Design etwas ändert und so ein wenig mehr Übersicht schaft.


// Wert für Beiträge
define( 'FB_CAP_PER_POST', 100 );
// Wert für Seiten
define( 'FB_CAP_PER_PAGE', 100 );
// Wert für Kommentare
define( 'FB_CAP_PER_COMMENT', 100 );

// nur im Adminbereich
if ( is_admin() ) {
	global $pagenow;

	if ( $pagenow == 'edit-pages.php' ) {
		add_filter( 'manage_pages_query', 'page_ChangeAdminPagination' );
		add_action( 'admin_print_styles', 'AddMyStylesheet' );
	}
	if ( $pagenow == 'edit.php' ) {
		add_action( 'admin_head', 'post_ChangeAdminPagination' );
		add_action( 'admin_print_styles', 'AddMyStylesheet' );
	}
	if ( $pagenow == 'edit-comments.php' )
		add_filter( 'comments_per_page', 'comment_ChangeAdminPagination' );
}

function post_ChangeAdminPagination() {
	global $wp_query;

	if ( $wp_query->query_vars[s] == '' ) {
		$per_post = (int) FB_CAP_PER_POST;
		$wp_query->query( 'showposts=' . $per_post );
	}
}

function page_ChangeAdminPagination($query) {
	global $per_page;

	$per_page = (int) FB_CAP_PER_PAGE;
	//$query['posts_per_page'] = $per_page;
	$query['posts_per_archive_page'] = $per_page;

	return $query;
}

function comment_ChangeAdminPagination($count) {

	$per_comment = (int) FB_CAP_PER_COMMENT;

	return $per_comment;
}

function AddMyStylesheet() {

		$myStyleFile = WP_PLUGIN_URL . '/change_admin_pagination/css/style.css';
		wp_register_style( 'change_admin_pagination', $myStyleFile );
		wp_enqueue_style( 'change_admin_pagination');
}

Der folgende Inhalt dient nur dazu, dass der Bereich zum Bearbeiten der jeweiligen Seite oder Beitrags neben dem Eintrag dargestellt wird. Damit wird die Zeile kleiner und man hat mehr Einträge im Blickfeld.

/**
 * style for smaller tables in admin of WordPress
 * @author Frank Bültge
 * @date 01.04.2009 20:51:59
 */
.post-title strong {
	float: left;
}

.row-actions {
	float: left;
	margin-left: 1% !important;
}

.check-column, tr td {
	padding-bottom: 0 !important;
}

.column-date {
	width: 15% !important;
}

td.date {
	font-size: .6em;
}

td.date abbr {
	float: right;
}


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress Seiten & Unterseiten abfragen
Frank Bültge — Tue, 10 Mar 2009 12:41:28 +0000


WordPress lässt es zu, dass man zu einer Seite (Page) im Backend entsprechende Unterseiten anlegt. Dies ist unter anderem ein Umstand, warum WordPress nicht selten als CMS in der Verwendung ist. Nun will man aber mit Hilfe der Conditional Tags diverse Abfragen starten und darauf reagieren – dann sieht man nicht selten im Template statische Abfragen auf jede ID einer Seite.

Das geht natürlich anders und einfacher wenn es sich um Seiten oder Unterseite dieser Seite handelt.
Mit dieser Lösung kann man dann beispielsweise in Abhängigkeit einer Seite ein spezielles Layout laden und das Frontend so an diverse Anforderungen anpassen. Diese kleine Anforderung nehme ich mal als Beispiel und zeige eine Funktion, die mir die Abfragen zu Seite/Unterseiten gibt und zeige im Anschluss ein Beispiel im Einsatz.


Hintergrund
Erstellt man in WordPress eine neue Seite, keinen Beitrag, dann kann man diesen in den Attributen als Unterseite einer bestehenden Seite definieren. Damit lassen sich nicht nur Baumansichten erstellen, sondern auch Strukturen abbilden, die nicht selten in einem CMS benötigt werden.

Will man in Abhängigkeit der Seite eine Ausgabe steuern, dann nutzt man den Conditional Tag is_page(),mit welchem man dann die Anforderung umsetzt. Um nun aber nicht für jede Seite diesen Tag zu nutzen und das Template damit ständig anfassen zu müssen, kann man eine einfache Funktion nutzen, die nach Abfragen der Hauptseite auch ein wahr (true) zurück gibt, wenn es sich um eine Unterseite der Hauptseite handelt.
Lösung
Diese Funktion, folgende Syntax, kommt in die functions.php des Themes.

// check ID post and child-post
function has_parent( $post, $post_id ) {
	if ($post->ID == $post_id)
		return true;
	elseif ($post->post_parent == 0)
		return false;
	else
		return has_parent( get_post($post->post_parent), $post_id );
}

Diese kleine Funktion prüft, ob die ausgegeben Seite ein Seite oder Unterseite einer Seite mit der übergebenen ID ist; klingt kompliziert, liegt aber nur am Satzbau. Irgendwie ist es schon zu spät; ja, ich weiß – ihr lest es später, denn ich nutze das zeitversetzte Veröffentlichen. Aber zurück zur Technik. Diese Funktion kann nach dem Ablegen im Theme nun in allen Templates genutzt werden. Das folgende Beispiel prüft, ob es sich um eine Seite oder Unterseite der ID 1 handelt und wenn ja, dann wird das Stylesheet Alternative 1 (alternative_1.css) ausgegeben.
Anderweitig wird auf ID 2 geprüft oder passt keines der Abfragen, dann kommt das Standard-Stylesheet zum Einsatz.
Um die Möglichkeiten noch ein wenig zu erweitern, setze ich in der Abfrage die Variable $bodyclass, die ich im body-Tag zur Ausgabe bringe. Damit habe ich dann eine weitere Anlaufstelle und eine entsprechendes Design je nach Seite zu realisieren.

    post, 1) ) {
	        echo '' . "\n";
	        $bodyclass = 'class="alternative_1"';
	    } elseif ( has_parent($wp_query->post, 2) ) {
	        echo '' . "\n";
	        $bodyclass = 'class="alternative_2"';
	    } else {
	    	echo '' . "\n";
	    }
  	} ?>


>

Fazit
Ich denke, dass diese kleine Möglichkeit eine große Wirkung in der Ausgabe haben kann und vielfältige Möglichkeiten zeigt. Ebenfalls kann man diese Lösung mit dem Wechsel des kompletten Theme realisieren, wie ich es schon im Beitrag „WordPress Theme in Abhängigkeit wechseln“ gezeigt habe.

Vielen Dank für das Lesen und noch mehr Danke ich für Verbesserungen zum Beitrag in den Kommentaren.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Filter für caption-Shortcode in WordPress
Frank Bültge — Mon, 09 Mar 2009 14:58:54 +0000
Die Überschrift mag nicht sonderlich für sich sprechen und daher erkläre ich ein wenig mehr zum Thema und lege nicht nur einfach meine Code-Schnipsel ab.
Nutzt man den „Mediauploader" in WordPress nicht nur um das Bild hoch zuladen, sondern auch zur Integration in den Beitrag oder die Seite, dann wird, sobald man einen Bildtitel zum Bild hinterlegt, der Shortcode  angelegt und in den Content eingefügt. Der Titel sollte aber gepflegt werden, da er als alt-Attribut zum img-Tag genutzt wird.
Nicht jeder Nutzer ist mit dieser Ausgabe zufrieden und ich zeige mal, wie man darauf zugreifen kann und die Ausgabe ändert.



Ist zum Bild ein Titel vorhanden, dann wird der Shortcode immer eingefügt, der dann einen div zur Ausgabe bringt, der beispielsweise wie folgt aussieht.


Caption, Bildtitel


Nun möchten aber nicht alle Nutzer diesen Shortcode nutzen und die Ausgabe daran anpassen. Man kann im Grunde mit drei Möglichkeiten die Ausgabe beeinflussen.

Nach dem Einfügen händisch löschen oder eigenes HTML einbauen
CSS erweitern und den entstehenden div ausblenden
Per Hook eingreifen und den div vor der Ausgabe filtern oder an die eigenen Bedürfnisse anpassen

Aus meiner Sicht scheidet Punkt 2 sofort aus, da er nur im Zusammenhang mit CSS funktioniert und damit das Markup noch immer so unzureichend bleibt.

Den ersten Punkt kann man ebenso nicht sauber vertreten, da Risiko beim Vergessen und der Mehraufwand beim Erstellen von Artikeln nicht wirklich angenehm ist.
Widmen wir uns daher Punkt 3 der ausgewählten Möglichkeiten und greifen mit ein wenig PHP ein. Auch dabei gibt es diverse Ansätze und so möchte ich drei recht unterschiedliche Wege zeigen und die Entscheidung zur Nutzung überlasse ich dann euch. Je nach Anforderung wird das sicher auch sehr verschieden ist.
Schön beim Einfügen löschen
WordPress fragt den Filter disable_captions ab und lässt damit den Shortcode erstellen: if ( ! apply_filters( 'disable_captions', '' ) ) {.  Hier setze ich an und gebe eine Funktion ein, die ein true zurück gibt. Damit geht kein Shortcode mehr in der Editor beim Bilder einfügen.

add_filter( 'disable_captions', create_function('$a', 'return true;') );


Die Funktion legt man entweder in einem Plugin ab oder in der functions.php des Themes.
Filtern in der Ausgabe
Nun will man aber eventuell nicht immer den Shortcode entfernt haben, und in einigen Sichten des Frontend die Möglichkeit schon nutzen. Das heißt, der Shortcode darf nur in einigen Fällen genutzt werden.

Auch dafür hat WordPress eine Funktion hinterlegt, die ich im folgenden Anspreche und direkt im Frontend keinen div erzeugen lasse.

img_caption_shortcode($attr, $content = null)

The Caption shortcode.
Allows a plugin to replace the content that would otherwise be returned. The

filter is 'img_caption_shortcode' and passes an empty string, the attr

parameter and the content parameter values.
The supported attributes for the shortcode are 'id', 'align', 'width', and

'caption'.
Das Zitat entstammt der Beschreibung der Funktion und lässt schon die erwünschen Möglichkeiten hoffen.

add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Auch diese Funktion legt man in der functions.php des Themes oder in einem Plugin ab. Ab nun wird im Frontend keine Markup mehr aus dem Shortcode erzeugt.
Diesen Filter kann man natürlich auch mit diversen Conditional Tags kombinieren und so den Filter nur anwenden, wenn es sich um eine bestimmte Ausgabe handelt. Das folgenden Beispiel filtert daher nur, wenn man auf der Homepage des Blog ist.

if ( is_home() )
add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Eigenes HTML liefern
Hat man einen gewissen Anspruch im Markup, dann helfen aber auch diese Funktionen nicht und man muss das eigene Markup generieren. Als Beispiel gebe ich mal den Titel zum Bild in einer Definitionsliste aus. Diese Möglichkeit gefällt mir am besten und wurde schon in den Kommentaren eines älteren Artikel diskutiert.
Ich zeige mal eine einfache Lösung, die man gern an seine Bedürfnisse anpassen kann. Das entstehende Markup ist damit frei nutzbar und die möglichen Variablen habe ich drin, so dass das Anpassen nicht so schwer sein sollte. Daraus resultiert aber auch, dass das entstanden Markup recht umfangreich ist, was aber nur der Demo nutzt und so alle Möglichkeiten zeigt. Ansonsten sollte man aus meiner Sciht zum Beispiel kein Inline-Style in der Definitionsliste haben.
Im Ergebnis der folgenden Funktion, die wieder in ein Plugin oder die functions.php ausgelagert werden muss, erzeugt dann beispielhaft das folgende Markup.



Caption, Bildtitel



function fb_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
return $output;

extract(shortcode_atts(array(
'id'	=> '',
'align'	=> 'alignnone',
'width'	=> '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $id = 'id="' . $id . '" ';

return ''
. do_shortcode( $content ) . '
' . $caption . '';
}

add_shortcode('wp_caption', 'fb_img_caption_shortcode');
add_shortcode('caption', 'fb_img_caption_shortcode');

Ich hoffe, dass damit dem einen oder anderen Webdesigner der Eingriff leichter fällt und das tägliche Fluchen über dieses Thema ein wenig abnimmt.

Anregungen, Kritik und Fehlerhinweise sind wie immer erwünscht und der Artikel stellt sich wieder eurem kritischen Auge.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Es wird wieder nackt
Frank Bültge — Thu, 26 Feb 2009 12:53:21 +0000


Auch in diesem Jahr am 9.April wird es hier wieder nackt, das Stylesheet wird für 24h deaktiviert und ich bin gespannt, ob es wieder so viele Teilnehmer gibt.
Hintergründe, Wieso, weshalb, warum - dazu verweise ich auf den Artikel „CSS Naked Day“ des vergangen Jahres, der die Aktion bestens erklärt. Ebenso findet man dort die entsprechenden Code-Schnippsel oder Plugin-Lösungen für verschiedene Applikationen um den Prozess automatisch zu starten bzw. zu beenden.



Im letzten Jahr war die Aktion mehr als ein Spaß und nicht weniger hatten diverse Erkenntnisse, die sie in ihrem Markup umsetzen konnten. Sicher wird es auch in diesem Jahr wieder Erkenntnisse und Diskussion geben. So eine Aktion ruft immer die verschiedenen Parteien zum Diskutieren auf, was ich wunderbar finde. Nur so werden eingeschliffene Themen angesprochen und in Frage gestellt.
Im letzten Jahr habe ich ebenso auf Wunsch eine kleine Auswertung geschrieben, in der man ein wenig erfährt, wie es nach dem darstellen meiner nackten Tatsachen aussah – „Beobachtungen zum Naked Day 2008“.
Also, macht mit – ich freue mich auf eure Nacktheit. Nackt ist „in“


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress Login Style deaktivieren
Frank Bültge — Mon, 26 Jan 2009 00:44:57 +0000
In der Vergangenheit habe ich einige Möglichkeiten gezeigt, wie man WordPress im Hinblick auf eine Corporate Identity nutzt. Dazu gehört auch das Anpassen des Login-Bereiches. Dies sollte mit Hilfe der entsprechenden Artikel nicht schwer fallen.

WordPress 2.7 Login Design anpassen
WordPress 2.5 und Theme-definiertes Login

In beiden Artikeln bin ich aber nicht darauf eingegangen, wie man das Standard-layout von WordPress deaktiviert, da ich das Beispiel-CSS immer auf Basis des Stylesheet von WordPress aufgebaut habe. Das Stylesheet von WordPress ist aber nicht gerade sehr schlank und warum soll man unnötig Daten laden, die man nicht benötigt?
Mit einem kleinen Hook und einer entsprechenden Funktion entferne ich daher das Laden des Stylesheet von WordPress und lade dann nur das eigene CSS - wie das geht, steht in den beiden Artikeln zum Theme Login Bereich anpassen.



if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
	add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

Packt man die obige Syntax in die functions.php, ist das ausreichend und auch an richtiger Stelle - der Eingriff ist im Bezug auf das Theme und abhängig vom Theme aus meiner Sicht. Damit stellt man sicher, dass beim Wechsel oder deaktivieren des Themes auch diese Funktion deaktiviert wurde. Aus dem Theme raus kann daher ohne Probleme das Frontend, das Backend und der Login-Bereich angepasst werden. Dies ist aus meiner Sicht und Erfahrung mit entsprechenden Business-Bereichen auch notwendig, wenn auch oft nur in kleinen Bereichen des Backend und des Login. In dem Zusammenhang gilt es auch für mich im Bezug für ein „perfektes“ Theme.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Kommentare ab WordPress 2.7 formatieren
Frank Bültge — Tue, 13 Jan 2009 00:45:41 +0000
WordPress erlaubt seit Version 2.7 „Threaded Comments“ zu nutzen, ohne Plugin- oder Themeerweiterung. Dazu muss das bestehende Theme die API der Kommentare unterstützen. Im Netz finden sich einige schöne Artikel dazu und das Basis-Theme von mir wird gerade vorbereitet. Noch gibt es keine Dokumentation und ohne diese will ich es nicht frei geben - bitte ein wenig Geduld. Dank Andreas geht es vielleicht ein wenig schneller und ich habe einen verlässlichen und fähigen Unterstützer.
Um nun aber die Funktion der „Threaded Comments“ entsprechend darzustellen und für den Besucher ansprechend zu formatieren stehen eine ganze Reihe von Klassen zur Verfügung. Nicht alle muss man nutzen und viele entstehen auch nur durch die Unterstützung der Semantik mit Mikroformaten in WordPress.
Alle möglichen Zugriffe via CSS sind im folgenden gelistet und helfen dem einen oder anderen aber beim Erarbeiten des CSS und ersparen ein wenig Arbeit mit Hilfe von Firebug und co.



ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.comment ul.children li.depth-10 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {}
/* * steht für Tags; z.B.: p, em, strong, blockquote, ul, ol, etc. */
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-* {}
/* * steht für die Einstellungen der Antwort-Tiefe im Backend */
ol.commentlist li.pingback ul.children li.depth-10 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

via Chris Harrison


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress 2.7 Login Design anpassen
Frank Bültge — Wed, 10 Dec 2008 00:27:12 +0000

Mehr:

#1
#2
#3


WordPress 2.7 steht vor der Tür und es gibt ein Update des Backend-Designs. Das sollte sich sicher rumgesprochen haben und hinzu kommt ein neuer Login-Bereich. Es wurde nur wenig geändert, aber der Anblick entspricht dem Design des neuen Backends.

Schon in der Vergangenheit habe ich beispielsweise im Artikel „WordPress 2.5 und Theme-definiertes Login“ für das Anpassen des Design an das Theme gesprochen. Aus meiner Sicht gehört es einfach zu einem Rundumpaket eines definierten Themes – ganz im Sinne eines Corporate Designs.
Ab der Version 2.7 ist damit das CSS ein wenig anders und wer den Login-Bereich ebenso anpassen möchte, dem zeige ich hier kurz wie es geht und hinterlege das CSS für ein Beispiel.



Stylesheet laden
Um das erstellte CSS für den Login-Bereich zu laden nutze ich eine kleine Funktion, die ich in der functions.php des jeweiligen Themes ablege und via Hook login_head im Login-Head integriere. So kann ich speziell für das Theme den Login definieren und beim Umschalten eines anderen Themes wird dann das andere Login-Design gezogen.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '';
}

add_action('login_head', 'fb_custom_login');

Die Stylesheet-Datei heißt dabei custom-login.css und liegt innerhalb des Ordner custom-login im Ordner des Themes.
Das Stylesheet
Wie schon angesprochen ein kleines Beispiel, was aber die Klassen und IDs des Login-Bereich enthält und so das Anpassen ein wenig erleichtert.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}

#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}

#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

Soweit zum Beispiel, welches nur eine Möglichkeit der Anpassung darstellt. Hierbei sind den Künsten in der Anwendung von CSS keine Grenzen gesetzt.

Aus meiner Sicht in die Nutzung der Firebug Erweiterung für die Analyse unerlässlich und es empfiehlt sich damit zu arbeiten, wenn man diese noch nicht nutzt.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress 2.6 Quicktipp für Theme-Autoren
Frank Bültge — Fri, 01 Aug 2008 09:36:20 +0000
Seit WordPress 2.6 gibt es ein weiters Feld beim Uploaden von Bildern – caption bzw. Bildunterschrift. Damit kann man recht einfach und ohne große Kenntnisse in HTML die Unterschrift für ein Bild setzen. Die Lösung wurde mit divs realisiert, was nicht meinem Anspruch genügt, aber in darum soll es hier nicht gehen.
Wer sich nun an die Arbeit macht und ein Theme für WordPress erstellt und dieses der Öffentlichkeit preis gibt, der sollte eine Anzahl con Formatierungen im Stylesheet haben. Dies führt dann dazu, dass die Bilder, die man mit der Media-Funktionalität hoch lädt und in den Beitrag integriert, auch im für den Anwender verständlichen Aussehen erscheinen. Die Klassen sind im folgenden aufgelistet und gehören ab WordPress Version 2.6 bitte in jedes Theme, welches man anderen Anwendern übergibt.



/**
 * for WordPress classes at images
 *
 */
.aligncenter, div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.alignleft {
float: left;
}

.alignright {
float: right;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #fff;
padding-top: 5px;
margin: 10px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 1em;
line-height: 1.1em;
padding: 0 5px 6px;
margin: 0;
}

Die Formatierungen sind nur beispielhaft und sollen die Klassen besser verdeutlichen. Natürlich kann man das an seine Bedürfnisse anpassen. Grundlegend geht es nur darum, dass sie existieren und die schematische Vorschau im Adminbereich auch dann im Frontend unterstützen – so sollte alignleft schon ein Bild links floatend darstellen. Aber das nur am Rande.
Wer noch mehr Information zur Bildunterschrift wünscht, der liest den Beitrag „Bilder mit Bildunterschrift in WordPress 2.6“. Dort gibt es eine  Reihe an Infos zu HTML und CSS.
* Mein Basis-Theme, welches ich zur Verfügung stelle um einen einfachen Start in ein neues Theme zu haben, erfährt demnächst ein Update. Ich habe viel geändert und erweitert, weil sich doch einiges in den letzten Versionen von WP geändert hat. Mal sehen, wann ich zu einem Upload komme und einen fertigen Stand habe.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Brotkrumen-Navi für WordPress
Frank Bültge — Wed, 30 Jul 2008 09:30:56 +0000

Inhalt:

more-Tag
Archive Query und Reset WP-Query
the_title Tag zerlegen
content filtern für CSS-Erweiterung
Brotkrumen-Navigation ohne Plugin
Widgets erweitern/einfach
Suchergebnis bereichern


WordPress Themes sind sehr flexibel, was unter anderem dem schuldig ist, dass man einfach und unkompliziert PHP nutzen kann. Die functions.php eines Themes kann beliebig bestückt werden und so kann man dieverse Funktionen ohne großen Aufwand ins Boot holen.
In dieser kleinen Serie von Tipps und Hacks zum gestalten von Themes will ich diesmal zeigen, wie man eine einfache Brotkrumennavigation, auch unter dem englischen Begriff Breadcrumb bekannt, in das Theme baut. Diese Form der Navi hat sich in einigen Bereichen bewährt und wird oft als Mehrwert empfunden.

Schon vor weg; wer nicht per Funktionen schrauben will, es gibt auch diverse Plugins, die diese Aufgabe erledigen.


So geht's
Nun aber zur Lösung ohne Plugin, direkt im Theme. Dazu muss die folgende Funktion in die schon angesprochene functions.php kopiert werden; damit steht sie dann im Theme zur Verfügung und kann überall genutzt werden. Der Aufruf findet dann beispielsweise in der header.php statt und wird mit Hilfe von CSS in das rechte Licht gerückt. Zum Ansprechen per CSS habe ich die Klasse breadcrumb vergeben. Ein Beispiel aus meinem Entwicklungsblog seht ihr im obigen Bild.

function fb_breadcrumb_nav() {
	if ( !is_home() ) {
		echo '» ';
		bloginfo('name');
		echo " » ";
		if ( is_category() || is_single() ) {
			the_category('title_li=');
			if ( is_single() ) {
				echo " » ";
				the_title();
			}
		} elseif ( is_page() ) {
			echo the_title() . '';
		}
	}
}

Die obige Funktion kann natürlich beliebig verändert werden. Es ist lediglich ein einfaches Beispiel und soll die Idee und deren Funktion verdeutlichen. Man kann die Strukturierung und Ausgabe mit Hilfe meiner geliebten Conditional Tags beliebig weit treiben. Die Funktion ist so schon ohne Anpassungen nutzbar und sollte den Nutzer nicht vor große Probleme stellen.

Die Mischung aus HTML und PHP kann sicher für den einen oder anderen Leser unübersichtlich erscheinen, mir war aber die strukturelle Darstellung der Funktion wichtig und so habe ich das HTML nicht ausgelagert. natürlich kann man das tun und beispielsweise die „echos“ an Variablen übergeben.



In eigener Sache
Auch mit dieser Lösung wünsche ich viel Spaß beim Experimentieren oder Nutzen; Feedback ist ebenfalls wie immer gern erwünscht.

Bevor es Supportanfragen gibt, bitte erst mal versuchen durch den Code zu steigen, ich ersticke zum Teil in Mails und kann viele kaum noch händeln auf Grund von Zeitmangel. Die wenige Freizeit möchte ich gern mit Ideen, Umsetzungen und Lösungen nutzen.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress content filtern für CSS-Erweiterung
Frank Bültge — Tue, 08 Jul 2008 09:20:59 +0000

Inhalt:

more-Tag
Archive Query und Reset WP-Query
the_title Tag zerlegen
content filtern für CSS-Erweiterung
Brotkrumen-Navigation ohne Plugin
Widgets erweitern/einfach
Suchergebnis bereichern


Und weiter geht es mit meiner kleinen Serie zu Anpassungen, die man im Rahmen eines Themes für WordPress eventuell mal benötigt. Dieser Beitrag soll den Content filtern und den ersten p-Tag ersetzen, ersetzen mit einem p-Tag und einer Klasse.
Wozu soll das nun wieder sein? Mir liegen Typographie-Design am Herzen, weil ich den Inhalt und nicht das Design für das wichtigste einer Website halte und damit auch das Auge auf Diesen lenken möchte.

Als Hobby-Webworker fehlt mir ebenso das Handwerkszeug für aufreizende Design mittels Grafiksoftware. Trotzdem soll es natürlich das eine oder andere Highlight im Design geben und im Fall von sajonara.de wollte ich den ersten Buchstaben gesondert formatieren. Um nun aber nur den ersten Buchstaben des ersten Absatz browserübergreifend zu formatieren, benötige ich ein Klasse im Absatz. Daher muss aus dem ersten p-Tag ein p-Tag mit Klasse werden.





Allerdings arbeite ich mit einer Formatierung per CSS, die nicht alle Browser verstehen; die Pseudoklasse first-letter kommt zum Einsatz. Allerdings war ich noch nie ein Freund des IE und werde den Usern in dem Fall das Schmankerl gern verwehren.



Im ersten Schritt müssen wir aber den ersten p-Tag des content finden und dazu schreibe ich eine Funktion, die in die functions.php des Themes gehört und dort für alle Templates zur Verfügung steht.

// finde erstes 
function fb_first_letter($content) {

	$content = wpautop($content);
	if (is_single() || is_home() || is_front_page()) {
		$content = fb_stuff_first($content, '
', '');
	}
	$return  = $content;

	return $return;
}

Bisher habe ich lediglich den Content von WordPress übergeben, den Filter gesetzt, der die p-Tags setzt und eine Einschränkung vorgenommen, dass diese Funktion nur dann ziehen soll, wenn es sich um einen einzelnen Beitrag oder die Startseite bzw. Frontpage des Blog handelt, ansonsten wird er Content nach WordPress-Standard übergeben. Innerhalb dieser Funktion rufe ich die Funktion fb_stuff_first() auf, die das erste Vorkommen findet.

function fb_stuff_first($original, $suche, $ersatz) {
	$pos = strpos($original, $suche);

	if ($pos !== false) {
		$original = substr($original, 0, $pos) . $ersatz . substr( $original, $pos + strlen($suche) );
	}

	return $original;
}

Damit die Funktion auch wirkt, schalte ich sie per WordPress Hook Filter zu.

add_filter('the_content', 'fb_first_letter', 1);

Die Formatierung kann dann beliebig auf die Klasse angewandt werden. Auch dazu ein Beispiel, welches den ersten Buchstaben der Klasse gestaltet.

.letter:first-letter{
font-size:250%;
font-weight:700;
display:inline;
float:left;
background:#333;
color:#fff;
padding:.45em;
margin:.2em .2em 0 0;
display:block;
}

Auch in diesem Beitrag gilt wieder: das ist eine Lösung von vielen - für Verbesserungen oder andere Ansätze bin ich immer offen und freue mich über konstruktive Kritik. Die Idee dahinter ist wie so oft, dass Spielen mit den Möglichkeiten und das Wagen von neuem, denn ich empfinde das Design gelungen und diese wenigen Funktionen sorgen in meinem Augen für Mehrwert ohne Nachteile.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Design für den Druck mit CSS
Frank Bültge — Mon, 16 Jun 2008 14:05:08 +0000

Leider ist es immer noch nicht selbstverständlich, dass Webseiten ein entsprechendes Layout für den Printbereich, zum Drucken der Seite in Papierform, bereit stellen. Bei der Umsetzung einer Seite gehört es meines Erachtens zum guten Ton und Qualität, dass ein Stylesheet für den Druck bereit gestellt wird.
Um das Thema mal wieder ein wenig aktuell zu machen, stelle ich hier mal als Download ein Stylesheet bereit, mit dem man man schon eine ganze Menge an Optimierung für den Druck abdecken kann. Die einzelnen Abschnitte sind dokumentiert, so dass auch der Laie den Einstieg findet und entsprechende Anpassungen für die Verwendung im jeweiligen Projekt vornehmen kann. Weitere Hinweise und Einbindungssyntax im folgenden Artikel.



Eine druck-freundliche Version der Webseite sorgt für Genuss beim Leser, gerade wenn es umfassende Texte oder Tutorials geht, ist dass Ausdrucken keine Seltenheit. CSS hat dafür wunderbare Eigenschaften und macht es dem Entwickler leicht, eine optimierte Ausgabe für den Druck bereit zu stellen. Bitte nutze diese Möglichkeit auch!
Ganz besonders sind Links zu Händeln, denn nach dem Druck sind diese Informationen noch immer relevant und so sollten sie auch bestehen bleiben. Daher zeige ich alle Pseudeklassen an und gebe sie in abweichender Form aus. Damit gehen Sie dem Leser nicht verloren und man kann beim Lesen der Papierform darauf zurück greifen. Ein typisches Beispiel in HTML sieht so aus ...

Link zu Startseite
... und wird in der Druckform wie folgt ausgegeben.

Link zu Startseite (Link zu: http://bueltge.de/)
Einbinden des Stylesheet
Der Schlüssel für die Nutzung des Stylesheet als Drucklayout ist das Attribut media mit dem Wert print. Der folgende Beispielcode bindet das Stylesheet print.css ein und sorgt dafür, dass man es gezogen wird, wenn die Ausgabe Druck erfolgt. Diese wird unter anderem auch gezogen, wenn man im Browser Druckvorschau wählt, was das Testen sehr angenehm gestaltet.



Bei der Nutzung von WordPress gehört es ebenso zum guten Ton, dass man ein Print-Stylesheet anbietet. leider stellen nur sehr wenige Themes dieses bereit. Dahingehend der Aufruf an Theme-Entwickler - bitte macht euch die Mühe und erweitert euer Theme um ein Stylesheet für den Druck!

Ablegen sollte man das Stylesheet dann im Theme-Ordner, so dass es nur Verwendung findet, wenn das Theme aktiv ist und der Verweis in die header.php des Themes hinterlegen.



Alternativ kann man auch mit meinem Basis-Theme arbeiten, bei dem es ein Druck-Stylesheet gibt. Das Theme ist für den Start in ein neues Theme für WordPress ausgelegt und bringt einige Vorgaben mit.
Download:












Ist die Arbeit nicht 1 Euro wert?

Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.

Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als zip-Datei: print.css - 2 kByte


Weitere Infos zum Thema

SELFHTML: CSS: Stylesheet für den Druck
Buch zum Thema CSS und Webstandards

Historie

0.1 - erster Wurf
0.2 - Abbrevations aufgenommen, #header verfeinert, so dass der Blogtitle bleibt, Links optimiert, ...


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



CSS Unterstützung in E-Mail-Clients
Frank Bültge — Mon, 16 Jun 2008 03:09:42 +0000
Noch immer konnte die Technologie Feed die Newsletter nicht verbannen und sie existieren auch weiterhin in unserem Postkasten. Ob man sie nun mag oder nicht, der grundlegende und strittige Punkt am Thema Newsletter ist die Verwendung von HTML und CSS oder reine Text-Newsletter.
Leider hat man darauf nicht immer Einfluss und der Kunde „will“ einen Newsletter im HTML-Format. Entscheidet man sich zur Umsetzung und nutzt seine Kenntnis von HTML und CSS, erstellt ein Markup mit sauberen CSS im head, so kann man schnell an kleinen aber wirkungsvollen Problemen scheitern und das Wissen um Markup und Design wird in Frage gestellt.
Darum ist es zwingend notwendig, eine Übersicht zu haben, die zeigt, welche Clients welche Unterstützung geben. Eines gleich vorweg, eine große Anzahl von E-Mail-Clients löschen das Stylesheet, wenn es im head-Abschnitt ist! So lässt beispielsweise web.de nur Inline-Styles zu und dass kann einem die Nerven kosten.
Eine recht umfassende Übersicht der Möglichkeiten bei der Unterstützung von CSS bei den entsprechende E-Mails-Clients gibt es auf Campaign Monitor. Alternativ kann man das ganze downloaden als PDF- oder MS Excel-Dokument.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



CSS Sprites einfach erklärt
Frank Bültge — Thu, 05 Jun 2008 08:41:43 +0000
Die Webkrauts haben das Thema „Hoverffekte mit CSS-Sprites“ schon vor langer Zeit aufgegriffen und erklärt, ausführlich. Dies soll hier nicht statt finden. Aber es ist immer noch eine relativ selten verwendete Technik und viele arbeiten dann mit Lösungen via JavaScript um die Bilder zum richtigen Zeitpunkt zu laden. Dies ist nicht nötig, mit Hilfe der Technik der CSS-Sprites kann man den unschönen Effekt, der auftritt bei MouseOver von Bildern als Link, beheben. Das ist wenig im Aufwand und bringt viel im Aussehen und Benutzerfreundlichkeit.
Um auf diese Technik nochmal und vereinfacht aufmerksam zu machen, habe ich mal ein sehr einfaches und, so denke ich, überschaubares Beispiel erstellt. Ansehen, verstehen und Nutzen war die Devise.

Die vielen kleinen Spielereien, die dann daraus resultieren sind auf vielen Beiträgen im Netz nachzulesen.



Die Nutzung von CSS-Sprites hat Vorteile:

Kein Einsatz von clientseitigen Sprache wie JavaScript nötig
Kein MouseOver-Code in den Links
Bilder liegen vor und der lästige Verlagerungseffekt entfällt
weniger Bilder beim Download und im Einsatz, wenn man es effektiv nutzt
Bessere Nutzung der Bandbreite beim Besucher

So geht es
In wenigen Punkten und Erklärungen ist die Lösung zu sehen. Wie das ganze dann in Benutzung aussieht, dass sieht man oben am Start des Artikels oder im Beispiel in der Experimente-Box.
Das Bild kann natürlich mehrfach verwendet werden. Eventuell benötigt man das Logo auch in anderen Darstellungen auf der Seite, ohne hover-Effekt. Damit lohnen sich solche Lösungen richtig. Man nutzt dann eben nur den Bereich, der zu sehen sein soll. 

Bild
125px breit und 60px hoch; 5px Abstand sind zwischen den einzelnen Bildern des Ganzen
CSS Style
Im Grund greift das CSS nur auf das ID zu und erzeugt den Effekt durch die Pseudeklasse hover.

Die Höhe und Breite ergibt sich aus der Größe des eigentlichen Einzelbildes, in diesem Beispiel 60px.

#image-link {
	width: 60px;
	height: 60px;
	text-decoration: none;
	display: block;
	background: url('images/fb-sprite.png') 0 0;
}

#image-link:hover, #image-link:active {
	background-position: 60px 0;
}

 

Die Angabe 0 0 muss bei background nicht vergeben werden; nur wenn es eine Verschiebung geben soll. Genauso könnte man das Beispiel hier auch anders herum nutzen. Dafür müsste man lediglich die Positionswerte für die ID image-link tauschen.

#image-link {
	width: 60px;
	height: 60px;
	text-decoration: none;
	display: block;
	background: url('images/fb-sprite.png') 60px 0;
}

#image-link:hover, #image-link:active {
	background-position: 0 0;
}

HTML Code
In diesem Bespiel dient ein einfacher Link als Demonstration, natürlich kann man hier alle bekannten Möglichkeiten aufgreifen und beispielsweise schöne Navigation erstellen.

 


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren