Kategorien
E-Business Inspiration Technik Tipps, Tricks & Tutorials Tutorials WordPress

Mehr Speed, mehr Sicherheit: die optimale .htaccess

Die Webserver-Konfigurationsdatei .htaccess ist eine der wichtigsten Dateien deiner Website-Installation. Viel kann diese oftmals noch unterschätzte Datei leisten. Sie kann zu einem wahren Performance-Schub einer Website ebenso beitragen, wie zu erhöhter Sicherheit. Beides ist in der heutigen Zeit wichtig. Die Ladegeschwindigkeit ist bereits seit längerem ein Rankingfaktor für die Position der eigenen Website in den Google-Suchergebnissen. Zudem werden immer wieder WordPress-Websites gehackt, weil kein Augenmerk auf die Sicherheit der Website gelegt wird. In diesem Artikel stelle ich meine eigene .htaccess-Datei vor, die ich im Laufe der Zeit immer weiter verfeinert und optimiert habe.

Die optimale .htaccess Datei für mehr Speed und Sicherheit

Eine optimale .htaccess Datei

Eine optimale .htaccess-Datei wird es niemals fertig konfiguriert geben können, da sich viele Punkte individuell auf die eigene Website beziehen werden. Auch die von mir vorgestellte Datei ist nur ein großer Teil dessen, was bei mir aktiv ist. Einiges muss noch auf persönliche Bedürfnisse angepasst werden, doch mit dem folgenden Code hat man bereits sehr viel erreicht. Vor allem ist eine optimale Grundlage für eine wirklich schnelle Website geschaffen worden. Nicht vergessen habe ich dabei den Bereich Sicherheit, der sich zum Teil auf WordPress bezieht.

Die komplette Datei kann bei GitHub heruntergeladen werden.

Teil 1: Browser-Caching

Im Abschnitt Caching wurde an alles gedacht, auch an das Zwischenspeichern der beliebten Webfonts, die dann allerdings auf dem eigenen Server liegen sollten. In der Sektion für die Bildformate findet das neue Grafik-Format WebP Berücksichtigung. Dateien, die sich im Allgemeinen eher selten ändern, zum Beispiel JavaScripts, bekommen einen weit in der Zukunft definierten Cache-Header. Feeds hingegen werden nur eine Stunde gecached, fast alle anderen Dateien hingegen einen Monat. Zu beachten ist, dass in der Datei statische HTML-Seiten für eine schnellere Auslieferung für eine Stunde (3.600 Sekunden) in den Speicher befördert werden. Wer das nicht möchte, setzt stattdessen ein access plus 0 seconds ein.

Der ETag-Header wird durch die .htaccess deaktiviert, da ein Last-Modified-Header gesendet wird. Zudem ist die ETag-Technologie bekannt als langsam, daher nutzen wir sie nicht. Wichtig zu erwähnen ist, dass ein keep-alive-Header gesendet wird. Das erlaubt dem Browser das gleichzeitige Laden mehrerer Dateien und sorgt für einen weiteren Performance-Schub.

Bitte beachten: Da auch das CSS zwischengespeichert wird, sollte man, wenn man öfter etwas daran ändert, entweder die Datei nach einer Änderung umbenennen, oder eine Versionierung implementieren. Ich bevorzuge die zweite Lösung, die ein Teil eines zukünftigen Artikels sein wird.

Ein Klick öffnet die komplette Datei bei GitHub
htaccess-caching

Teil 2: Die komprimierte Auslieferung der Dateien

Viele Vorschläge für .htaccess Dateien, die im Netz zu finden sind, sind nur rudimentär und unvollständig. Alle denkbaren und wichtigen Datei-Formate werden durch meine .htaccess komprimiert ausgeliefert, damit ein wirklicher Geschwindigkeitsvorteil entsteht.

Ein Klick öffnet die komplette Datei bei GitHub
Kompression

Teil 3: Allgemeine Sicherheitseinstellungen

Der Grand­sei­g­neur des Webdesigns – Jeff Starr von Perishable Press – feilt bereits seit Jahren an seiner Blockliste für die .htaccess. Die neueste Version seiner Firewall, die 6G, ist ein Manifest der Sicherheit und wird gerne durch einige WordPress-Security-Plugins kopiert, weil sie so effektiv ist. Sie schützt unter anderem vor Cross-Site-Scripting und Schadcode-Implementierung über die Erweiterungen von URLs. Hackversuche werden trotz des minimalen Codes wirkungsvoll unterbunden und der Code arbeitet sehr effektiv.

Ein Klick öffnet die komplette Datei bei GitHub
6G-Firewall-Blacklist

Teil 4: Wichtige Sicherheitseinstellungen für WordPress

Die allgemeine Beliebtheit des Content-Management-Systems WordPress ist leider der Grund dafür, dass es sich immer öfter den Hackversuchen böswilliger Mitmenschen ausgesetzt sieht. Mit einigen Zeilen Code in der .htaccess kann man dem vorbeugen. Kommt dann noch eine Absicherung des Administrator-Zugangs der Website hinzu, kann man die Site als sicher ansehen, wenn man die Basics wie das rechtzeitige Update von WordPress, Theme und Plugins beherrscht.

Wie man den Admin-Zugang einer WordPress-Website per .htaccess und .htpasswd wirkungsvoll absichert, haben wir bereits beschrieben. Ebenfalls wird die potenziell unsichere XML-RPC-Schnittstelle von WordPress mit diesem Code völlig abgeschaltet. Wer die Schnittstelle nutzen möchte, weil er zum Beispiel mit der neuen WordPress-Desktop-App arbeitet, muss den Bereich des Codes auskommentieren. Das geschieht mit einer vorgesetzten Raute (#) pro Code-Zeile. Die Absicherung des Adminbereichs ist bereits vorbereitet, wenn du diese Form der Sicherheit nicht nutzen möchtest, dann kommentiere diesen Bereich aus.

Ein Klick öffnet die komplette Datei bei GitHub
Einstellungen in der htaccess für die Sicherheit von WordPress

Download der kompletten .htaccess Datei

Die komplette .htaccess Datei kann bei GitHub heruntergeladen werden.

Fazit

Mit dieser .htaccess Datei sind wir schon ziemlich nahe am Optimum. Die Datei ist eine hervorragende Grundlage, in der nur noch einige kleine, seitenspezifische Details ergänzt werden müssen (vermutlich). Mir und meiner Website leistet diese Datei sehr gute Dienste, und, ich hoffe stark, dir auch. Die Datei ist zudem so aufgebaut, dass es keine nervigen Probleme mehr bei Google Page Speed Insights gibt. Falls jemand von euch der Meinung ist, es gäbe da noch Verbesserungsbedarf, dann schreibe er/sie bitte einen Kommentar. Auch ich lerne gerne noch dazu :-)

Links zum Thema:

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

So einfach erstellst du ein eigenes WordPress-Widget

Das eigene WordPress-Widget ist neben Plugins eine weitere tolle Möglichkeit, dein WordPress um nützliche Funktionen zu erweitern. Während Plugins zumeist spezifische Funktionen für die Website bereitstellen, wie etwa die Anzeige von ähnlichen Beiträgen, erweitern Widgets die möglichen Funktionen für die Widget-Bereiche deines Themes. Viele interessante Funktionen sind hier denkbar, zum Beispiel die Anzeige einer „Über mich“-Box oder aber deiner letzten Tweets. In diesem Beitrag zeigen wir dir anhand zweier Beispiele, wie einfach du ein eigenes WordPress-Widget erstellen kannst.

So einfach erstellst du ein eigenes WordPress-Widget

Was ist ein WordPress-Widget und warum solltest du das wissen wollen?

Widgets fügen Inhalte und zusätzliche Funktionen zu deinen Widget-Bereichen (Sidebars) hinzu. Die Möglichkeiten sind vielfältig, denn die Platzierung innerhalb eines Themes kann in den unterschiedlichsten Bereichen erfolgen, etwa klassisch in der Sidebar, im Footer oder in speziellen Widget-Bereichen innerhalb einer speziellen Startseite deines Themes. Genauso vielfältig wie die möglichen Platzierungen sind die Funktionen, die sie bereitstellen können.

Wer Themes entwickelt, sollte auch Widgets bereitstellen

Viele Menschen, die sich eingehender mit WordPress beschäftigen, möchten irgendwann eigene Themes erstellen. Die logische Weiterentwicklung dessen ist das Bereitstellen von Funktionen durch Widgets. Grundsätzlich ist es bedeutend besser, zusätzliche Funktionen über Plugins und Widgets bereitzustellen, denn dann sind diese Features auch nach einem Theme-Wechsel weiterhin nutzbar. Das ist ganz im Sinne der Benutzerfreundlichkeit, der User des Themes wird es honorieren.

Widgets entwickeln – ein Einstieg

Wer ein eigenes Widget entwickeln möchte, sollte sich schon etwas mit PHP auskennen. Hier ist es wie bei der Theme- und Plugin-Entwicklung. Eingehendere Kenntnisse in PHP schaffen immer gute Ergebnisse, wenn man sich an die WordPress-Coding-Standards hält. Die beiden Widgets, die ich hier vorstelle, sind relativ einfacher Natur, auch Einsteiger sollten sich nach einer kurzen Einarbeitung damit zurechtfinden.

Wichtige Links zum Thema:

Widgets entwickeln – die Grundschritte

Seit WordPress 2.8 werden Widgets erstellt, indem die WordPress-eigene Widget-Klasse WP_Widget erweitert wird. Dabei teilt sich ein Widget in fünf verschiedene Grundbereiche auf:

1 – Die Initialisierung – function __construct(). Hier legt man die ID des Widgets, den Namen und die Beschreibung fest. Zudem können wir in diesem Bereich noch die Standard-Optionen festlegen. Wenn JavaScript oder Stylesheets referenziert werden müssen, dann kommt die nötige Funktion ebenfalls in diesen Bereich.

2 – Das Frontend-Design – function widget(). Dies ist der Bereich, in dem die Funktionen für die Ausgabe des Codes auf der Website hineinkommt. Es ist also der eigentliche Funktionsbereich des Widgets.

3 – Das Backend-Design – function form(). In diesen Bereich kommen die nötigen Funktionen mit dem HTML für den Kontrollbereich des Widgets im WordPress-Adminbereich.

4 – Das Update der Einstellungen – function update(). Wie der Name schon sagt, wird in diesem Bereich die Funktion für die Validation und das Update der Widget-Einstellungen untergebracht.

5 – Die Registrierung – function init(). Das Widget wird registriert in WordPress und kann damit wie ein Plugin aktiviert werden.

Diese fünf Bereiche stellen den Grundaufbau eines Widgets dar, wie der folgende Screenshot verdeutlicht.

Ein Klick öffnet das Gist bei GitHub
Die vier Grundbereiche eines Widgets

Der wichtigste Schritt – der Plugin-Header

Bevor du dein fertiges Widget nutzen kannst, braucht es noch einen »Header«, um auch im Plugin-Verzeichnis unter dem Menüpunkt „Plugins“ angezeigt zu werden.

Der Header eines WordPress Plugins

Da das Widget ebenfalls vom Handling her ein Plugin ist, muss es zwingend einen Plugin-Header besitzen. Wenn dieser Schritt vergessen wird, erscheint das Widget nicht im Plugin-Bereich deines WordPress und kann somit nicht aktiviert werden. Mit Header jedoch erscheint es in der Übersicht.

Die Dr. Web Plugins in der Übersicht

Zwei Beispiel-Plugins inklusive Download

Beispiele sind oftmals der beste Weg, um etwas zu lernen. Daher habe ich zwei Widgets als Beispiel herausgesucht und für Dr. Web umgeschrieben. Die Schwierigkeitsstufen sind für Einsteiger geeignet, das »Über mich«-Widget ist recht einfach gehalten, das »Twitter Timeline« Widget ist etwas anspruchsvoller, weil es eine JavaScript-Datei dem Footer hinzufügt, wenn es genutzt wird.  Jedoch ist auch das Twitter-Widget noch im Einsteiger-Bereich anzusiedeln.

Das »Über mich« Widget

Dieses kleine Plugin erstellt ein einfaches »Über mich«-Widget, das neben einem Gravatar von dir einen Text über dich darstellen kann. Die Größe deines Gravatars kann ebenso eingestellt werden, wie die Seite, auf die das Widget verlinken soll.

Ein Klick öffnet die vollständige Datei bei GitHub.
Das

Die Einstellungen des Widgets

About Widget Einstellungen

Das Endergebnis auf der Website

Das Endergebnis des About me Widgets

Das Twitter-Timeline-Widget

Das Twitter-Timeline-Widget zeigt die beliebte Twitter-Timeline in der Sidebar an. Mit diesem Widget ist es dir möglich, deine letzten Tweets recht ansprechend darzustellen. Zudem können deine Besucher direkt aus der Anwendung heraus einen Tweet an dich absetzen. Um das Widget nutzen zu können, benötigst du eine Twitter Widget ID. Dieser Beitrag erklärt anschaulich, wie man sie erhält.

Ein Klick öffnet die vollständige Datei bei GitHub.
Der Code des Twitter Timeline Widgets

Die Einstellungen des Widgets

Twitter Widgets Einstellungen

Das Endergebnis auf der Website

das-twitter-widget

Abschlussarbeiten am Widget

Nachdem die Widgets fertig programmiert und auf einer lokalen Entwicklungsumgebung getestet wurden, können sie installiert werden. Hierzu erstellt man einen Ordner mit dem (kleingeschriebenen) Plugin-Namen, dieser könnte zum Beispiel »drweb-about-widget« lauten. Dort hinein kommt die Plugin-Datei. Im Anschluss kann man den Ordner dann per (S)FTP in das Plugin-Verzeichnis (wp-content/plugins) hochladen und ganz normal als Plugin aktivieren. Danach taucht das Widget unter den zur Verfügung stehenden Widgets auf und kann genutzt werden.

Fazit

Die Grundkenntnisse im Erstellen von Widgets kannst du dir mit diesem Beitrag erarbeiten. Die beste Methode, um zu lernen, wie man Widgets erstellt, ist das Herumexperimentieren mit dem Widget-Code der beiden Beispiel-Dateien. Beide Widgets sind voll funktionstüchtig und getestet, sie werden also auch unter WordPress 4.4.2 funktionieren.

Download der Widgets

(dpe)

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

WordPress: So nutzt du ein eigenes Plugin statt der functions.php

Jeder, der längere Zeit eine WordPress-Website betreibt, kennt das Problem. Für alle möglichen Funktionen braucht man kleine Code-Schnipsel, die man in die functions.php des aktivierten Themes einfügt. Wenn die Website nur einige wenige dieser Code-Snippets benötigt, ist das grundsätzlich kein Problem. Doch eine Website, die bereits seit Jahren online ist, hat eventuell schon sehr viele Code-Schnipsel angesammelt. So verliert man erstens schnell den Überblick und zweitens sind die Änderungen bei einem Theme-Wechsel oder einem Update des Themes verschwunden. Ich zeige dir heute einen besseren Weg.

WordPress: So nutzt du ein eigenes Plugin statt der functions.php

Nachteile von Code-Schnipseln in der functions.php

Nach und nach sammeln sich viele Code-Snippets in der functions.php-Datei eines WordPress-Themes an. Die Übersicht leidet schon extrem, auch weil zumeist nicht nur Schnipsel ihre Heimat in der Datei finden, sondern auch noch Theme-Funktionen darin untergebracht sein können, wie es bei den Standard-Themes von WordPress und einigen anderen Themes der Fall ist. Bei einem Theme-Update sind zudem noch alle Code-Schnipsel wieder verschwunden und man muss sein hoffentlich getätigtes Backup der Datei wieder einspielen. Nachteile über Nachteile.

Der Mensch ist ein Herdentier und hinterfragt viele Dinge nicht – auch nicht die Dinge, die bisher nicht wirklich gut funktionierten. Alle Verwender einer WordPress-Website handhaben es so, daher wird es ebenso gehandhabt. Auch mir ist das jahrelang so gegangen. Ich kenne alle Nachteile zur Genüge und habe trotzdem nicht nach einer Lösung gesucht, obwohl diese so nah ist.

Ein seitenspezifisches Plugin anlegen, statt die functions.php zu nutzen

