Im Printbereich werden Pull Quotes häufiger verwendet. Doch auch im Web können Pull Quotes genutzt werden, um lange Texte spannender zu gestalten und die Botschaft eines Textes noch besser zu vermitteln. Für die Umsetzung von Pull Quotes kannst du ein individuelles CSS Styling anlegen. Falls du mit WordPress arbeitest, gibt es sogar praktische Plugins, mit denen sich Plull Quotes leicht umsetzen lassen.

Eigene Plull Quotes erstellen

Indem du eine eigene CSS-Klasse für Pull Quotes verwendest (z.B. pull), kannst du standardmäßige Block Quotes <blockquote> ganz leicht zu Pull Quotes umfunktionieren.

<blockquote class="pull">Das ist ein Plull Quote.</blockquote>

Um die Position des Pull Quotes zu bestimmen, kannst du zusätzlich CSS-Klassen für Rechts- oder Linksbündigkeit nutzen (alignright und alignleft).

<blockquote class="pull alignright">Plull Quote rechts.</blockquote>
<blockquote class="pull alignleft">Plull Quote links.</blockquote>

Die benötigten CSS-Styles kannst du dann in deinem Stylesheet ungefähr so aussehen (du kannst das Styling deiner Pull Quotes natürlich mit Rändern, Schriftarten oder anderen Styles noch individualisieren):

blockquote.pull {
	margin: 0 0 1.4em;
	text-align: center;
}
blockquote.pull.alignleft {
	width: 33%;
	margin: 0 1.4em 0.5em 0;
	padding:0;
	float:left;
	display:inline;
	font-size:1.1em;
	text-align: right;
	border:none;
}
blockquote.pull.alignright {
	width: 33%;
	margin: 0 0 0.5em 1.4em;
	padding:0;
	float:right;
	display:inline;
	font-size:1.1em;
	text-align: left;
	border:none;
}

WordPress-Plugins für Pull Quotes

Wenn du WordPress nutzt, kannst du alternativ zu einer individuellen Umsetzung auch eines der vorbereiteten Pull Quote-WordPress Plugins nutzen. Ich habe folgende Plugins getestet:

Simple Pull Quote Plugin

Simple Pull Quote nutzt den Shortcode [pullquote], um Pull Quotes umzusetzen. Im visuellen Editor steht ein Icon zur Verfügung, um die Pull Quotes zu markieren. Es ist ein Style vorbereitet. Um diesen individuell anzupassen, müsstest du das Stylsheet aus dem Plugin-Ordner kopieren und in dein eigenes HauptStylesheet einfügen. Anpassungsoptionen gibt es beim Plugin ansonsten keine. Der Nachteil des Plugins ist, dass nach der Deaktivierung die Shortcodes im Artikel stehen bleiben.

Graceful Pull-Quotes Plugin

Etwas praktischer finde ich daher das Gracefull Pull-Quote Plugin. Hier gibt es eine Settings-Seite (unter Design / Pull Quotes), auf der du einige Einstellungs-Optionen für die Darstellung der Pull Quotes hast. Es gibt beispielsweise mehrere Pull Quote-Styles zur Auswahl, die man sich sogar in einer kleinen Vorschau anschauen kann. Außerdem kannst du bestimmen, ob du den HTML-tag <blockquote> + eine CSS-Klasse oder einen div-tag + CSS-Klasse für die Umsetzung der Pull Quotes nutzen möchtest. Auch die Bezeichnung der CSS-Klasse ist frei wählbar.

Einstellungs-Optionen des Gracefull Pull Quote WordPress-Plugins

Auf diese Weise hast du etwas mehr Kontrolle über die Integration deiner Pull Quotes. Und wenn du das Plugin später deaktivueren möchtest, werden deine Quotes entweder zu Zitaten (blockquotes) umgestylt oder bei der Nutzung eines Div’s nicht mehr für den Leser sichtbar angezeigt.

Tipps zum Weiterlesen

• Einen interessanten und umfangreichen Artikel zum Thema Block- und Pull Quotes kannst du dir bei Smashing Magazine anschauen: »Block Quotes and Pull Quotes: Examples and Best Practices«.
• Ein tolles kleines Einsteigerbuch zum Thema Typografie allgemein ist außerdem »Buchstaben kommen selten allein: Ein typografisches Handbuch« von Indra Kupferschmid.

Kennst du weitere Ergänzungen zum Thema Pull Quotes beitragen oder kennst du besonders schöne Umsetzungen von Pull Quotes im Web? Über dein Feedback freue ich mich sehr!

1. WordPress.org vs. WordPress.com

Als keine Anmerkung vorab möchte ich dir noch kurz den Unterschied zwischen WordPress.org und WordPress.com erklären. Bei WordPress.com kannst du dir einen kostenlosen Blog mit einer Adresse im Format deinblog.wordpress.com einrichten. Dieser Blog wird dann auf dem Server bei WordPress.com gehostet und du musst keine Kosten für einen eigenen Webspace und eine eigene Domain ausgeben. Dies ist vor allem für kleine private Blogs eine tolle Option. Allerdings hast du bei einem WordPress.com Blog auch nur eine bestimmte Anzahl von Themes (WordPress Design-Vorlagen) und Plugins (zusätzliche Erweiterungen) zur Verfügung.

Im Gegensatz dazu kannst du dir bei WordPress.org (oder auf der deutschsprachigen WordPress-Webseite wordpress-deutschland.org) die aktuelle WordPress-Version kostenlos herunterladen und diese dann für deine eigene Domain und deinen eigenen Webspace nutzen. Mit dieser selbst-gehosteten WordPress-Seite hast du mehr Möglichkeiten der Anpassung und individualisierung deiner WordPress-Webseite.

