Ausgabe 4 / WordPress Magazin

WordPress Magazin

FACEBOOK

Landing Page erstellen Kontakt: wp-magazin.ch

SEO

Tricks fr Experten

WIDGETS
Aufklapp-Effekt

Inhalt
03 06 08 Editorial Kurznachrichten WebMatrix: Webentwicklung leicht gemacht!

10

How-To: Facebook IFrame Landing Page Anwendung erstellen

add_theme_support: Das ideale Werkzeug, um Plugins durch Code zu konfigurieren WordPress 3.2 schneller, besser, schlanker

14 16

18
20

WordPress SEO-Tricks fr Experten

WordCamp Switzerland

22
26 28 32

Auf- und zuklapp-Effekt fr WordPress-Widgets

WordPress Video-Training von video2brain Theme Showcase WordPress-Profis gesucht

WordPress Magazin

Editorial
mals her. Das muss jetzt auch im Blog geschehen: Stimmt die Themenausrichtung, wo man immer wieder zwischen News und Coding-Tipps hin und her wankt, stimmt das Angebot als Gesamtpaket? Mit dem WordPress Netzwerk haben wir beispielsweise schon ein interessantes Werkzeug, wir mssen nur noch die richtige Art finden, wie es der Community am meisten ntzt. Inputs sind hier selbstverstndlich immer gerne willkommen! Hoffen wir aber, dass es pltzlich Klick macht und die zndende Idee da ist. Bis dahin wnsche ich viel Spass beim Lesen, Recherchieren, Probieren und vielleicht sogar Kritisieren. Pascal Birchler Editor-in-chief

Es ist Frhling! Mehr Sonne, kein Schnee, grne Wiesen und viel Gelati. Aber auch Frhjahrsputz ist wieder angesagt, nicht nur zuhause sondern auch im Blog. Bei uns zum Beispiel sind einige nderungen geplant, allerdings werde ich bestimmt das meiste wieder prokrastinieren. Was fr nderungen das sind? Nun, das WordPress Magazin war schon so eine nderung - etwas Neues, Frisches musste da-

Impressum
Redaktion Pascal Birchler Gestaltung 08EINS, Haempa Maissen Twitter http://twitter.com/wpmch/ Facebook http://facebook.com/wpmagazin/ Website http://wp-magazin.ch/

WordPress Magazin

Kurznachrichten
Attacken auf WordPress.com Anfangs Mrz gab es eine gross angelegte DDoS Attacke auf Automattics Hosting Service WordPress.com. Betroffen waren gleich alle drei Rechenzentren, was sogar zu einem kurzzeitigen Ausfall fhrte. Mitte April wurden dann auch noch die Server gehackt und Quelltext gestohlen. Mittlerweile hat man die Infrastruktur von WordPress.com stark ausgebaut, damit so etwas so schnell nicht mehr passiert. Mehr Infos: http://wpmag.org/eu Statify Datenschutz-konforme Statistik fr WordPress Sergej Mller scheint Plugins ab Laufband zu produzieren. Diesmal schttelte er mit Statify ein kompaktes Tool aus dem rmel, welches komplett auf die Verarbeitung der Besucher IP-Adressen verzichtet. Man hat nun zwar Datenschutz-mssig unbedenkliche Statistiken, jedoch zhlt Statify auch dementsprechend jeden Seitenaufruf. Mehr Infos: http://wpmag.org/statify Jetpack WordPress.com Features fr selbstgehostete Blogs Jetpack ist ein neues WordPress Plugin aus dem Haus Automattic, welches verschiedene Features von WordPress.com auch fr Normalo-Blogs freischaltet. Dazu gehren bis jetzt unter anderem Gravatar Hovercards, Sharedaddy und die Rechtschreibprfung After the Deadline. Weitere sollen noch kommen. Mehr Infos: http://wpmag.org/ew WordPress fr Kundenprojekte WordPress ist eines der bekanntesten Blogsysteme, wird aber immer hufiger auch fr gewhnliches Content Management verwendet. Bei der Umsetzung von Kundenprojekten mit WordPress gibt es jedoch einige Dinge zu beachten. Ellen von elmastudio.de erklrt, was man am besten schon von Beginn weg regeln sollte. Mehr Infos: http://wpmag.org/wpkundenprojekte

WordPress Magazin

WPCandy Theme Madness Anstelle eines Basketball-Turniers (March Madness) gibt es bei WPCandy aktuell ein Turnier mit ganzen 64 Premium Theme Anbieter. Voten kann man dann unter anderem im WPCandy Blog, in seinem eigenen oder ber Twitter. Fr weitere Details und die genauen Teilnahmebedingungen sollte man den Blog lesen. Gewinnen kann man eine handgemachte WPCandy-Trophe. Mehr Infos: http://wpmag.org/wpmadness Guided Transfers von WordPress.com zu .org Blogs Nach dem Launch von Jetpack bietet Automattic nun auch noch einen Umzugsdienst an. Fr einmalige 99 Dollar kann man sich von den Profis den Blog von

WooThemes mit Neuausrichtung WooThemes kennen bestimmt alle: Es ist der grsste Anbieter von WordPress Themes, die etwas kosten. Bisher gab es vereinzelt auch Templates fr Drupal, Magento, Expression Engine und Tumblr. Allerdings werden diese ab sofort nicht mehr angeboten, da man die erforderlichen Kapazitten nicht hat und man sich lieber auf das Kerngeschft konzentriert. Mehr Infos: http://wpmag.org/woorefocus

WordPress.com auf seinen eigenen Server (eines empfohlenen Anbieteres) umziehen lassen. Jetpack wird dabei vorinstalliert sein, sodass man keine Features verliert. Mehr Infos: http://wpmag.org/ey

WordPress Magazin

Updates
Mobile Im Mrz erschien Version 2.7 der WordPress iOS-App, welche endlich die vielen Bugs beheben soll, durch welche die App bisweilen auf sich aufmerksam gemacht hat. Fr Version 2.8 plant man bereits ein paar spannende Features. Auch die WordPress BlackBerry-App bekam ein Update, jedoch ein sicherheitstechnisches. Version 1.4.6.1 wird u.a. wegen der neuen Passwort-Verschlsselung empfohlen. Mehr Infos: http://wordpress.org/extend/mobile/ Automattic Mitte April hat Automattic alle Mitarbeiter und auch WordPress-Fans aufgefordert, aus Grnden der Gesundheit einen 5 Kilometer Lauf zu absolvieren. Das Schwierige dabei: 80 Leute rund um den Globus fr diesen 5k zu organisieren. Mehr Infos: http://wp.me/pf2B5-1JY Das bekannte Anti-Spam Plugin Akismet hat am 8. April den 25 Milliarsten SpamKommentar beseitigt. Dazu gab es auch einige Statistiken, z.B. sind Spammer eher an einem Freitagabend aktiv, sonntags weniger. WordPress.com Durch eine Partnerschaft mit dem Startup OnSwipe kann man nun sein WordPress. com Blog in einem iPad-optimierten Magazin-Stil anzeigen lassen. OnSwipe ist auch fr selbst gehostete Blogs erhltlich. Mehr Infos: http://wpmag.org/onswipedotcom

