Tipps zur Sicherheit von WordPress

Tipps zur Sicherheit von WordPress

Um die eigenen Webseiten-Inhalte vor Hackerangriffen und Malware zu schützen ist es wichtig, einige Tipps zu beachten. Mit der Hilfe von zusätz­li­chen WordPress-Plugins zum Sicherheits-Check und für den regel­mä­ßigen Backup der eigenen Daten kannst du außerdem sicher­stellen, dass du und deine WordPress-Webseite vor bösen Über­ra­schungen ver­schont bleiben.

Drüben bei Elmastudio hat Ellen einige Tipps und Tricks rund um die Sicherheit von WordPress-Installationen zusammengetragen. Auch wenn ich mir hier eigentlich relativ sicher fühle und ich die meisten Tipps schon kannte, waren doch einige für mich neue Dinge dabei. Ich habe mir vor allem die Plugins Better WP Security und WordPress Backup to Dropbox mal genauer angeschaut.

Ein automatisches Backup zur DropBox hatte ich schon mal mit einem anderen Plugin ausprobiert, was aber mit merkwürdigen Fehlermeldungen immer abbrach. WordPress Backup to Dropbox scheint zu funktionieren.

Coda PHP & Web Toolkit

Coda ist bekanntlich das Tool meiner Wahl, wenn es darum geht feinen HTML- und CSS-Code zu schreiben. Heute stolperte ich über das Coda PHP & Web Toolkit, was den Editor um einige sehr nette Funktionen erweitert:

  • PHP syntax validation with jump to error and auto-save
  • Clean up/reformat HTML, CSS, Javascript and PHP code (configurable)
  • HTML, CSS and Javascript validation
  • Javascript and CSS minify

Ich finde das ungemein praktisch, vor allem die Validierungs-Funktionen werden mir sicherlich ein wenig Arbeit abnehmen.

Screenshot bdp-rps.de

Eine neue Webseite für den Landesverband

Es hat ziemlich lange gebraucht, genau genommen haben wir gute zwei Jahre darüber geredet. Vor ein paar Wochen dann mal einen gescheiten Plan gemacht, ein wenig in die Hände gespuckt und gestern Abend konnte ich dann die neue Webseite des Landesverbandes Rheinland-Pfalz/Saar im Bund der Pfadfinderinnen und Pfadfinder online stellen. Die neuen Texte bekam ich dankenswerter Weise von Arno und Chisum geschrieben.

Als technische Basis hierfür läuft nun, statt dem Typo3 unter dem die alte Seite lief, ein WordPress. Das hat einen einfachen Grund: Ich mag WordPress lieber und bin schneller darin, mal schnell ein paar Sachen einzurichten oder zu ändern. Wenn es daran ging in Typo3 was zu machen, bekam ich das zwar meistens auch hin, aber nicht mit einem guten Gefühl. Und (gefühlt) gefrickelt war es auch immer. Nun fühle ich mich im System wesentlich wohler, was eine gute Grundlage für kommende Erweiterungen und Ergänzungen an der Seite ist.

Um mir die Sache dann noch wesentlich einfacher zu machen, habe ich mich dazu entschieden kein eigenes Theme zu entwickeln. Statt dessen nahm ich das aktuelle “Twenty Eleven”-Standard-Theme von WordPress und habe nur einige notwendigen Änderungen mit Hilfe eines (aus nur 5 Dateien bestehenden) Child Themes vorgenommen. Neben dem geänderten Header- und Footerbereich betrifft das vor allem einige Anpassungen im CSS, so zum Beispiel eine andere Schrift für die Überschriften der Seite.

Um spezielle Themen besser hervorheben zu können, habe ich ein kleines Plugin geschrieben, dass die beiden Teaserbilder mit Überschrift und Link unterhalb des Willkommen-Textes einblendet. Im Backend kann ich hier leicht einzelne Seiten oder Blogeinträge auswählen und so gezielt bewerben.

Inhaltlich haben wir uns ansonsten vor allem auf feste Menüpunkte und Inhalte geeinigt. Das Onlinestellen von allerlei Informationen und Vorbereitungsmaterial rund um Lager und Veranstaltungen hat in den letzten fast zehn Jahren nie richtig funktioniert und so haben wir das vorerst mal außen vor gelassen.
Dynamische Inhalte bietet so nur der Neuigkeiten-Bereich, in dem ich in Zukunft einen großen Teil der Informationen, die auch per E-Mail-Newsletter an die Stammesführungen gehen, online stellen werde. Es ist also damit zu rechnen, dass hier tatsächlich kontinuierlich was passiert. Die BdP-RPS-Facebook-Seite wird automatisch aktualisiert, so dass die Leute auch direkt dort abgeholt werden, wo sie sowieso sind. Langfristig könnte ich mir aber gut vorstellen, für spezielle Aktionen auch eigene Microsites innerhalb der Installation anzulegen.