Die Idee ist naheliegend und wesentlich funktioneller, als die unsägliche functions.php zu nutzen. Wir erstellen einfach ein eigenes Plugin für die Website. Alle Code-Schnipsel kommen nur noch in dieses Plugin hinein, alte Schnipsel ziehen einfach um. Das hat zudem den großen Vorteil, dass nach einem Theme-Update oder einem Theme-Wechsel alle Code-Fragmente noch vorhanden sind. Die Lösung ist also zukunftssicher und einfach zu handhaben.

Doch bevor wir an die Arbeit gehen, fertigen Sie bitte ein Backup ihrer functions.php Datei an.

So erstellst du ein eigenes Plugin für deine Website

Vielleicht denkst du jetzt, dass es echt kompliziert ist, ein eigenes Plugin zu erstellen. Doch das ist es nicht. Im Gegenteil, es ist sogar richtig einfach. Erstelle zuerst einen neuen Ordner auf deinem Desktop und nenne ihn websitename-plugin. Beispiel: drweb-plugin. In diesen Ordner fügst du eine leere Datei ein, die du mit Notepad (Windows) oder TextEdit (Mac) erstellen kannst. Nenne die Datei websitename-plugin.php.

Öffne die Datei nun mit einem Texteditor oder einer Entwicklungsumgebung wie zum Beispiel Atom, Brackets oder ähnlichen. Kopiere folgendes hinein:

Ein Klick öffnet das Gist bei GitHub
Das eigene Plugin erstellen statt functions.php zu nutzen

Nun kannst du in diese Datei deine Code-Schnipsel aus der functions.php-Datei einfügen. Nachdem das geschehen ist, lädst du den Ordner mit deinem Plugin in das Plugin-Verzeichnis von WordPress per (S)FTP hoch. Der korrekte Pfad lautet: wp-content/plugins/.

Im Anschluss musst du dich in dein WordPress einloggen und das Plugin noch aktivieren.

Das Seitenspezifische Plugin

Fazit

Mit nur wenig Aufwand haben wir eine bessere und vor allem zumeist übersichtlichere Lösung für das Problem mit den Code-Schnipseln gefunden. Endlich sind unsere Sonderfunktionen bei Theme-Wechseln und Updates sicher. Das ist ziemlich smart. Wenn du Schnipsel zum Auslagern suchst, schau mal in diesen Beitrag. Da haben wir ein paar nützliche Code-Snippets gesammelt.

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: So verbesserst du dein Beitragsmarketing

WordPress ist das Content Management System mitder weltweit größten Zahl aktiver Nutzer. Daher bringen wir in losen Abständen immer wieder Tipps für WordPress. Hierbei kann es sich um die Sicherheit des Systems, eine sinnvolle Erweiterung oder aber um Tipps für die Performance handeln. Im heutigen Beitrag unserer Serie beschäftigen wir uns mit Beitragsmarketing. Dabei geht es um Related Posts und warum für diese Aufgabe kein Plugin genutzt werden sollte. Ebenfalls stellen wir Lösungen für das wichtige Vermarkten älterer, jedoch weiterhin aktueller Beiträge vor.

WordPress: So verbesserst du dein Beitragsmarketing

Tipp 1 – Bessere Related Posts

Das Problem:

Die Funktion ist sehr beliebt und allen bekannt: Nachdem ihr einen Artikel gelesen habt, wird unter diesem Artikel noch auf ähnliche Beiträge, die euch auch interessieren könnten, verwiesen. Es werden euch also „Related Posts“ angeboten. Für die Bereitstellung dieser themenverwandten Beiträge wird meistens ein PLugin verwendet. Jedoch haben all diese Plugins einen gewaltigen Nachteil. Sie beanspruchen die Datenbank relativ stark und das schlägt auf die Performance. Besonders bei günstigen Hosting-Paketen ist die Datenbank der Flaschenhals, das schwächste Glied in der Performance-Kette.

Es müssen Artikel indexiert, zugewiesen und geordnet werden. Das ist recht aufwändig und komplex und beansprucht ziemlich viele Ressourcen. Zudem sind nur wenig dieser Plugins wirklich sauber programmiert, nutzen Caching korrekt und sparen somit Ressourcen ein. Kurzum: Related Post-Plugins machen euer WordPress langsam. Bei günstigen Hosting-Paketen oder Servern ist also ein Verzicht durchaus ratsam. Wer genau wissen möchte, warum Related Post-Plugins die Performance ausbremsen, liest diesen Hintergrundartikel.

Die besseren Lösungen für Related Posts

Verzichten sollte niemand auf das Anzeigen ähnlicher Beiträge, denn unter Umständen helfen sie dabei, die Zahl der besuchten Seiten pro Besucher zu erhöhen. Ob dem wirklich so ist, kann natürlich bei Bedarf nur ein eingehender Test zeigen. Wenn man also ähnliche Artikeln zeigen will, sollte man performante Lösungen wählen und eben keine Plugins einsetzen.

Die Alternativen:

Alternativ können Dienste wie Plista oder Outbrain genutzt werden. Beide Dienste arbeiten mit JavaScript. Nun könnte man argumentieren, dass JavaScript nicht gerade performant ist. Trotzdem ist es die bessere Lösung, denn die Scripte werden erst nach dem Seitenaufbau geladen. Somit hat sich die Seite durch weniger Belastung auf der Datenbankseite bereits schnell aufgebaut und im Anschluss wird erst das JavaScript der beiden Dienste geladen. Das ist durchaus vorteilhaft, denn bei einer Geschwindigkeitsoptimierung kommt es darauf an, dass der Besucher eine sich sehr schnell aufbauende Seite zu sehen bekommt, damit er nicht abspringt.

Weitere Vorteile:

Zum einen können die ähnlichen Beiträge dieser beiden Dienste hochgradig angepasst werden, und zum anderen kann man auch noch Geld durch ihren Einsatz verdienen. Design und Anzahl der angezeigten ähnlichen Beiträge können angepasst werden. Auch die Anzahl der eingeblendeten Werbungen kann beeinflusst werden.

plista-einstellungen

Beide Dienste setzen eine Registrierung voraus. Ebenfalls müssen natürlich Zahldaten eingegeben werden für die Überweisung der Werbeeinnahmen. Die Ladezeit der ähnlichen Beiträge ist ziemlich schnell. Solltest du immer noch ein WordPress-Plugin für die ähnlichen Beiträge einsetzen wollen,

Solltest du trotzdem immer noch ein WordPress-Plugin für die ähnlichen Beiträge einsetzen wollen, dann nimm das Schnellste unter ihnen: Contextual Related Posts.

Links zu den Websites: Plista  |  Outbrain

Tipp 2 – Die Vermarktung älterer Artikel

Auf vielen Blogs sind ältere Artikel immer noch relevant und zeitgemäß. Doch beachtet werden diese Beiträge kaum noch von den Besuchern. Denn es ist schon ein Aufwand, bei einem Blog, der bereits seit Jahren existiert, an diese Artikel zu kommen. Es sind einfach zu viele Beiträge online. Man wird von der schieren Masse fast erschlagen. Doch es gibt Lösungen für diese Problematik. Hierbei unterscheiden wir zwischen der automatischen und der manuellen Lösung des Problems. Beide haben ihren Reiz und ihre Berechtigung.

Die automatische Vermarktung älterer Beiträge

Für die Vermarktung älterer und natürlich ebenso neuerer Artikel steht ein recht gutes Plugin zur Verfügung. Einmal richtig konfiguriert, muss man sich um nichts mehr kümmern. Empfehlenswert ist das Plugin Revive Old Post.

Revive-Old-Posts

Ein auch in der kostenlosen Version zu empfehlendes Plugin. Allerdings können in der kostenfreien Version nur Facebook und Twitter versorgt werden. Die kostenpflichtige Pro-Version ist ab 75 USD zu haben. Ein Screenshot der Einstellungen:

Revive-Old-Post-Einstellungen

Der Link zum Plugin: Revive Old Post

Die manuelle Vermarktung älterer Beiträge – Buffer

Buffer

Buffer ist ein Online-Dienst, der im Bereich des Teilens von Artikeln nicht mehr Wegzudenken ist. Denn mit Buffer lassen sich mehrere Social Media Account auf einmal mit den neuesten Updates aus deinem Blog versorgen. In der kostenfreien Variante können fünf soziale Netzwerke bedient werden. Für jedes Netzwerk kann ein eigener Post verfasst werden. Beitragsbilder werden ebenfalls gepostet. Nur die zu teilenden Artikel müssen ausgewählt werden, im Anschluss können dann bis zu zehn Beiträge pro Tag geteilt werden. Anmelden kann man sich entweder konservativ mit E-Mail und Passwort, oder man nutzt die OAuth-Zugänge über Twitter und Facebook. Die Pro-Variante von Buffer kostet 10 USD monatlich.

Buffer-Backend

Buffer bietet neben dem Teilen von Artikel auch eine Funktion zum Analysieren der Reichweite der geteilten Beiträge. So findet man die beliebtesten Artikel relativ schnell heraus und kann sie auch gleich nochmals posten. Von Buffer gibt es übrigens zusätzlich eine Web-App, mit deren Hilfe sich schnell Bilder für die sozialen Medien kreiieren lassen. Dr. Web berichtete hier darüber.

Die Reichweite eine Buffer-Posts

Die Browser-Erweiterung

Wirklich praktisch ist die Browser-Erweiterung von Buffer. Zu finden ist diese über »My Account => Browser Extensions«. Um mit der Browser-Erweiterung einen Beitrag zu teilen, ruft man den zu teilenden Artikel auf und klickt auf den Button für die Erweiterung. Im sich öffnenden Fenster kann man dann den Beitrag teilen und zeitlich timen. Zudem lassen sich unterschiedliche Beschreibungen für den Beitrag festlegen, hierbei teilen sich LinkedIn, Twitter und Google+ ein Feld, ein weiteres existiert für Facebook. Jedoch lassen sich die sozialen Netzwerke auch nacheinander versorgen.

Die Browser-Erweiterung

Ebenfalls ist ein sogenannter Power-Scheduler vorhanden, mit dem sich die sozialen Medien einzeln ansteuern lassen.

power-scheduler

Der Link zum Online-Dienst Buffer

Fazit zu der Vermarktung älterer Artikel

Beide Möglichkeiten sind richtig gut, obwohl die manuelle Vermarktung der älteren Artikel durchaus Vorteile bietet. Denn anhand der Statistiken kann man leicht erkennen, welcher ältere Beitrag erfolgreich gewesen ist. Dieses Feature fehlt dem WordPress-Plugin natürlich total, dafür muss man sich um nichts mehr kümmern. Die Erfolgsquote jedoch ist bei einer gewissenhaften Nutzung von Buffer wesentlich besser, denn man kann benutzerdefinierte Beschreibungen pro Beitrag vergeben. Man sieht den Posts auf den sozialen Netzwerken eben an, ob sie automatisch gepostet worden sind, oder ob sich jemand damit wirklich Mühe gegeben hat.

Wichtige Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

So versendet dein WordPress zuverlässig E-Mails

Wenn dein WordPress Probleme beim Senden oder Empfangen von E-Mails macht, dann haben wir die Lösung für dich. Natürlich kannst du statt der folgenden Lösung spezielle Drittanbieter-Dienste wie Mandrill dafür nutzen, doch diese Services kosten Geld. In diesem Artikel zeigen wir dir eine Möglichkeit, die dich kein Geld kostet und trotzdem sehr wirkungsvoll ist. Denn du nutzt einfach eine eigene E-Mail-Adresse deines Hosting-Pakets oder deines Servers. Wir zeigen dir, wie du einen SMTP-Server für den Versand deiner WordPress-E-Mails aufsetzt.

So versendet dein WordPress zuverlässig E-Mails

Das Problem mit den WordPress-E-Mails

WordPress nutzt die Mail-Funktion in PHP, um seine internen E-Mails zu versenden. Doch gerade hier liegt oftmals das Problem. Denn viele Shared-Hosting-Provider haben diese Funktion entweder nicht richtig konfiguriert, oder sie aus Sicherheitsgründen gleich ganz deaktiviert. Das stellt dich vor das Problem, dass dein WordPress die E-Mails nicht korrekt senden kann. Neue User bekommen so zum Beispiel keine Passwörter zugesendet und du wirst nicht über neue Kommentare auf deinem Blog informiert. Natürlich kannst du einen Drittanbieter-Service nutzen, wie Mandrill oder Sendgrid. Doch diese Dienste sind nicht kostenfrei und können bei vielen Usern oder Benutzerkonten ganz schön ins Geld gehen.

Doch keine Angst, es gibt durchaus eine Lösung für das Problem. Denn du kannst einen Service nutzen, für den du ohnehin  bereits zahlst.

Eine deiner eigenen E-Mail-Adressen für WordPress nutzen

Bei jedem Shared-Hosting-Paket oder gar einem eigenen Server bekommst du zu dem Paket auch eine eigene Domain und damit die Möglichkeit, eigene E-Mail-Adressen zu erstellen. Das geht durchaus einfach und wird das WordPress-Problem beheben. Eine eigene E-Mail-Adresse sieht so aus:

deinname@deineurl.tld

Das Erstellen einer E-Mail-Adresse funktioniert bei jedem Provider etwas anders, daher zeige ich hier als Beispiel, wie es bei hostNET.de im easyTECC4-Administrationspanel funktioniert. Wir empfehlen dringend, eine E-Mail-Adresse wie wordpress@deineurl.de zu nutzen.

E-Mail-Adresse erstellen

Neue E-Mail-Adresse anlegen Teil 1

Neue E-Mail-Adresse anlegen Teil 2

Im unteren Screenshot gebe ich die gewünschte E-Mail-Adresse ein, lege das Passwort und die Mail-Quota (Speicherplatz des Postfachs) fest und klicke auf Änderungen speichern. Nun erhalte ich die Zugangsdaten und kann eine eigene E-Mail-Adresse in WordPress einrichten. Wichtig ist hierbei auch der SMTP-Port für ein sicheres Einloggen. Normalerweise wird der Port 587 genutzt. Das kann jedoch bei euch auch ein anderer sein, worüber ihr euch bitte in eurem System im Support-Bereich oder bei eurem Hoster informiert.

Wichtig: Schreibt euch die Zugangsdaten und die zu nutzenden Server-Adressen auf, damit sie nicht vergessen werden.

Die eigene E-Mail-Adresse für WordPress nutzen, so geht’s

Es gibt leider gleich zwei Plugins mit dem Namen WP Mail SMTP. Achte darauf, dass du das Richtige (siehe Screenshot) downloadest.

Richtige-Version-installieren

Zuerst brauchen wir, um die E-Mail-Adresse konfigurieren zu können, ein kleines WordPress-Plugin namens WP Mail SMTP (easy SMTP). Bitte herunterladen, installieren und aktivieren. Im Anschluss navigiere zu den Einstellungen des Plugins unter »Einstellungen => EMail« und tätige dort Einstellungen nach dem folgendem Muster:

Ein Klick öffnet die Grafik in einer höheren Auflösung
Die Optionen

Die Zugangsdaten eingeben

Zuerst musst du deine E-Mail-Adresse eingeben. Danach folgt der Absendername im Feld „From Name„. Die Option „Send all WordPress emails from SMTP“ muss aktiviert sein. Im Bereich „SMTP Options“ gibst du den SMTP-Host an. Das ist die Serveradresse, von der gesendet wird. Das Feld „Use SSL encryption“ muss angehakt sein, damit die Zugangsdaten und die Übermittlung verschlüsselt geschehen. Bei „Authentification“ muss „Yes: Use SMTP authentication“ angeklickt sein. Darunter musst du nur noch deinen Benutzernamen und das Passwort für die E-Mail-Adresse eingeben und danach auf den Button »Änderungen übernehmen« klicken.

Die Einstellungen mit einer Test-E-Mail überprüfen

test

 

Gib nun im Feld „Send a Test Email“ eine E-Mail-Adresse, einen Betreff und eine Nachricht ein. Klicke nun auf »Send Test«. Dies generiert eine Test-E-Mail. Wenn diese E-Mail ankommt, hast du alles richtig gemacht und der Versand von E-Mails mit deinem eigenen Server funktioniert. Wenn nicht, bekommst du eine Fehlermeldung.

Troubleshooting bei E-Mail-Problemen mit WordPress