WordPress.org Kurz nach dem Release von WordPress 3.1 gibt es bereits eine neue Version: 3.1.1 behebt einige kleine Fehler. Ein Update ist bers Backend zum Glck schnell durchgefhrt. Mehr Infos: http://wordpress.org/news/2011/04/wordpress-3-1-1/ Wie jedes Jahr ist auch WordPress wieder am Google Summer of Code dabei. Studenten aus aller Welt knnen an bestimmten und wichtigen Projekten arbeiten. Bei erfolgreicher Fertigstellung winken 5000 Dollar kein schlechter Sommerjob also. Mehr Infos: http://wordpress.org/news/2011/03/wordpress-summer-of-code-2011/ BuddyPress BuddyPress 1.2.8 erschien Ende Februar und beinhaltet einige kleine Bug Fixes. Zudem ist das Plugin mit den neusten bbPress- und WordPress-Versionen kompatibel. bbPress Die erwhnte bbPress Version ist 1.0.3 und hauptschlich ein Sicherheitsupdate. Ein Update wird dringend empfohlen.

WordPress Magazin

WordCamps
Es ist schon faszinierend, wie viele WordCamps es mittlerweile gibt. Von A-Z, von Amerika ber Portugal bis Neuseeland ist etwas dabei, also hat man schnell einmal die Mglichkeit, eines zu besuchen. Die WordPress-Veranstaltungen bieten eine tolle Gelegenheit, sich mit Gleichgesinnten auszutauschen und die einen oder anderen Kniffe zu lsen. Wie immer haben wir fr euch eine Liste an aktuellen WordCamps vorbereitet, darunter ist selbstverstndlich auch das am 7. Mai stattfindende WordCamp Switzerland! WordCamp Atlanta 6. - 7. Mai Atlanta, Georgia http://atlantawordcamp.com/ WordCamp Switzerland 7. Mai Brugg http://wordcamp-switzerland.ch/ WordCamp Orange County 14. Mai Orange County, Kalifornien http://www.ocwordcamp.com/ WordCamp Raleigh 21. - 22. Mai Raleigh, North Carolina http://wordcampraleigh.com/ WordCamp Reno-Lake Tahoe 4. - 5. Juni Reno, Nevada http://2011.reno.wordcamp.org/ WordCamp Columbus 17. - 19. Juni Columbus, Ohio http://wordcampcolumbus.com/ WordCamp Montreal 9. - 10. Juli Montreal, Quebec http://wcmtl.org/

WordPress Magazin

WebMatrix: Webentwicklung leicht gemacht!

Im Dezember wurde auf wp-magazin.ch das neue kostenlose Web-Entwicklungstool WebMatrix vorgestellt. Mit diesem Tool erhlt man alles zum schnellen Erstellen, Bearbeiten und Verffentlichen von Webseiten auf Basis von OpenSource Tools wie WordPress, oder man hat die Mglichkeit gleich selbst seinen eigenen Code zu schreiben. WordPress und WebMatrix: Erste Schritte Da es schon unzhlige Erste Schritte mit WebMatrix im Web gibt, geben wir hier nur einen kurzen Einstieg und verweisen auf diese einschlgige Seiten. 1. Konstenlos auf der Microsoft Produkteseite WebMatrix Download holen und installieren. 3. Fr detaillierte Installationsund Setup-Schritte gibt es diese WebMatrix-Anleitung hier. Webseite aus Web Gallery Anschliessend knnen Sie Ihre WordPresse Seite mit dem integrierten Codeund Datenbankeditor bearbeiten. Dank der farblichen Syntax-Hervorhebung sind Theme-Anpassungen ein Leichtes. Kleiner Tipp am Rand:

2. WordPress-Benutzer whlen nun die Option Site From Web Gallery und WebMatrix installiert alles automatisch: Web Matrix identifiziert die erforderlichen Komponenten, die auf Ihrem lokalen Entwicklungsrechner bentigt werden, und zwar unabhngig davon, ob es sich um ASP.NETAnwendungen auf der Basis eines SQL-Servers oder um PHP-Anwendungen auf der Basis von MySQL handelt.

Mit den in Internet Explorer 9 integrierten Entwicklertools (aufgerufen per F12Knopfdruck) kann man Webseiten-Elemente anklicken und gleich analysieren. Diese Werkzeuge sparen viel Zeit bei der Fehlerbehebung und machen die Umsetzung der persnlichen nderungen einfacher (siehe Abbildung 3). Erfassen von Anfragen und SEO-Berichten Neben den reinen Entwicklungs-Werkzeugen, enthlt WebMatrix ein praktisches Tool, das smtliche Anfragen an

WordPress Magazin

Ihre lokale Website nachverfolgt. Sie erhalten Informationen darber, ob die Anfrage erfolgreich war oder nicht, wie lange die Verarbeitung gedauert hat usw. Eine weitere praktische Funktion von WebMatrix ist die Suchmaschinenoptimierung. Anhand eines integrierten Berichts erfahren Sie, wie Sie Ihrer Website die ntige Relevanz verleihen und fr Suchmaschinen optimieren knnen. Verffentlichen Nach dem Erstellen und Testen Ihrer Anwendung knnen Sie die Webseite zusammen mit der Datenbank in einem Klick im Internet verffentlichen. Hierzu steht die in WebMatrix integrierte Verffentlichungsfunktion mit Untersttzung von FTP, FTPS und WebDeploy zur Verfgung. WebMatrix hilft den passenden Hoster zu finden, welcher die gewhlte Technologie Ihrer Web-Anwendung auch tatschlich untersttzt - die Webseite wird dann gleich direkt aus WebMatrix ins Netz publiziert. So einfach geht das! Last but not least, alle Studenten knnen von einem einjhrigen kostenlosen Schweizer Webhosting Angebot profitieren. Details sind unter www.academiczone.ch zu finden.

Ken Casada ist ein Developer Evangelist bei Microsoft Schweiz. Er hat mehr als 10 Jahre Erfahrung in der Entwicklung von Lsungen auf der MS Plattform fr mittlere und kleine Firmen.

WordPress Magazin

How-To: Facebook IFrame Landing Page Anwendung erstellen

Heute mchte ich euch zeigen, wie einfach man eine Facebook Landing Page mit PHP, HTML/CSS und Javascript erstellen kann. Wir mutieren zwar nicht zum Social Media Blog, diese Anleitung ist aber bestimmt sehr ntzlich fr einige von euch! Hintergrund Doch was versteht man eigentlich unter einer Facebook Landing Page? Genau genommen meint man damit einen speziellen Reiter einer Fanseite, die neuen Besuchern angezeigt werden. Man kann aber auch spezielle Landing Pages fr Aktionen oder Wettbewerbe nutzen. Normalerweise hat eine Fanseite die Standard-Reiter Pinnwand, Fotos und vielleicht noch Veranstaltungen. Weitere knnen durch Facebook Applikationen aus dem ffentlichen Verzeichnis hinzugefgt werden. Besonders beliebt ist die Anwendung Static FBML, mit der man bis anhin sehr viele Landing Pages umgesetzt hat. Mit ihr kann man gewhnliches HTML in Kombination mit speziellen Facebook-Tags fr Landing Pages verwenden. In der Nutzung ist man aber sehr eingeschrnkt, beispielsweise bei Javascript. In einigen Tagen, genauer gesagt am 11. Mrz, wird es nicht mehr mglich sein, Static FBML auf seiner Fanpage zu nutzen. Stattdessen sollen eigene Applikationen - in IFrames - genutzt werden. Diese haben viele Vorteile: Man kann nun problemlos Javascript und somit auch Google Analytics einsetzen, ist im Design nicht mehr beschrnkt und kann seine Seiten noch besser in Facebook integrieren. Erste Schritte

Als Erstes muss man die Facebook Developer Applikation installieren, danach kann man seine erste Anwendung erstellen. Als Erstes gibt man den Namen ein und akzeptiert die AGB von Facebook. Der Name darf brigens nicht an eine Facebook-eigene Anwendung wie Diskussionen oder Veranstaltungen angelehnt sein.