Mal schauen, was daraus wird. Für die nächste Zeit habe ich noch ein paar Dinge zu realisieren: Bei den Ansprechpartnern sollten auch noch Fotos auftauchen, eine Landkarte wäre auf der Stammesübersicht sicherlich nicht verkehrt, genau so wie noch ein paar mehr Bilder im Header. Ich freue mich, nun neben der tag und ich noch eine zweite Spielwiese zu haben.

Adobe Shadow

Nachdem ich letztens schon darüber schrieb, wie man responsive Layouts einfach testen kann, kommt nun heute Adobe mit einer weiteren Lösung daher.

Adobe ShadowAdobe Shadow ist eine Softwarelösung, die auf dem Zero Conf-Protokoll Bonjour basiert. Um sie einsetzen zu können, muss man auf seinem Arbeitsplatzrechner und seinen mobilen Android- oder Apple-Endgeräten ein kleines Stück Software installieren, unter Windows kommt noch die Installation des Bonjour-Dienstes dazu. Außerdem braucht es Google Chrome und eine Extension. Alles was man braucht ist auf der entsprechenden Seite bei Adobe verlinkt.

Nun muss man die zu testende Webseite in Chrome aufrufen und auf das Icon der Shadow-Erweiterung klicken. Wenn alles richtig installiert ist und alle Geräte im gleichen Netzwerk laufen, sollte dort nun eine Liste mit Endgeräten erscheinen. Der Inhalt des aktuellen Browser-Tabs wird nun live auf die ausgewählten mobilen Geräte übertragen und man kann sich direkt anschauen wie es läuft und was Änderungen bewirken.

Das ist soweit noch nicht so sonderlich überragend, wirklich überzeugt hat mich dann nämlich ein anderes Feature: Remote Inspektion. Es wird aus dem Menü der Erweiterung aufgerufen und entspricht im Wesentlichen dem bekannten Webinspektor. Allerdings werden hier die Elemente auf dem mobilen Gerät inspiziert und die Funktionalität, die man aus dem Browser kennt, auf das mobile Gerät übertragen.

Ich bin gerade wirklich begeistert, vor allem weil man so auf mehreren Geräten parallel und genau so effektiv wie am Desktop seine Arbeit inspizieren kann. Bei Adobe TV gibt es ein kurzes Video, dass die Einrichtung und Funktionalität schön beschreibt.

Responsives Webdesign einfach testen

Bekanntlich ist ja responsibles Webdesign aktuell der heiße Scheiß. Und das ist eigentlich auch ganz klug. Denn so kann man seine Webseite schnell für verschiedene Endgeräte, sprich neben Desktops und Notebooks auch Tablets und Mobiltelefone anpassen. Ein paar CSS-Media Queries mit angepassten Werten in das Stylesheet und fertig.1

der tag und ich - auf einem simulierten iPad

Den neuen Code zu testen ist dann aber nicht ganz so einfach, zumindest ich habe zum Beispiel zu Hause kein iPad rumliegen. Gut das es Menschen gibt, die Dinge wie Resizer entwickeln. Das ist ein Bookmarklet für den Browser, dass einem die darstellende Fläche im Browser entsprechend der Darstellungsfläche eines der Endgeräte skaliert. Zur Auswahl stehen dabei die Auflösungen

  • Mobile (320×480)
  • Small Tablet (460×640)
  • Tablet – Portrait (768×1024)
  • Tablet – Landscape (1024×768)
  • Desktop (1200×800)

Ich benutze die dazugehörige Resizer Chrome Extension seit ein paar Tagen und bin ziemlich begeistert davon. Wie in obigem Screenshot dargestellt sieht dieses Blog zum Beispiel in der iPad-simulierenden Ansicht aus. Oben rechts sieht man auch, zugegebenermaßen eher schlecht, die kleine Box mit der man die verschiedenen Auflösungen auswählen kann.

Zwar kann die Extension den Test auf dem echten Gerät nicht komplett ersetzen, doch ist es so schon tausend Mal komfortabler und genauer, als einfach den Browser ein wenig größer oder kleiner zu ziehen.

Außerdem machte mich Shortee auf das Responsive Design Test Bookmarklet von Benjamin Keen aufmerksam. Das zeigt nach einem Klick die verschiedenen Darstellungsvarianten einer Webseite nebeneinander in einem Browserfenster an.

Responsive Mehrfachansicht

Und wo wir gerade dabei sind: Sowohl The Responsinator, als auch responsive.is bieten den gleichen Mehrwert, sehen dabei aber anders/hübscher aus.

  1. Zumindest ist so die einfache Theorie. In Wirklichkeit ist das ein wenig aufwändiger. []

Responsibles einbetten von Videos mit FitVids

Videos gescheit in ein responsibles Layout einzubinden ist nicht ganz einfach. Sofern man auf den HTML5-Element video zurückgreift, ist das keine Raketenwissenschaft. Dann kann man nämlich diesen CSS-Code verwenden: video { max-width: 100%; height: auto; }.
Für eingebettete Videos von Fremdhostern, YouTube oder Vimeo zum Beispiel, ist das aber nicht so einfach. Denn diese werden über einen iframe eingebunden. Dave Rupert hat sich dazu ein paar Gedanken gemacht und ein kleines jQuery-Plugin geschrieben: FitVids. Dieses übernimmt die richtige Skalierung des Videos. Wie einfach das geht, zeigt folgendes Video.

Wer sich die manuelle Einrichtung des Plugins sparen möchte und WordPress benutzt, dem ist sicherlich mit dem FitVids for WordPress-Plugin geholfen. Und ich bin jetzt zufrieden und kann einen weiteren Haken auf der “Was mich am Blog noch stört”-Liste machen.

Automatische Bildgrößen mit jQuery

Manchmal möchte ich ja gerne meine Bilder auch in schön groß präsentieren, damit sie richtig wirken. Dummerweise haben nicht alle Menschen Displays mit mindestens 24″-Format. So muss man ein wenig gucken, dass sich der liebe Benutzer nicht tot scrollt oder das Bild gar nicht in seiner Gesamtheit anschauen kann.

Deshalb habe ich mal ein wenig in die jQuery-Trickkiste gegriffen und ein kleines Stück Code geschrieben, dass es mir erlaubt die Bilder in möglichst großer Größe einzubinden. Es wird dann automatisch so skaliert, dass es sich in die Browsergröße des Besuchers schön einpasst und zentriert dargestellt. Nachteil daran: Die Dateigröße schiesst natürlich in die Höhe, was bezüglich der Ladezeiten auch nicht so richtig Spaß macht. Damit das nicht überhand nimmt, habe ich die Maximalhöhe der Bilder auf 900 Pixel beschränkt. Ich denke das reicht völlig aus.

(mehr…)

Eine neue Webseite für den Landesverband

In die Jahre gekommen: Die Webseite des BdP LV RPS

Ganz schön in die Jahre gekommen ist sie, die Webseite meines liebsten Landesverbandes im Bund der Pfadfinderinnen und Pfadfinder. Da wird es Zeit, sich mal ein paar Gedanken zu machen wie es weitergeht. Ideen haben wir genug, die technische Umsetzung bleibt dann an mir hängen. Aktuell läuft die Seite unter Typo3, was ich zwar wegen seiner Mächtigkeit irgendwie schätze, aber dennoch irgendwie nicht mag. Das liegt vielleicht auch daran, dass ich nie so wirklich fit darin wurde irgendwelche Anpassungen in Typoscript zu machen. Bei jedem Update und jedem Feature oder Extension die ich einbauen möchte, bleibt irgendwie ein schlechtes Gefühl zurück.

Auf der anderen Seite: Ich mag WordPress. Damit habe ich Erfahrung und was so an kleinen Extras gebraucht wird, habe ich mir schnell mit PHP zurechtgefrickelt. Und wo wir die Geschichte neu aufziehen wollen, ist es dann auch vielleicht an der Zeit das System ganz zu wechseln. Die nächsten zwei Jahre wird die Entwicklung und Pflege an mir hängen und da soll es dann in meiner knappen Freizeit eher vorangehen, als das ich halbgares Zeug in Typo3 zusammenschraube.

(mehr…)

Ein Adventskalender mit WordPress: WP-Advent

Da ich dieser Tage einen Adventskalender brauche, hatte ich zwei Möglichkeiten: Ich bastele mir aus PHP schnell selbst etwas… oder ich Beweise mal wieder meine Aussage, dass man mit WordPress einfach alles kann. Und nun sagt alle “Hallo WordPress-Adventskalender!”

Screenshot vom WordPress-Adventskalender

(mehr…)

CSS3-Effekte im Internet Explorer mit CSS3Pie

CSS3-Kram ist kein Spaß, wenn man sich seine Seite dann mal im Internet Explorer anschaut. Findige Menschen haben sich nun aber einen klugen Weg ausgedacht, um auch dem Internet Explorer ein wenig fancy CSS3 beizubringen. CSS3Pie heißt das Projekt, das mit Hilfe von Javascript in Form von Behaviors zumindest die Befehle border-radius, box-shadow und Farbverläufe zu implementiert.

"der tag und ich" im Internet Explorer 8 mit CSS3Pie

Vorneweg: Es funktioniert, mit Einschränkungen. In der aktuellen Fassung wird so zum Beispiel der Parameter “inset” für box-shadow noch nicht unterstützt und die Befehle um nur einzelne Ecken abzurunden werden nicht interpretiert. Außerdem ist die Lösung nicht gerade die schnellste. Man kann nahezu sehen, wie die Effekte “angeschaltet” werden.

(mehr…)