Der häufigste Grund, dass das Plugin keine E-Mails versenden kann, ist die falsche Eingabe eines SMTP-Hosts (Server-Adresse für den Versand) oder aber ein falscher Port. Stelle sicher, dass du den korrekten Host und den korrekten Port benutzt. Im Zweifel frage beim Support deines Hosting-Anbieters nach. SSL funktioniert bei den meisten Anbietern, doch manchmal leider nicht. Dann schalte zum Test bei „Type of Encryption“ auf „None“ um und teste erneut.

Fazit

Mit ein wenig Überlegung und ohne weitere Kosten haben wir das Problem gelöst und unser WordPress verschickt nun zuverlässig die wichtigen E-Mails. Denn der fehlerhafte Versand über die PHP Mail-Funktion wurde übergangen und die E-Mails werden nun direkt über deinen Hosting-Provider versendet.

(dpe)

Kategorien
Plugins Themes Tipps, Tricks & Tutorials WordPress

WordPress: 20 unverzichtbare Code-Schnipsel für die functions.php

Die functions.php ist eine Datei, die sich in jedem Theme für WordPress findet. Man kann mit dieser Datei nicht nur wichtige Theme-Funktionen steuern, wie zum Beispiel die Sidebars, die Widgets, und die Navigations-Menüs, sondern man kann vor allem auch kleine Code-Schnipsel hinzufügen. Die Code-Fragmente aktivieren, deaktivieren oder manipulieren viele wichtige Dinge im Zusammenhang mit deiner Website. Im Grunde arbeitet diese Datei wie ein Plugin und wird automatisch bei der Initialisierung von WordPress geladen. Natürlich kann man die Code-Snippets auch in ein eigenes Plugin einfügen, das man speziell für die Snippets und seine Website erstellt hat. Wir liefern die nützlichsten Snippets für diese Dateien.

WordPress: 20 Code-Schnipsel für die functions.php

Bei allen Grafiken gilt: Ein Klick öffnet das entsprechende Gist bei GitHub

1 – Das WordPress-Login-Logo austauschen

login-logo-aendern

So kann das Login-Design an ein eventuelles Corporate-Design eines Kunden angepasst werden.

Das Ergebnis

2 – Zugriff auf Menüpunkte im Backend auf Basis des Nutzernamens einschränken

Mit dieser Funktion lässt sich auf Basis des Benutzernamens der Zugriff auf diverse Admin-Menüpunkte deaktivieren.

Zugriff auf Menüs beschränken

3 – Die Wortlänge des Excerpt festlegen

Der Standard-Excerpt ist genau 55 Worte lang. Mit diesem Schnipsel lässt er sich überschreiben.

excerpt

4 – Die WordPress Admin-Bar entfernen

Mit dem Release von WordPress 3.1 wurde die Admin Bar als neue Funktion hinzugefügt. Einige Menschen empfinden diese als überaus praktisch, andere finden sie störend. Entfernen kann man die Admin-Bar mit folgendem Code:

Adminbar entfernen

5 – Den Seitensprung bei Klick auf „Weiterlesen“ deaktivieren

Klickt man bei einem Artikel-Auszug auf „Weiterlesen“, fügt WordPress automatisch einen Seitensprung ein. Mit dieser Funktion wird der Seitensprung beim Laden der Seite deaktiviert:

Seitensprung deaktivieren

6 – RSS-Feeds von WordPress abschalten

Statische Websites brauchen keinen Feed, daher kann man sie mittels dieses Codes schnell abschalten.

Feeds abschalten

7 – Entfernen der WordPress Dashboard-Widgets

Mit diesem Code kann man die Dashboard-Widgets auf der Startseite des Administrator-Bereichs von WordPress komplett oder teilweise abschalten.

Dashboard-Widgets abschalten

8 – Custom Post-Types in die WordPress-Suche integrieren

Um die seit WordPress 3.0 möglichen Custom Post Types in den Suchergebnissen der WordPress-Suche erscheinen zu lassen, bedarf es dieses Codes:

Custom Post Types in die Suche integrieren

9 – Google Analytics-Code in den Footer einbinden

Mit nur wenigen Zeilen Code kann man den Google Analytics-Code in den Footer einbinden, jeder andere Analytics Code funktioniert auch.

Analytics Code einbinden

10 – Ein Favicon anzeigen lassen

Ein Favicon ist ein kleines Bild, welches im Tab deines Browser angezeigt wird. Dein Blog sieht mit einem Favicon einfach professioneller aus. Die Bilddatei favicon.ico muss nur noch in das Hauptverzeichnis des Themes geladen werden.

Favicon anzeigen lassen

11 – Ein eigenes Logo im Dashboard von WordPress

Ab und an kann dieser Code sehr interessant sein, entweder, weil man seine eigene Website individualisieren will, oder eine Website für einen Kunden aufsetzt. Der Pfad und der Name zum Logo müssen eventuell noch angepasst werden.

Eigenes Dashboard-Logo

Das Ergebnis des Codes:

Custom Dashboard Logo

Quelle: Jacob Goldman’s Article on Smashing Magazine

12 – Footer-Text im WordPress-Adminbereich ändern

Der Text, der im Adminbereich der Website im Footer angezeigt wird, kann jederzeit geändert werden. So kannst du den Text anpassen:

Admin Footer austauschen

13 – Eigene Dashboard-Widgets erstellen

Vielleicht hast du dich schon mal gefragt, wie es einige Plugin-Entwickler schaffen, ihre eigenen Widgets im Dashboard von WordPress zu integrieren. Das ist recht einfach, hier ist ein möglicher Ansatz dazu:

custom dashboard-widgets

Das Ergebnis:

custom-dashboard-widgets

14 – Dynamische Copyright-Daten im Footer der Website anzeigen

Oftmals sieht man Websites mit veralteten Copyright-Daten. Oder eben nur mit dem neuesten Jahr, wenn die WordPress-Funktion dafür genutzt wurde. Richtig Spaß macht das nicht, denn wesentlich schöner ist bei einer bereits etwas länger existierenden Website eine Copyright Ausgabe nach dem Muster © 2014 bis 2016. Das ist mit etwas Code schnell zu erreichen:

Dynamisches Copyright

Im Anschluss fügst du noch folgenden Tag dort ein, wo das Copyright erscheinen soll. Zum Beispiel in der footer.php.

<?php echo ah_dynamic_copyright(); ?>

Das Ergebnis:

ergebnis-copyright

15 – Entferne einige Standard-Autorenfelder im Autor-Profil

Wenn du eine Website für einen Kunden entwickelst, dann wird dieser vielleicht seine Kontaktdaten in seinem Benutzerprofil ergänzen wollen. Das ist gut so, doch genau dort sind auch Felder angegeben für Dienste, die niemals von irgendjemandem genutzt werden. Mit diesem Code entfernst du diese nutzlosen Eingabefelder.

Nutzlose Kontaktfelder entfernen

16 – Autorenfelder zum Autor-Profil hinzufügen

Was man entfernen kann, kann man auch hinzufügen. Hier ist ein Code, der wirklich nützliche Eingabefelder deinem Autoren-Profil hinzufügt.

Kontaktfelder hinzufügen

Das Ergebnis:

Das Ergebnis

Die zusätzlichen Felder können mit folgendem Tag im Theme angezeigt werden:

<?php echo $curauth->twitter; ?>

17 – Den RSS-Feed-Footer manipulieren

Diese Funktion kann sehr gut dafür eingesetzt werden, um Werbung oder benutzerdefinierte Nachrichten nach jedem Beitrag im Feed anzeigen zu lassen.

Den RSS-Feed manipulieren

In diesem Fall haben wir eine Funktion erstellt, die innerhalb eines jeden Inhalts im Feed eine Nachricht ausgibt. Vor dem eigentlichen Inhalt wird »Dieser Artikel wurde von Andreas Hecht verfasst« ausgegeben, nach dem Inhalt dann »Schau dir DrWeb.de an«. Wichtig ist, dass diese Funktion durch „if(is_feed)“ nur dem Feed zugewiesen wurde und auch nur dort angezeigt wird.

18 – Beitragsbilder auch im Feed ausgeben

Solltest du die normalen Standard-Feeds von WordPress nutzen, dann hast du vielleicht schon festgestellt, dass die Beitragsbilder nicht im Feed erscheinen. Das kannst du leicht mit dem folgenden Code beheben:

Beitragsbilder in die RSS-Feed bringen

19 – Entferne die Fehlermeldung auf der Login-Seite

Wenn du deine Zugangsdaten auf der Login-Seite von WordPress eingibst, bekommst du eine detaillierte Fehlermeldung, wenn die Daten nicht stimmen. Die Fehlermeldung sagt dir dabei genau, ob dein Passwort oder dein Benutzername falsch waren. Das können natürlich auch die Hacker nutzen, darum entfernen wir diese Fehlermeldung mit dem folgenden Code:

login errors

Das Ergebnis ist eine leere Fehlerbox:

Ergebnis Fehlerbox

20 – Die Suchfunktion von WordPress abschalten

Wenn man eine statische Website erstellt, benötigt man vielleicht keine Suchfunktion mehr. Aus dem Design kann die Suchfunktion leicht entfernt werden, jedoch ist die Funktion immer noch da und kann von außen eventuell missbraucht werden. Daher zeigt der folgende Code, wie die Suche vollständig abzuschalten ist.

Suche abschalten

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress-Sicherheit: Die XML-RPC-Schnittstelle abschalten

Seit der WordPress-Version 3.5 ist die XML-RPC-Schnittstelle standardmäßig aktiviert. Das wäre nicht weiter schlimm, wenn WordPress nicht das beliebteste Content Management System der Welt wäre. Denn die Schnittstelle stellt nicht nur nützliche Funktionen bereit, sondern dient auch als ein wichtiges Angriffsziel für Hacker. Die Angreifer nutzen immer mehr die xmlrpc.php für ihre Brute-Force-Angriffe gegen WordPress, weil ein Angriff gegen diese Schnittstelle wesentlich effizienter und mit weniger Aufwand als andere Methoden verbunden ist.

WordPress-Sicherheit: Die XML-RPC-Schnittstelle abschalten

Dazu dient die XML-RPC-Schnittstelle

Die xmlrpc.php

Die Schnittstelle ist ein nützliches Werkzeug für die Verwaltung von Inhalten. Sie dient dazu, dass man mittels der Desktop– und der Smartphone-Apps die Website verwalten und Artikel verfassen kann. Ebenso kümmert sie sich um Pingbacks. Die Pingback-API ermöglicht eine Art »Vernetzung« zwischen den Blogs und dient gleichzeitig als Schnittstelle, um WordPress über externe Programmen verwalten zu können. Unterstützt werden neben der WordPress API auch die Blogger API, die metaWeblog API, die Movable Type API, und die Pingback API.

Die meisten Nutzer brauchen diese Schnittstelle jedoch nicht, weil sie ihre Artikel direkt in WordPress verfassen. Und auf die Pingbacks von anderen Blogs könnte man durchaus verzichten.

Deshalb ist die xmlrpc.php ein Sicherheitsrisiko

Passwortgeschützte Bereiche sind ein beliebtes Angriffsziel. Auch die xmlrcp.php gehört zu diesen Bereichen. Da jedoch immer mehr Blogger den Adminbereich ihrer Website absichern, fokussieren sich die Angreifer nun auf die Verwaltungs-Schnittstelle und lassen ihre Brute-Force-Angriffe auf dieses Ziel laufen. Problematisch ist hierbei, dass sich die Angriffe auf die XML-RPC-Schnittstelle wesentlich effektiver ausführen lassen, als es bei einem Angriff auf den Adminbereich von WordPress der Fall wäre.

Mit den geeigneten Tools lassen sich bei nur einer Anfrage an die Schnittstelle unglaubliche 500 Passwörter unterbringen. Die Datei ermöglicht es den Angreifern, über Funktionsaufrufe an wp.getUsersBlogs oder wp.getComments Kombinationen von Benutzernamen und Passwort zu erproben. Sobald ein Hacker Benutzername und Passwort sendet, wird die xmlrpc.php entsprechende Rückmeldung geben, ob die Kombination korrekt ist oder nicht.

Das macht das Hacken einer WordPress-Installation über diesen Weg sehr effektiv und aussichtsreich. Somit stellt die zumeist ungenutzte Schnittstelle ein erhebliches Sicherheitsrisiko dar und sollte zügig abgeschaltet werden. Ein weiterer, eher genereller Vorteil des Abschaltens nicht genutzter Funktionen ist die Erhöhung der Performance einer Website.

Die XML-RPC-Schnittstelle abschalten

Seit der WordPress-Version 3.5 ist die XML-RPC Schnittstelle standardmäßig aktiviert. Früher liess sie sich noch ganz einfach deaktivieren, heute ist dies nur noch über Umwege möglich. Doch diese Umwege sind nicht zu schwierig. Insgesamt sind drei Schritte nötig, um die Schnittstelle komplett abzuschalten und sämtliche Anfragen an sie zu unterbinden.

Teil eins: Die Schnittstelle über einen Filter abschalten

Folgender Code muss in die functions.php des Themes eingetragen werden.

Ein Klick auf die Grafik öffnet das Gist bei GitHub
xml-rpc-filter

Die Schnittstelle ist nun komplett deaktiviert. Allerdings erscheint die Schnittstelle noch im HTTP-Header der Website.

Teil 2: Den HTTP-Header Eintrag deaktivieren

http-header

Was noch angezeigt wird, kann auch angefragt werden. Das stellt vielleicht kein Sicherheitsrisiko mehr dar, allerdings kann es durchaus die Performance der Website beeinträchtigen. Daher muss dieser Eintrag entfernt werden. Auch dieser Code-Schnipsel kommt in die functions.php eures Themes. Hier der vollständige Code mit dem Filter aus dem ersten Teil:

Ein Klick auf die Grafik öffnet das Gist bei GitHub
Die XMLRPC-Schnittstelle abschalten und den HTTP-Header entfernen

Teil 3: Die xmlrpc.php via .htaccess blocken

Solange unser WordPress noch Zugriff auf die xmlrpc.php hat, entstehen natürlich versteckte Zugriffe auf die Datei. Das kommt der Performance der Website nicht gerade zugute, also sollte die Datei noch einmal per .htaccess-Datei geblockt werden.

Wichtig vorab: vor jeder Änderung an der .htaccess, bitte ein Backup der Datei erstellen!

Ein Fehler bei einer Änderung der Datei kann eine nicht mehr funktionierende Website zur Folge haben. Zu beachten gilt ebenfalls, dass die .htaccess unter Mac OS X als Systemdatei gilt, aufgrund des Punktes vor dem Dateinamen. Das sorgt dafür, dass die Datei nicht angezeigt wird, sobald sie sich auf dem Desktop befindet. Man kann die versteckten Dateien entweder über das Terminal oder über ein Dashboard-Widget anzeigen lassen.

Folgenden Eintrag bitte in die .htaccess-Datei im Hauptverzeichnis der WordPress-Installation kopieren. Der Eintrag sollte oberhalb von #Begin WordPress stehen. Die Datei lässt sich mit einem Texteditor wie Notepad oder TextEdit öffnen und bearbeiten.

Das Hauptverzeichnis einer WordPress-Installation
hauptverzeichnis

Ein Klick auf die Grafik öffnet das Gist bei GitHub
htaccess

Fazit

Diese drei kleinen Schritte haben WordPress wesentlich sicherer gemacht. Ein Angriff über die xmlrpc.php ist nun unmöglich, auch Anfragen an die Datei werden nicht mehr beantwortet, was zudem der Performance zuträglich ist. Allerdings sollte klar sein, dass WordPress nun keine Pingbacks mehr empfängt und sich natürlich auch nicht mehr mit Apps jeglicher Art verwalten, beziehungsweise füllen lässt. Doch das dürfte nur ein kleiner Wermutstropfen sein, der den erheblichen Sicherheitsgewinn nicht schmälert.

Quelle: WordPress: Angriffe auf die XMLRPC-Schnittstelle (xmlrpc.php) unterbinden

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: Das kann die neue Desktop-App

Ab und an wird Jetpack von Automattic wieder etwas aufgebohrt und neue Funktionen kommen hinzu. Nun kann man über Jetpack denken, was man will, manche Features sind durchaus sehr praktisch. Ganz neu am Start ist die Desktop-App für WordPress, die sich mit jeder WordPress-Website nutzen lässt, auf der Jetpack aktiviert ist. Diese App schauen wir uns heute gemeinsam an und prüfen, ob und welche Vorteile sie uns bringen könnte.

Die neue Desktop-App für WordPress

Die Desktop-App für WordPress