Da der Name ffentlich ist, sollte man etwas Sinnvolles whlen, wie z.B. WordPress Magazin oder dercooleblog.com. Danach kommt man zur eigentlichen Einstellungs-Seite der Anwendung, wo es allerhand einzustellen gibt.

10

WordPress Magazin

Wichtig ist auf dieser ersten Einstellungsseite, dass man ein Logo (75x75px) sowie ein Icon (16x16px) hochldt. Am besten eignen sich GIF-Bilder mit transparentem Hintergrund. Auch die Sprache schaltet man vorsichtshalber lieber auf Deutsch um, ich konnte allerdings beim Einrichten keinen Unterschied zu Englisch feststellen. Diese Einstellung drfte wohl nur wichtig sein, wenn man seine Anwendung ins offizielle Verzeichnis stellen mchte. In unserem Fall bleibt die Anwendung jedoch privat. Das nchste und letzte Register hat den Namen Facebook-Einbindung. Hier stellen wir ein, welche Seite im IFrame eingebunden werden soll. Zudem wird hier die Anwendungs-ID und der Anwendungs-Geheimcode angegeben, welche wir spter fr die Authentifizierung bentigen.

URL des Reiters - Hier kommt dann die Datei, meistens index.php Canvas-Typ / Reiter-Typ - IFrame Name des Reiters - Kurz und bndig, maximal 16 Zeichen Jetzt kann man die nderungen speichern, wodurch man auf die bersichtsseite gelangt. Dort klickt man auf die AnwendungsProfilseite und anschliessend auf Zu meiner Seite hinzufgen. Im folgenden Men whlt man dann die gewnschte Fanseite aus. Allerdings wird die Anwendung noch nicht standardmssig allen Nutzern angezeigt. Dazu muss man noch die entsprechende Fanseite bearbeiten und unter dem Punkt Genehmigungen verwalten den StandardReiter fr Nicht-Fans definieren. Der Code Jetzt knnen wir uns nun der eigentlichen Applikation widmen. Dazu erstellt man im Programm seiner Wahl eine PHP Datei mit einfachem HTML-Grundgerst - dazu reicht beispielsweise schon Dreamweaver. Als Nchstes bindet man das PHPSDK, bestehend aus einer einzigen Datei, von Facebook ein, welches man bei GitHub herunterladen kann. Dort gibt es auch ein entsprechendes Beispiel zur Nutzung:

Canvas-URL - Die URL zur Applikation auf dem eigenen Server, ohne jedoch eine explizite Datei anzugeben. Beispiel: http://example.com/wpcontent/facebook/

WordPress Magazin

11

How-To: Facebook IFrame Landing Page Anwendung erstellen

Damit initialisieren wir die Klasse und laden die aktuelle Session. So erhalten wir nmlich bereits einige Basics ber den aktuellen Besucher, ob er eingeloggt ist oder nicht und ob er bereits Fan der Seite ist. Da wir jedoch weitere Features wie den Like-Button und die Mglichkeit, Freunde einzuladen, nutzen wollen, bentigen wir die Daten auch in Javascript. Dazu laden wir zustzlich noch die JSSDK direkt nach dem ffnenden <body>Tag: Auto-Resize Wir haben in den Anwendungs-Einstellungen angegeben, dass die IFrameGrsse automatisch angepasst werden soll, schliesslich will man ja keine Scrollbalken, welche das mit 520 Pixel schon schmale Layout je nach Browser nochmals um einige Pixel reduzieren wrden. Zustzlich zu dieser Einstellung muss man aber noch in der selben window.fbAsyncInit Funktion folgende Zeile einfgen:

Jetzt muss man - gleich im Anschluss nur noch alle Javascript-Funktionen initialisieren, die Session-Daten haben wir dabei schon aus dem PHP-Teil.

Hat man allerdings ein jQuery-Slider oder -Accordion, so verndert sich ja immer die Grsse des IFrames. FB.Canvas.setAutoResize() ist deshalb nur fr die Initialisierung des Tabs sinnvoll. Anschlieende Vergrsserungen sollten besser manuell mit FB.Canvas.setSize() durchgefhrt werden. Ein Beispiel:

Danach kommt das eigentliche Layout, wo man sich nach Lust und Laune austoben kann. Zum Beispiel kann die Landing Page an Facebook angelehnt oder so kunterbunt wie die Website sein. Einzige Limitierung ist die Breite von 520 Pixel. Die Hhe sollte variabel sein, wie wir das vorhin in den Einstellungen definiert haben. Dazu bedarf es allerdings noch einer Zeile Code...

Events Facebooks Javascript-SDK erlaubt es, sich in bestimmte Events einzuklinken. Auf diesem Weg kann man die Applikation bei Login/Logout oder bei einem Gefllt mir neu laden. Mit Hilfe des GET-Parameters app_data kann man beim Reload bestimmte Werte an die Applikation bergeben, z.B. um eine Nachricht fr den neuen Fan anzuzeigen.

12

WordPress Magazin

Folgende Schnipsel kommen ebenfalls in die Init-Funktion: Teilen Ein weiterer Vorteil einer eigenen Anwendung gegenber Static FBML ist die Mglichkeit, dass man dem User Dialoge anzeigen kann. So lassen sich unter anderem Nachrichten an seine Pinnwand posten, wie dieses Beispiel zeigt:

Fazit Schlussendlich knnte die Landing Page so aussehen wie die des WordPress Magazins, auch wenn unsere noch etwas minimalistisch daherkommt. An dieser Stelle seid ihr gefragt! Erstellt eure eigene Landing Page anhand dieses Beispiels und liest weiterfhrende Dokumentationen von Facebook: Signed Request Social Plugins (Gefllt mir Buttons, etc.) Graph API Javascript SDK bersicht Facebook OAuth Implementierung

Hier kommt fr den Element-Selektor $('#share') jQuery zum Einsatz. Dieser ganze Code-Block sollte am besten in einem $(document).ready(function () { ... }); untergebracht werden, damit sichergestellt ist, dass die Facebook-SDK vollstndig geladen ist. Am Ende sieht das dann ungefhr so aus:

WordPress Magazin

13

add_theme_support:

Das ideale Werkzeug, um Plugins durch Code zu konfigurieren