Du kannst eine riesige Anzahl kostenloser und kostenpflichtiger WordPress-Themes und -Plugins einsetzen oder sogar dein eigenens WordPress-Themedesign erstellen. Über ein FTP-Programm (z.B. Filezilla) kannst du auf alle WordPress-Dateien auf deinem Webspace zugreifen und diese bearbeiten. Einen solche selbst-gehosteten WordPress-Seite einzurichten, ist gar nicht so schwierig. Allerdings solltest du ein wenig Zeit mitbringen, um dich in WordPress einzuarbeiten und die vielseitigen Optionen von einer eigenen WordPress-Webseite dann auch wirklich nutzen zu können.

2. Was du benötigst, um WordPress zu installieren

Webspace

Bevor du mit deiner WordPress-Seite loslegen kannst, musst du dir einen Webspace und eine eigene Domain-Adresse kaufen. Die Gebühren sind nicht teuer, vor allem wenn deine Webseite noch neu ist oder du nur eine kleine, private Webseite einrichten möchtest. Dann reicht ein kleineres Hosting-Paket völlig aus. Es gibt jede Menge Anbieter, wir selbst haben bisher immer sehr gute Erfahrungen bei WordPress-Seiten mit »domainfactory« gemacht (die MyHome-Pakte, wichtig mit PHP und MySQL sollten am Anfang ausreichen).

Wenn du dir nicht ganz sicher bist, ob dein gewählten Webhosting-Paket WordPress unterstützt, frage am besten vor der Buchung beim Hosting-Anbieter deiner Wahl nach. Eine Auflistung der WordPress-Voraussetzung findest du auf der WordPress-Deutschland Webseite.

Oft ist WordPress auch schon für die Installation direkt aus dem Hosting-Kundenmenü vorbereitet (z.B. bei domainfactory der Fall). Das ist besonders praktisch, denn so musst du die WordPress-Dateien nicht mehr selbst via einem FTP-Programm auf deinen Webspace hochladen.

Domain

Eine Domain (deine Webseiten-Adresse) kannst du mit einem Webhosting-Paket dazu kaufen (manchmal ist eine Domain auch bereits inklusive). Wenn du deine lokale Länder-Endung (z.B.deinedomain.de) wählst, sind die jährlichen Gebühren für eine Domain sehr gering (ca. 6€ im Jahr).

Datenbank

Ganz wichtig ist, dass du bei deinem Webspace-Paket die Möglichkeit hast, eine Datenbank anzulegen. Diese benötigst du unbedingt, um WordPress nutzen zu können. Anlegen kannst du eine Datenbank mit Passwort direkt im Kundenmenü deines Hosting-Anbieters. Das ist auch gar nicht so schwierig, wie es sich zuerst anhört (die meisten Hosting-Anbieter bieten in ihren FAQs auch eine Anleitung an). Notiere dir den Namen und das Passwort deiner angelegten Datenbank.

3. WordPress auf einen Webspace installieren

Sobald du du deinen Webspace und deine Domain bestellt hast, kannst du WordPress installieren. Wie bereits erwähnt, kannst du dies bei einigen Anbietern direkt im Kundenmenü deines Hosting-Anbieters (siehe zur Installation vorbereitete, kostenlose Anwendungen).

Ansonsten kannst du dir die aktuelle WordPress-Version auf der WordPress Deutschland-Webseite kostenlos herunterladen. Du kannst zwischen der deutschsprachigen WordPress-Version und der englischsprachigen Version unterscheiden. Am besten du wählst die Sprache aus, in der du später auch deine Webseite führen möchtest. Wenn du die englischsprachige Version wählst, wird dein Admin-Bereich und auch Standard-Wörter wie »Comments« oder»reply« etc. auf deiner Webseite in Englisch angezeigt.

Die wp-config.php Datei

Nach dem Download von WordPress musst du die zip-Datei (latest.zip) entpacken und die Datei wp-config-sample.php im Ordner »wordpress« bearbeiten. Dazu brachst du einen Text-Editor (z.B. das kostenlose Programm Notepad++, Windows-Editor, oder TextEdit und TextMate für Mac).

In der wp-config-sample.php Datei trägst du jetzt bei »MySQL settings« deine Datenbank-Daten (Name, User, Passwort, eventuell Hostname) ein:

Die MySQL Settings in der wp-config.php Datei

Unterhalb von »MySQL settings« musst du außerdem noch individuelle Sicherheitsschlüssel eintragen. Diese kannst du dir auf der Webseite https://api.wordpress.org/secret-key/1.1/salt/ generieren. Kopiere einfach die erstellten Keys und ersetze sie mit dem Beispiel-Code im deiner Datei. Die fertig bearbeitete Datei speicherst du jetzt als wp-config.php Datei ab. Die wp-config-sample.php Datei kannst du aus dem WordPress-Ordner löschen.

Jetzt kannst du alle Dateien des WordPress-Ordners in das zu deiner Domain gehörende Haupt-Verzeichnis mit einem FTP-Programm auf deinen Webspace hochladen. (Falls du dir nicht sicher bis welches Verzeichnis das Richtige ist, frage einfach noch einmal kurz bei deinem Hosting-Anbieter nach.)

Nach dem Upload kannst du die folgende URL zur Anmeldung deiner WordPress-Seite aufrufen:
http://deineurl.de/wp-admin/install.php