Zuerst musst du natürlich die App downloaden. Angeboten wird sie kostenfrei für alle Betriebssysteme wie Mac OS X, Windows und Linux.

Download Desktop-App für WordPress

Die Voraussetzung für die Nutzung ist, wie gesagt, ein aktiviertes Jetpack-Plugin auf der selbstgehosteten WordPress-Website und demzufolge natürlich auch ein WordPress.com-Account. Nach der Installation der App muss man sich mit dem WordPress.com-Account in der App anmelden. Wenn du Jetpack bereits installiert hast oder über einen VaultPress-Account verfügst, dann besitzt du auch einen WordPress.com-Account.

Die Anmeldung

Danach erhält man dann sofort den Zugriff auf die selbstgehosteten WordPress-Websites und auf die eigenen WordPress.com-Websites, falls vorhanden. Die App versteht sich also als eine Art »eierlegende Wollmilchsau« und kann alle WordPress-Aktivitäten verwalten und für alle Webseiten Beiträge erstellen. Deine Website wird nach dem Einloggen in die App angezeigt und blendet die Statistiken des Tages ein. Solltest du mehrere Websites haben, kannst du über den Menüpunkt »Meine Websites« die Seiten wechseln.

Meine Websites - Website wechseln

Die Fehlermeldungen

Alle Websites - auch mit Fehlermeldungen

Sollte es bei einer deiner Websites zu einem Fehler gekommen sein, wird dir die App das mitteilen. In diesem Fall kann die App nicht auf meine Website »Democratic Post« zugreifen, was jedoch an meinen Sicherheitseinstellungen liegt und gewollt ist. Auf zwei weitere Websites von mir kann zugegriffen werden, wie mir die App korrekt anzeigt. Wenn du auf das Ausrufezeichen neben der Website mit dem Fehler klickst, dann gibt dir die App auf der folgenden Seite eine genauere Fehlermeldung aus.

Die Fehlermeldung im Detail

Das kannst du mit der WordPress-App tun

Die App bietet dir die Möglichkeit, dein WordPress zu verwalten. Ebenfalls hast du die Möglichkeit, neue Artikel zu schreiben und neue Seiten zu verfassen. Bestehende Artikel und Seiten können bearbeitet und gelöscht werden.

Neue Artikel und Seiten verfassen und veröffentlichen

Nachdem sich die App mit deinem WordPress verbunden und die bestehenden Daten aktualisiert hat, was einen Moment dauern kann, kannst du neue Artikel und Seiten direkt in der App verfassen. Bestehende Artikel und Seiten können vollständig verwaltet werden.

Neue Artikel verfassen

Zur Verwaltung deiner bestehenden Artikel und Seiten zieht sich die App alle Beiträge und Seiten. Diese werden chronologisch und ansprechend aufbereitet dargestellt. Mit einem Klick können sie bearbeitet oder in den Papierkorb verschoben werden. Ein Klick auf den Button »Hinzu« öffnet einen Schreibeditor zum Verfassen neuer Beiträge.

Der Schreibeditor der WordPress-App

Hier kannst du dann deinen neuen Artikel verfassen und publizieren. Für diese Funktion musst du nicht in deine Website eingeloggt sein. Wenn du keine speziellen, sicherheitsrelevanten Einstellungen getroffen hast, funktioniert das reibungslos. Natürlich ist das Verfassen neuer Seiten ebenfalls möglich, dann klickst du halt im Menüpunkt »Seiten« auf den Button »Hinzu«.

Deine WordPress-Website verwalten

Die App erlaubt dir die fast vollständige Verwaltung deines WordPress. Damit die Verwaltung fehlerfrei geschehen kann, muss die Jetpack-Funktion »Jetpack Manage« aktiviert werden. Ebenfalls darf die XML-RPC Schnittstelle nicht abgeschaltet worden sein, denn ansonsten funktioniert die Verwaltung deines WordPress nicht.

Themes verwalten

Themes verwalten in der WordPress-App

Aus der App heraus kannst du nach neuen Themes suchen, deine bestehenden Themes ansehen und ein anderes bereits vorhandenes Theme aktivieren. Solltest du hingegen die Einstellungen anpassen wollen, schickt dich die App zu deiner Website. Das geht nicht innerhalb der App. Es wird deine Website und dort der Theme-Customizer aufgerufen. Ein neues Theme zu suchen und zu installieren, ist hingegen kein Problem.

Navigationsmenüs bearbeiten

Die Verwaltung der Navigationsmenüs aus der App heraus

Die Navigationen kannst du vollkommen in der App verwalten. Neue Menüs zuweisen und bestehende ändern geht ziemlich flott.

Plugins verwalten und installieren

Plugins verwalten und installieren

Plugins können direkt aus der Anwendung heraus verwaltet und installiert werden. Praktisch ist, dass man auch die automatische Aktualisierung pro Plugin an- und abschalten kann. Somit hat man die Möglichkeit, gewisse Plugins vor der Aktualisierung auf Kompatibilität zu testen. Neue Plugins können aus der App heraus gesucht und installiert werden.

Neue Plugins aus der App heraus suchen und installeren

Die Website-Einstellungen ändern

Die Einstellungen aus der Anwendung heraus ändern

Alle relevanten Einstellungen deiner WordPress-Website kannst du direkt in der WordPress-App ändern und speichern.

Daten deiner Benutzer-Accounts ändern

Benutzer ändern

Du kannst mit der App alle Benutzer-Accounts auflisten und einige Einstellungen ändern. Neue Accounts hinzufügen funktioniert nicht in der App. Der Link leitet auf deinen Adminzugang um.

Weitere Funktionen

Es existieren noch weitere Funktionen, die allerdings nur für Nutzer einer WordPress.com-Website relevant sind. Daher verzichte ich auf die Erläuterungen hierzu.

Pro und Contra WordPress App – ist sie wirklich nützlich?

Pro WordPress App:

Die App kann durchaus sehr viel. Sie ist komfortabel zu bedienen und sieht schon schick aus. Man spürt, dass sich die Entwickler bei Automattic viel Mühe gegeben haben. Sie bietet dir den Vorteil, dass du alle deine WordPress-Websites in nur einer Anwendung verwalten kannst. Solltest du noch eine WordPress.com-Website besitzen, ist auch diese mit vielen zusätzlichen Funktionen einfach zu verwalten. Die Plugins einer jeden Installation lassen sich mit einem Klick entspannt updaten, und du kannst für jedes Plugin einstellen, ob es in Zukunft automatisch upgedatet werden soll. Das ist eine sehr brauchbare Funktion, denn sie erlaubt dir das Plugin vorher auf Kompatibilität zu testen.

Solltest Du die Jetpack-Statistiken verwenden, so kannst du für jede deiner Websites ausführliche Statistiken einsehen. Ebenfalls erlaubt dir die App mit einem Klick zwischen deinen Websites zu wechseln. Das könnte durchaus praktisch sein, wenn du mehrere Blogs nacheinander mit neuen Beiträgen versorgen möchtest. Das erspart dir das Einloggen in die multiplen Websites zum Schreiben der Artikel. Die App bietet also durchaus handfeste Vorteile.

Fazit: Mit der App kannst du fast alles tun, was du auch im Backend von deinem WordPress tun kannst. Nur eben für alle deine WordPress-Websites an einer zentralen Stelle.

Contra WordPress App:

Die App setzt eine Aktivierung der Jetpack-Manage Funktion voraus. Ebenso erwartet sie eine funktionierende XML-RPC-Schnittstelle. Die Manage-Funktion dürfte ein Sicherheitsrisiko darstellen, die XML-RPC-Schnittstelle tut es auf jeden Fall. Die XML-RPC-Schnittstelle erfüllt zwei Hauptfunktionen: Die Pingback-API ermöglicht eine Art »Vernetzung« zwischen den Blogs und dient gleichzeitig als Schnittstelle, um WordPress über externe Programme verwalten zu können. Bruteforce-Angriffe auf die Schnittstelle sind leider tägliche Realität, daher sollte sie nicht aktiv sein. Denn gerade über diese Schnittstelle wird WordPress häufig gehackt.

Du musst also selbst entscheiden, ob du die App ungeachtet der Risiken nutzen möchtest.

Mein Fazit

Die App kann schon recht viel und ist komfortabel zu bedienen. Ich bin mir sicher, dass sie eine Erleichterung für viele Menschen darstellen kann. Gerade wenn man mehrere Websites zu verwalten hat, spielt die App ihr Potenzial aus. Auf der anderen Seite stehen natürlich die sicherheitstechnischen Aspekte. Ob man diese in Kauf nehmen möchte, muss jeder für sich selbst entscheiden. Für mich ist klar, dass ich die App nicht nutzen werde.

(dpe)

Kategorien
Plugins Themes Tipps, Tricks & Tutorials WordPress

So nutzt du Icon-Fonts in WordPress

Iconfonts sind eine wirklich wunderbare Sache, denn sie bieten eine Menge Vorteile, die normale Icons nicht bieten können. Da es sich technisch um Schriftarten handelt und nicht um Bilder, haben die aus den Fonts generierten Icons nicht die Nachteile klassischer Icons. Farben und Größen der Font-Icons lassen sich leicht über CSS und HTML steuern. Sie sind somit skalierbar und ohne weiteres auch für Retina-Displays zu nutzen. In diesem Beitrag beschäftigen wir uns mit der Frage, wie du am geschicktesten Icon-Fonts in WordPress nutzen kannst.

So nutzt du Icon-Fonts in WordPress

Zwei Möglichkeiten, um Iconfonts in WordPress zu nutzen

Der beliebteste und umfangreichste Iconfont ist sicherlich »Font Awesome«, und genau diesen Font werden wir in diesem Artikel nutzen. Font Awesome stellt dir 605 Icons für fast alle denkbaren Einsatzzwecke bereit und ist sehr einfach zu integrieren und zu nutzen. Ich stelle dir heute zwei Möglichkeiten der Integration des Fonts vor, einmal die manuelle Methode und die Integration mittels eines Plugins.

Wichtige Links:

Font Awesome

Font Awesome manuell nutzen

Font Awesome manuell zu nutzen, bietet dir den Vorteil höherer Performance. Deine Website wird nicht durch unnötige CSS- und JavaScript-Dateien verlangsamt. Es muss nur eine einzige CSS-Datei eingebunden werden, die über den CDN-Server von MaxCDN ausgeliefert wird. Natürlich kannst du dir auch die nötigen Dateien auf deinen Server laden, doch die Einbindung über MaxCDN wird letztendlich schneller und performanter sein. Kopiere folgenden Code in die functions.php deines Themes:

Ein Klick auf die Grafik öffnet das Gist bei GitHub
font-awesome-einbinden

Mehr ist nicht nötig, um den Font nutzen zu können. Möchtest du nun ein Icon anzeigen, gehst du auf die Webseite von Font Awesome und schaust dir die Beispiele an, um dich mit der Nutzung vertraut zu machen. Du wirst feststellen, dass diese Icons sehr wandelbar und vielfältig einzusetzen sind. Die Größe der Icons bestimmst du ganz einfach per HTML, das du in die Textansicht des WordPress-Editors eingeben kannst:

Beispiel

Editor

Das Ergebnis:

Das Ergebnis

Quick-Tipp:

Übrigens, der <i> Tag ist nicht unbedingt nötig, es funktioniert durchaus auch mit einem <span>, <p> oder <div> Element. Die farblichen Anpassungen kannst du ganz einfach per CSS gestalten. Auch die Größe lässt sich noch anpassen, ändere dafür einfach die Schriftgröße.

css-iconfonts

Font Awesome mit einem Plugin nutzen

Fontallic

  • Entwickler: Verschiedene
  • Wird ständig weiter entwickelt: Geht so
  • Letzte Version vom: vor einem Jahr
  • Kompatibilität mit WordPress 4.4.1: Vollständig
  • Kosten: kostenfrei über WordPress.org
  • Lizenz: GNU GENERAL PUBLIC LICENSE
  • Wechselwirkungen mit anderen Plugins: nicht bekannt
  • Entwickler-Homepage: Nicht bekannt
  • Download von WordPress.org

Das Plugin »WP Fontallic Easypromoweb« bietet dir den Vorteil, dass es neben dem Font Awesome noch weitere Icon Fonts integriert hat. 2553 Icons kannst du mit diesem Plugin nutzen. Dank des visuellen Editors musst du nicht mehr in den Textbereich deines WordPress-Schreibeditors, sondern kannst die Icons etwas einfacher über einen zusätzlichen Button des Schreibeditors einbauen.

Der Button für die Icon-Fonts

Ein Klick auf den Auswahlbutton öffnet eine Auswahlliste für die Icons.

Die Auswahl der Icons

Die Piktogramme lassen sich über Schriftgröße und Farbe weiter anpassen. Allerdings ist es über den visuellen Editor nicht möglich, die Icons speziellen HTML-Elementen zuzuordnen. Dazu muss man wieder in den Textbereich des Editors gehen und die Symbole manuell zuordnen.

Icons im Texteditor

Das Ergebnis auf der Website

Ergänzung: Die Iconfonts auf dem eigenen Server hosten

Die beiden Möglichkeiten, die ich oben vorgestellt habe, bestechen durch ihre Einfachheit. Es ist nicht viel Arbeit nötig, um die vielen Vorteile der Fonts nutzen zu können. Doch natürlich kann man den Iconfont auch auf seinem Server/dem Webhostingpaket selbst hosten. Bei anderen Fonts als Font Awesome ist das sogar nötig zur Verwendung. Daher gehen wir die dafür nötigen Schritte noch einmal durch. Zuerst muss das jeweilige Download-Paket, hier am Beispiel von Font Awesome, heruntergeladen werden.

Im Anschluss wird die .ZIP-Datei entpackt. Der Ordner „fonts“, der die nötigen Schriftarten enthält, wird in das Root-Verzeichnis des aktiven Themes per (S)FTP hochgeladen. Aus dem Ordner „css“ wird das „font-awesome.css“ herausgenommen. Die Datei-Pfade zu den Schriftarten im Fonts-Ordner müssen noch angepasst werden auf (Beispiel) url('fonts/fontawesome-webfont.eot?v=4.5.0');. Danach kommt das CSS in das Root-Verzeichnis des Themes und wird im Header des Themes referenziert. Das geschieht durch folgenden Eintrag in der functions.php des Themes:

Ein Klick auf die Grafik öffnet das Gist bei GitHub
Das Font Awesome CSS in den Header des Themes bringen

Fazit

Iconfonts sind eine wunderbare Sache und ich nutze sie gern. Mein Favorit ist Font Awesome, besonders auch, weil ich nur eine Datei über das CDN einbinden muss. Meiner Meinung nach ergibt ein Plugin nicht viel Sinn, da die manuelle Nutzung fast schneller geht und man für die Zuordnung von Icons für Listen, Buttons und ähnlichem doch in den Textbereich des Schreibeditors muss.

Wer sich nicht an den Code ran traut, ist natürlich mit dem Plugin ähnlich gut bedient.

(dpe)

Kategorien
Themes Tipps, Tricks & Tutorials WordPress

Erste Schritte mit dem WordPress Theme-Customizer

Wie man schnell und einfach eine Theme-Optionen-Seite erstellt, habe ich dir ja bereits erklärt. Eine eigene Seite für Theme-Optionen zu erstellen, ist optimal, wenn du den Usern viele Funktionen bieten möchtest. Doch es gibt auch einen anderen Weg, um eine eigene Seite für Theme-Optionen zu realisieren. WordPress bietet seit einiger Zeit den Theme-Customizer an. Dieser eignet sich hervorragend, wenn dein Theme nicht zu viel Optionen bietet. Der große Vorteil des Customizers ist die Live-Vorschau. Jede Änderung am Theme kann erst einmal betrachtet werden, bevor sie auf der Website übernommen wird. Dieser Beitrag zeigt dir, wie du den Customizer mit deinen Funktionen „fütterst“.

Erste Schritte mit dem WordPress Theme-Customizer

Theme Optionen mit dem Theme-Customizer erstellen, geht recht einfach von der Hand und bietet für die User des Themes den großen Vorteil einer Live-Ansicht aller Änderungen, bevor sie auf Abspeichern klicken. Der Theme Customizer wurde mit der WordPress-Version 3.4 eingeführt.

Wichtig zu wissen: Keine Theme-Options-Seiten mehr für WordPress.org Themes