Mit Wordpress 2.9 wurden die Funktionen rund um die Funktion add_theme_ support eingefhrt. Die Idee ist simpel: Plugins (oder auch Wordpress selbst) stellen neue Funktionalitten bereit, die vom Theme untersttzt werden mssen, damit sie funktionieren. Das Theme macht einen add_theme_support-Aufruf in der functions.php und teilt so mit, dass es die neue Erweiterung darstellen kann. Das erste Beispiel fr so eine Anwendung war das Artikelminiaturbild in Wordpress 2.9. Hat das ausgewhlte Theme einen add_theme_support('post-thumbnail')Aufruf gemacht, erscheint im Backend beim Erfassen von Artikeln eine neue Metabox, um das Bild auszuwhlen. Das Tolle an dieser Funktion ist, dass sie nicht auf das Theme begrenzt ist. Theoretisch knnen sich so auch andere Plugins steuern lassen. Und add_theme_support hat noch einen zweiten Parameter mit dem Einstellungen bergeben werden knnen. Wir bei Blogwerk benutzen add_theme_ support vor allem, um unsere Bildergalerie oder spezielle Widgets fr Themes freizuschalten. Alle unsere Erweiterungen sind so programmiert, dass sie Einstellungen bentigen, zum Beispiel welche CSS-Klasse vergeben werden soll oder ob noch erweiterte Funktionen freizuschalten sind. Im Vergleich: Der Einstellungsdialog Einige werden jetzt aufstehen und sagen, dass sie auch sehr einfach einen Einstellungsdialog im Backend mit der Settings API erstellen knnen. Richtig, aber am Ziel vorbei. Es kann durchaus Situationen geben, in denen man noch nicht mal einem Administrator etwas einstellen lassen mchte, aber Konfigurationsmglichkeiten, z.B. fr Wiederverwendbarkeit in anderen Blogs, sinnvoll erscheinen. Ausserdem kann auch beides kombiniert werden. Erst wenn der add_theme_support-Aufruf gettigt wurde, wird ein Administrationsinterface im Backend bereitgestellt. Im Detail: Wie funktioniert es? Zunchst muss man als Pluginentwickler die Erweiterung eines Plugins dafr vorbereiten, dass sie nur manchmal aktiviert wird. Die beste Lsung dafr ist, die Erweiterung in eine eigene PHP-Datei zu verpacken. Danach kann man in der Hauptdatei des Plugins folgende zwei Zeilen einfgen: if (current_theme_supports('super_funktion')) include('functions/super_funktion.php'); Jetzt ldt unsere Plugin den Code nur, wenn das Theme vorher gesagt hat, dass es damit auch was anzufangen weiss. Als nchstes fgen wir den Aufruf dafr in die functions.php des Themes ein: add_theme_support('super_funktion'); Jetzt wird die Erweiterung geladen. Stellen wir uns vor, unsere Erweiterung braucht zwei Parameter, dann wre der Aufruf in der functions.php wie folgt: add_theme_support('super_ funktion',array( 'parameter_a' => 'Wert Parameter A', 'parameter_b' => 'Wert Parameter B' )); Wie zu sehen ist, kann man die Parame-

14

WordPress Magazin

ter einfach im zweiten Parameter von add_theme_support als Array bergeben. Theoretisch knnte der zweite Parameter auch nur ein String sein, das macht aber in Zukunft mglicherweise Probleme, wenn man die Erweiterung modifizieren mchte und einen zweiten Parameter bentigt. Jetzt ist noch die Frage offen, wie die Parameter wieder ausgelesen werden knnen. Seit Wordpress 3.1 gibt es dafr eine Funktion. Vorher musste man auf ein globales Array zugreifen: $settings_temp = get_theme_ support('super_funktion'); $settings = $settings_temp[0]; Danach ist $settings ein Array und beinhaltet die Parameter, die beim add_theme_support-Aufruf angegeben worden. Fazit add_theme_support ist ein guter Weg, wenn nicht alle Funktionalitten eines Plugins immer bentigt werden. Es ist sehr einfach, den Code fr die Erweiterung komplett auszulassen und gar nicht zu laden, wenn er nicht bentigt wird. Auch die bergabe von Parametern fr den Code ist leicht zu bewerkstelligen und schneller als alles anderen Parameterspeicher in Wordpress, wie zum Beispiel eine Option, die trotz Caching mehr Aufrufe macht. Ausserdem eignet sich add_theme_support hervorragend fr parametrisierten Code, den nicht mal ein Administrator eines Blogs ndern sollte.

WordPress Magazin

15

WordPress 3.2 schneller, besser, schlanker

Kaum wurde WordPress 3.1 verffentlicht, hat man sich schon Gedanken um WordPress 3.2 gemacht. Die Features sind eher unspektakulr, trotzdem mchte ich auf die eher kurze Liste vom WordPress Development Blog eingehen. Das Gleiche haben brigens auch schon Perun und WordPress Deutschland in wenigen Stzen gemacht. Dabei mchte ich anmerken, dass wir bei der Titelwahl alle sehr unkreativ waren und bloss den Titel aus dem Development Blog adaptiert haben: WordPress 3.2, the plan: faster, lighter. Die Timeline fr WordPress 3.2 steht noch aus, doch mit Sicherheit drfte dieser Release weniger lange dauern als WordPress 3.1. Und zwar nicht nur, weil es wirklich lange genug gedauert hat, sondern weil auch die Features kaum an der Oberflche passieren. Aber sehen wir uns die Liste einmal genauer an: Das bringt WordPress 3.2 Generalberholung Alte Sachen schmeisst man raus, neues kommt aber nicht hinzu. Der ganze Adminbereich soll somit schneller und besser werden. Auch der Internet Explorer 6 gehrt zu diesen Altlasten und wird nun nicht mehr untersttzt. Bezglich Schnelligkeit soll vor allem auch im PHP-Teil einiges optimiert werden. Tabellen Die Schnittstelle fr die verschiedenen Daten-Tabellen wie z.B. fr Beitrge, Seiten, Benutzer soll fertiggestellt werden, sodass man z.B. in Plugins ohne grossen Aufwand solche Tabellen umsetzen kann. Falls dies schnell gelingt, werden auch die Ajax Features wieder integriert, da man dort noch einige Probleme hatte. PHP5, MySQL5 WordPress knpft, wie schon lange vorher bekannt, endlich an Drupal & Co. an und bentigt fortan mindestens PHP 5.2.4 und MySQL5. Allerdings werden hier vorerst bloss die Zahlen gendert und nicht etwa ganze Datenbankabfragen. Upgrades Der Upgrade-Prozess soll fr den Benutzer schneller werden, indem beispielsweise nur noch die wichtigen Dateien, welche auch bei einem Release gendert wurden, ausgetauscht werden. Zudem soll Twenty Ten oder Akismet nicht mehr automatisch aktualisiert werden. Hier hat man nmlich oft den unschnen Effekt eines Downgrades gehabt. Fullscreen-Editor Der WYSIWYG-Editor TinyMCE hat zwar einen integrierten Vollbild-Modus, doch der ist ziemlich unschn und hilft nicht so sehr beim Schreiben. Man hat sich bereits ein paar Plugins angeschaut, welche ein besseres Schreiberlebnis bieten und mchte nun selbst so eine Lsung implementieren.

16

WordPress Magazin

WordPress Magazin

17

WordPress SEO-Tricks fr Experten

