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 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.

Eine neue Webseite für den Landesverband

Screenshot bdp-rps.de

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.

Weiterlesen „Automatische Bildgrößen mit jQuery“

Neues auf schneyra.de

Unter der Domain schneyra.de führte ich früher das Blog, das genau so hieß wie dieses hier. Seit dem lag die Seite brach, vor bereits zweieinhalb Jahren startete ich hier erneut durch. Seit dem sollte auf der alten Domain auch mal wieder was passieren. Jetzt sind wir schon mal einen Schritt weiter.

„schneyra“ – der Name ist Programm. Der Name ist meiner, seit guten 15 Jahren. Er steht nicht in meinem Personalausweis, ist aber Spitzname, Fahrtenname, alter Ego. Und für viele sicherlich eher ein Begriff als der Rest.

„Neues auf schneyra.de“ sagt die Überschrift zu diesem Artikel. Sehr hochtrabend, wenn man sich den Schnellschuss anschaut den ich da heute hochgeladen habe.

Vielleicht wird das mal ein Portfolio

Macht aber nichts. Auf jeden Fall stehen da nun schon mal meine Kontaktdaten. Vielleicht wird daraus mal ein Portfolio. Vielleicht auch nicht. Ein paar Ideen dazu habe ich schon im Kopf – aber ob die es auch ins Web schaffen?

Mahlzeit! – Zufällig essen

Ich esse gerne. Ich bereite mir auch gerne eine Mahlzeit zu und bin kein großer Freund von Fertigmahlzeiten. Aber schnell muss es meistens gehen: Wenn ich nach einem anstrengenden Arbeitstag nach Hause komme, dann habe ich meistens noch ein paar andere Sachen im Kopf die ich gerne erledigen möchte. Außerdem drückt mir der Hunger dann oft auch schon ein Loch in den Bauch. Das geht bestimmt nicht nur mir so.

In diesem Zustand bin ich nicht sehr entscheidungsfreudig und vor allem Ideenlos. Viele Sachen, die schnell gekocht sind, fallen mir in diesem Zustand oft nicht ein. Deswegen muss die Technik mal wieder nachhelfen:

Mahlzeit!

Screenshot "Mahlzeit"

Warum nicht einfach eine Seite aufrufen, die mir die Entscheidung abnimmt und einen zufälligen Essensvorschlag macht? Rezepte und Kram gibt es in rauhen Mengen im Internet, das ist klar. Aber wenn es schnell gehen soll, dann möchte ich auf etwas zurückgreifen was ich kann und flott zubereitet ist. Deshalb habe ich mir ein kleines WordPress installiert und mit ein paar Rezepten gefüttert. Haute Cuisine sollte man nicht erwarten: Die meisten Zutaten dazu habe ich immer im Haus, es kann also direkt losgehen – einfach mahlzeit.dertagundich.de1 im Browser eintippen und die Eingabetaste drücken!

Für meinen Bedarf hätte es eigentlich gereicht, wenn die Seite eine Überschrift ausspuckt. Aber vielleicht mag ja der ein oder andere mitmachen und greift auch auf die Schnell-Rezepte zurück? Mit etwas über einer Hand voll Mahlzeiten startet das Ganze jetzt, ich werde nach und nach nun weitere Rezepte einpflegen. Ideen dazu darf man mir gerne in den Kommentaren hinterlassen. Was fehlt? Was muss ich unbedingt öfter mal essen?

Die technische Seite

Wie schon erwähnt, läuft die Seite unter WordPress mit einem schnell selbst zusammengebastelten Theme. Die Funktionalität ist maximal minimalistisch: Bei jedem Laden der Seite wird ein Beitrag in der WordPress-Datenbank per Zufall ausgewählt. Hinter der Überschrift liegt wie gewohnt auch ein Direktlink zum Rezept. Aber das war es auch schon.

Zuerst hatte ich überlegt eine selbstgeschriebene Geschichte im Hintergrund laufen zu lassen, habe mich dann aber dagegen entschieden. Für WordPress spricht, dass ich mich um die technische Seite nicht wirklich kümmern muss, alles „out of the box“ funktioniert und vor allem das ich weitere Funktionalitäten (wie etwa ein Archiv oder eine Suche) später recht einfach mit Bordmitteln realisieren kann.

Und nun guten Appetit mit der ersten Beta-Version von Mahlzeit!

  1. Gibt’s nicht mehr, sorry! []