Wenn du ein Theme für das Theme-Verzeichnis auf WordPress.org erstellen möchtest, musst Du den Theme-Customizer nutzen. Theme-Options-Seiten sind seit dem 21. Oktober nicht mehr erlaubt.

Theme-Optionen erstellen für den Theme-Customizer

ARI Theme

Unser Beispiel-Theme ist das Ari Theme von Elmastudio. Es bietet nur die vordefinierten Optionen an und kann daher von uns gut erweitert werden in diesem Tutorial. Wir erstellen also folgend eine komplett neue Theme-Customizer Seite für das Theme.

Wichtig: Alle nachfolgenden Code-Schnipsel können angeklickt werden, der Code ist dann bei GitHub downloadbar.

Die vier Methoden des $wp_customize Objekts

Screenshot 1

Die vordefinierten Einstellungen

WordPress kommt bereits mit einigen Voreinstellungen, die nicht mehr extra definiert werden müssen.

  • title_tagline – Website-Titel und Untertitel
  • colors – Farben
  • header_image – Header-Bild
  • background_image – Hintergrundbild
  • nav – Navigation
  • static_front_page – Statische Startseite

Die Transport Versionen – refresh vs. postMessage

Wenn du allerdings möchtest, dass einige dieser Einstellungen zu sehen sind, bevor du sie abspeicherst, müssen sie in die Theme-Customizer Funktion mit aufgenommen werden. Du kannst zwei „Transport“ Versionen vergeben.

Refresh bedeutet, dass nach der Eingabe deiner Einstellungen innerhalb des Theme-Customizers die Vorschau-Seite direkt neu geladen wird. Erst dann sind die von dir getätigten Einstellungen auch sichtbar.

PostMessage hingegen bedeutet eine Änderung in Echtzeit. Wenn du also im Theme-Customizer zum Beispiel den Blognamen änderst, sind die eingegebenen Buchstaben sofort bei Eingabe sichtbar. Für die Transport-Methode postMessage benötigst Du noch eine kleine jQuery-Datei zusätzlich.

Wichtig zu wissen: Die Standard-Funktionen von WordPress

Der Screenshot zeigt die Standard-Funktionen, welche die Transport-Methode »refresh« aufweisen. Du kannst sie allerdings auch wie abgebildet für eine Echtzeit-Ansicht konfigurieren.

Screenshot 2

Theme Optionen mit dem Theme-Customizer erstellen

Zuerst lege bitte eine neue Datei namens customizer.php im Hauptverzeichnis deines Themes an. Du erstellst die Datei entweder mit einem reinen Text-Editor, wie Textedit oder einem HTML-Editor.

Den folgenden Code kopierst du in die customizer.php:

Screenshot 3

Zuerst wird eine eigene Klasse vergeben und danach werden die Funktionen registriert. Jeder Code, den wir nun schreiben, kommt in diese Funktion hinein.

Den User die Farben anpassen lassen

Wir legen eine Sektion für die Farben an, die unser User später anpassen können soll. Es sind die Link- und die Textfarben anpassbar. Der Code muss in die Funktion hinein kopiert werden, die wir eben angelegt haben. In diesem Fall sprechen wir als Beispiel die Transport-Methode »refresh« an, die nicht extra definiert werden muss, weil es der WordPress-Standard ist.

Screenshot 4

Zunächst definiert der Code die Optionen, die der Benutzer ändern kann, die Link- und Textfarben. Des Weiteren wird für jede der beiden Optionen ein Standard gesetzt, der im CSS-Stylesheet des Themes bereits definiert ist. Auf diese Weise spart man sich die Definition der Einstellungen für die einzelnen Farboptionen. Die Einstellungen, die der Benutzer im Theme-Customizer machen kann, werden hierdurch definiert. Ohne die Einstellungen wird die neue Sektion mit den Einstellungsmöglichkeiten nicht im Customizer erscheinen.

Schließlich definiert der Code ebenso die Kontrollen, die diese Einstellungen ermöglichen.

new WP_Customize_Color_Control aktiviert hier den Color-Picker, mit dem die benutzerdefinierten Farben festgelegt werden können.

Ich habe übrigens keine Sektion „Colors“ anlegen müssen, da das automatisch geschieht, wenn Kontrollen definiert werden innerhalb dieser Sektion.

Unser Theme Customizer sieht jetzt so aus:

theme-color-picker

Du kannst nun mit einem Color-Picker die Farben anpassen, doch im Theme wird es noch keine Änderungen geben. Um die Änderungen auch im Theme möglich zu machen, muss noch die header.php des Themes angepasst werden. Füge daher folgenden Code direkt oberhalb des schließenden </head> Tags in die header.php ein:

Screenshot 5

Wenn du dies getan hast, sind die Farbanpassungen über den Customizer live sichtbar, noch bevor du auf »Speichern & Publizieren« klickst. Sofort nach der Wahl der neuen Farbe aktualisiert sich die Seite (refresh) und die Änderungen in der Farbwahl werden sichtbar.

Das Endergebnis mit den Farben

Die beiden Variablen holen sich die getätigten Einstellungen aus dem Customizer ab und übergeben die Werte an das kleine Inline-CSS, das für die Anzeige der neuen Farben zuständig ist.

Inline CSS

Die Optionen im Theme ausgeben

Hier unterscheiden wir zwischen den von WordPress als Standard bereitgestellten Funktionen und den eigens definierten.

Screenshot 6

Einen Werbeblock hinzufügen

In diesem Fall haben wir es nicht ganz so leicht wie mit den Farben. Es ist mehr Code erforderlich. Zuerst einmal muss eine neue Sektion erstellt werden, damit der neue Menüpunkt auch angezeigt werden kann. Dazu nutzen wir die $customizer_object->add_section Methode.

Screenshot 7

Die Priority (Priorität) ist ausschlaggebend dafür, wo der neue Menüpunkt angezeigt wird. Je kleiner die Zahl, desto weiter oben wird der Menüpunkt angezeigt.

Die Einstellungen definieren

Hier kommt die $customizer_object->add_setting Methode zum Zuge.

Screenshot 7

Die Eingabe für die Einstellungen erstellen

Um die Kontrolle zu erstellen, die für die Anzeige der Einstellungsmöglichkeiten im Customizer zuständig ist, benötigen wir die $customizer_object->add_control($controller_object) Methode.

Screenshot 8

Es gibt viele verschiedene Controller-Objekte. Je nachdem, was du gerade benötigst. Hier haben wir WP_Customize_Control verwendet, die man für Eingabefelder nutzen kann. Du kannst damit eine Textarea, einen Textbereich, Checkboxen, Radio-Elemente und Farben erstellen. Es existieren auch andere Controller-Objekte wie zum Beispiel WP_Customize_Color_Control, WP_Customize_Upload_Control und WP_Customize_Image_Control zur Farbeingabe, einem Datei- und Bild-Upload.

Das vorläufige Ergebnis im Customizer

Werbecode

Den Werbeblock im Theme anzeigen

Dort, wo der Werbeblock im Anschluss nun erscheinen soll, muss noch ein kleiner Code-Schnipsel platziert werden.

Screenshot 9

Wenn du nun als Transport-Methode refresh gewählt hast, musst Du nichts weiter tun. Wenn als Transport-Methode postMessage gewählt wurde, damit die Änderungen in Echtzeit zu sehen sind, muss noch ein kleines JavaScript geschrieben werden.

Das JavaScript für die Echtzeit-Anzeige der Änderungen

Erstelle eine JavaScript-Datei innerhalb deines Theme-Verzeichnisses. Nenne sie theme-customizer.js. In diese Datei fügst du folgenden Code ein:

jQuery für die Echzeitansicht des Customizers

Das Ergebnis im Theme – Werbeblock

Der neu definierte Werbeblock kann nun überall im Theme platziert werden und entweder mit Text-, Banner- oder Adsense-Werbung belegt werden.

Der Werbeblock im Theme

Das dunkle Thema des Ari-Themes aktivieren

Ari bietet auch eine dunkle Version, die man über die Theme-Optionen-Seite aktivieren kann. Doch da wir nun etwas über den Customizer lernen möchten, werden wir die Umschalt-Möglichkeit für den WordPress-Customizer realisieren. Die Echtzeit-Ansicht ergibt hier jedoch relativ wenig Sinn, da die Änderungen sofort nach einem kurzem Neuladen der Seite noch vor dem Abspeichern sichtbar sind. Daher nutzen wir für unseren Code die Standard-Methode »refresh«.

Screenshot 10

Ausgewählt habe ich für die Aktivierung des dunklen Ari-Themes eine Checkbox. Wenn du einen Haken in diese Checkbox setzt, aktivierst du damit das dunkle Theme.

Das dunke Ari Theme

Natürlich sollten hier noch im Anschluss die Farben des Textes und der Links angepasst werden, was wir ja weiter oben bereits realisiert haben.

Die nötige Anpassung im Theme – header.php

Damit das dunkle Theme auch aktiviert werden kann, muss noch eine kleine Änderung in der header.php des Themes geschehen.

Screenshot 11

Der Code sorgt dafür, dass das Stylesheet für das dunkle Theme nur im <head> Bereich erscheint, wenn es benötigt wird.

Die WordPress-Standard-Einstellungen in Echtzeit

Zwei Standard-Einstellungen von WordPress – den Blognamen und die Beschreibung – werden wir nun mit der Transport-Methode »postMessage« in Echtzeit umsetzen. Daher benötigen wir die folgenden zwei Zeilen Code:

Screenshot 12

Zusätzlich benötigen wir noch etwas jQuery für die Anzeige in Echtzeit.

Screenshot 13

Änderungen in der header.php

Auch hier muss wieder etwas geändert werden in der header.php des Themes. Wir müssen dem Website-Titel und der Beschreibung jeweils eine CSS-Klasse hinzufügen, um die Elemente leichter mit jQuery ansprechen zu können.

Screen 14

Das Ergebnis im Customizer

Blogname und Beschreibung

Das komplette JavaScript erstellen und referenzieren

Für die drei Funktionen Werbeblock, Blogname und Blogbeschreibung benötigen wir eine jQuery-Datei, die wir theme-customizer.js nennen. Diese sieht wie folgt aus und gehört in das Hauptverzeichnis des Themes:

Screenshot 15

Man beachte, dass sich der Code für die Elemente Text und Beschreibung von dem Werbeblock unterscheiden. Der Werbeblock wird an ein HTML-Element gebunden, Text und Beschreibung an ein Text-Element. Bei mir funktionierte die Echtzeitansicht von Blognamen und Beschreibung nur auf diese Weise.

Das JavaScript referenzieren

Damit der Theme-Customizer das jQuery nutzen kann, müssen wir es noch referenzieren. Das macht man in der customizer.php-Datei innerhalb der Klasse Ari_Customizer, aber außerhalb der Funktion function register().

Screenshot 16

Abschließende Arbeiten

Die Customizer-Funktionen und das JavaScript initiieren.

Screenshot 17

In die functions.php des Themes folgende Zeile Code hineinkopieren, damit die customizer.php aufgerufen wird.

Screenshot18

Bei der Aktivierung des Ari Themes sollte nun unter »Design => Anpassen« folgendes Bild zu sehen sein:

Das Endergebnis

Die kompletten Dateien und das bearbeitete Theme zum Download

Damit du besser verstehst, wie alles zusammenpasst und funktioniert, bekommst Du hier die vollständigen Dateien zum Download.

Fazit

Der Theme-Customizer ist sicherlich eine sehr interessante Sache, mit der sich jeder Entwickler beschäftigen muss, wenn er Themes über das offizielle Verzeichnis anbieten möchte. Das wird zwangsläufig auch dafür sorgen, dass neue hochqualitative Themes der großen Provider nicht mehr dort gelistet sein werden. Denn die großen Provider wie WooThemes, Krisi und Co. priorisieren immer noch eine eigene Theme-Optionen-Seite, weil sich nur dort die Masse an Einstellungen gut realisieren lassen, die heutige Premium-Themes mit sich bringen.

Selbstverständlich werden die Spezialisten, die Themes bei WordPress anbieten, vieles auch eleganter lösen können, als ich es im Beitrag getan habe. Doch es geht in diesem Artikel in erster Linie um das Grundwissen zum Customizer; um erste, schnelle Erfolge. Und die sind gegeben.

Weiterführende Links zum Thema

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress Tipps: DoFollow für Kommentare an, eigene Pingbacks aus

Unsere heutigen beiden kleinen Tipps machen dein WordPress besser und fairer. Der eine Tipp bezieht sich auf das NoFollow HTML-Attribut in den Kommentaren, das jeden Kommentierenden automatisch zu einem Spammer degradiert. Der zweite Tipp schaltet die eigenen Pingbacks ab, die WordPress generiert. Damit nervt dich dein WordPress nicht mehr bei jedem eigenen Artikel, den du verlinkst. Am wichtigsten aber; die Menschen, die deine Artikel kommentieren, werden etwas mehr wertgeschätzt, was sie bestimmt zu schätzen wissen werden.

WordPress Tipps: DoFollow für Kommentare an, eigene Pingbacks aus

Tipp Nr. 1: Das NoFollow HTML-Attribut entfernen

NoFollow ist umgangssprachlich für das HTML-Attribut rel=“nofollow“, mit dem Links ausgezeichnet werden können. Dieses Attribut sorgt dafür, dass Google diese Links nicht zur Berechnung der Linkpopularität der verlinkten Website verwendet. Erschaffen wurde diese Kennzeichnung von Hyperlinks am 18. Januar 2005 von Google in Kooperation mit MSN und Yahoo. Bis heute sorgt es für kontroverse Debatten unter Webmastern.

Die Funktion des NoFollow Attributs

Erschaffen wurde das Attribut um Kommentar-Spam auf Weblogs und Foren in den Griff zu bekommen. Spammer versuchten immer wieder, mit automatisch in die Kommentare eingefügten Links ihre Linkpopularität und den Page-Rank zu erhöhen. Damit sollte die Position der Website innerhalb der Suchergebnisse beeinflusst und verbessert werden.

Allerdings hat sich diese Art der Spam-Bekämpfung nicht als wirksam erwiesen, da nur manuell erstellter Kommentar-Spam damit eingedämmt werden konnte. Der überwiegende Teil des Spamaufkommens ist jedoch automatischer Natur.

Jeder Kommentator wird als Spammer behandelt

Vorher: NoFollow in den Kommentar-Links.
Vorher: NoFollow

Eine ungewollte Auswirkung von NoFollow war und ist, dass jeder Kommentator durch dieses Attribut als Spammer behandelt wird. Vielen WordPress-Nutzern ist auch nicht bewusst, dass die Kommentierenden von WordPress selbst als Spammer abgestraft werden. Und natürlich möchten sich auch die Leser nicht so behandelt sehen. Daher ist es nur mehr als fair, wenn du NoFollow aus den Kommentaren komplett entfernst.

NoFollow komplett aus den Kommentaren entfernen

Folgenden Code-Schnipsel musst du in die functions.php deines Themes kopieren:

Ein Klick auf die Grafik bringt dich zu GitHub, dort kannst du den Code downloaden.
DoFollow für die Kommentare

Das Ergebnis unseres Codes

Nachher: DoFollow in den Kommentar-Links.
Nachher: DoFollow in den Kommentaren

Tipp Nr. 2: Die eigenen Pingbacks verhindern

Pingbacks sind eigentlich eine total praktische Sache. Denn sie sind ein automatischer Hinweis darauf, dass deine Blog-Artikel in einem anderen WordPress-Blog verlinkt worden sind. Wenn du also in deinem Artikel einen Beitrag aus einem anderen WordPress-Blog verlinkst, erhält der Betreiber des verlinkten Blogs einen Pingback, der in den Kommentaren dort erscheint.

Umgekehrt erhältst auch du einen Pingback, wenn einer deiner Artikel irgendwo verlinkt wird. Das verschafft dir die Möglichkeit, den anderen Artikel zu lesen und zu kommentieren, wenn es sinnvoll ist. Pingbacks unterstützen also die gegenseitige Vernetzung von Bloggern.

Es werden auch eigene Pingbacks erstellt

Doch leider: Pingbacks werden auch erstellt, wenn du in einem Artikel auf einen anderen Artikel von dir verlinkst. WordPress unterscheidet leider nicht, von wo und wem die Pingbacks kommen, sondern behandelt jeden Pingback gleich. Das verursacht die eigenen Pingbacks, die ich als nervtötend empfinde, weil sie keinen Sinn ergeben.