Jetzt sollte eine Seite in deinem Browser erscheinen, indem du deine WordPress-Seite und dich als Admin anmelden kannst (wähle am besten einen sichereren Benutzername statt des vorgeschlagenen »admin«). Sobald die Anmeldung beendet ist, kannst du auf deine neue WordPress-Installation zugreifen und mit der Einrichtung deiner Webseite beginnen.

Der Login-Bildschirm deiner WordPress-Installation

Eine Übersicht der WordPress-Installation und ein paar Tipps zur Fehlerbehebung findest du auch auf der WordPress Deutschland-Seite.

Standardmäßig wird derzeit das Twenty Eleven-Theme genutzt, auch einige Plugins sind bereits für dich installiert. Natürlich kannst du für deine Webseite aber auch ein anderes Theme auswählen und weitere Plugins installieren. Außerdem kannst du dir ein individuelles Navigations-Menü und WordPress-Seiten (z.B. Über mich oder eine Kontakt-Seite) anlegen.

4. Themes und Plugins

Mit das Beste an WordPress ist die riesige Community, die sich gegenseitig bei Problemen helfen und neue Produkte (oftmals kostenlos) für WordPress entwickeln. Aus diesen Grund gibt es eine riesige Anzahl von Themes und Plugins für WordPress. So kannst du deine Webseite nach und nach aufrüsten und um bestimmte, hilfreiche Plugins erweitern oder dir ein schönes Theme-Design für deine Webseite aussuchen. Eine Übersicht aller kostenlosen WordPress-Plugins und WordPress-Themes findest du im WordPress Plugin Directory bzw. Free Theme Directory.

Ich hoffe du findest meine kleine Erklärung der wichtigsten Schritte zur ersten selbst-gehosteten WordPress-Webseite hilfreich. Und falls du selbst bereits WordPress-Profi bist, kennst du vielleicht ja einen Bekannten für den diese Info hilfreich sein könnte. Über dein Feedback und weitere Tipps zur Ergänzung des Artikels freue ich mich sehr!

Nori ist unser neustes responsive, mobile-first WordPress-Theme. Das bedeutet, Nori hat ein flexibles Layout und ist besonders für die Ansicht auf mobilen Geräten gestaltet und entwickelt. Im Gegensatz zu einem reinen responisve Theme ist bei Nori der Komplette Entwicklungsprozess (vom Design bis zur Programmierung) umgekehrt worden und wir haben uns von der Ansicht für Smartphones Schritt für Schritt zu größeren Bildschirmen wie Tablets, Laptop- und Desktop-Bildschirmen hochgearbeitet.

Vorteile von mobile-first

Diese Konzentration auf mobil-first bringt jede Menge Vorteile mit sich. Zum Beispiel muss man sich durch den Platzmangel auf mobilen Geräten auf die wesentlichen Elemente bei der WordPress-Theme Gestaltung konzentrieren. So kann ein klares, benutzerfreundliches Design entstehen. Diese Klarheit kommt dann natürlich auch der Desktop-Ansicht des Themes zu Gute.

Auch Bilder oder JavaScripts können mit Hilfe von CSS3 Media Queries erst dann zum Einsatz kommen, wenn sie wirklich benötigt werden. So kann die Ladezeit einer Webseite weiter reduziert werden, was ganz besonders beim meist langsamen mobilen Web ein wichtiger Aspekt ist.

Durch die Konzentration auf mobile Geräte zu Beginn des Design- und Entwicklungsprozesses eines Themes kann außerdem die Funktionalität auf Touchscreens verbessert werden. Größere Buttons, der Verzicht auf Hover-Elemente und die Optimierung der Lesbarkeit auf Smartphones und Tablets sind dabei nur ein paar der Aufgaben.

Die Theme-Optionen

Neben der flexiblen Umsetzung für die unterschiedlichsten Bildschirmformate hat Nori praktische Theme-Optionen, mit denen du deinen Blog in wenigen Schritten individualisieren kannst.

Die Farbigkeit des Themes kann z.B. für den Hintergrund, die Linkfarbe und die Standardtextfarbe angepasst werden.

Das Nori Theme mit individuellen Farben.

Weitere Theme-Optionen gibt es für dein eigenes Logo, den Footertext und die Artikel-Teilen Buttons von Twitter, Facebook und Google+.

Artikelformatvorlagen und Artikel-Styling

Zusätzlich kannst du mit Artikelformatvorlagen (WordPress Post Formats), individuellen Menüs und Widgets, deinen Blog nach deinen eigenen Vorstellungen einrichten. Außerdem ist es möglich, großformatige Bilder auf deinem Blog anzuzeigen. Besonders eignet sich dafür die Artikelformatvorlagen-Vorlage »Bild«.

Damit Bilder für verschiedene Bildschirmformate optimiert werden können, ist die Verwendung vom »Adaptive Images« Script sehr zu empfehlen.

Um längere Artikel oder Seiten lebendiger zu gestalten, kannst du in der Einzelartikelansicht und im Nori Seiten-Template »Centercolumns« die CSS-Klasse »fullwidth« nutzen. So können Bilder, Grafiken oder mehrspaltige Texte über die gesamte Artikelbreite angezeigt werden. Ein Beispiel für diese Artikel-Option kannst du dir in der Nori Live-Demo anschauen.

Neben dieser speziellen Style-Option kannst du natürlich auch blockquotes, pullquotes, Listen, Bilder oder Videos in deine Artikel einbinden, um so Texte aufzulockern.