Die meisten Leute, die sich mit WordPress SEO beschftigt haben, kennen die ganz normalen Plugins die man fr die Suchmaschinenoptimierung von WordPress Blogs benutzt. Sehr oft wird zum Beispiel Headspace 2, all-in-one SEO oder das WordPress SEO Plugin von Joost de Valk eingesetzt. Auf deutschen Blogs kommt auch sehr oft wpSEO zum Einsatz. Wichtigste SEO Aktion: Das Ziel definieren! All diese Plugins erfllen ganz unterschiedliche Anforderungen. Man muss jeweils gucken, welches Ziel man erreichen will und das entsprechende Plugin dazu auswhlen. Perfekte Onpage-Linkstruktur erstellen Heute mchte ich aber eine ganz besondere Strategie vorstellen, die viel weniger zur Onpage-Optimierung gedacht ist, als zur Struktur-Optimierung des WordPress Blogs. SEO Voraussetzung: Keyword Research & saubere semantische Struktur Ich gehe davon aus, dass es eine Keyword-Research gibt, die die entsprechenden Keywords identifiziert hat, und dass es eine sehr saubere Struktur gibt vom Blog, die in Silo-Form aufgebaut ist. Die entsprechenden semantischen Unterpunkte sind gut begrenzt und semantische Unterpunkte tauchen jeweils auch in der URL auf. Ein Beispiel hierfr knnte sein: Blog.de/Deutschland/NRW/Essen. Hier sind die Elemente in der URL sowohl semantisch als auch logisch-hierarchisch geordnet. Dies ist eine Grundvoraussetzung fr die Strategie die ich jetzt vorstellen werde. WordPress Plugin : SEO Search Terms Tagging 2 Um diese SEO-Strategie umzusetzen bentigt man zwei Plugins. Das eine Plugin heit SEO Search Terms Tagging 2, das zweite Plugin heit SEO Smartlinks. Mit dem SEO Search Term Tagging 2 Plugin ist es mglich ganz automatisch auszulesen, was Benutzer in Google eingegeben haben, bevor sie auf der entsprechenden Seite oder dem Artikel im WordPress Blog gelandet sind. Diese Searchterms kann man dann innerhalb des Blogs anzeigen lassen, wodurch der Blog fr die entsprechenden Begriffe relevanter wird. Hierdurch kann man eine bestimmte URL fr das focus keyword weiter optimieren. Nur 1 Keyword pro URL! Oft ist es jedoch so, dass hierbei der entsprechende Blogtitel auch fr Begriffe rankt, die man eigentlich gar nicht mchte, beziehungsweise wo Google eigentlich auf einen anderen Artikel zeigen sollten. Hier kommt das Tool SEO Smartlinks zum Einsatz. Fr jedes Keyword, beziehungsweise fr jede Keyword-Kombination, sollte es genau eine URL des jeweiligen Blogs geben, die hierfr hoch in Google ranken soll. Es ist sehr wichtig, dass es immer nur eine URL gibt auf die man optimiert, da man sich ansonsten selber ein hohes Ranking vermasselt. Ein Ranking an Nummer eins, zwei oder drei ist nmlich besser als Position sieben, acht und neun gleichzeitig. WordPress Plugin: SEO Smartlinks Sobald man nun entdeckt, dass das Tool SEO Search Terms Tagging 2 Begriffe anzeigt die nicht zu der Seite passen, auf der die Besucher gelandet sind, kommt

18

WordPress Magazin

das Tool SEO Smartlinks zum Einsatz. Man stellt das Tool so ein, das der entsprechende Begriff auf die Seite linkt, auf der man die Besucher gerne haben mchte. Das Plugin SEO Smartlink wandelt nun ganz automatisch diese Begriffe in einen Link um. So erfhrt Google wo man auf seiner eigenen Seite gerne die Besucher fr das entsprechende Keyword haben mchte. Zustzlich einen Ranktracker benutzen Richtig performant wird das Ganze, wenn man dies mit einem Ranking Tracker, zum Beispiel von seomoz.org, zusammen benutzt. Hier kann man genau sehen, welche Seiten des eigenen Blogs es fr ein bestimmtes Keyword ranken, und kann das so optimieren, dass tatschlich nur eine Seite weiter rankt. Powerful Tool = Spamgefahr Die gerade vorgestellte Strategie ist natrlich bestens geeignet um riesige Spam-Blogs aufzubauen. Ich bitte euch natrlich das nicht zu tun. Google erkennt Spam immer besser. Und wer die Strategie missbraucht, wird von Google abstraft und aus dem Index verbannt. Wer diese Strategie aber ganz gezielt einsetzt, nmlich zum Nutzen der eigenen Besucher, so wird Google dies mit einem sehr hohen Ranking honorieren. Der groe Vorteil dieser Methode ist, dass sie fast automatisch funktioniert. Man muss sich nur ab und zu die Incoming Searchterms angucken und eventuell eingreifen wenn diese nicht zur Seite passen.

WordPress Magazin

19