Die eigenen Pingbacks abschalten

Mit einigen Zeilen PHP-Code kann man die eigenen Pingbacks jedoch abschalten, dann werden nur noch externe Pingbacks angezeigt. Den folgenden Code bitte in die functions.php des Themes kopieren:

Ein Klick auf die Grafik bringt dich zu GitHub, dort kannst du den Code downloaden.
Die eigenen Pingbacks entfernen

Fazit

Mit nur wenigen Zeilen Code kann man sein WordPress bedeutend fairer und weniger nervtötend gestalten, und das ist gut so. Menschen, die Artikel kommentieren sollten auch dafür einen Mehrwert bekommen in Form eines Follow-Links, das gebietet die Fairness. Und eigene Pingbacks ergeben keinen Sinn, also sollten sie abgeschaltet werden.

(dpe)

Kategorien
(Kostenlose) Services Apps Boilerplates & andere Tools CMS Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung Sonstige Programmiersprachen Tipps, Tricks & Tutorials Webdesign WordPress

Codester: Neuer Marktplatz für Entwickler und Designer bietet faire Bedingungen und mehr

Heute möchte ich dir Codester vorstellen. Codester ist ein brandneuer Marktplatz für Entwickler und Designer. Hier kannst du Code Schnipsel, Skripte, Themes, Plugins und vieles mehr kaufen, um dein nächstes großes oder kleines Projekt aufzupolieren. Fertige Komponenten zu benutzen, spart Zeit und Zeit ist – wie wir alle wissen – Geld. Also nimm dir fünf Minuten und lies den folgenden Artikel.

Codester: Marktplatz für Designer und Entwickler

Codester: Ein kurzer Rundgang

Skript-Verzeichnisse waren eine große Sache Ende der Neunziger und noch zu Beginn des neuen Jahrtausends. Ich kann mich noch gut an das bekannteste von ihnen, HotScripts.com, erinnern. HotScripts war die Lösung für jede Aufgabe, dieirgendwas mit Programmierung zu tun hatte. Später wurde HotScripts dann von einem bekannten Websiteaufkäufer aufgekauft. Danach passierte leider nicht mehr viel. Und auch, wenn sie heute noch existieren, befinden sie sich seitdem in einem Stillstand. Besuch die Seite besser nicht, wenn du sie noch von früher kennst. Das würde nur deine nostalgischen Erinnerungen an vergangene Tage zerstören.

Ich bin im letzten Jahrzehnt keinem ähnlichen Service begegnet. Obwohl es keinen Mangel an Marktplätzen für Designer gibt, müssen Entwickler sich mit einer anderen Wahrheit auseinandersetzen. Aber: im Sommer diesen Jahres hat eine kleine Gruppe motivierter Entwickler eine Lösung für dieses Problem ersonnen. Willkommen, Codester.com, ein schnell wachsender, würdiger Nachfolger des vorher erwähnten Dinosauriers.

Codester spricht sowohl Designer als auch Entwickler an. Dabei haben jedoch alle angebotenen Elemente, zumindest zur Zeit, einen entwicklungsorientierten Touch. Nehmen wir die Grafikabteilung als Beispiel. Hier stellt Codester Benutzeroberflächen, Spiele-Code und Mockups neben Icons und Logos zur Verfügung. Das ist keine Spielzeugkiste für selbstverliebte Designer. Hier will keiner eine freundliche Bestätigung seines guten Geschmacks erheischen. Hier geht es darum, Arbeit zu erledigen. Dass Codester im Moment nicht allzu viele Dinge im Angebot hat, solltest du nicht als allzu großen Nachteil empfinden. Sie haben immerhin gerade erst angefangen.

Codester: Marktplatz für Designer und Entwickler

Wenn du dir die Hände wirklich schmutzig machen möchtest, wühl dich durch die Skript & Code-Abteilung, in der du Lösungen in PHP, JavaScript, Ruby, Python, Java, C, C++, C# und VB.Net finden wirst. Aktuell hat zwar nur die PHP-Kategorie eine nennenswerte Sammlung an Skripten anzubieten, aber die Leute hinter Codester arbeiten aktiv daran, das Portfolio schnell zu erweitern.

Wenn du ein App-Entwickler bist, solltest du den Bereich Mobile Apps besuchen, wo du vielleicht genau den einen Code-Schnipsel für iOS, Android, Unity, Corona oder Titanium findest, nach dem du die letzten fünf Nächte gesucht hast.

Heutzutage sind zwar einzelne Skripte immer noch nützlich und gefragt, aber die größere Nachfrage kommt von Entwicklern aus der CMS-Branche. Es ist sicherlich möglich, jedes gegebene Skript so zu verändern, dass es mit jedem CMS funktioniert. Das kann ich für WordPress fast uneingeschränkt bestätigen. Allerdings ist es effizienter, sich direkt für ein Skript-Modul, Plugin, Erweiterung, oder wie auch immer die Namenskonventionen deines CMS sein mögen, zu entscheiden und es in dem Umfeld, für das es gemacht wurde, zu benutzen.

Codester ist derselben Meinung und bietet eine Vielfalt an Plugins für WordPress, Joomla, Drupal, Magento, Prestashop, osCommerce, X-Cart und Opencart an. Themes, auch wenn sie sich mehr auf das Design beziehen, kombinieren Form und Funktion, um letztendlich die gewünschte Nutzererfahrung zu erreichen. Daher ist es konsequent, dass Codester einen separaten Abschnitt mit Themes, verfügbar für WordPress, Magento, Joomla, Drupal, Prestashop, Opencart, Muse, Tumblr und Ghost unterhält. Arbeitest du ganz ohne CMS, ist vielleicht die Sammlung von HTML-Templates am gleichen Ort interessant.

Codester: Vom Suchen und Finden

Codester ist auf Wachstum ausgerichtet und direkt so gebaut worden, dass es auch mit großen Beständen virtuos umgehen kann. Zurzeit kannst du einfach durch die Hauptabschnitte und Kategorien browsen. Darunter ist keine einzige, die man nicht innerhalb von ein paar Minuten durchscrollen kann. Sollte das Wachstum aber mit konstantem Tempo voranschreiten, wird sich das in wenigen Monaten deutlich verändert haben. Das Team hat vorgesorgt und den Service so strukturiert, dass es auch dann noch leicht sein wird, das benötigte Werkzeug zu finden, wenn es tausende Skripte, Themes oder was auch immer zu filtern gibt.

Codester: Marktplatz für Designer und Entwickler

Der offensichtlichste Weg, eine Lösung auf Codester zu suchen, ist es, die obere Suchleiste auf der Startseite zu verwenden. Gib deinen Suchbegriff ein und schau, was Codester dazu findet. Das ist nicht sehr effizient, sobald du bereits in der Lage bist, deine Parameter etwas einzuschränken, was bei einem typischen Entwicklungsprojekt höchstwahrscheinlich der Fall sein wird. Codester arbeitet nicht mit zusätzlichen Tags, um bestimmte zusammengehörende Inhalte zu gruppieren – zumindest nicht von der Suchleiste aus.

Daher ist der empfehlenswertere Weg an die Inhalte zu komme,n das Browsen durch die Kategorien. Sobald du eine beliebige Kategorie auswählst, wird dir ihr Inhalt in einer Rasterübersicht präsentiert. Von diesem Raster aus, kannst du die Detailseite eines jeden Elementes öffnen, um zu weiteren INformationen zu gelangen. Die wichtigsten Informationen findest du aber bereits direkt im Übersichtsgrid. Dort kannst du den Preis, ein Vorschaubild, eine kurze Beschreibung und die Zielplattform sehen. Videos und Live-Previews sind auch über das Raster zugänglich. Also kannst du deine Wahl schnell auf ein oder zwei Angebote einschränken, die dich wirklich interessieren.

Codester: Marktplatz für Designer und Entwickler

Mit einem Klick auf die Vorschau des Elements öffnet sich die Detail-Seite. Diese erfüllt das, was ihr Name verspricht. Hier findest du sämtliche wichtigen Information zum Produkt. Die Beschreibungen sind ausführlich, Screenshots gibt es wie Sand am Meer. Hier befindet sich auch eine Box mit zusätzlichen Tags, die das jeweilige Tool zusätzich kategorisieren. Ein Klick auf einen der Tags, öffnet ein weiteres Grid, das alle Produkte aus Codesters Portfolio zeigt, denen dasselbe Tag zugeordnet wurde.

Die Detail-Seite ist in vier Segmente eingeteilt, bei denen die Übersicht die Standardansicht nach dem Öffnen der Seite ist. Es gibt Tabs für Bewertungen, Support und FAQ. Der Support-Tab bietet eine direkte Support-Möglichkeit, ähnlich eines Kommentarbereiches in einem CMS. Jeder mit einem Account kann Fragen stellen, während nur tatsächliche Käufer eines Produktes Bewertungen zu diesem Produkt veröffentlichen können. Ein FAQ-Bereich beantwortet schon mal die häufigsten Fragen, um den Support-Bereich zu entlasten.

Codester: Marktplatz für Designer und Entwickler

Share-Buttons erlauben es dir, Codester-Inhalte auf Facebook, Twitter, Google+, Pinterest, LinkedIn oder per E-Mail zu teilen. Ein Partnerprogramm ist jedem zugänglich und bietet 10 Prozent Kommission für jeden Käufer, der auf deine Empfehlung hin gekauft hat.

Codesters Lizensen

Die Kosten der einzelnen Elemente variieren stark, die Lizensen aber nicht. Zur Wahl steht jeweils die reguläre und die erweiterte Lizenz. Die (günstigere) reguläre Lizenz erlaubt, das gekaufte Produkt in einem deiner Projekte, ob privat, kommerziell oder für einen Kunden, zu verwenden. Die erweiterte Lizenz bietet dasselbe, mit der Ausnahme, dass das Produkt bei dieser Lizenz für eine unbegrenzte Anzahl von Projekten benutzt werden kann. Du darfst lediglich die Produkte nicht als solche verkaufen, aber das sollte ohnehin selbstverständlich sein.

Codester: Verkaufe Deine Arbeit

Wie man es von einem Marktplatz erwartet, bietet Codester keine eigenen Produkte an, sondern arbeitet als eine Art Mittelsmann für talentierte Entwickler und Designer, die daran interessiert sind, ihre Skripte, Plugins, Themes, Quellcodes an die Welt zu verkaufen. Hier mitzumachen ist ganz einfach.

Codester hat sehr wenige, dabei sehr gerechte Bedingungen für Verkäufer. Verkäufer verdienen 70 Prozent von jedem Kauf. Es gibt keine Mindestanzahl an Verkäufen, ebenso keine Mindestmenge an aufgelaufenen Beträgen, bevor man eine Auszahlung anfordern kann, nichts. Die Bezahlung erfolgt über PayPal oder Wire am Ende jeden Monats. Es gibt keine zusätzlichen Gebühren oder andere Haken und Ösen.

Codester: Bild dir deine Eigene Meinung

Mir gefällt das Projekt. Codester ist eine gut gestaltete, sorgfältig geschriebene Marktplatzumgebung mit Fokus auf Entwickler und das ist eine gute Sache an sich. Codester braucht viel mehr Beteiligung durch die Community, sei es durch mehr Angebote in den verschiedenen Kategorien oder mehr Interaktion mit den bereits existierenden Angeboten. Hier kommst du ins Spiel. Schau dir Codester an und mach dir ein eigenes Bild. Unterstütz es, wenn es dir gefällt.

Kategorien
Plugins Tipps, Tricks & Tutorials WordPress

WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

Viele WordPress-Freunde wagen sich irgendwann an die Erstellung eines eigenen Themes heran. Dabei wird häufig auf eine eigene Theme-Optionenseite im Backend verzichtet. Natürlich sollte aber schon das erste eigene Theme auch eine Theme-Optionenseite haben, um unkompliziert einige Einstellungen tätigen zu können. Bisher war das Erstellen einer solchen Seite recht aufwändig, man benötigte viel Code. Graue Haare gab es noch umsonst dazu, weil vieles nicht sofort funktionierte. Doch das hat jetzt ein Ende, denn es existiert mittlerweile ein recht guter Generator für das Erstellen einer Theme-Optionenseite.

WordPress: So erstellst du eine Theme-Optionenseite blitzschnell

Theme-Optionen: Eigene Seite erstellen oder den Customizer nutzen

Grundsätzlich existieren gleich zwei Möglichkeiten, um Theme-Optionen zu realisieren. Entweder man nutzt eine eigene Seite für die Optionen, oder man bedient sich des Customizers, der über »Design => Anpassen« zu erreichen ist. Beide Möglichkeiten sind gut, allerdings wird der Customizer recht unübersichtlich bei vielen Optionen. Daher wollen wir uns in diesem Beitrag mit einer eigenen Theme-Optionenseite beschäftigen. Die Möglichkeiten des Customizers loten wir in einem eigenen Beitrag aus.

Der »WordPress Option Page Generator«

Dieser Generator ist wirklich gut und spart viel Zeit in der Entwicklung von Themes. Zudem bietet er relativ viele Möglichkeiten und funktioniert wie versprochen, was man von seinem Konkurrenzprodukt nicht behaupten kann. Auch bietet die Konkurrenz nicht mal annähernd so viele Möglichkeiten – zudem muss viel Code im Endprodukt bearbeitet werden. Meine Empfehlung: Finger weg vom WP Settings Generator!

Der WordPress Option Page Generator

Wir beschäftigen uns in diesem Artikel mit dem „WordPress Option Page Generator„, der sehr viele Möglichkeiten bietet und hervorragend funktioniert, wie ich durch das Testen mit verschiedenen Themes herausfand.

WordPress-Option-Page-Generator

Theme-Optionenseite mit dem Generator erstellen – so einfach geht es

1 – Titel vergeben und Position der Seite bestimmen

Zuerst musst du den Titel der Seite für die Theme-Optionen vergeben. Darunter kann noch etwas Text für eine Erklärung oder ähnliches im Feld „Text“ hinterlegt werden. Auf der rechten Seite hast du die Wahl, wo die Optionen-Seite erscheinen soll. Für eine Theme-Optionen-Seite empfiehlt sich entweder „No Parent (Top-Level)“ oder wie im Screenshot gezeigt „Theme (Appearance)“. Dann erscheint die Seite unter „Design“. Das ist die empfohlene Einstellung. Ergänzend sollte noch gesagt sein, dass sich mit dem Generator auch Plugin-Options-Seiten erstellen lassen.

Unausgefüllt:

Titel und Position der Optionen-Seite festlegen

Ausgefüllt:

theme-optionen-1

2 – Die benötigten Felder festlegen und die Funktion bestimmen

Für die Einstellungen hat man die Wahl zwischen „Text, Textarea, Select, Checkbox und Radio“. Je nachdem welche Art von Optionen man für sein Theme definieren will, sollten die einzelnen Möglichkeiten genutzt werden. Ein Textfeld kann für zusätzlichen Text zum Beispiel im Footer genutzt werden, eine Textarea für den Google-Analytics-Code, eine Checkbox für die Anzeige von speziellen Dingen und so weiter. Nachdem eine Option festgelegt wurde, klickst du einfach auf den Plus-Button. Danach kannst du eine weitere Option definieren.

Die einzelnen Felder für die Optionen festlegen

Ausgefüllt sieht das dann zum Beispiel so aus:

Hier legst du deine Theme-Optionen fest

3 – Den benötigten Code generieren

Nachdem du alles gewissenhaft erledigt hast, kannst du nun den Code generieren, der für die Erstellung und die Darstellung deiner Theme-Optionen-Seite verantwortlich ist. Das machst du an dieser Stelle:

Den PHP-Code generieren

Die Theme-Optionenseite mit dem generierten Code anlegen

Nach dem Klick auf den Button »Generate PHP« wird der benötigte PHP-Code für deine Theme-Optionenseite erstellt. Lege nun mit z.B. dem Windows Editor oder Apples TextEdit oder einem anderen reinen Texteditor eine Datei namens theme-optionen.php an, kopiere den Code aus dem Generator in die PHP-Datei hinein und speichere sie ab. Die neue PHP-Datei verschiebst du nun in das Hauptverzeichnis deines WordPress-Themes.

Der generierte Code:

Der generierte Code

Das Theme-Hauptverzeichnis:

Das Theme-Hauptverzeichnis

Die functions.php anpassen, damit die Theme-Optionenseite angezeigt wird