Auf der Nori-Themeseite kannst du dir eine Live-Demo von Nori und weitere Infos zu den Theme-Features anschauen. Außerdem haben wir kleine Video-Anleitungen z.B. zu den Theme-Optionen vorbereitet. Und da wir Nori auch hier auf dem Elmastudio-Blog im Einsatz haben, kannst du natürlich auch hier das Theme genauer anschauen. Nach den Weihnachtsfeiertagen werden wir sicherlich auch noch die ein oder Anpassung hier auf dem Blog umsetzen.

Wir hoffen dir gefällt das Nori-Theme. Über dein Feedback, Fragen und Anregungen freuen wir uns sehr!

»Content first, Navigation second« - Besonders bei Ansicht auf mobilen Geräte ist es sinnvoll, die neusten Blog-Inhalte für Leser schnell zugänglich zu machen. So kann der neuste und damit wichtigste Blog-Inhalt auch mal schnell von unterwegs angeschaut werden.

Theme-Ansicht auf Tablet PCs

Im iPad-Querformat kann die Hauptnavigation des Blogs rechtsbündig bedient werden. Alle Buttons und Eingabefelder sind für die Bedienung auf Touchscreens optimiert.

Nori auf großen Bildschirmen

Das Nori-Theme wird auf größeren Bildschirmen mehrspaltig, so dass verschiedene Blog-Inhalte und Widgets gezeigt werden können.

Wir hoffen dir gefällt diese ersten Bilder unseres neusten Themes. In der nächsten Woche werden wir noch an den letzten Feinheiten weiter arbeiten, so dass Nori ganz bestimmt noch vor Weihnachten fertig wird.

Beispiel 1: Ein bestimmtes Element nur auf der Startseite anzeigen

Wenn du z.B. ein Headerbild in der header.php Datei integriert hast, dieses aber nur auf der Startseite zeigen möchtest, kannst du die Bedingung is_front_page zusammen mit einer PHP if-Abfrage einsetzen. Dein Code würde dann ungefähr so aussehen:

<?php if (is_front_page() ) : ?>

	<img src="<?php echo get_template_directory_uri(); ?>/images/yourheaderimage.jpg" width="850" height="300" class="header-image" />

<?php endif  ?>

Natürlich muss das Element nicht unbedingt ein Bild sein. Du kannst auch jedes andere Element (auch in einer anderen Template-Datei wie z.B. der footer.php Datei) mit diesem Code allein auf der Startseite anzeigen.

Beispiel 2: Ein Element nur auf der Startseite anzeigen und auf allen anderen Seiten mit einem anderen ersetzen

Falls du auf allen anderen Seiten deiner Webseite ein anderes Element (statt des Elements auf der Startseite) anzeigen möchtest, kannst du auch mit einer if/else-Bedingung arbeiten. Hier das Beispiel: Um ein Headerbild auf der Startseite, und einen kleinen Intro-Slogan auf allen weiteren Seiten und Artikeln anzuzeigen, kannst du folgenden Code verwenden:

<?php if (is_front_page() ) : ?>

	<img src="<?php echo get_template_directory_uri(); ?>/images/yourheaderimage.jpg" width="850" height="300" class="header-image" />

<?php else : ?>

	<p class="introslogan"><?php _e('Das ist ein kleiner Introtext, der das Headerimage auf allen Seiten außer der Startseite ersetzt.', 'yourthemename') ?></p>

<?php endif  ?>

Bei der WordPress-Funktion is_front_page ist es übrigens egal, ob du die neusten Blog-Artikel oder eine statische Seite als Startseite nutzt. Alternativ dazu funktioniert die WordPress-Funktion is_home nur, wenn du deine neusten Blogartikel auf deiner Startseite anzeigst.

Weitere Infos zur Funktion is_front_page kannst du auch noch im WordPress Codex nachlesen. Ich hoffe, dass du diesen kleinen WordPress-Tipp hilfreich findest. Über Fragen oder Ergänzungen zum Artikel freue ich mich sehr!

1. Die Zielgruppe

Zu Beginn deiner Arbeit solltest du festlegen, für wen du ein WordPress-Theme entwickeln möchtest. Benötigst du ein individuelles Theme für ein Kundenprojekt, für deinen eigenen Blog, dein Portfolio oder deinen Geschäftsauftritt? Oder möchtest du ein Free-Theme oder ein Premium-Theme für den Download anbieten, bei dem der spätere Inhalt nicht festgelegt ist?

2. Das Theme-Thema

Als nächstes geht es daran, ein Thema für das Theme du definieren. Soll das WordPress-Theme z.B. für die individuelle Webseite eines Künstlers, für einen Online-Shop, eine Firmen-Webseite oder einen Blog im Tumblr-Stil entwickelt werden? Werden vor allem Fotos verwendet oder wird viel mit Texten gearbeitet? Was soll die Seite vermitteln?

All diese Fragen sollten vor Beginn der Arbeit in einem Konzept definiert werden. Denn schließlich macht es sowohl für die Wahl des Designstils, als auch für die technischen Anforderungen einen großen Unterschied, ob ein Theme z.B. für eine individuelle Firmen-Webseite oder für private Blogger entwickelt werden soll.

3. Anforderungen definieren

Nachdem Zielgruppe und Thema feststehen, kannst du eine Liste der benötigten technischen und gestalterischen Anforderungen an dein Theme anlegen. Hier überlegst du dir z.B., ob du für dein Theme ein Bilder-Slider benötigst, welche Social-Media und Sidebar-Elemente wichtig sind, ob du ein eCommerce-Plugin einsetzen musst oder ob du eine Portfolio-Seite oder verschiedene Formulare benötigst.

