HowTo WordPress

Vision

Wie die meisten von euch sicherlich schon bemerkt haben, wurde chrizzo.de an diesem Wochenende überarbeitet. Optisch sieht man zwar kaum eine Veränderung, unter der Haube ist jetzt allerdings deutlich mehr los. Man könnte sagen, dass ich die wunderschöne Karosserie vorsichtig von einer rostigen Pferdekutsche abmontiert und an einen brandneuen Ferrari montiert habe. Von außen sieht das genauso aus, aber innen: Wow! Für jeden, der sich ein Bisschen dafür interessiert, wie das alles ungefähr funktioniert, möchte ich ein Bisschen über das Konzept erzählen und ein paar Links aufzeigen, die mir weitergeholfen haben. Das richtet sich primär an Webdesigner, Blogger und WordPress-Benutzer. Darum mach ich das ganze hier in der Blog-Rubrik.

Ich hab schon ’ne ganze Weile darüber nachgedacht, chrizzo.de mal ein wenig aufzuräumen. Ich habe den Blog lange nicht genutzt und auch den Rest der Seite relativ brach liegen lassen und mir stattdessen Gedanken gemacht. Über Web 2.0. Über RSS. Über Content Management. Darüber, wieviel es auch über meine Qualitäten als Informatiker aussagt, dass meine eigene Webseite nur ein mühelos hingerotztes Konstrukt aus Bildern in Tabellen und IFrames ist. Ich wollte die Seite nicht neu gestalten, ich mag das Design, dass der Jott für mich / mit mir entwickelt hat und wollte es unbedingt behalten. Es sieht hammer aus. Auch nach drei Jahren noch. Aber nachdem ich vom hiphop.de-Blog auf meine eigene WordPress-Installation umgestiegen bin, musste ich doch anerkennen, dass es wesentlich angenehmer ist, ein vollwertiges Content Management System (CMS) zu haben und den Inhalt der Beiträge vom Design strikt zu trennen. Glücklicherweise erlaubt WordPress neben diversen Plugins auch die Verwendung eigener Themes.

Ein weiterer Vorteil ist natürlich, dass Blogs Kommentare erlauben, statische HTML-Dokumente nicht. Viele Besucher einer Webseite würden gern die Beiträge kommentieren, ihre Meinung sagen, Wertschätzung oder Missbilligung ausdrücken und mit dem Urheber in Kontakt treten. Kommunikation ist wichtiger Bestandteil der Web-2.0-Welt und animiert den Leser natürlich dazu, häufiger auf der Webseite vorbeizuschauen.

Inhalte abbilden

Aber ist die Verwendung eines Blog-CMS für eine Webseite überhaupt sinnvoll? wie bildet man den Inhalt einer Webseite in ein Blogsystem ab? WordPress erlaubt die Erstellung und Publikation von „Seiten“ (im Unterscheid zu „Artikeln“), statischen Seiten innerhalb der Blogs, wie z.B. das Impressum. Im Fall von chrizzo.de auch die Media-Rubrik, das Gästebuch und die Biographie. Auf Seiten ist, genau wie bei Blogeinträgen, HTML-Code erlaubt, weshalb man theoretisch z.B. für seine Downloads wieder eine schöne Tabelle benutzen kann, um die unterschiedlichen Dateitypen übersichtlich anzuordnen. Wenn man schon eine Webseite hat, kann man den HTML-Code z.T. 1:1 übernehmen. Man sollte dann allerdings sämtliche Schriftformattierungen entfernen und in WordPress über das CMS neu setzen, damit die Schrift Theme- und nicht seitenabhängig bleibt.

Design auf Seiten sollte nicht über den Inhalt gesetzt werden, stattdessen ist es möglich, im Theme für bestimmte Seiten eigene Templates („Templates“ nennt man in diesem Fall die vom Theme mitgebrachten Seitenvorlagen) zu benutzen. Auf chrizzo.de Beispielsweise ist das Impressum ein Beispiel für das Standard-Template für „Seiten“. Der Media-Bereich dagegen hat ein eigenes Template, das links immer ein Bild von Kando und mir anzeigt, die rechte Spalte zeigt den tatsächlichen Inhalt der Seite „Media“. Das hat den Vorteil, dass die Seite „Media“ bei einem Theme-Wechsel nicht überarbeitet werden muss.