Damit die Theme-Optionenseite auch angezeigt wird, ist noch eine kleine Anpassung in der functions.php des Themes nötig. Öffne die Datei in einem reinen Text-Editor oder noch besser in einem HTML-Editor. Wir haben bereits etliche, gute und funktionelle HTML-Editoren vorgestellt:

Nachdem du die functions.php in einem HTML-Editor geöffnet hast, kopiere am Ende der Datei folgendes hinein:

Die Erweiterung in der functions.php Datei

Das Ergebnis: Die Theme-Optionenseite

Twenty-Twelve-Theme-Optionen

Auf eine einfache Art und Weise haben wir nun mit relativ geringem Zeitaufwand eine ansprechende und funktionierende Theme-Optionenseite erstellt. Nun fehlt nur noch der nötige Code, damit du die Optionen auch in die Theme-Dateien integrieren und anzeigen lassen kannst. Auch hierbei hilft dir der Generator, denn am Ende der Theme-Optionenseite steht, wie man die Optionen in das Theme übertragen muss.

Optionen ins Theme übertragen

Genau erklärt: So einfach können die Optionen ins Theme übertragen werden

Um die Optionen anzeigen zu können, müssen zwei Dinge erfüllt sein. Im Kopfbereich der Theme-Datei müssen die Optionen aufgerufen werden. Ein weiterer Code-Teil sorgt für die Darstellung im Theme. Das funktioniert nur, wenn beide Teile in der betreffenden Theme-Datei stehen. Im folgenden Beispiel möchten wir etwas zusätzlichen Text im Footer des Themes ausgeben.

Diesen Text im Footer anzeigen lassen

Um zusätzlichen Text im Footer anzeigen lassen zu können, muss die Datei footer.php des Themes bearbeitet werden. Die folgenden beiden Code-Zeilen müssen dafür in der footer.php ergänzt werden:

Ein Klick auf die Grafik öffnet eine höhere Auflösung
Die Optionen im Theme anzeigen lassen

Der obere Code sorgt dafür, dass die Theme-Datei weiß, dass zusätzliche Optionen existieren. Ohne diese Zeile Code funktioniert es nicht. Die zweite Zeile Code unten holt sich die Einstellung, die du auf der Theme-Optionen-Seite getätigt hast und zeigt sie im Theme an. Diese zweite Zeile platzierst du dort, wo der Text angezeigt werden soll.

So sieht es dann auf deiner Website aus:

Das Endergebnis

Fazit

Der »WordPress Option Page Generator« ist eine geniale und schnelle Möglichkeit, eine Theme-Optionenseite auch ohne fortgeschrittene PHP-Kenntnisse zu gestalten. Zudem ist der generierte Code WordPress-konform und nutzt die Settings-API zur Generierung des PHP-Codes. So kann man die Theme-Optionenseite auch nutzen, wenn man sein WordPress-Theme gerne im offiziellen Theme-Verzeichnis von WordPress gelistet sehen möchte. Fortgeschrittene Nutzer sollten vielleicht noch die generierten IDs anpassen, denn die sind schon arg lang und damit nicht so wirklich praxistauglich.

Links zum Beitrag

(dpe)

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress gehackt? Das musst du jetzt tun!

Der Schock ist groß: du stellst fest, dass deine WordPress-Website gehackt wurde. Eine neue Startseite empfängt dich mit den Worten: Hacked by XYZ. Der Schweiß bricht dir aus und dein Herz schlägt schneller. Du kannst nicht mehr klar denken und weißt nicht, was nun zu tun ist. Dabei ist es gar nicht so schwer, eine gehackte WordPress-Seite wieder zu bereinigen. Wir zeigen dir in diesem Artikel, wie es geht.

WordPress gehackt? Das musst du jetzt tun!

Zuerst einmal: atme tief durch und bekomme keine Panik. So schlimm ist das nicht und du befindest dich mit deiner gehackten Seite in guter Gesellschaft. Das ist schon vielen Menschen passiert, unter anderem auch mir. Daher zeige ich dir jetzt, wie einfach du das Problem lösen kannst.

Die einfachste Möglichkeit ist, die Website aus einem früheren Backup wiederherzustellen. Du hast dich doch rechtzeitig um eine Backup-Lösung gekümmert? Wenn ja, kein Problem. Spiele einfach ein etwas jüngeres Backup wieder ein, aus einer Zeit, als deine Website noch nicht gehackt war. Ändere nun noch alle Passwörter und nutze eine Zwei-Faktor-Authentifizierung und dein Problem ist Geschichte. Solltest Du kein Backup besitzen, dann lies weiter. Wir beheben nun Schritt für Schritt das Problem.

Gehackt? Halb so schlimm. Halte dich an die folgende Anleitung

1 – Kontrolliere deinen Computer auf Trojaner

Der erste Schritt mag sich profan anhören, ist jedoch sehr wichtig. Denn ein Trojaner auf deinem Computer kann dafür gesorgt haben, dass einem Angreifer das Passwort für deine Website bekannt wurde. Sorge bei deinem Antivirenprogramm für die neuesten Virendefinitionen und scanne deinen Computer. Wenn nichts gefunden wird, sehr gut. Überprüfe den Rechner trotzdem nochmal mit der Kaspersky Rescue Disc. Findet auch diese nichts, kannst du fortfahren.

2 – Sorge dafür, dass deine Website nicht mehr öffentlich zugänglich ist

Maintannance Mode aktivieren

Dieser Schritt ist sehr wichtig, weil deine Website nun unter Umständen Schadsoftware verbreitet und daher von Google aus dem Index genommen werden kann. Die schnellste Möglichkeit, die Website nicht mehr erreichbar zu machen, ist die Installation eines Plugins für den sogenannten „Maintenance Mode“, den Wartungsmodus. Solltest du dich also noch in dein WordPress einloggen können, installiere das Plugin »WP Quick Maintenance« und aktiviere es. Gehe in die Einstellungen des Plugins und aktiviere dort den Wartungsmodus. Nun sieht jeder Besucher nur noch die Wartungsseite.

Solltest Du keinen Zugriff mehr auf den Adminzugang von WordPress haben, dann setze dein Passwort zurück. Hier findest du eine gute Anleitung zum Zurücksetzen des Passworts.

3 – Ändere alle Passwörter

Ändere sofort alle Passwörter. Mit den Passwörtern auf deinem Computer solltest du anfangen, hast du dort keine vergeben, hole dies nach. Denn niemand anderes sollte Zugriff auf deinen Computer haben. Wenn du dich noch in dein WordPress einloggen kannst, ändere auch dort sofort die Passwörter aller Accounts. Einen recht guten Generator für sichere Passwörter findest du hier. Zudem solltest du auch die Passwörter des (S)FTP-Zugangs und der WordPress-Datenbank ändern. Ebenso das Master-Passwort deines Webhosters.

4 – Mache ein Backup aller WordPress-Dateien und der Datenbank

Logge dich mittels (S)FTP auf deinem Server oder in dein Webhosting-Paket ein und lade sämtliche WordPress-Dateien auf deinen Desktop herunter. Achte ganz besonders auf den Ordner „uploads„. Dieser muss definitiv gesichert werden, denn er enthält alle deine hochgeladenen Dateien und Bilder. Du findest ihn unter »wp-content => uploads«. Lade diesen Ordner extra auf deinen Desktop, denn du wirst ihn später noch benötigen.

Mache nun ein Backup deiner Datenbank. Hierzu musst du dich in die Verwaltungsoberfläche deines Webhosters einloggen und dort „phpMyAdmin“ wählen. Anschließend wählst du deine Datenbank an und gehst auf „Exportieren“. Exportiere die Datenbank als „SQL“ und wenn möglich als .ZIP-Datei. Vergiß nicht, auch die wichtige Datei ».htaccess« zu sichern. Auch diese Datei wird später noch benötigt, da WordPress ohne sie nicht richtig funktioniert.

Solltest du einen Mac statt eines PCs nutzen, musst du die Anzeige der versteckten Dateien aktivieren, denn alle Dateien mit einem Punkt vor dem Dateinamen sind für Mac OS X versteckte Systemdateien.

5 – Alle Plugins und Themes neu besorgen

WordPress-Plugins

Besorge dir alle verwendeten Plugins frisch von WordPress.org oder eben von dem Unternehmen, bei dem du die Plugins gekauft hast. Ebenso besorge dir eine frische Version des von dir verwendeten WordPress-Themes. Plugins und Themes sind sehr beliebte Bereiche, um Schadsoftware und Backdoors (Hintertüren) zu hinterlegen. Damit die Website wirklich bereinigt werden kann, müssen Themes und Plugins frisch installiert werden.

6 – Wichtige Dateien und Ordner überprüfen

wp-config.php

Suche dir aus deinem Backup die Dateien »wp-config.php« und ».htaccess« heraus und überprüfe Sie. Die »wp-content.php« sollte nicht viel mehr als die Zugangsdaten zu deiner WordPress-Datenbank enthalten und die Dinge, die in jeder frischen Version der Datei stehen, wie zum Beispiel die „Authentication Unique Keys and Salts“; also die Sicherheitsschlüssel. Wenn du nicht ganz sicher bis, wie die originale Version der Datei aussieht, hier findest Du sie.

Im Anschluss kontrolliere die ».htaccess«-Datei, ob sich dort Dinge eingeschlichen haben, die dort nicht hingehören. Bist du dir nicht sicher, lösche den Inhalt der Datei einfach. Im WordPress-Codex findest du den Inhalt einer Standard-.htaccess-Datei. Kopiere den Code in die von dir bereinigte Datei hinein und speichere sie ab. Beide Dateien benötigst du für die Wiederherstellung deiner Website.

7 – Ordner »uploads« kontrollieren

Der Ordner »uploads« ist sehr wichtig für den Erfolg der Wiederherstellung, denn er enthält alle hochgeladenen Dateien und Bilder. Wird er gelöscht, dann existiert deine WordPress-Seite nur noch ohne Bilder. Öffne daher den Ordner und suche in ihm und in allen Unterordnern nach .PHP-Dateien. Solltest du fündig werden, lösche sie alle. Sie gehören dort in den meisten Fällen nicht hinein. Sollte ein Plugin in diesem Ordner eine PHP-Datei benötigen, so wird sie später neu angelegt.

8 – Alle Dateien vom Server löschen

Logge dich über den (S)FTP-Zugang auf deinen Webserver oder in dein Webhosting-Paket ein und lösche alle Dateien deiner WordPress-Installation. Wirklich alle Dateien. Lasse keine einzige übrig.

9 – Neues WordPress und wichtige Dateien hochladen

Neues WordPress hochladen

Besorge dir von WordPress.org eine neue WordPress-Version und lade sie mittels (S)FTP-Zugang auf deinen Server oder in dein Webhosting-Paket hoch. Die Sicherheitsschlüssel in der »wp-content.php«-Datei solltest du neu vergeben, der Generator unter der URL „https://api.wordpress.org/secret-key/1.1/salt/“ hilft dir dabei.

Anschließend lädst du die »wp-content.php«- und die ».htaccess«-Datei wieder in das Hauptverzeichnis deiner WordPress-Installation. Öffne nun auf dem Server den Ordner »wp-content« und lade deinen »uploads«-Ordner dort hinein. Jetzt solltest du wieder Zugang zu deinem WordPress haben. Logge dich nun in die Administrator-Oberfläche ein.

10 – Neue Plugins und Themes installieren

Alle Plugins, die du dir frisch besorgt hast, kannst du nun neu installieren. Daran anschließend installierst du eine frische Version deines Themes. Bitte, tue dir selbst einen Gefallen und verwende keine alten Versionen aus deinem Backup. Die Chancen, dass sich darin Schadcode befindet, sind sehr groß. Verwende daher nur neue und frische Versionen.

11 – Datenbank auf neue WordPress-Version aktualisieren

Solltest du immer die neueste Version von WordPress verwendet haben, ist dieser Schritt überflüssig. Wenn du allerdings nicht die neueste Version genutzt hast, dann muss die Datenbank auf die neue Version aktualisiert werden. Gib folgende URL in die Adresszeile deines Browsers ein:

http://www.deinedomain.de/wp-admin/upgrade.php

Folge anschließend den angegebenen Schritten und aktualisiere die Datenbank.

12 – Kontrolliere die richtigen Dateiberechtigungen auf dem Server

Nun muss dafür gesorgt werden, dass die Dateien und Ordner nicht mehr von außen bearbeitet werden können. Denn zu viele Berechtigungen öffnen Hacker Tor und Tür zu deiner WordPress-Installation. Passe daher die Dateiberechtigungen wie folgt an:

Datei-/Ordnername vom Hauptpfad aus gesehen Dateiberechtigung vererben*
DAS HAUPTVERZEICHNIS 705 ja
/.htaccess 404 nein
/wp-config.php 404 nein
/index.php 404 nein
/wp-blog-header.php 404 nein
/wp-admin/ 705 ja
/wp-includes/ 705 ja
/wp-content/ 705 ja

13 – Scanne deine Website mit dem Exploit Scanner

Exploit Scanner WordPress Plugin

Installiere das WordPress-Plugin »Exploit Scanner« und scanne deine Website damit. Sollte sich nun in der Datenbank noch Schadcode befinden, wird das Plugin diesen Schadcode auch finden. Bedenke eines: Schadcode kann sich nun nur noch in der Datenbank befinden, denn alle anderen Dateien sind frisch und neu installiert oder im Fall des »uploads«-Ordners von schädlichen Dateien bereinigt. Wird in der Datenbank Schadcode gefunden (was relativ unwahrscheinlich ist), dann solltest du einen Profi an die Sache lassen, denn die Datenbank ist das Herz von WordPress. Ein Fehler, und die Website ist Geschichte.

14 – Testen – Testen – Testen

Öffne deine Website im Inkognito-Modus des Browser und teste, ob der Hack verschwunden ist. Teste ebenso, ob sich alle Beiträge und Seiten fehlerfrei aufrufen lassen. Prüfe die Funktionen und die Fehlerfreiheit einmal eingeloggt und einmal nicht eingeloggt, da manche Hacks nur im nicht eingeloggten Zustand sichtbar sind.

Findest du nichts und alles funktioniert wie früher: Freue dich, du hast deine Website wieder!

15 – Deaktiviere den Wartungsmodus

Da nun alles wieder fehlerfrei funktioniert, kannst du den Wartungsmodus wieder deaktivieren und die Website damit live schalten.

Fazit

Eine gehackte WordPress-Website wiederherzustellen ist nicht total einfach, aber mit unserer Anleitung auch halb so wild. Wichtig ist nur, dass du einen ruhigen Kopf bewahrst und systematisch vorgehst. Dann kann fast nichts passieren.

Links zum Beitrag:

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Tipps, Tricks & Tutorials WordPress

CMS für jedermann: Kostenlose E-Books zu Neos und WordPress von Mittwald

Telefon-Support, E-Mails, Backups – das sind Dinge, die Webagenturen sofort einfallen, wenn Sie an Unterstützung vom Webhoster denken. Aber auch gute Dokumentationen bringen Webseitenbetreiber und Entwickler in ihrem Alltag weiter. Aus diesem Grund hat das Unternehmen Mittwald nun zwei kostenlose E-Books veröffentlicht. Eins beschäftigt sich mit dem Blog-System WordPress, das andere mit der Template-Entwicklung im CMS Neos.

Kostenlose E-Books zu Neos und WordPress von Webhoster Mittwald

In beiden Fällen richten sich die E-Books an Einsteiger, die sich im Selbststudium etwas beibringen wollen. „Da beide Systeme sehr intuitiv bedienbar sind, kann man sich die Basics mit etwas Ehrgeiz selbst aneignen“, sagt Mittwalds Online-Marketing-Spezialist Viktor Peters, der das WordPress E-Book geschrieben hat. „Wir möchten Anfängern mit den E-Books eine Starthilfe geben.“

Gerade für das junge System Neos sind noch nicht viele kostenlose Dokumentationen vorhanden. „Wir hoffen, dass unser Neos E-Book bei vielen Entwicklern die Neugier weckt, es mal mit dem neuen System zu versuchen und die Software so bekannter wird“, erklärt Marco Falkenberg, der bei Mittwald als Projektmanager im Bereich Neos arbeitet. „Das System hat gewaltiges Potential es bis ganz oben im CMS-Umfeld zu bringen.“

Beide E-Books stehen zum kostenlosen Download bereit. Um die PDF-Dokumente herunterzuladen, müssen sich User lediglich für den Newsletter anmelden oder einen Link bei Twitter teilen.

Zum Neos E-Book: https://www.mittwald.de/neos-e-book-template-entwicklung

Zum WordPress E-Book: https://www.mittwald.de/ebook-einfuehrung-wordpress

Über Mittwald

Mittwald ist einer der führenden Webhosting-Anbieter für Agenturen und Freelancer mit Sitz in Espelkamp und eigenem Rechenzentrum am Firmenstandort. Seit 12 Jahren bietet das Unternehmen seinen Kunden optimierte Umgebungen für CMS- und E-Commerce-Lösungen wie TYPO3, WordPress oder Shopware. Über 120 Mitarbeiter betreuen den Einsatz von speziellen Hostinglösungen – von Webhosting-Paketen für kleinere Internetseiten bis zu Managed Cluster-Lösungen für große Portale oder Onlineshops.

Kategorien
Tipps, Tricks & Tutorials WordPress

WordPress: 10 Dinge, auf die du vor dem Launch deiner Website achten solltest

Deine neue WordPress-Website ist fertig und steht bereit zum Launch? Das denkst du jedenfalls. Allerdings gibt es einige Dinge vor dem Veröffentlichen zu beachten. Denn jeden Tag gehen Tausende Websites an den Start. Die meisten davon werden mit WordPress realisiert. Aus diesem Grund sollte sich deine Website von den vielen anderen unterscheiden. Daher geben wir dir in diesem Artikel eine praktische Checkliste an die Hand, damit du weißt, was vor dem Start zu beachten ist.

launch-wordpress-teaser_DE

1. – Achte auf den richtigen Webhoster

Die Wahl des richtigen Webhosters ist zumindest in Teilen entscheidend für den Erfolg einer WordPress-Website. Denn der richtige Provider kostet keine Unsummen und kann mit gutem Support entlasten. Hier gilt es zu entscheiden, welche Anforderungen du an dein Webhosting stellst. Wenn du sehr viel Besucherverkehr auf der Website erwartest, dann empfiehlt sich ein Managed-WordPress-Hosting auf einem eigenen vServer.

Du musst dich dann um nichts selbst kümmern, was mit dem Server zu tun hat und kannst dich vollkommen auf dein Geschäft konzentrieren. Managed Hosting empfiehlt sich auf jeden Fall, aber nicht nur für Webshops. Als Privatperson mit einem Wunsch nach einem Blog auf Basis von WordPress musst du nicht so viel Geld in die Hand nehmen. Ein relativ günstiges Hostingpaket ist dann völlig ausreichend.

Zwei Beispiele guter Hosting-Möglichkeiten:

Managed WordPress Hosting

Premium Managed WordPress Hosting aus Deutschland: RAIDBOXES

RAIDBOXES ist die Wahl von Sven Lennartz, dem Gründer des Dr. Web Magazins. Die Pakete kosten zwischen 9.- und 30.- Euro monatlich. Die Mindestlaufzeit beträgt einen Monat.

Konventioneller Webspace

Alfahosting: Professioneller Webspace für Ihre Projekte

Empfehlenswert ist das Paket »Multi XL«, das ab 3,99 monatlich kostet. Die Preise bei Alfahosting richten sich nach der Vertragslaufzeit, die 24-monatigen Verträge sind am günstigsten.

1a. – Wichtige Einstellung – die Permalinks

Bevor Sie mit Ihrer Website online gehen, sollten Sie eine brauchbare Permalinkstruktur einrichten. Gute Permalinks sind „sprechend“, man erkennt anhand der URL bereits, worum es im Beitrag geht. Leider nutzt WordPress standardmäßig die sogenannten „Messy-Urls“.

Ein Beispiel: http://example.com/?p=N

Für Mensch und Suchmaschine stelle bitte eine andere, sprechende Variante ein.

Permalink-Einstellungen

2. – Installieren Sie eine Backup-Lösung für Ihre WordPress-Website

Eine Backup-Lösung (hier unser ausführlicher Beitrag zum Thema) ist das Wichtigste überhaupt. Wenn ich dir nur einen Tipp geben dürfte, es wäre dieser. Schnell kann mal etwas schief gehen oder deine Website wird gehackt. Mit einer guten Backup-Lösung kann die Website sofort wiederhergestellt werden. Backup-Möglichkeiten gibt es wie Sand am Meer. Die Bandbreite reicht von kostenlosen Plugins bis hin zu kostenpflichtigen Varianten wie VaultPress. Die Entscheidung liegt bei letztlich bei dir, also triff sie.

Wenn du eine private Website oder einen Blog besitzt, dann reicht sicherlich ein kostenloses Backup mittels Plugin. Ein gutes Plugin sichert hierbei die komplette Website inklusive der Datenbank. Gespeichert werden können die Backupdaten dann zum Beispiel in einer Cloud wie Dropbox, Amazon S3, oder Google Drive. Bei einer Website, die Geld verdienen soll, empfiehlt es sich, etwas Geld in die Hand zu nehmen und einen kostenpflichtigen Dienst zu wählen. Sehr zu empfehlen ist VaultPress. VaultPress ist mit nur 9 USD monatlich günstig und bietet eine Ein-Klick-Wiederherstellung an. Es werden täglich Backups erstellt.

BackWPup: Backuplösung mit kostenlosem WordPress-Plugin

Eine gute Lösung ist das Plugin BackWPup.

Kostenpflichtige, professionelle Backup-Lösung VaultPress

VaultPress ist ein Backupdienst von Automattic, der Firma hinter WordPress. Es funktioniert reibungslos, ist leicht einzurichten und bietet eine Einklickrestore-Möglichkeit. VaultPress kostet dich ab 9 USD monatlich.

https://youtu.be/-bPChxbBD9w

3. – Den Administrator-Zugang absichern

Sehr wichtig ist die korrekte Absicherung des Administratorbereichs deiner WordPress-Website. Ein schlecht gesicherter Adminzugang dient einem potenziellen Hacker als Zugang. WordPress ist in der Welt der Content-Management-Systeme vergleichbar mit Windows. Daher ist WordPress nicht nur für Website-Besitzer interessant, sondern auch für Hacker. Ein schlecht gesicherter Adminzugang ist die erste Wahl für Hacker, um in deine Website einzudringen.

Es existieren vielerlei Lösungen zur korrekten Absicherung. Die gängigste ist eine gute Kombination aus einen Benutzernamen und einem sicheren Passwort. Das Passwort sollte mindestens zehn Zeichen haben und sich aus Buchstaben, Zahlen und Sonderzeichen zusammensetzen. Als Benutzernamen sollte man auf keinen Fall »Admin« oder »Administrator« wählen. Diese Benutzernamen werden von den Hackern zuerst getestet.

3a. – Falsche Sicherheit: Administrator-ID ändern

Vielfach wird in Blogposts über WordPress-Sicherheit vorgeschlagen, die ID des Administrators von 1 auf zum Beispiel 2 abzuändern, um den Benutzernamen zu verschleiern. Diese Maßnahme verschafft leider überhaupt keine Sicherheit, weil der Benutzername bei jeder (!) WordPress-Webseite innerhalb von Sekunden herausgefunden werden kann. Probiere es gleich mal aus, indem du folgendes in die Adresszeile deines Browsers eingibst:

wordpress-blog-adresse.de/?author=1

Solltest du keinen Erfolg haben, ändere die Eins in eine Zwei um und so weiter. Der angezeigte Benutzername ist dann der Administrator.

3b. – Falsche Sicherheit: Limit Login Attempts

Immer wieder wird in Blog-Artikeln zum Thema WordPress-Sicherheit empfohlen, das Plugin Limit Login Attempts oder etwas ähnliches zu installieren. Das Plugin sorgt dann dafür, dass nur eine gewisse Anzahl von Loginversuchen von einer IP möglich sind. Doch leider bieten Plugins dieser Art absolut keine Sicherheit. Denn, wenn dein Adminzugang mittels Brute-Force-Attacke angegriffen wird, geschieht das nicht nur von einer IP aus. Die Hackscripte arbeiten mit einem ganzen Pool an IP-Adressen. Damit wird ein Plugin dieser Art völlig nutzlos.

3c. ECHTE Sicherheit: Zwei-Faktor-Authentifizierung für den Administratorbereich

Wenn man seine Seite wirksam absichern möchte, greift man als Nicht-Fachmann am besten zu einer 2-Faktor-Authentifizierung. Ein Einloggen in den Adminbereich ist dann nur in Kombination mit einem Smartphone möglich. Mir ist bisher kein geglückter Hackversuch trotz einer solchen Lösung bekannt.

Hier gibt es zwei empfehlenswerte, kostenlose Lösungen.

Google Authenticator WordPress Plugin

Das Plugin unterstützt viele Möglichkeiten zur zweifachen Authentifizierung, zum Beispiel SMS und QR Codes zum Abscannen. Die nötige App ist für Android und iOS erhältlich.

SecSign ID WordPress Plugin

Die SecSign-ID-Lösung ist sehr empfehlenswert, weil sie einfach zu implementieren ist und reibungslos und schnell funktioniert. Ich habe beste Erfahrungen damit gemacht und kann diese 2-Faktor-Lösung ans Herz legen. SecSign setzt ebenfalls eine Smartphone-App voraus, die für Android und iOS erhältlich ist. Zu SecSign haben wir bereits ausführlicher hier etwas geschrieben.

4. – Alle Formulare auf der Website auf korrekte Funktion testen

Es gibt für die Nutzer einer Website kaum etwas schlimmeres als nicht funktionierende Formulare. Daher solltest du alle Formulare vor dem Launch deiner Website auf korrekte Funktion testen. Das umfasst zum Beispiel ein Kontaktformular, mit dem deine Leser dich erreichen können. Solltest du einen E-Mail-Newsletter anbieten, dann muss auch das Formular zum Einsammeln der E-Mail-Adressen deiner Nutzer auf Funktion geprüft werden.

Die Tests der Formulare sind recht einfach. Das Kontaktformular testest du, indem du dir selbst eine E-Mail über das Formular schickst. Wenn du einen Newsletter anbieten möchtest, dann füge deine eigene E-Mail-Adresse über das Formular hinzu. Das testet den Funktionsablauf des Einsammelns von E-Mail-Adressen. Im Anschluss sendest du einen Test-Newsletter. Damit kannst du herausfinden, ob er im richtigen Postfach landet oder von deinem E-Mail-Client in „Unerwünschte Werbung“ einsortiert wird.

5. – Eine E-Commerce-Website testen

Solltest du einen Online-Shop mit WordPress umgesetzt haben, dann ist es unerlässlich, alle Funktionen zu testen. Wichtig hierbei ist vor allem ein sorgfältiger Test des gesamten Bestellprozesses. Achte hierbei auf eine hohe Benutzerfreundlichkeit, gute Übersichtlichkeit und vor allem auch darauf, ob alle gesetzlich geforderten Angaben und Links an der richtigen Stelle angezeigt werden und mit den richtigen Inhalten gefüllt sind.

Bedenke beim Test der Kauffunktionen eines: Je leichter es der Kunde hat, seine gewünschten Artikel kostenpflichtig zu bestellen, desto mehr Umsatz wirst du generieren.

Auch wichtige Details wie Call-to-Action Buttons sollten eingehend unter die Lupe genommen werden. Sind sie richtig platziert? Lenken keine anderen Inhalte von der sofortigen Sichtbarkeit des Buttons ab?

6. – Medien checken: Bilder, Videos, Slider

Bilder sind extrem wichtig für eine Website. Daher solltest du alle Bilder darauf checken, ob sie korrekt angezeigt werden und natürlich auch darauf, ob sie für das Web optimiert sind. Zu große Bild- oder Bilddateiformate machen die Website unnötig langsam.

Solltest du Videos in die WordPress-Seite eingebunden haben, teste auch diese auf eine korrekt angezeigte Größe und auf Funktion. Slider sind ein wichtiges Stilelement, daher müssen auch diese optimal funktionieren.

7. – Responsivität testen

Du hast ein responsives WordPress-Theme installiert? Herzlichen Glückwunsch, das macht die Besucher, die deine Website über ein Smartphone ansurfen, glücklich. Allerdings ist ein Theme nur im jungfräulichen Ausgangszustand responsiv. Hast du einiges am Layout der Website geändert oder neue Elemente eingefügt, dann solltest du dringend testen, ob die Website immer noch optimal auf einem Smartphone oder Tablet dargestellt wird.

Die beste Art, eine Website zu testen, ist natürlich direkt auf einem Smartphone und einem Tablet. Doch es existieren auch gute Online-Lösungen:

Responsive Test und Responsive Design Test

8. – Performance Test

All you need is speed, denkt sich Google. Die Geschwindigkeit, mit der sich eine Website aufbaut, ist ein Rankingfaktor in der Google-Suche. Je schneller eine Website lädt, desto besser wird sie von Google (wenn die vielen anderen Faktoren stimmen) gerankt. Die Geschwindigkeit deiner neuen Website kannst du mit verschiedenen Online-Services testen. Als Beispiel nenne ich hier die bekannten Pingdom Tools und Google Page Speed Insights. Bei Dr. Web haben wir uns an dieser Stelle schon mal mit dem Thema beschäftigt. Noch mehr Informationen gibt es hier.

Sollte Ihre Website nicht auf Anhieb gute Leistungen erzielen können, installiere ein gutes Caching-Plugin. Durch das Zwischenspeichern der Seiten wird deine Webseite dann wesentlich schneller ausgeliefert. Manche Plugins erstellen auch gleich statische HTML-Seiten aus den WordPress-Artikeln. Da der PHP-Interpreter nicht mehr bei jedem Aufruf der Website angesprochen wird, wird die Seite rasant schnell. Empfehlenswert für Einsteiger sind die Plugins Cachify und WP Super Cache. Für fortgeschrittene Anwender eignet sich das Caching-Framework W3 Total Cache.

9. – Eine Analyse-Software installieren

Ohne eine Software, die deine Besucher erfasst und dich umfassend über die wichtigen Eckdaten wie tägliche Besucheranzahl, die Anzahl der angesehenen Seiten und die beliebtesten Artikel informiert, kannst du deine Website nicht weiterentwickeln und voranbringen. Daher ist es wichtig zu wissen, wie deine Besucher mit der Website interagieren. Hier bieten sich mehrere Lösungen an.

Einmal gibt es das bekannte und beliebte Google Analytics, dass mit einer Erweiterung im JavaScript-Code durchaus den Datenschutzrichtlinien entsprechen kann. Als Alternative ist die Software Piwik zu empfehlen. Piwik muss allerdings auf dem eigenen Webspace installiert werden, erfüllt jedoch ohne Änderungen die Datenschutzrichtlinien. Zudem bleiben alle Daten in deiner Hand.

10. – Eine gute SEO-Lösung installieren

Suchmaschinenoptimierung ist in der heutigen Zeit unerlässlich. Gut, dass man diesen Job einem WordPress-Plugin überlassen kann. Sehr bekannte und gute Lösungen gibt es entweder kostenfrei oder für einen geringen Betrag zu kaufen. Die bekannteste und am meisten verbreitete Lösung ist das kostenlose WordPress-Plugin Yoast SEO, vormals WordPress SEO by Yoast.

Sehr viele bekannte Websites nutzen dieses Plugin, weil es richtig gut und vor allem umfassend ist. Es kümmert sich nicht nur um die Titel und Beschreibungen der Artikel und der Seite an sich, sondern stellt unter anderem auch eine Sitemap, sowie eine »Brotkrümel-Navigation« bereit.

Eine deutsche Alternative ist das bekannte wpSEO, dass ursprünglich von Sergej Müller entwickelt wurde. Allerdings ist wpSEO nicht kostenlos, sondern muss kostenpflichtig erworben werden. Die Lizenzen gehen ab 19,99 Euro los. Der Funktionsumfang ist allerdings nicht mit Yoast SEO zu vergleichen. Yoast SEO stellt zum Beispiel auch eine Funktion zum Optimieren der Artikel für Suchmaschinen bereit, wpSEO hingegen nicht.

Und jetzt kannst du die Seite live schalten

Nachdem du diese Checkliste abgearbeitet hast, sind alle wichtigen Details überprüft worden. Nun sollte dem Erfolg deiner Website auf WordPress-Basis nichts mehr im Wege stehen. Get in on!

(dpe)