Zugegeben: Die Überschrift klingt etwas reißerisch denn natürlich sind das nur meine persönlichen Top 10. Ich hätte vermutlich auch Top 9, Top12 oder Top 34 auflisten können, aber Top 10 klingt halt besser. Angeregt wurde ich zu der Auflistung durch einen Post auf Google+ vor ein paar Tagen.
Diese Liste erhebt logischerweise nicht mal ansatzweise Anspruch auf Vollständigkeit und die Reihenfolge stellt keine Wertung dar. Ich habe die Punkte einfach so aufgeschrieben, wie sie mir in den Kopf kamen.
1. Beiträge als Seiten verwenden
Immer wieder sehe ich WordPress Sites, bei deren Erstellung offensichtlich der Unterschied zwischen Seiten (Pages) und Beiträgen (Posts) nicht klar ist (häufiger), oder vom verwendeten Theme kein Unterschied zwischen diesen beiden Inhaltsarten gemacht wird (seltener). Dabei ist es im Grunde recht einfach: Eine Seite ist naturgemäß eher statisch, oder sagen wir lieber dauerhaft gültig. Ein Impressum, Kontakt, Über uns etc. sind typische Vertreter dieser Art von Inhalt. Dort ist es nicht sinnvoll, dass man Komentare abgeben kann (Impressum kommentieren???) oder dass ein Erstellungsdatum zu sehen ist. Auch sind Informationen über den Autor relativ unwichtig.
Das alles sind (Meta-) Informationen, die bei einem naturgemäß dynamischen (oder kurzlebigen) Inhalt wie einem Beitrag aber sehr wohl sinnvoll sind oder sein können. Wann ein Beitrag verfasst wurde ist eine wichtige Information. Evtl. kann es auch wichtig sein, wer den Beitrag geschrieben hat, in welcher Kategorie er verfasst wurde und ähnliches. Und einen Beitrag möchte man evtl. auch kommentieren können. Beiträge haben eher News Charakter. Seiten beinhalten allgemeine (und in der Regel dauerhafte) Informationen. Es schaut einfach komplett unprofessionell aus, wenn man auf einer Website die Möglichkeit hat das Impressum zu kommentieren.
2. Absätze vs. Zeilenumbrüche
Schreibt man im WordPress Editor einen Text und klickt auf „Enter“ gibt es einen Zeilenumbruch, oder? Oder etwa nicht? Und warum ist dann oft soviel „Luft“ zwischen meinen einzelnen Zeilen? Weil es eben KEIN Zeilenumbruch, sondern ein Absatz ist und ein Absatz setzt sich vom Vorangegangenen Inhalt in der Regel ab (daher wohl auch der Name) und strukturiert den Inhalt damit lesbarer. Technisch gesehen wird ein Absatz in HTML (und das kommt vorne immer raus) von „p“ Tags umschlossen, während ein Zeilenumbruch durch ein „br“ tag markiert wird. Zeilenumbrüche sind spätestens bei responsive Designs möglichst zu vermeiden, weil sie bei verschidenen Bildschirmauflösungen zu ungewünschten Effekten führen können. Aber wenn man unbedingt doch einen Zeilenumbruch haben möchte, dann hält man beim „Enter“ klicken einfach die „Shift“ (Hochstell-) Taste gedrückt. In der Regel sieht man den Unterschied bereits im Editor, spätestens aber in der Vorschau.
Es gibt noch ein paar andere Effekte, bei denen es wichtig ist KEINEN Zeilenumbruch zu machen. Formatierte Überschriften, Listen etc. funktionieren nicht direkt nach einem Zeilenumbruch.
3. Text per Copy&Paste einfügen
Ich hab da so ein hübsch formatiertes Word Dokument und kopiere mir den Text raus um ihn anschließend 1:1 in meine WordPress Seite einzufügen. Aber warum sieht das dann nicht so aus, wie in dem Word Dokument? Weil HTML nun mal kein Word ist. Und nur weil es scheinbar so ähnlich funktioniert ist es eben noch lange nicht so. Im besten Fall hat das Word Dokument selbst so wenige Formatierungen, dass es wirklich auch auf der WordPress Seite funktioniert. Im schlimmsten Fall hat es so viele Formatierungen, dass es die Seite zerschießt und mit unnötigem Codemüll aufbläht.
Auch wenn WordPress mittlerweile recht gut mit Text aus WordDokumenten umgehen kann, sollte man mindestens die Editorfunktion „Als Text einfügen“ (kleiner Button in der unteren Bearbeitungsleiste des Editors mit dem „T“ drauf) nutzen, oder den kompletten Text vorher in einen reinen Texteditor kopieren und von dort nochmals in WordPress kopieren. Dabei gehen alle Formatierungen zuverlässig verloren und man kann den Text noch mal anständig und webtauglich formatieren.
Das Gleiche gilt natürlich auch für Text aus anderen Quellen, wie Powepoint, PDF etc.
4. Zu Große Bilder
Jedes Smartphone ist heute in der Lage mehrere Megapixel große Bilder zu schießen. Bei „echten“ Kameras kommen wir schnell in den zweistelligen Megapixel Bereich. In jedem Fall sind solche Bilder auch bei hohen Bandbreiten nicht dafür geeignet unbearbeitet im Web eingesetzt zu werden, weil sie aufgrund der Dateigröße eine Website dramatisch ausbremsen können.
Ja, WordPress generiert beim Hochladen diverse kleine Formate und viele Themes zwingen WordPress dazu weitere Formate zu generieren. Aber dennoch landet das Riesenbild auf dem Server, muss das gespeichert und eben verarbeitet werden. Und nicht selten wird dann doch das Originalbild mit geschmeidigen 6.000 x 4.000 Pixeln und 4,8 MB Dateigröße eingesetzt. Und weil das Bild per CSS automatisch kleiner dargestellt wird, bemerkt man das oft gar nicht sofort. Erst wenn man dann auf der Seite feststellt, dass der Bildaufbau sehr langsam und „Zeile für Zeile“ erfolgt, wird man aufmerksam.
Also schaut Euch die Bilder vorher einfach mal auf Eurem Computer an und verkleinert sie bereits vor dem Hochladen auf eine brauchbare Größe. Tools wie Optimus helfen zusätzlich beim Einsparen von Datenmengen, ohne dass dabei die Bildqualität leidet.
5. Zu kleine Bilder
Natürlich können Bilder auch zu klein sein, um einer professionellen Darstellung zu genügen. Wenn ein Vorschaubild beispielsweise 300×200 Pixel sein soll, aber nur 100x75Pixel groß ist, kann es leicht passieren, dass das Theme versucht das Bild trotzdem in der richtigen Größe darzustellen. Der Effekt ist, dass das Bild verzerrt, verpixelt und unscharf dargestellt wird.
Es ist also sinnvoll sich zunächst mal mit den benötigten Bildformaten auseinander zu setzen. Ich verwende für die Artikelbilder meiner Beiträge hier im Blog beispielsweise 1030×360 Pixel. Ich bringe die Bilder vorher immer genau auf diese Format und lasse sie von Optimus beim Hochladen noch mal optimieren. Das ist natürlich einbisschen mehr Arbeit, bringt aber professionelle Ergebnisse mit geringer Ladezeit und Serverlast.
6. Falsche Bildformate
Auch das erlebt man tatsächlich gar nicht selten. Da werden hübsche Landschaftsphotos als GIF Grafiken gespeichert, oder Logos als JPG. Oder jemand versucht gleich sein Glück mit dem Hochladen eines TIFF Formats. Letzteres merkt man ziemlich schnell, weil das Bild einfach im Browser nicht dargestellt wird.
Als einfache Faustregel kann man sagen, dass Photos (Portraits, Landschaft etc.) immer als JPG gespeichert werden sollten. Illustrationen oder Logos eher im PNG Format. Gerade bei Logos kann das sehr wichtig sein, weil PNG transparente Hintergründe ermöglicht und JPG eben nicht. Bei einem JPG gibt es immer einen Hintergrund auch wenn er evtl. weiß ist. Das kann dann schon mal ziemlich blöd aussehen, wenn man einen leicht transparenten Header hat in dem das Logo platziert ist.
7. Bildausrichtung
Beim Platzieren von Bildern in einem WordPress Beitrag (oder Seite) hat man die Möglichkeit das Bild links, rechts, zentriert oder gar nicht auszurichten. Je nach CSS des Themes wird damit natürlich ein wenig anders umgegangen, aber die Grundzüge sind immer gleich.
Das Ausrichten beispielsweise nach links erfolgt mittels der CSS Eigenschaft float:left. Diese Eigenschaft teilt dem Element (hier dem Bild) mit, dass es nach links ausgerichtet sein soll, wodurch nachfolgende Elemente (der Text z.B.) rechts am Bild vorbei „fließen“. Soweit ist das ja auch wunderbar, solange ausreichend Text um das Bild fließt. Problematisch wird es erst, wenn der Text nicht ausreicht um vollständig um das Bild zu fließen und direkt das nächste Bild (auch links ausgerichet) folgt. Dann versucht nämlich auch dieses Bild um das erste herum zu fließen. Gleiches passiert mit einer Zwischenüberschrift, einer Liste und jedem weiteren Element solange bis die nachfolgenden Elemente am Bild vorbei geflossen sind. Das kann bei Seiten/Beiträgen in denen in kurzem Abstand mehrere Bilder eingebaut sind, zu sehr unschönen Darstellungen führen und das komplette Design zerschießen.
Man muss sich also der „Float“ Eigenschaft bewusst sein und im Einzelfall ausprobieren, ob Bilder und Texte auch zusammenpassen. Gerade bei responsive Designs ist es wichtig auch mal das Browserfenster zu verkleinern um zu sehen, wie die Darstellung sich verändert und evtl. auf Tablets oder Smartphones ausehen wird.
8. Die falsche Permalink Struktur
Dazu gibt es eigentlich wenig zu sagen. Die WordPress Standard-Permalink Struktur ist unsinnig und sollte sofort nach dem Installieren von WordPress geändert werden. Nur „lesbare“ Permalinks sind sinnvoll.
www.domain.com/?p=4711 = Unsinn
www.domain.com/eine-seite = Sinnvoll
9. Zu viele Plugins
Kann mir mal einer verraten warum man für den einmaligen Vorgang des Hinterlegens eine Google Analytics Codes ein Plugin benötigt? Abgesehen davon, dass sehr viele Themes solche Funktionen bereits mitbringen hat man schneller die header.php (in den meisten Fällen) geändert, als das Plugin zu installieren. Aber das ist nur ein kleines Beispiel, dass vermutlich auch noch sehr harmlos ist. Ich habe mehr als einmal Installationen mit 50 und mehr Plugins gesehen, von denen die Hälfte nicht aktuell war und auf Nachfragen konnte mir der Betreiber der Website nicht mal sagen wofür viele der Plugins überhaupt benötigt werden.
Plugins sind eine wunderbare Möglichkeit den Funktionsumfang von WordPress zu erweitern, aber man sollte mit Hirn und Verstand an die Sache gehen und sich auch zweimal überlegen, ob man Plugin XY auch wirklich braucht. Nicht benötigte Plugins sollten deaktiviert und anschließend auch gelöscht werden. Zuviele Plugins belasten das System unnötig und stellen auch immer eine Quelle für Probleme dar. Nicht umsonst ist der erste Rat in Support Foren oft „deaktiviere alle Plugins und schau, ob das Problem weiterhin besteht.“
10 Vermeintliche Sicherheit
Ich installier mir mal das Security Plugin XY. Das erledigt alle wichtigen Aufgaben für mich und ich bin sicher. Kann man machen, ist aber meistens Unsinn. Da werden einem Scheinsicherheiten „verkauft“ und man fühlt sich oh so toll abgesichert. Der Umfang mancher solcher Plugins ist dabei wirklich monströs und die „Sicherheitsmaßnahmen“ oft mehr als zweifelhaft. Natürlich schaden diese Plugins nicht wirklich, aber sie machen die Site auch nicht sicherer als ein gescheites Passwort und evtl. ein zusätzlicher .htaccess Schutz.
Gute Erfahrungen habe ich zusätzlich mit dem Plugin Limit Login Attempts gemacht. Das schützt (natürlich auch nicht 100%) vor sogenannten Brute Force Attacken auf das WordPress Login. Also den Versuch mittels eines Scripts typische Benutzername/Passwort Kombinationen automatisiert auszuprobieren, bis eine passt. Das Plugin sperrt den Login nach z.b drei Versuchen für 24 Stunden. Es protokolliert auch die Angriffsversuche und zeigt einem sehr deutlich, wie oft man eigentlich attackiert wird. Nutzt man zusätzlich einen serverseitigen .htaccess Schutz des wp-admin Verzeichnisses (Bei den meisten Hostern nennt sich das Verzeichnisschutz) stellt man plötzlich fest, dass die Brute Force Attacken den WP login nicht mal mehr erreichen, weil sie bereits and er ersten (.htaccess Schutz) Hürde scheitern.
Neben Passwörtern, die eher als Türöffner zu bezeichnen sind, ist Schadcode der durch Themes oder Plugins eingeschleust wird, eine häufige Ursache für gehackte Websites. Also installiert niemals Themes oder Plugins aus obskuren Quellen. Das WordPress Plugin- oder Themes-Repository sind sichere Quellen. Ebenso die professionellen Themes- oder Pluginanbieter. 100% Sicherheit gibt es aber natürlich nicht.
Ach ja und haltet Eure WordPress Installation und die Plugins möglichst aktuell. Gerade ist ein Sicherheitsupdate für WordPress erschienen.
So, das war meine kleine Top 10 Liste. Ich hoffe, ich konnte damit dem einen oder anderen etwas helfen seine WordPress Website noch ein bisschen besser zu machen.