4. Sitemap

Besonders bei einem individuellen Theme-Projekt ist eine Sitemap, auf der alle benötigten Seiten festgelegt sind, für die spätere Theme-Entwicklung sehr hilfreich. Bei einem Kundenprojekt kannst du die Sitemap zusammen mit deinem Kunden abgleichen.

5. Ideensammlung

Jetzt kann es endlich kreativ werden. Es ist sehr sinnvoll, dass du vor dem Beginn der eigenen Designarbeit so viele Inspirationen und Ideen wie möglich sammelst. So kannst du deinen Designstil definieren, erste Farbentwürfe machen und erste, passende Schriften für dein Theme aussuchen. Andere Webdesigns zum gleichen Thema anzuschauen ist meine Ansicht nach auch sehr wichtig, um sich so über aktuelle Trends zu informieren.

6. Layout- und Designentwicklung

Im nächsten Schritt beginnt die Layout-Findung im Grafikprogramm oder in Photoshop. Es ist sinnvoll die ersten Maße zu definieren und sich die Aufteilung der Grundelemente eines Themes (Header, Widgets, Content-Bereich, Footer) zu überlegen.

Bei einem responsive Webdesign solltest du das Grundlayout auch für unterschiedliche Bildschirmgrößen definieren. Hierbei solltest du auch schon auf die Besonderheiten bei Touchscreens (z.B. kein Hover-Effekt) achten.

7. Gestaltung weiterer Theme-Elemente

Hast du dein Grundlayout und die Theme-Startseite definiert, kannst du an der Gestaltung einer Artikel-Einzelseite, einem Kommentar-Bereich und den weiteren, für dein Theme benötigten Seiten (z.B. Archiv, Kontaktseite, Portfolio etc.) weiterarbeiten.

Gewisse Gestaltungselemente kannst du auch direkt im CSS definieren, da diese in einem Grafik- oder Bildbearbeitungsprogramm einfach nicht so gut definiert werden können. Dies sind aus unserer Erfahrung z.B. Schatten, genaue Abstände oder Schriften. So kannst du diese Elemente später auch gleich in verschiedenen Browsern testen.

8. Weiter geht’s im Texteditor und Browser

Mit deinen Designentwürfen geht es jetzt weiter zur Umsetzung in HTML und CSS. Für WordPress-Themes ist dabei ein Blank-Theme (z.B. Toolbox) als Grundlage eine große Hilfe.

Toolbox bietet eine tolle Grundlage für die eigene Theme-Entwicklung.

Eventuell kann auch die Verwendung eines Frameworks wie dem Less Framework oder 1140 CSS Grid zur CSS-Umsetzung (.B. Auch bei einem responsive Layout) nützlich sein.

9. Inhalte einfügen

Besonders wenn du an einem Theme arbeitest, dass später keine festgelegten Inhalte haben wird, ist der Theme Unit Test von WordPress eine riesige Hilfe. So kannst du vorbereitete Theme-Testinhalte über die Import-Funktion in deine lokale WordPress-Installation einfügen. Alternativ kannst du auch Lorem Ipsum-Texte, HTML Lorem Ipsum oder Platzhalter-Bilder.

Diese Katzenbilder kannst du als Platzhalterbilder nutzen.

10. Erste Browser- und Gerätetests

Nachdem dein Grundlayout im WordPress-Theme steht, solltest du dein Theme auf eine WordPress Test-Installation online stellen, um erste Browser-Tests zu machen. Wenn du an einem responsive Webdesign arbeitest, ist es außerdem wichtig, dass du dein Theme möglichst schon in verschiedenen mobilen Geräten (Tablet PCs oder Smartphones) testest. So kannst du eventuelle Fehler gleich zu Beginn der Programmierung beheben. Hier findest du einen Überblick hilfreicher Cross-Browsertest Tools.

11. Alle Theme-Elemente umsetzen

Nach den Browser-Tests kannst du an der Umsetzung aller weiteren Seiten, der Artikel-Einzelseite und den übrigen Theme-Elementen weiterarbeiten. Im Artikel »Praktische to-do Checkliste für die WordPress-Theme Entwicklung zum Ausdrucken« habe ich die wichtigsten WordPress-Elemente zusammengefasst. Mit einer solchen to-do Liste und den Inhalten des Theme Unit Tests kann es nicht so leicht passieren, dass du versteckte Elemente (z.B. Kommentare über mehrere Seiten) vergisst zu stylen.

12. Browser- und Gerätetests

Nachdem du alle Elemente für dein Theme umgesetzt hast, solltest du einen weiteren Browser- und Gerätetest-Durchlauf machen.

13. Aufräumen und Optimieren

Jetzt kannst du alle Theme-Dateien und dein Stylesheet noch einmal gründlich aufräumen und Styles im CSS zusammenfassen. Hilfreich ist es auch, wenn du deine Theme-Dateien so gut wie möglich dokumentierst, da dies bei der späteren Arbeit an einer Datei sehr nützlich ist. Außerdem werden deinen Dateien so auch übersichtlicher. Alle im Theme benötigten Images kannst du in Image-Sprites zusammenfassen.

14. Theme Check

Für den finalen Theme-Check gibt es einige hilfreiche WordPress-Plugins. Ich selbst nutze folgende Auswahl: Debogger, Theme-Check, TAC (Theme Authenticity Checker) und der RTL Tester (wenn du dein Theme auch für RTL geschriebene Sprachen unterstützen möchtest). Im Artikel »Nützliche Plugins und Tools für die WordPress Theme-Entwicklung« findest du weitere Tipps.