Auch für dynamischen Inhalt in mehrere Rubriken mit häufig wechselndem Inhalt, in meinem Fall z.B. die News und der Blog hat WordPress eine Lösung parat: News- und Blogeinträge werden als „Artikel“ in unterschiedlichen Kategorien gepostet, im Menü werden jeweils Links zur Kategorieansicht für „News“ und „Blog“ angebracht – das wars. Durch die Kategorien kann man, je nach Theme, bequem durchblättern und vor- und zurücknavigieren, als würde man tatsächlich durch News durchblättern.

Design

Zu erklären, wie man ein eigenes WordPress-Theme erstellt, würde den Rahmen meines Beitrages bei weitem sprengen. Ich möchte eine Idee vermitteln, kein Buch schreiben. Allerdings wusste ich bis Freitagabend auch noch nicht, wie sowas funktioniert. Ich habe mich Schritt für Schritt durch das Tutorial von Frank Bültge gehangelt und hab von vornherein an den nötigen Stellen ein paar Änderungen vorgenommen. Ich bin seinem Rat gefolgt, absolute Positionierung zu verwenden, alles andere hätte für mein Design keinen Sinn gemacht. Prinzipiell besteht mein Layout aus 5 DIV-Blöcken: Container, Header, Footer, Sidebar und Content, wobei ich den Content später noch in Navigation/Post-Header und Post-Content unterteilt habe. (Letzterer enthält dann auch die Kommentare etc.) Im Stylesheet habe ich für den Post-Content mit einem kleinen aber mächtigen Befehl erzwungen, dass Text und Bilder nicht über den Rand des DIVs hinauslaufen können: overflow: auto;

Der Befehl sorgt dafür, dass ein Browser automatisch Scrollbars anzeigt, wenn der Inhalt länger ist als der DIV-Block. Warum ich das erzähle? Gerade Musik-Seiten sind häufig, so wie meine, mit festen Positionen und Content-Bereichen von begrenzter Größe designt. Das ist auch gut so, es ist hübsch und sinnvoll, eine Webseite ist eben eigentlich kein Blog. Wenn man sie mit einem Blogsystem verwalten möchte, aber kein ellenlanges Blog-Layout benutzen möchte, sollte man wissen, dass man sich übergroßen Inhalten nicht fürchten muss.

Der Rest ist Feinarbeit. Auf chrizzo.de gibt es mittlerweile viel mehr DIVs, u.A. den Audioplayer und den Link zum Impressum im Footer, auch das RSS-Icon und die facebook-Box, die eingeloggte facebook-User sehen können, sind im Header via DIV positioniert. Ja, vielleicht ist das genau die „DIV-Suppe“, vor der Bültge gewarnt hat. Bessere Ideen für die Positionierung von Elementen sind natürlich gern willkommen. Ich bin zwar Informatiker, aber leider kein Webdesigner.

Die Startseite

Wie viele Webseiten habe ich auf der Startseite grundsätzlich keine langweilige Liste von Artikeln sondern immer den letzten Newsbeitrag. Das ist auch heute noch so. In der index.php kann man mit dem Befehl <?php if (is_home()); ?> erkennen, ob die gerade offene Seite die Startseite der Website ist oder nicht. Wenn es sich um die Startseite handelt, lass ich mir hier den ersten Post der Kategorie „News“ anzeigen, genauso wie ich ihn mir in der in single.php definierten Einzelansicht anzeigen lasse. Handelt es sich um eine andere Seite, zeigt er einfach die Zusammenfassungen der letzten Beiträge in chronologischer Abfolge an.

Feinschliff durch Plugins