WordCamp Switzerland
Mit Ausblick auf das bald stattfindende WordCamp Switzerland mchten wir euch gerne ein paar Infos bezglich des BarCamps mitgeben. Beginnen wir einmal mit den Fakten: ber das WordCamp Das WordCamp Switzerland findet am Samstag, 7. Mai in der Fachhochschule Nordwestschweiz in Brugg statt. Das Gebude ist wenige Gehminuten vom Bahnhof SBB und dem Bahnhof Brugg entfernt und kann mit dem Zug via Basel SBB, Zrich HB oder Bern in weniger als einer Stunde erreicht werden. Per Auto nimmt man am besten auf der A3 die Ausfahrt 19 Birr/Windisch/Schinznach/ Lupfig/Brugg, Parkpltze sind auf dem Areal der Fachhochschule vorhanden. [Karte von http://www.fhnw.ch/campusbrugg-windisch/orientierung einfgen?] Die Begrssung erfolgt um 9:00 Uhr, inklusive Vorstellungsrunde. Danach geht es weiter mit den Sessions. Diese werden im BarCamp-Stil meist vor Ort bekannt, fr das WordCamp gibt es allerdings bereits eine kleine Liste an definierten Sessions! Die Sessions Workshop: WordPress fr Einsteiger Olaf Baumann Das WordCamp soll auch fr WordPressEinsteiger etwas zu bieten haben, deshalb gibt Olaf Baumann eine Einfhrung in die Grundlagen. In der Session wird erlutert wie WordPress installiert wird, welche Voraussetzungen erfllt sein mssen, was beachtet werden muss und welche Werkzeuge dafr bentigt werden. Anschliessend gibt es einen Rundgang durch den Administrationsbereich und eine Einfhrung in den Artikeleditor. In dem Workshop ist genug Raum um eigene Fragen und Anregungen einzubringen. WordPress on steroids Philip Hetjens Dieser Workshop konzentriert sich auf WordPress-spezifische Mglichkeiten und zeigt welche und wie wir bei der Blogwerk AG Performanceoptimierungen an unseren Blogs vorgenommen haben. Wichtige Themen dabei sind der Object-Cache mit verschiedenen Caching-Backends, Full-SiteCachinglsungen, wie WP Super Cache und PHP-Optimierungen. Ein Rant ber Snippets Philip Hetjens In der WordPress-Community sind kurze, angeblich direkt einsetzbare Snippets sehr beliebt. Es ist aber wichtig, dass man als Administrator oder Entwickler eines Blogs das ganze Projekt im Fokus hat und nicht blind auf 20 verschiedene Snippets vertraut. Die Copy&Paste-Kultur produziert schlechte WordPress-Blogs und ist deswegen gefhrlich fr den Ruf von WordPress. Webmatrix - Webseiten-Entwicklung einfacher gemacht Ken Casada Mit zahlreichen Live-Demos prsentieren wir Ihnen WebMatrix: ein brandneues kostenloses Web-Entwicklungs-Werkzeug von Microsoft. Es enthlt alles um Webseiten in einfachen und wenigen Schritten zu kreieren, anzupassen und schliesslich zu publizieren. Starten Sie mit Open-Source WebApplikationen wie WordPress und deren vorinstallierten Web-Vorlagen oder schreiben Sie Ihren Code gleich selbst. WebMat-

20

WordPress Magazin

rix kommt mit IIS Express, PHP-Untersttzung, SQL Server Compact 4, einer eingebetteten Datenbank, die 1 zu 1 auf dem Server kopiert werden kann und vielem mehr. Hands-On Screencasting Axel Becker Von der Idee zum fertigen Video zeige ich den Ablauf von der Anfangsidee ber ein Storyboard, die eigentliche Aufnahme, die Nachbearbeitung, die Produktion des Videos und das Hochladen und Einbinden in einen WordPress-Artikel am Besispiel von Camtasia Studio (Win). Ein paar Tipps zu Mikrofonen kann ich den Teilnehmern mit auf den Weg geben und als Zuckerl noch das kostenlose Tool Jing, was bei den Bloggern sehr gut ankam! Eine Camtasia-Lizenz werde ich verlosen (Wahlweise Camtasia Studio (Win) oder Camtasia for Mac. Inpsyde - Einblick in eine WordPress-Agentur Inpsyde Team Wir sind ein Startup, das sich ohne Kapitalinvestment und ohne klassische Unternehmenshierarchien erfolgreich im Webentwicklungs-Sektor etabliert hat und sind im deutschsprachigen Raum die fhrende Agentur fr WordPress. Inpsyde ist aus der Arbeit in der Open-Source-Community entstanden, wir lieben die Open-Source-Philosophie und wir beschftigen uns aus Leidenschaft mit WordPress. Unser Team besteht aus WordPress-Profis, die sich teilweise seit 2004 mit WordPress beschftigen und auf eine lange Erfahrung zurckgreifen knnen.

The Power of Xtreme One Michael Preuss, Alex Frison Anhand von praxisnahen Beispielen mchten wir die unendlichen Mglichkeiten von Xtreme One, einem professionellen WordPress Framework, demonstrieren. Nach einem schnellen berblick zeigen wir die Erstellung und Verwaltung unterschiedlicher Seitenlayouts mit dem Layout-Manager, Einsatz und Platzierung verschiedener Navigationen nur mit ein paar Klicks sowie die Gestaltung einer Startseite mit den Xtreme Widgets. Entwickeln mit WordPress Michael Sebel Die Kunst bei WordPress ist, bei all den verschiedenen Methoden den berblick zu bewahren und gerade bei grossen Projekten noch zu wissen wo welche Features untergebracht sind. Michael Sebel hat mit WordPress zwei Jahre Programmiererfahrung und zeigt wie man ein Blog mit Shortcodes, Filtern, Actions, Widgets, Themes und Theme Features sowie eigenen Admin-Menstrukturen, Backends, Page Templates und ein bisschen Ajax individualisieren. Workshop: Frag den Profi! Robert Windisch Robert Windisch, einer der Hauptprogrammierer der Inpsyde GmbH, steht im themenfreien WordPress-Workshop zur freien Verfgung. Wer Tipps zur Optimierung, Pluginentwicklung oder Problembehebung sucht, ist in diesem Workshop richtig. Sollte der Workshop gut besucht sein, werden sich weitere Entwickler anschliessen.

WordPress Magazin

21

Auf- und zuklapp-Effekt fr WordPress-Widgets

Wer sein WordPress-Design durch Effekte glnzen lassen will, muss nicht denken es wre Hexenwerk und somit unmglich. WordPress liefert von Haus aus das JavaScript Framework jQuery, welches fr beispielsweise eben diese Technik relativ einfach eingesetzt werden kann. Die folgenden beschriebenen Schritte, werden anhand des Standard-Theme von WordPress 3.1 (Twenty Ten 1.1) durchgefhrt und demonstriert. Widget-Aufbau Der Widget-Aufbau spielt eine zentrale Rolle, wenn das Auf- bzw. Zuklappen von Widgets ermglicht werden soll. Es ist sehr wichtig, dass es einen WidgetTitel und zwei Symbole fr Auf- oder Zuklappen gibt. Der Benutzer soll ja schlielich immer wissen, ob er mit dem klick das Widget jetzt auf- oder zuklappt. Da jedes Widget vom jeweiligen Programmierer beeinflusst wird, macht es Sinn, HTML-Klassen fr ein Widget und dessen Titel zu vergeben, ber diese Klassen kann dann per CSS und jQuery zugegriffen werden. Der Aufbau sollte auf der HTML-Seite also wie folgt aussehen (es mssen nicht zwingend SPAN-Elemente sein): <li class=widget-container> <h3 class=widget-title></h3> <span class=exp hide>+</span> <span class=col hide>-</span> </li> Die Klasse widget-container schildert in dem Fall, dass das Listenelement ein neues Widget ist. Die Klasse widget-title definiert, dass das SPAN-Element der Titel des Widget ist. Die zwei SPAN-Elemente mit der Klasse exp und col sind die Auf- und Zuklapp-Markierungen, die Klasse hide wird verwendet um diese Elemente prinzipiell zu verstecken. Sie werden erst ber jQuery wieder eingeblendet. Da jedes Design einen andern Aufbau aufweist, muss sehr wahrscheinlich die functions.php im jeweiligen Theme-Ordner angepasst werden, dort werden die verschiedenen Sidebars, in denen die Widgets angezeigt werden, definiert. In der functions.php wird nach dem Aufruf der Funktion register_sidebar gesucht um die Einstellungen zu manipulieren. Wichtige Array-Felder sind before_widget, before_title und after_title. 'before_widget' => '<li id=%1$s class=widget-container %2$s>', 'after_ widget' => '</li>', 'before_title' => '<h3 class=widgettitle>','after_title' => '</h3>', Das in before_widget definierte Listenelement wird um die Klasse widget-container erweitert (wenn nicht vorhanden), die in before_title definierte berschrift bekommt die Klasse widget-title (wenn nicht vorhanden) und das Array-Feld after_title wird um die zwei SPAN-Elemente erweitert. Schlussendlich sehen die oben erwhnten vier Zeilen nach unserer Manipulation so aus: 'before_widget' => '<li id=%1$s class=widget-container %2$s>', 'after_ widget' => '</li>', 'before_title' => '<h3 class=widgettitle>','after_title' => '</h3> <span class=exp hide>+</span> <span class=col hide>-</span>',

22

WordPress Magazin

Das Meta-Widget drfte jetzt so aussehen:

Das Ein- und Ausblenden der Symbole regelt die JavaScript-Datei, denn sollte jemand JavaScript deaktiviert haben, braucht er diese Symbole auch nicht zu sehen. Sie wren dann ja ohne Bedeutung / Funktion. JavaScript aktivieren Um mit dem eigentlichen JavaScript anfangen zu knnen, muss erst einmal die header.php erweitert werden. Zuerst muss jQuery aktiviert werden, ber diese JavaScript-Bibliothek lassen sich Effekte oder Funktionalitten ohne groe JavaScript-Kenntnisse per CSSSelektoren sehr einfach umsetzen. Vor dem wp_head();-Aufruf mssen zwei Zeilen eingefgt werden, um jQuery zu <?php wp_enqueue_script('jquery'); ?> <?php wp_enqueue_script('custom', get_ bloginfo('stylesheet_directory') . '/jq.js'); ?> aktivieren und die eigene JavaScript-Datei einzubinden. Je nach gewhltem Namen fr die JavaScript-Datei muss jq.js durch bspw. meineJSEffekte.js ersetzt werden. JavaScript-Datei Zu allererst muss eine Instanz von jQuery erzeugt werden, damit andere eventuell var $j = jQuery.noConflict(); ebenfalls aktive JavaScript-Codes, die jQuery benutzen, sich nicht gegenseitig stren. Das erzeugen einer jQuery-Instanz gelingt ber die Zeile: Das zweite und ausschlaggebende Kriterium ist, dass unser JavaScript-Code nur laufen soll, wenn das Dokument bereits geladen wurde, schlielich mssen wir ja

Abbildung 1: Meta-Widget nach Anpassung der Funktion register_sidebar CSS-Definitionen Das '+' bzw. '' soll rechts in der selben Zeile wie der Widget-Titel, hier also Meta stehen, dafr bedarf es einiger CSS-Definitionen, welche in die style.css des jeweiligen Theme angefgt werden. .widget-container{ position: relative; } .widget-container .widget-title{ cursor: pointer; } .widget-container .exp, .widget-container .col { position: absolute; top: 0; right: 0; } .widget-container .hide{ visibility: hidden; } Somit liegen jetzt die Symbole zum Auf- bzw. Zuklappen direkt bereinander, das ist aber nicht schlimm, denn im nchsten Schritt werden beide ausgeblendet: Nun sieht das Meta-Widget wieder wie original aus.

WordPress Magazin

23

Auf- und zuklapp-Effekt fr WordPress-Widgets

Elemente einblenden, was schlecht geht, wenn sie noch gar nicht existieren. Der oben angegebenen Zeile folgt also das folgende Konstrukt: $j(document).ready(function() { //mein Code kommt hier }); Der Code, der anstelle von //mein Code kommt hier eingefgt wird, wird automatisch dann ausgefhrt, wenn die Webseite komplett geladen wurde. Als drittes sollte sozusagen zentral festgelegt werden, wie die hide-Klasse tituliert wurde und welche Elemente einoder ausgeblendet werden sollten. Dazu knnen zwei Variablen anstelle der obigen Kommentar-Zeile angelegt werden: var hideThem = > *:not(.widget-title, .exp, .col); var hideClass= hide; Jetzt geht es schon an die wirkliche Funktionalitt, dem Klick-Ereignis der WidgetTitel: $j(.widget-container .widget-title).click( function(){ //Der Klick-Code kommt hier }); Zwei Dinge mssen bei einem berschriften-Klick ausgelst werden: Einoder Ausblenden des Widget-Inhaltes und das umswitchen der Ein- oder Ausblend-Symbole. Beides lsst sich in insgesamt zwei Zeilen erreichen. Selektiert wird vom angeklickten Objekt, in dessen Parent (Vater) wird nach den auszublendenden Elementen gesucht, danach wird nach den Elementen mit den Klassen exp und col gesucht, diese werden ebenfalls ein- bzw. ausgeblendet. Was sich so drastisch kompliziert anhrt ist es eigentlich gar nicht: $j(this).parent().find(hideThem).toggle( 'slow'); $j(this).parent().find(.exp, .col). toggleClass(hideClass); Einmal wird die Klasse hide de- bzw. aktiviert und einmal wird die Sichtbarkeit eines Elementes / mehrerer Elemente gewechselt. Im letzten Schritt mssen die Widgets noch ausgeblendet werden: $j(.widget-container .widget- title).parent().find(hideThem).hide(); $j(.widget-container .exp). toggleClass(hideClass); Der gesamte JavaScript-Code sollte nun wie folgt aussehen: var $j = jQuery.noConflict(); $j(document). ready(function() { var hideThem = > *:not(.widget- title, . exp, .col); var hideClass= hide; $j(.widget-container .widgettitle). click(function(){ $j(this).parent().find(hideThem). toggle('slow'); $j(this).parent().find(.exp, .col). toggleClass(hideClass); }); $j(.widget-container .widget- title).parent().find(hideThem).hide(); $j(.widget-container .exp). toggleClass(hideClass); });

24

WordPress Magazin

Alternativ knnen die Widgets standardmig auch eingeblendet sein, dazu mssen die letzten beiden Zeilen angepasst werden: //$j(.widget-container .widget- title).parent().find(hideThem).hide(); $j(.widget-container .col). toggleClass(hideClass); Die auskommentierte Zeile kann natrlich auch gelscht werden.

Fazit Jedes Widget hat nach den Modifizierungen zwei Anzeigemglichkeiten, entweder nur die Kopfzeile oder das gesamte Widget. Hier beispielsweise das Meta-Widget:

Abbildung 2: Meta-Widget zugeklappt Oliver Lippert Ich bin Oliver Lippert, 20 Jahre, Anwendungsentwickler und komme aus Braunschweig. Internetseiten sind eine meiner groen Leidenschaften, ob nun selber eine Webseite zu leiten und mit Inhalten zu befllen oder eine Webseite einfach zu betreuen. Seit Mrz habe ich aus Olis Computerblog dann endlich Alles IT gemacht. Dort schreibe ich immer montags um 13:00 Uhr ber alles, was mir in meinem IT-Alltag ber den Weg rennt.

Abbildung 3: Meta-Widget aufgeklappt

WordPress Magazin

25

WordPress Video-Training von video2brain

Die sterreichische Firma video2brain bietet eine grosse Anzahl (500!) VideoTrainings in den verschiedensten Bereichen an. Videos knnen entweder aus dem Netz heruntergeladen oder als DVD erworben werden und fhren einen interaktiv in die jeweilige Materie ein. video2brain hat mir freundlicherweise 4 Exemplare zukommen lassen. Eines davon zum Rezensieren, die anderen werden noch im Blog verlost. Ich war ob der Verpackung etwas erstaunt, die DVD-Hlle ist nmlich ganze 2cm breit. Zu bestaunen gibt es da allerdings nur die Rckseite sowie ein Kurzbersicht ber die Kapitel. Diese Informationen lesen sich schon mal gut, kommen wir aber zur Disc. Ich bin zwar seit kurzem Mac-User, muss deshalb aber nicht auf den Genuss des Videos verzichten - die DVD ist Plattform-unabhngig: Mac, Windows und Linux werden untersttzt. Das Video-Tutorial ffnet sich ber eine kleine Applikation und sieht ziemlich schick aus. Auf der Seite gibt es eine Liste mit den Kapiteln sowie meiner Lesezeichen, in der Mitte das jeweilige Video und rechts Zusatzinfos wie etwa Links zu bungsdateien.

Im Web-Bereich gibt es bereits viele Tutorials von video2brain, z.B. fr HTML und CSS oder etwa Drupal. Seit Mrz gibt es nun auch ein WordPress Video-Training. In WordPress - Websites mit WordPress umsetzen und pflegen erklrt Olaf Baumann, WordPress-Entwickler und Team-Mitglied von WordPress Deutschland, 6 Stunden lang alle Facetten der Blog Software. Wie ihr wisst, gibt es auch von Teamkollege Frank Bltge ein Video-Tutorial, welches bei Galileo Computing erschienen ist. Ein kurzer Vergleich: Franks umfassendes Training enthlt 72 Lektionen in 9 Stunden, Olafs ganze 78 Lektionen in nur 6 Stunden. Ich habe nun Das WordPress Video-Training von video2brain einmal genauer unter die Lupe genommen. Erster Eindruck

Einstieg Das Willkommens-Video verspricht schon viel und ber die erste Erklrung von WordPress und dessen Lizenz und Historie kann man nicht meckern. Was mir dabei allerdings aufgefallen ist: Der Ton: Mit Kopfhrern hrte ich immer Hintergrundgerusche, der Trainer wirkte

26

WordPress Magazin

sehr heiser. Mit den System-Lautsprechern war es dann wieder einigermassen in Ordnung. Die einzelnen Videos sind eher kurz (jeweils um die 5 Minuten), die Informationen kommen aber trotzdem gut rber. Die Zeit vergeht damit wie im Flug. Tiefergehende Anpassungen Da ich mich mit WordPress gut auskenne, habe ich das Kapitel ber das Backend nur berflogen. Allerdings klingt dieses Thema schon viel interessanter. Olaf zeigt, wie man sich vor KommentarSpam schtzen, die Performance optimieren und die Sicherheit des Blogs prfen kann.

Kapitel 6.5 Shops in WordPress stellt Olaf das kostenpflichtige Plugin wpSHopGermany vor. Hier merkt man allerdings auch, dass nur an der Oberflche gekratzt wird. Code-Beispiele in den Videos beschrnken sich auf das Wesentliche. Allerdings befinden sich vorgestellte Themes, Plugins, WordPress selbst und sogar benutzte Software wie FileZilla zum Mitmachen auf der DVD. Sogar ein paar Infografiken finden sich darauf, man kann sich also nicht beklagen. Weiteres Im siebten und letzten Kapitel werden WordPress Multisite und BuddyPress vorgestellt. Auch hier finde ich die Erklrungen usserst hilfreich und verstndlich. Und die schriftliche Zusammenfassung der jeweiligen Kapitel dient als Nachschlagewerk und kann auch ausgedruckt werden. Fazit Nachdem ich mir das Video-Tutorial angesehen habe, kann ich es euch nur weiterempfehlen. Denn es hlt was es verspricht: Am Ende ist man in der Lage, Websites mit WordPress umzusetzen und zu pflegen. Wer mit Videos von video2brain vertraut ist, wird auch von diesem hier begeistert sein. Das Video ist ziemlich aktuell (fr WordPress 3.1 konzipiert), schlgt allerdings gleich mit 40 Euro zu Buche. Dafr hat man jedoch auch iPad-kompatible Videos - coole Sache fr unterwegs! WordPress - Websites mit WordPress umsetzen und pflegen Von: video2brain Laufzeit: 6 Stunden Lektionen: 78 Preis: 39.95 Euro

Themes verstehen und erstellen Auf die WordPress Themes geht Olaf detailliert ein. Die Funktionsweise und Anatomie eines Themes wird ausfhrlich erklrt. Auch Post Formats werden behandelt, wozu sie gut sind und wie man sie nutzt. Im Kapitel 5.10 Theme fr Smartphones stellt Olaf brigens auch das Ari-Theme von elmastudio.de vor. CMS-Tuning Im sechsten Kapitel werden Custom Post Types und Taxonomies vorgestellt. Als Beispiel dient die Darstellung von Bchern. Im

WordPress Magazin

27

Theme Showcase
Space Color Space Color ist ein Leichtgewicht, was das Design anbelangt. Trotz des fr Premium Themes typischen Aufbaus mit vielen Extras und bergrosser Slideshow weiss dieses Theme zu gefallen. Der Preis ist deswegen auch nicht allzu hoch. Responsive Twenty Ten Die Macher dieses Child Themes verpassen Twenty Ten einen flexiblen Look. Und dies lediglich mit CSS, sogar das Headerbild passt sich der Bildschirmgrsse an. So macht Responsive Twenty Ten auch auf kleineren Gerten wie etwa dem iPad und dem iPhone eine gute Figur.

URL: http://wpmag.org/spacecolor Preis: 48 Dollar ChaosTheory Dieses dunkle Theme stammt von Automattic, besser gesagt dem WordPress Theme Team. Dieses Team pflegt die Themes auf WordPress.com und erstellt welche wie auch in diesem Fall. Man muss also bestimmt keine Angst vor schdlichem oder veraltetem Code haben.

URL: http://wpmag.org/responsive2010 Preis: kostenlos Pretty Young Thing So niedlich wie der Name klingt, so elegant kommt dieses Child Theme fr das Genesis Theme Framework daher. Allerdings passt dieser stylische Hingucker wohl nur in die Kategorie Womens Interest.

URL: http://wpmag.org/chaostheory Preis: kostenlos

URL: http://wpmag.org/pyctheme Preis: 80 Dollar

28

WordPress Magazin

Platform Pro Platform Pro ist ein hochwertigs Drag & Drop Framework von PageLines. Nahezu das komplette Layout kann per Mausbewegung umgestellt werden. Ergnzt wird dieses Feature durch integrierte bbPress und BuddyPress Layouts, was den etwas hohen Preis etwas mehr rechtfertigt.

Placeholder Bevor eine Website online geht, verstreicht eine gewisse Zeit. Mit dem Placeholder Theme kann man den Besucher darauf aufmerksam machen. Das schicke Design sowie die Aufforderung zum Folgen via Twitter oder Facebook ergnzen den Javascript Counter.

URL: http://wpmag.org/platformpro Preis: 95 Dollar Bones Ausnahmsweise reden wir hier nicht von der bekannten TV-Serie, sondern ber ein WordPress Development Theme. Was das heisst? Bones hilft beim Einstieg in die Theme-Entwicklung, bietet sauber dokumentierten Quellcode und nutzt HTML5 Boilerplate. Zudem ist es bloss 246KB gross.

URL: http://wpmag.org/placeholder Preis: kostenlos Classica Der Autor beschreibt sein Theme selbst als minimalistisches Portfolio Theme, frei von unntigem Schnickschnack. Und Minimalismus-Kritiker knnen das Aussehen schliesslich immer noch ndern. Fr den Einsteiger sicher gut geeignet und auch eher ein Schnppchen.

URL: http://wpmag.org/bonestheme Preis: kostenlos

URL: http://wpmag.org/classica Preis: 35 Dollar

WordPress Magazin

29

Theme Showcase
BroadScope Das aktuellste Theme des erfolgreichsten ThemeForest Users Kriesi erfllt wieder einmal alle Erwartungen an seine Werke. BroadScope kommt mit einer Vielzahl an Features, welche Kriesis neu entwickeltes Avia Framework zur Verfgung stellt. Roots Dieses kleine Ding ist hnlich wie das Bones Theme: Roots hilft bei der Entwicklung von WordPress Themes, basiert auf HTML5 Boilerplate, Starkers und untersttzt sogar zwei verschiedene Grid Frameworks. Ausserdem hat es noch ein paar Besonderheiten und schreibt alle URLs um, fr angeblich schneren Quelltext. Probieren kann man es ja mal.

URL: http://wpmag.org/broadscope Preis: 35 Dollar Grey Opaque Grey Opaque ist ein schlichtes aber elegantes Theme fr WordPress. Dieses Theme ist optimiert auf die Verwendung mit WordPress 3.x und untersttzt alle Funktionen, welche WordPress 3.1 bietet. Das Aussehen ist schlicht aber dennoch ansprechend. Achja, kostenlos ist das Theme auch noch.

URL: http://wpmag.org/roots Preis: kostenlos ShowOff ShowOff ist das erste Theme des neuen Premium Theme Anbieters BioThemes. Es nutzt ein grosses Bild auf der Startseite, welches die Aufmerksamkeit auf sich lenkt. Ohne geniales Bild ist ShowOff etwas unspektakulrer. Auch im Inhaltsbereich werden die Beitragsbilder besonders hervorgehoben.

URL: http://wpmag.org/greyopaque Preis: kostenlos

URL: http://wpmag.org/biothemes Preis: 39 Dollar

30

WordPress Magazin

WordPress Magazin

31

In eigener Sache: WordPress-Profis gesucht

Wir erhalten laufend Anfragen von unseren Lesern, die gerne einen WordPress Kurs besuchen mchten, Hilfe bei der Umsetzung eines Projekts brauchen oder massgeschneiderte Themes suchen. Wir knnen uns leider zurzeit nicht um diese Anfragen kmmern, aber wir wissen, dass es sehr viele WordPress-Profis, Programmierer, Designer und Agenturen im WWW gibt. Aus diesem Grund mchten wir ein Netzwerk an Experten aufbauen, an welche wir bei solchen Anfragen Auftrge vermitteln knnen. Da es meist etwas grssere Auftrge sind, verdient man selbstverstndlich auch daran. Interessiert? Dann melde dich einfach bei uns! Maile uns deine Kontaktangaben sowie deine Skills an: netzwerk@wp-magazin.ch.