Theme-Check mit TAC.

Wichtig ist auf jeden Fall auch noch den Code mit Hilfe der W3C HTML-Validierung und dem W3C CSS-Validator auf Fehler zu überprüfen.

15. Finale Browser- und Gerätetests

Nach all diesen Tests und Validierungen solltest du dein WordPress-Theme noch ein weiteres mal in verschiedenen Browsern und bei einem responsive Theme auch auf möglichst vielen unterschiedlichen mobilen Geräten testen.

16. Das Ergebnis: Ein fertiges WordPress-Theme

Endlich, du hast es geschafft! Dein WordPress-Theme ist endlich jetzt fertig.

Klar, jeder Webdesigner/Webentwickler arbeitet ein wenig anders. Dennoch denke ich, dass der ein oder andere Tipp bestimmt hilfreich sein kann. Und natürlich freue ich mich auch schon sehr auf weitere Tipps und Anregungen von dir, um die Auflistung noch zu erweitern und zu optimieren.

1. Image Widget

Das Image Widget-Plugin ist ein einfaches, aber effektives Plugin, um einzelne Bilder in Widgets zu featuren. Du hast etliche Möglichkeiten, deine Bilder einzufügen. Für den Bild-Titel wird der Widget-Titel genutzt. Außerdem kannst du die Größe deines Bildes bestimmen und eine Bildunterschrift angeben. Toll ist, dass du in der Bildunterschrift auch HTML-Elemente z.B. für Links verwenden kannst. Möchtest du mehrere Bilder zeigen, kannst du das Widget dann einfach mehrfach untereinander in deiner Sidebar oder in einem speziellen Widget-Bereich einfügen.

Um die Bilder für ein responsive Layout skalierbar zu machen, benötigst du folgenden CSS-Style in deinem Stylesheet:

/* --- Image Widget Plugin --- */
.widget_sp_image a.widget_sp_image-image-link img {
	max-width:100% !important;
	margin:0 0 8px;
}

Ich habe in diesem Beispiel außerdem einen etwas größeren Abstand (8px) zwischen Bild und Bildunterschrift eingefügt. Für skalierbare Bilder darfst du dann außerdem keine Breite und Höhe direkt im Widget angeben. So können sich die Bilder dann an die jeweilige Breite des Widget-Bereichs anpassen.

So kannst du das Image Widget Plugin verwenden.

2. Hey It’s a Flickr Widget

Das WordPress-Plugin »Hey It’s a Flickr Widget« ist wieder ein kleines, leichtes Plugin und eine einfache Lösung, um eine bestimmte Anzahl deiner neusten Flickr-Fotos mit Hilfe eines Widgets auf deiner Webseite einzubinden.

Die Größe und Anzahl der Bilder kannst du dabei selbst im Widget festlegen. Sehr nützlich ist, dass die Anzahl der Bilder nicht begrenzt ist. Wenn du möchtest, könntest du so also eine komplette Sidebar-Leiste mit deinen neusten Fotos in einem etwas größerem Format zeigen.

Um die Flickr-Bilder ohne Listen-Styles anzuzeigen, benötigst du vielleicht noch ein paar zusätzliche Styles in deinem Stylesheet.

/* --- Flickr Widget --- */
.widget_flickr #flickr-images li.flickr-image {
	margin:0 3px 3px 0;
	padding:0;
	float:left;
	list-style:none;
}

In meinem Beispiel habe ich z.B. noch list-style: none setzen müssen und float:left, um die Bilder nebeneinander aufzureihen.

Mit dem Flickr Widget kannst du deine neusten Flickr-Fotos zeigen.

3. Google Picasa Viewer

Mit Hilfe des Google Picasa Viewer-Plugins kannst du deine Picasa-Bilder via Shortcode auf einer WordPress-Seite einbinden. Über ein einfaches Widget hast du dann noch die Option, alle Alben mit einem Album-Vorschaubild z.B. in deiner Sidebar anzuzeigen.

Die Einstellungen des Plugins sind wieder recht einfach (du findest die Plugin-Optionen unter Einstellungen). Du kannst die Größe deiner Bilder individuell angeben, die Seite aussuchen auf der die Album-Bilder angezeigt werden sollen und die Anzahl der Fotos pro Seite festlegen. Im Widget musst du dann nur noch einen Widget-Titel angeben.
Um die mittige Anordnung der Album-Thumbnails zu entfernen, habe ich übrigens in meinem Beispiel noch den zusätzlichen CSS-Style text-align:left für #nak-gpv .grid angegeben.

Auf der WordPress-Seite musst du außerdem noch den Shortcode [nak_google_picasa_albums] angeben.

Mit dem Picasa Viewer Plugin kannst du eine Übersicht deiner Picasa Alben anzeigen.

4. Instagram Gallery Widget

Mit dem Instagramm Gallery Widget kannst du eine Bilder-Vorschau oder Featured Images deiner Instagram-Bilder auf deiner Webseite zeigen. Die Einstellungen kannst du bei diesem Plugin wieder direkt im Widget vornehmen. Einstellungs-Optionen sind z.B. die Größe der Vorschaubilder, die Anzahl von Bildern oder eine zufällige Bildauswahl. Klasse ist außerdem die Option, Bilder nach Instagram-Effekten auszuwählen. Außerdem hast du noch die Möglichkeit die CSS-Styles des Plugins direkt im WordPress-Adminbereich (unter Einstellungen / Instagram Gallery Widget) an deine eigenen Theme-Styles anzupassen.

Die Widget-Optionen und ein Beispiel des Instagram Gallery Widgets (Screenshots des Plugin-Autors).

Wie gefallen dir die vorgestellten Widget-Plugins für die Präsentation von Fotos und kennst du weitere, hilfreiche Foto-Widgets? Über dein Feedback und weitere Plugin-Tipps freue ich mich sehr!

Heute möchten wir dir unser neustes Premium WordPress-Theme Piha vorstellen. Außerdem haben wir uns dazu entschlossen, auch dem Elmastudio-Blog mal wieder einen frischen Anstrich zu verpassen und das Piha-Theme auch gleich hier auf dem Blog zum Einsatz zu bringen.

Natürlich haben wir auch eine Live-Demo mit den Theme-Features für dich vorbereitet. Auch einige Video-Anleitungen zur Nutzung des Themes kannst du dir auf der Piha-Themeseite anschauen.

Die wichtigsten Theme-Features im Überblick

Bei Piha haben wir besonderen Wert darauf gelegt, dass alle Elemente des Blogs responsive (also für mobile Geräte wie Tablet PCs und Smartphones optimiert) sind.

Im Piha-Theme kannst du ein speziell für Touchscreens optimierte Haupt-Menü nutzen, so dass alle Navigationspunkte standardmäßig verborgen sind und erst bei Bedienung des Menü-Buttons sichtbar werden. So wird auch auf kleinen Bildschirmen der Inhalt der Webseite nicht durch eine zu Platz einnehmende Navigation verdeckt.

Das Piha-Theme in der iPad-Ansicht.

Auf einem Smartphone ist dieses »verstecktes Menü« natürlich ganz besonders hilfreich, da der kleine Bildschirm wenig Platz für die Blog-Inhalte bietet.

Neben der Optimierung des responsive Webdesigns ist es uns außerdem wichtig, dass Piha viele Möglichkeiten bietet, deinen Blog noch individueller und flexibler zu machen. Daher kannst du die WordPress Artikelformatvorlagen (Post Formats) nutzen, dir individuelle Sidebar-Widgets für Social Links, Flickr-Bilder und ein featured Video einrichten, die Farben, die Menüs und den Header deines Blogs anpassen und vieles mehr.

Die wichtigsten Theme-Optionen kannst du dir auch in dieser kleinen Video-Anleitung anschauen:

Jetzt aber genug der Theorie. Schaue dir das Piha-Themeseite doch einfach in der Live-Demo oder hier auf dem Blog ein wenig genauer an. Den Elmastudio-Blog werden wir in den nächsten Tagen auf jeden Fall auch noch nach und nach weiter einrichten.

Wir haben versucht, dass Theme vor dem Release auf so vielen Browsern und Geräten wie möglich zu testen. Falls du dennoch einen Fehler im Theme entdeckst, würden wir uns sehr darüber freuen, wenn du uns diesen mitteilst. So können wir das Theme immer weiter verbessern.

Wir freuen wir uns schon sehr über dein Feedback, Verbesserungsvorschläge oder Anregungen für Erweiterungen des Piha-Themes.

Ich habe mir die Möglichkeiten des Social-Plugins einmal genauer angeschaut und die doch recht umfangreichen Anpassungsoptionen des WordPress-Plugins getestet. Hier eine kleine Zusammenfassung meiner Recherche.

1. Plugin-Features

Social bietet etliche Möglichkeiten, um den eigenen WordPress-Blog mit Twitter und Facebook zu verbinden. Die wichtigste Funktion ist, dass deine Blogleser auch direkt über ihren Twitter- und Facebook-Login auf deinem Blog kommentieren können. So müssen nicht immer wieder Name, Email und Webseite ausgefüllt werden, um schnell einen Kommentar auf einem Blog zu hinterlassen.

Zusätzlich sammelt das Plugin alle Beiträge, bei denen dein Artikel direkt bei Twitter oder Facebook erwähnt wurde und listet diese im Artikel. Diese Social-Comments können dann oberhalb des Kommentarbereichs nach Standard Blog-Kommentaren, Tweets, Facebook-Posts und Pingbacks sortiert werden. Alle anderen Kommentare werden dann jeweils minimiert und leicht transparent angezeigt.

Kommentieren per Twitter- oder Facebook-Login, sowie Sortieren von Kommentaren, Tweets, Facebook-Posts und Pingbacks

Außerdem kannst du deine neuen Artikel über eine Option im Artikelbereich von WordPress direkt mit einem Tweet oder eine Facebook-Nachricht veröffentlichen. So musst du nicht mehr jede Plattform einzelnd aufrufen, um deinen neuen Artikel zu promoten.

2. Die Plugin-Einstellungen

Die Standard-Einstellungen von Social sind eigentlich recht simpel gehalten. Als erstes kannst du dein eigenes Twitter- und Facebook-Konto in den Plugin-Einstellungen verknüpften.

Verknüpfung mit dem eigenen Twitter- und Facebook-Konto in den Plugin-Einstellungen

Um die Anzeige von Twitter-Hovercards zu ermöglichen (optional) musst du dich außerdem noch für einen Twitter @Anywhere API Key registrieren. Diesen kannst du dann in den Social Plugin-Einstellungen angeben.

Beispiel der Twitter-Hovercards Anzeige

3. Design-Anpassungen

Besonders gut gefallen mir beim Social Plugin die Möglichkeiten, das Design komplett selbst anpassen zu können.

Möchtest du nur ein paar Kleinigkeiten anpassen kannst du dir zur Verfügung stehenden CSS-Styles verwenden, um die Plugin eigenen Styles zu überschreiben. Folgende CSS-Styles werden standardmäßig verwendet:

• .social-comment-header Der div-Container umschließt den Kommentatoren-Name, das Avatarbild und die Meta-Info (Zeitangabe)
• .social-comment-inner Ein zusätzlicher Div-Container, der den kompletten Kommentar-Inhalt umschließt
• .social-comment-body Für das Styling des Kommentar-Textes
• .social-comment-collapsed Klasse, um Kommentare verkleinern zu können (z.B. können so bei der Anzeige der Tweets, alle übrigen Kommentare leicht transparent, ohne Kommentar-Text und mit kleineren Avatarbildern angezeigt werden (siehe Standard-Version des Plugins)
• #social #commentform Zum Styling des Kommentar-Feldes
• .bypostauthor CSS-Klasse um das Kommentar des Artikelautors speziell zu markieren (z.B. mit Hilfe eines zusätzlichen background-Icons)

Um den Kommentar-Bereich des Social Plugins komplett an das eigene Theme-Design anzupassen, kann man außerdem das Standard-Stylesheet des Plugins deaktivieren und ein eigenes Stylesheet anlegen.

Um des Standard-Stylesheet zu deaktivieren fügt man einfach folgenden Code in die functions.php Datei des Themes ein:

/**
 * Disable default CSS for the Social plugin
 */
define('SOCIAL_COMMENTS_CSS', false);

Dann kopiert man sich am besten das Standard-Stylesheet »comments.css« aus dem Ordner wp-content/plugins/social/assets/ und baut sich die eigenen Styles auf dieser Vorlage auf.

Im Ordner assets befinden sich übrigens auch alle verwendeten Image-Sprites. Diese kann man sich ebenfalls als Vorlage nehmen und die Icons z.B. für Twitter, Facebook, Pingbacks und Kommentare bei Bedarf noch etwas an das eigene Design anpassen.

Die angepassten Styles für das Plugin kannst du dann entweder in dein Hauptstylesheet kopieren (dabei solltest du darauf achten, dass du den korrekten Pfad für deine Images nutzt) oder du fügst das Stylesheet z.B. in einen eigenen Ordner namens CSS ein und rufst das Stylesheet dann zusätzlich zu deinem Haupt-Stylesheet innerhalb des head-tags (und unterhalb des Links zu deinem Haupt-Stylesheet) in der header.php Datei auf.

<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_template_directory_uri(); ?>/css/comments.css" />

Solltest du wirklich nicht mir der alleinigen Anpassung des Stylesheets zurecht kommen, kannst du zusätzlich auch noch die comments.php Datei des Social-Plugins (diese wird vom Plugin anstelle der normalen comments.php Datei deines Themes genutzt) an deine eigenen Wünsche anpassen. Dazu musst du die Datei ebenfalls über die functions.php Datei aus dem Plugin auslagern und dann innerhalb deines eigenen Themes aufrufen.

Füge dazu folgenden Code in die functions.php Datei ein:

/**
 * Define custom comments file for Social plugin
 */
define('SOCIAL_COMMENTS_FILE', STYLESHEETPATH.'/social-comments.php');

Am einfachsten ist es, wenn du dir jetzt wieder als Vorlage die Standard comments.php Datei aus dem Ordner wp-content/plugins/social/ kopierst und diese dann als neue social-comment.php Datei in deinen eigenen Themeordner einfügst.

Über Anpassungen in der social-comments.php Datei kannst du jetzt z.B. auch die Sprach-Strings für deinen Kommentarbereich anpassen, da diese Standardmäßig nur auf Englisch zur Verfügung stehen.

Wie du siehst kannst du das Social-Plugin wirklich sehr schön individuell an dein Theme anpassen. So wirkt der Kommentarbereich auch weiterhin wie ein Teil des Theme-Layouts und du kannst weiterhin die Optik der meisten Elemente selbst bestimmen.

Ich hoffe meine Tipps können dir bei der Integration des Plugins in deinen eigenen Blog weiterhelfen. Wenn du das Plugin übrigens einmal wieder entfernen möchtest bleiben dir die Kommentare und Pingbacks übrigens im Standard-Layout des Themes auch weiterhin auf deinem Blog erhalten. Über deine Erfahrungen und Tipps zum Social-Plugin oder anderen Social Comments-Diensten freue ich mich sehr!

Tipps zum Weiterlesen:

• Auf der Plugin-Seite bei WordPress.org findest du im FAQ-Bereich eine ausführliche Beschreibung der Plugin-Optionen.
• Auf dem Mailchimp-Blog wird das Social Plugin ebenfalls ausführlich vorgestellt und alle wichtigen Möglichkeiten werden beschrieben. Der Mailchimp-Blog ist übrigens auch ein tolles Beispiel, um Social im Einsatz zu sehen.
• Ausführliche Plugin-Beschreibung des Social Plugin-Autors Alex King (auf dem Blog kannst du dir außerdem eine schöne Designanpassung des Plugins anschauen).

Auf der Wordcamp San Francisco Webseite (welches vom 12-14 August 2011 stattgefunden hat) findest du jede Menge tolle Videos mit Aufzeichnungen der einzelnen Wordcamp-Vorträge. So kannst du dich über die aktuellsten Trends und Themen rund um WordPress informieren. Besonders spannend finde ich z.B. die Beiträge »Responsive Webdesign« von Sara Cannon, »Options for a Multilingual Site« von Shannon Smith oder »Awesome Up Your Boring Theme: WordPress Post Formats« von Ian Stewart.