Gerade als Musiker, insbesondere im Hiphop-Bereich ist man mittlerweile fast schon angewiesen auf die niedlichen Spielzeuge des Web 2.0. Twitter, facebook, MySpace. Weil es Spaß macht. Vor allem, weil es den Fans Spaß macht. Aus diesem Grund gehört einfach unter jeden News- oder Blogeintrag die Möglichkeit für den Leser, mit einem Klick den Link in seinem facebook- oder Twitter-Profil zu posten. Social bookmarks sind sexy. Das Plugin „Sexy Bookmarks“ stellt automatisch eine (ziemlich hübsche) konfigurierbare Leiste zur Verfügung. Man muss nur auswählen, welche social bookmarks man unterstützen möchte und ggf. die Leiste manuell im Theme platzieren, wenn man ein eigenes gebaut hat und sie an eine bestimmte Stelle haben möchte.

Wer einen Twitter-Account hat, möchte seine Follower sicher nicht jedes Mal manuell informieren, wenn sich auf der Webseite etwas getan hat. Das Plugin „WP to Twitter“ nimmt einem diese Arbeit ebenfalls komplett ab. Einmal konfiguriert postet es jeden neuen Eintrag automatisch auf dem eigenen Twitter-Account. Und da man Twitter sehr einfach mit StudiVZ und facebook verheiraten kann, muss man kein Genie sein, um zu erkennen, wie eine automatisierte Pipeline durch mehrere Web-2.0-Seiten gelegt werden kann.

Und wo wir gerade bei facebook sind: Anstelle die Leser zu zwingen, jedes Mal Name und E-Mail-Adresse einzutippen, wenn sie etwas kommentieren wollen, kann man ihnen die Möglichkeit geben, sich bei WordPress mit ihrem facebook-Account zu identifizieren. Es wird dann ein WordPress-Leser-Account angelegt, der Fest an den facebook-Account gebunden ist. Ist das facebook-Cookie gesetzt, sprich der User bei facebook eingeloggt, wird er automatisch mit dem korrespondierenden WordPress-Account auf der Webseite eingeloggt. Auch dafür gibt es ein Plugin namens „Facebook Connect“, eine sehr kurze Erklärung von Adam Breckler mit Tipps für den Einbau gibt weiteren Aufschluss.

Wer keinen facebook-Account hat, sollte nicht gezwungen werden, sich aktiv als User zu registrieren, nur um einen Newsbeitrag zu kommentieren. Lässt man die Kommentare allerdings offen für jedermann, gerät man schnell an nervige Spam-Bots. Um diese abzuwehren gibt es praktischerweise das Bequeme „reCAPTCHA für WordPress“, ein effizientes Captcha-Plugin, das die Seite vor Spam-Bots schützt.

Schneller als angenommen

Ich möchte niemanden davon überzeugen, WordPress als Blogsystem zu benutzen oder seine Webseite darauf umzustellen. Letztendlich ist mir ziemlich egal, wie die anderen das machen. Als ich allerdings selbst im Internet recherchiert habe, um herauszufinden, was für Möglichkeiten WordPress bietet, wenn man es nicht als klassischen Blog verwenden will, habe ich mir einen Artikel wie diesen gewünscht, der mir erklärt, was so alles möglich ist. Ich habe ein halbes Jahr lang damit rumgedruckst, mich wochenlang mit der Gestaltung eines eigenen Themes herumzuschlagen. Die komplette Migration von meiner alten Table/IFrame-Seite in WordPress, inklusive der Gestaltung des kompletten Themes, hat dann tatsächlich gerade mal ein Wochenende gedauert. Wer am Design und den neuen Features von chrizzo.de gefallen findet, sollte sich das einfach mal klar machen: Ein einziges Wochenende. Mehr nicht.

Kommentar verfassen

Bisschen zocken?

The Mysterious Journey Of Timberbob - jetzt erhältlich für Android, Windows, MacOS und Linux!

YouTube

Kalender

<< Nov 2017 >>
MDMDFSS
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
%d Bloggern gefällt das: