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.

01. Juni 2012

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.

03. Mai 2012

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.

17. April 2012

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.

07. März 2012

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. ((Zumindest ist so die einfache Theorie. In Wirklichkeit ist das ein wenig aufwändiger.))

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.

01. März 2012

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.

[vimeo]28523422[/vimeo]

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.

14. Februar 2012

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.

Den ganzen Beitrag lesen.

27. Juni 2011

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

Einen guten Nachmittag und den halben Abend habe ich damit verbracht, das Ding zusammen zu bauen. Wesentlich aufwendiger wird es nun, mir noch passende Inhalte aus den Fingern zu saugen zu überlegen.

Technisches und Quellen

Aber vielleicht mal ein paar technische Details: Das ganze ist ein WordPress-Theme und läuft bei mir unter WordPress 3.0.1 problemlos. Getestet hab ich die Geschichte mal in Chrome und Firefox, da sieht alles top aus. Der Internet Explorer sollte in einer möglichst aktuellen Version auch keine Mucken machen, aber das weiß man ja nie.

Zum Anzeigen der virtuellen Türchen verwende ich Fancybox, ein jQuery-Plugin. Das kann Videos, Bilder und Text darstellen. Man ist also in seinen Möglichkeiten kaum eingeschränkt. Die verwendete Schrift ist übrigens Tangerine aus dem Google Font Directory. Das Hintergrundbild habe ich selbst im Urlaub auf Langeoog geschossen.

YouTube- und Vimeo-Videos lassen sich mit den Tags
[html]
[ youtube ]xxx[ /youtube ]
[ vimeo ]xxx[ /vimeo ]
[/html]
einbinden, wobei das „xxx“ für die Video-ID steht, die man aus der URL rauskopieren muss. Außerdem muss man die Leerzeichen in den eckigen Klammern entfernen. Das notwendige Gehackte hat netterweise der Herr Netzblogr zur Verfügung gestellt.

Zur Darstellung der Einträge verwende ich zwei Loops. Den Code für den Teil mit den noch nicht erschienenen Beiträgen habe ich mir bei Michael Loeser abgeschaut.

Installation und Einrichtung

Zuerst einmal braucht es ein leeres WordPress. Wie man so etwas installiert, möchte ich grade gar nicht erklären – das lässt sich auch einfach zusammengooglen und ist eigentlich auch nicht schwer. Der Titel des Blogs wird oberhalb des Kalenders ausgegeben. Außerdem wichtig: Man muss unter Einstellungen -> Lesen die Einstellung Blogseiten zeigen maximal auf 24 stellen. Als zweites braucht es dann das Adventskalender-Theme, welches man in den Themes-Ordner lädt. Dann schnell das Theme aktivieren!

Schließlich legt man dann genau 24 Beiträge im WordPress an und datiert diese in der „Publizieren“-Box am rechten Rand entsprechend auf den 1. bis 24. Dezember vor. Als Titel sollte man einfach die Ziffern 1-24 nehmen.

Download

WordPress-Theme WP-Advent

Disclaimer

Ich habe das Theme für meinen eigenen Bedarf recht flott zusammengebastelt und für meinen Zweck funktioniert es. Falls etwas schief gehen sollte, darf man mich gerne in den Kommentaren drauf hinweisen. Wenn ich Zeit und Muse finde bastele ich auch noch ein wenig daran rum. Ansonsten darf aber auch jeder gerne das Theme ganz nach den eigenen Wünschen umbauen und Kram. Das Hintergrundbild lässt sich zum Beispiel recht einfach austauschen, indem man ein Bild auf die Maße 600*500 Pixel bringt und dann von oben links nach unten rechts in durchnummerierte Teile á 100*125 Pixel zerschneidet. Die Bilder packt man dann in den Ordner ausschnitte im Theme-Ordner und schon ist alles super mit dem eigenen Bild.

Nur die beiden Links unter dem Kalender, die bleiben bitte drin. Sonst finde ich das doof. Wer das Theme einsetzt, darf mir das auch gerne da so im Kommentarbereich erzählen. Ich freue mich sehr über einen Link, damit ich mir das dann mal anschauen kann.

29. November 2010

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?

27. Juli 2010

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

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.de ((Gibt’s nicht mehr, sorry!)) 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!

21. Juli 2010