Beiträge

WP-CLI – Ein Einblick in das Profi-Tool

Sie wollten schon immer wissen, wie Profis ihre WordPress Installationen pflegen und wie man mit möglichst wenig Aufwand, mehrere Installationen auf einem Server pflegt?
Dann sollte das Kommandozeilen-Interface WP-CLI genau das Richtige für Sie sein.

 

 

Was ist WP-CLI?

WP-CLI ist ein kostenloses Tool, mit dem Sie, über das Terminal deines Betriebssystems, WordPress installieren, pflegen und verwalten können.
Hier eine kleine Auflistung von Funktionen, die möglich sind:

  • WordPress installieren
  • Plugins installieren, de-/aktivieren
  • Themes installieren, de-/aktivieren
  • Seiten und Posts verwalten/erstellen
  • Kommentare verwalten/erstellen
  • Updates installieren
  • Benutzer erstellen
  • und viele mehr…

Mit diesem Tool können Sie also ab WordPress 3.7 alle Standardfunktionen des Backend’s in einer Kommandozeile ausführen. Sollten Sie eine Funktion vermissen, besteht sogar die Möglichkeit, selbst Befehle zu entwickeln.

Systemvorraussetzungen

Um WP-CLI zu nutzen, müssen bestimmte Vorraussetzungen erfüllt sein, leider bringt das Betriebssystem Windows nicht alle Vorraussetzungen ab Werk mit, im Gegensatz zu Apples OSX sowie Linux, und müssen im Vorraus installiert werden.

Folgendes muss vorhanden sein:

  • PHP 5.3.29 oder höher
  • WordPress 3.7 oder höher
  • Webserver mit SSH-Zugang

Vorbereitungen nur für Windows

Sind Sie Nutzer von Windows 10, können Sie ihnen das Ubuntu Modul installieren. Das finden Sie ganz einfach und kostenlos in der Windows Store App. Nach der Installation haben Sie ein vollwertiges Ubuntu zur Verfügung und können die Installation ohne Weiteres nach der Linux-Anleitung durchführen.

Installation der WP-CLI unter OSX, Linux
oder Windows 10 mit Ubuntu Modul

Wie installiere ich WordPress CLI?

  • Loggen Sie sich mit dem Terminal über SSH auf Ihren Server ein
  • Laden Sie die “wp-cli.phar” Datei mittels wget oder curl herunter
  • Starten Sie die WordPress CLI

Das war der Schnelldurchgang, genauer möchte ich es Ihnen natürlich auch erklären, legen wir also los.

Schritt 1:
Loggen Sie sich mit Ihrem Terminal über SSH auf Ihren Server ein.
Beispiel des Login Befehls:

1 ssh deine_server_adresse.com -l dein_benutzername

Anschließend müssen Sie ihr Passwort eingeben und Enter drücken.

Schritt 2:
Herunterladen der “wp-cli.phar” über SSH auf Ihren Server mit dem Terminal.
Mit folgendem Befehl können Sie den Download starten, beachten Sie aber das Sie sich im Root-Verzeichnis befinden:

1 curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Schritt 3:
Prüfen Sie, ob die heruntergeladene Datei funktioniert, indem Sie sie mit folgendem Befehl aufrufen:

1 php wp-cli.phar –info

Nach dem Ausführen der WP-CLI mit dem Zusatz “–info” sollten Sie folgende Ausgabe, mit Ihrem Serverdaten, sehen:

1

2

3

4

5

6

7

8

9

10

PHP binary: /usr/bin/php70

PHP version: 7.0.20-nmm1

php.ini used: /etc/php70/cli/php.ini

WP-CLI root dir: phar://wp-cli.phar

WP-CLI vendor dir: phar://wp-cli.phar/vendor

WP_CLI phar path: /www/htdocs/einordner

WP-CLI packages dir:

WP-CLI global config:

WP-CLI project config:

WP-CLI version: 1.4.0

Schritt 4:
Um nicht immer den Dateinamen eingeben zu müssen und spätere Befehle kürzer zu halten, spendieren wir der WP-CLI nun noch einen neuen Namen und andere Dateirechte.
Befehl für Dateirechte:

1 chmod +x wp-cli.phar

Nachdem die Datei nun ausführbar ist , benennen wir sie noch mit folgendem Befehl um:

1 mv wp-cli.phar /www/htdocs/einordner/wp

Wobei “/www/htdocs/einordner/” ihr Ordner-Pfad ist und “wp” der neue Name. 

Ob es funktioniert, können Sie mit dem gleichen Info Befehl testen, nur dass Sie jetzt “wp” anstatt von “wp-cli.phar” benutzen.

1 php wp –info

Schritt 5:
Zu guter Letzt sollten Sie noch überprüfen, ob die geladene WP-CLI Version aktuell ist. Diesen Befehl können Sie sich  auch gleich gut merken, denn wie bei WordPress Plugins/Themes gilt auch hier eine regelmäßige Update Periode.

1 php wp cli update

 

Beispiele zur Ausführung von Befehlen

Im folgenden Abschnitt zeige ich Ihnen ein paar Beispiele zu WP-CLI Befehlen und deren Ausgabe, eine komplette Liste der vorhandenen Befehle finden Sie hier: https://developer.wordpress.org/cli/commands/

Wichtig: Wenn Sie WP-CLI im Root-Verzeichnis installiert haben und Ihre WordPress Installation in einem Subverzeichnis liegt, müssen Sie den Pfad mit Angeben. Dies macht man mit folgendem Zusatz:

1 –path=’ordner_meiner_WordPress_Installation‘

Beispiel #1 – Alle installierten Plugins/Themes anzeigen

Um nicht blind einfach alle Updates über die WP-CLI zu erledigen, können wir uns eine Liste aller installierten Plugins/Themes anzeigen lassen. Die Ausgabe der Liste beinhaltet den Namen des Plugins/Themes, den Status (aktiv/inaktiv), die Version und ob es ein Update gibt.
Hier ein Beispiel Befehl:

1 php wp plugin list

oder auch mit Pfad-Angabe, wenn die WordPress Installation im Ordner “tutorial” liegt:

1 php wp –path=’tutorial‘ plugin list

Die Antwort auf den Befehl sieht wie folgt aus:

1

2

3

4

5

6

7

8

9

+——————–+———-+———–+———+

| name               | status   | update    | version |

+——————–+———-+———–+———+

| debug-bar          | active   | none      | 0.9     |

| cron_test          | inactive | none      |         |

| wp-nerd-toolkit    | active   | none      | 1.1     |

| wp-rocket          | active   | available | 2.7.4   |

| advanced-cache.php | dropin   | none      |         |

+——————–+———-+———–+———+

Den gleichen Befehl nur mit “theme” anstatt von “plugin” zeigt eine Liste der vorhandenen Themes.

Beispiel #2 – Plugins updaten

Nachdem wir nun wissen welche Plugins installiert sind und für welche es ein Update gibt, haben wir 3 Möglichkeiten.

Möglichkeit 1 – Plugin einzeln updaten

1 php wp plugin update name_des_plugins

Möglichkeit 2 – Alle Plugins mit vorhandenen Updates aktualisieren

1 php wp plugin update -all

Möglichkeit 3 – Alle Plugins mit Updates, außer Plugin X aktualisieren

1 php wp update –all –exclude=name_des_plugins

Beispiel #3 – WordPress Core updaten

Selbstverständlich können wir nicht nur Plugins und Themes aktuell halten, sondern können uns auch um den WordPress Core kümmern. Mit den folgenden 2 Befehlen aktualisieren Sie also WordPress:

Befehl 1

1 php wp core update

Rückmeldung der WP-CLI nach einem erfolgreichen Update:

1

2

3

4

5

6

Updating to version 4.8.3 (de_DE)…

Herunterladen der Aktualisierung von https://downloads.wordpress.org/release/de_DE/wordpress-4.8.3.zip …

 

Entpacken der aktualisierten Version …

 

Success: WordPress updated successfully.

Befehl 2

1 php wp core update-db

Mögliche Rückmeldung der WP-CLI zu Befehl 2

1 Success: WordPress database already at latest db version 38590.

 

Schlusswort zur WP-CLI

Die WordPress CLI kann ein sehr mächtiges und nützliches Tool sein, um seine Arbeitszeit, bei vielen WordPress Installationen, effizienter zu nutzen. Des Weiteren können bestimmte Aktionen ohne zusätzliche Plugins erledigt werden. Ein echtes Muss für jeden der professionell mit WordPress arbeitet und seine Zeit effizienter nutzen möchte. Aber auch Nutzer die Spaß an der Konsole haben, werden mit der WP-CLI voll auf Ihre Kosten kommen.

Für Sie tiefer in dieses Thema einsteigen wollen, hier noch einmal der Link zur offiziellen Dokumentation der WP-CLI.

WordPress Hosting – So findest du den richtigen Anbieter!

Sucht man einen guten Anbieter für das Hosting einer Website, wird man von Angeboten geradezu überflutet. Zig Anbieter findet man bei Google, jeder schreibt, dass er das beste Hosting anbietet und die Affiliate-Seiten machen alles, um eine Provision abzugreifen. Doch worauf sollte man wirklich achten und wie teuer sollte es sein? Darauf gehe ich im folgenden Artikel genauer ein und möchte ein wenig Licht in’s Dunkel bringen.

WordPress Hosting
Warum ist es wichtig, einen guten Hoster zu haben?

Na ganz einfach, Sie müssen sich auf Ihren Hoster verlassen können.
Nur der Hoster hat die Möglichkeit auf technische Störungen zu reagieren, Server Konfigurationen zu aktualisieren und zu verwalten. Ein weiterer wichtiger Punkt ist der angebotene Support vom Hosting-Unternehmen, reagiert er schnell auf Probleme und zu welchen Uhrzeiten und Wochentagen ist er erreichbar?

Worauf Sie bei WordPress Hosting achten sollten

Im folgenden finden Sie einzelne Punkte, die ich persönlich für ziemlich wichtig halte und sich in meinen 6 Jahren Erfahrung mit WordPress immer gut geschlagen haben.

Kostenlose SSL-Zertifikate

Um Ihren Projekten einen kleinen Ranking Boost zu geben sollten Sie HTTPS verwenden. Aber auch datenschutzrechtlich ist ein solches Zertifikat mittlerweile von großer Bedeutung. Möchten Sie einen Shop erstellen oder auch nur Daten via Kontaktformular übertragen, sind Sie mit einem SSL-Zertifikat auf der sicheren Seite. Seit Ende 2015 besteht die Möglichkeit, kostenlose Zertifikate über Let’s Encrypt zu erstellen. Ihr Hoster sollte dies anbieten, denn warum viel Geld dafür ausgeben wenn es auch kostenlos möglich ist?

Geheimtipp HTTP/2

HTTP/2 ist die “neue” Version des Verbindungsprotokolls HTTP (Hypertext Transfer Protocol) welches im Jahr 2015 veröffentlicht wurde. Was? 2015? Das ist doch nicht mehr neu? Leider bieten es noch immer nicht alle Hoster an, was auch daran liegt das die Benutzung von HTTP/2 nur in Verbindung eines SSL-Zertifikates möglich ist.

Wichtige neue Möglichkeiten mit HTTP/2:

  • Zusammenfassen mehrerer Anfragen
  • weitergehende Datenkompressionsmöglichkeit
  • binär kodierte Übertragung von Inhalten
  • Server-initiierte Datenübertragung (push-Verfahren)

Ok, ok, genug Fach-Chinesisch, im Endeffekt können Sie also mit HTTP/2 schnellere Ladezeiten Ihrer Website erreichen!

Aktuelle PHP-Version

Ihr neuer Hoster sollte seine Software aktuell halten, dazu gehört natürlich auch die PHP-Version. Mit PHP 7 läuft WordPress fast doppelt so schnell und Sie bekommen in Zukunft keine kompatibilitäts Probleme.

Ebenso wichtig sind PHP-Einstellungen, die vom Anbieter angeboten werden. Speziell für WordPress sollten Sie darauf achten, dass “mod_rewrite” eingeschaltet ist und das “memory_limit” mindestens auf 128M gestellt ist (optimal wären 256M).

Was ist mod_rewrite?
mod_rewrite ist ein Modul für die Server-Software “Apache”, welches die Definition von sogenannten Rewrite-Regeln ermöglicht. WordPress verwendet dieses Modul um “schöne”, benutzerfreundliche URL’s zu generieren. Ist diese Einstellung nicht vorhanden, können Sie nur die sogenannten “Messy”-URL’s verwenden.
Beispiel einer schönen URL: https://ib-it.com/wordpress-hosting
Beispiel einer Messy-URL: https://ib-it.com/?p=1391

Die richtige Festplatte und genügend Speicher

Die meisten kennen sie von ihrem eigenem PC, die SSD-Fesplatte. Sie ermöglichen schnellere Zugriffszeiten und können mehr Ein-/Ausgaben pro Sekunde handeln. Genau das, was wir für unsere Datenbank brauchen, also schaut, dass zumindest eure Datenbank auf einer SSD-Festplatte liegt.

Aus Erfahrung kann ich euch sagen, dass der Speicherplatz nicht zu knapp gewählt werden sollte. Ein Blog z.B. wird schnell ziemlich groß. Beitragsbilder, Bilder in den Artikeln, automatisch erstellte Thumbnails und vielleicht auch eine Kopie der Seite auf einer Subdomain um Änderungen zu testen, fressen viel Speicherplatz. Da Speicherplatz nun wirklich kein großer Kostenfaktor sein sollte, empfehle ich mind. 10GB Speicherplatz.

 

So richtig guter Support

wordpress hosting support

Ihr neuer Hoster sollte wirklich guten Support anbieten. OK, und was ist guter Support? Hier eine Checkliste für Sie:

  • Supportzeiten: 24h / 7 Tage
  • Schnelle Reaktionszeit auf Anfragen
  • kompetente Support-Mitarbeiter

Wie Sie das, ohne Kunde zu sein, heraus bekommen?
Ganz einfach, nehmen Sie die einzelnen Punkte aus diesem Artikel heraus und suchen die    E-Mail Adresse des Supportes auf der Website des potenziellen Hosters heraus. Schreiben Sie ihm eine Mail mit all Ihren Fragen und schauen wie schnell sie antworten und ob sie Ihre Fragen beantworten konnten. Kommt eine Mail innerhalb von 2-4 Stunden zurück, vollständig beantwortet? Gut, ein erster Hinweis auf guten Support.

Der Serverstandort

Ihr neuer Hosting Anbieter sollte sein Rechenzentrum in dem Land haben wo sich Ihre potenziellen Besucher aufhalten, zur Not gehen auch die Nachbarländer. Dieser Punkt ist eher weniger für SEO wichtig, bis auf eventuell längere Ladezeiten, sollten Sie sich vor allem Gedanken über den Datenschutz machen. Entscheiden Sie sich z.B. für einen Hoster mit Rechenzentrum in den USA, sollten Sie überlegen, wie dort mit den Daten umgegangen wird, halten die Anbieter sich dort an gewissen Standards? Wenn Probleme auftreten sollten, ist Ihr Englisch dann gut genug, um dich mit dem Support zu verständigen?

Wie viele Kunden kommen auf einen Server?

Wenn Sie diesen Artikel lesen, gehe ich davon aus, dass Sie noch nicht viele Erfahrung mit dem Hosten einer WordPress Website haben, Ihre Website noch nicht viel Traffic hat und Sie noch keinen Root-Server brauchen. Deswegen sollten Sie bei den “normalen” Webspace-Paketen, auch Shared Hosting genannt, unbedingt darauf achten wie viele Kunden auf einen Server kommen. Um das kurz zu erklären: Bei einem Shared Hosting Paket werden mehrere Kunden auf einen (Hardware-)Server gepackt, das heißt, Sie haben keine eigene Hardware, sondern teilen sie mit anderen Kunden des Hosting Unternehmens.

Dieses kann unter Umständen zu großen Performance-Problemen führen. Gute Beispiele dafür sind Hoster wie z.B. 1u1 und Strato, hier teilen sich gefühlt hunderte von Kunden einen Server, der verständlicherweise dann gut zu kämpfen hat.

Achten Sie also darauf, ob der Hoster in seiner Paket-Übersicht offen schreibt, wie viele Kunden sich einen Server teilen. Ich empfehle einen Hoster bzw. ein Hosting-Paket zu wählen mit maximal 50 Kunden je Server.

Mein Fazit:

Wenn Sie meine Tipps beachten, sollten Sie einen guten WordPress Hosting Anbieter finden, denn davon gibt es viele da draußen im World Wide Web. Wenn Sie Ihrer Meinung nach einen guten Anbieter gefunden haben, lesen Sie im Internet noch ein paar Kundenbewertungen durch und überprüfen was andere dazu sagen. Ihre Nerven werden es Ihnen später danken. Wenn Sie jetzt noch eine konkrete Empfehlung von mir erhofft haben, möchte ich Sie nicht enttäuschen. Meine Projekte bekommen meistens ein Hosting-Paket von All-Inkl spendiert, manchmal auch eins von Mittwald und gute Erfahrungen habe ich durch Kundenprojekte auch mit Webgo gemacht.

 

Strukturierte Daten im SEO – Google hat ‘nen Ordnungsfimmel

Strukturierte Daten im SEO-Bereich

Die Suchmaschinenoptimierung ist zum hochsensiblen Bereich geworden und mit jedem Update, das Google auffährt, blinkt das große „P“ in den Augen der SEOs, denn kleinste Details im Feintuning können dann über Erfolg oder Misserfolg beim Ranking entscheiden. Doch Algorithmen sind nicht alles beim SEO.
Wir haben letztes Jahr bereits darauf hingewiesen und möchten uns jetzt ausführlicher dem Thema der strukturierten Daten widmen.

Strukturierte Daten – was soll das denn sein?

SEOs müssen sich immer wieder neu erfinden, weil Google mit seinen Algorithmen genau dasselbe tut, mal mehr und mal weniger regelmäßig, aber stets effektiv und mit dem hochgesteckten Ziel, die Suchergebnisse qualitativ hochwertiger zu gestalten. Um am Ball zu bleiben, gilt es, technisch Schritt zu halten und den Blick über den Tellerrand zu wahren. Strukturierte Daten stellen den Google-Robots alle wichtigen Informationen bereit, die zum effizienten Crawling von Bedeutung sind, was die Arbeit für die Suchmaschine erleichtert und unterm Strich Ressourcen spart. Das ist nicht neu und hat wenig mit den übermächtigen Algorithmen zu tun, ist unseres Erachtens aber dennoch eine sehr wichtige Stellschraube, um für die SERPs zu profitieren. Die bedeutendsten Vorteile im Überblick:

Vorteil 1 – besser ranken

Mit der Strukturierung der Daten erleichtert ihr verschiedenen Suchmaschinen, nicht nur Google, die Inhalte eurer Website besser zu erfassen. Ein Beispiel verdeutlicht den Sinn der Datenstrukturierung: Möchtet ihr eine Seite eures Onlineshops auf den Begriff „Hering“ optimieren, dann weiß die Suchmaschine zunächst nicht, ob ihr einen Hering für das Zelt oder einen zum Verzehr anbietet und erschließt die Semantik, also die inhaltliche Bedeutung des Begriffes, aus dem Kontext. Produktbeschreibungen sind in aller Regel aber deutlich kürzer als Artikel, sodass Ungenauigkeiten bei der Suchmaschinenindexierung vorprogrammiert sind. Entsprechend werden Seiten mit mehr Zusammenhang besser ranken, nicht zwingend, weil deren Güteklasse höher ist als die eurer Website, sondern weil die Qualität exakter erfasst werden kann. Was also liegt näher, als den Suchmaschinen den Kontext mit strukturierten Daten einfach vorzugeben?

Vorteil 2 – stärker auffallen

Strukturierte Daten im SEO dienen nicht ausschließlich dem Wunsch nach einem besseren Ranking, sondern ermöglichen eine Vielzahl zusätzlicher Features innerhalb der sogenannten Rich Snippets. Dabei handelt es sich um Zusatzinhalte, die direkt im Suchergebnis angezeigt werden, zum Beispiel Öffnungszeiten von Ladenlokalen oder Bewertungen von Produkten. Der entscheidende Vorteil liegt hier nicht in der Technik, sondern im Auge des Betrachters, denn alleine durch ein paar zusätzliche Infos hebt ihr euch in den SERPs deutlich von solchen Mitbewerben ab, die keine strukturierten Daten nutzen.

Vorteil 3 – höhere Click-Through-Raten erzielen

Es folgt die logische Konsequenz des zweiten Vorteils: Wenn Besucher schon in den Suchergebnissen aussagekräftige Zusatzinformation erhalten, steigt mit der Auffälligkeit auch die Wahrscheinlichkeit, dass eure Seite durch einen Klick besucht wird. Um beim Beispiel von Produkten zu bleiben, ist klar, dass ein Suchergebnis mit Produktbewertung und Preisanzeige die besseren Chancen auf einen Klick hat. 

Die Masterfrage: Wie funktioniert das Ganze?

Die Website „schema.org“ wurde 2011 von Google, Yahoo und Bing gegründet und bildet den Kern der strukturierten Daten. Dort ist gelungen, was in den meisten anderen IT-Bereichen aufgrund konkurrierender Technologien verwehrt bleibt: ein sprachenübergreifender Standard. Webentwickler können ein Lied davon singen, wie nervenaufreibend es sein kann, alleine Videoinhalte auf verschiedene Browser zu optimieren. Für strukturierte Daten reicht hingegen eine Lösung mit einer der Syntaxen Microdata, JSON oder RDF, um die gängigsten Suchmaschinen zu bedienen. Auf schema.org sind alle Vokabeln sowie unzählige vorgefertigte Funktionen zu finden. 

Checkt mal das Check-Tool

Wie bei vielen anderen Maßnahmen, die den Umgang mit der weltgrößten Suchmaschine betreffen, bietet Google auch für strukturierte Daten eine Qualitätsrichtlinie, an die man sich für den maximalen Erfolg halten sollte. Unter anderem wird darin die Nutzung der Sprache JSON empfohlen, was ohnehin sinnvoll ist, weil diese im Gegensatz zu RDF und Microdata vollkommen unabhängig vom restlichen Code ist und in die Datenbank ausgelagert werden kann. Um zu testen, ob eure Seite bereits strukturierte Daten nutzt oder eure Codes korrekt ablaufen bietet Google ein Test-Tool unter

https://search.google.com/structured-data/testing-tool/u/0/.

Ein Beispiel aus unserem Blog, wie strukturierte Daten in der Praxis aussehen können, findet ihr hier:

https://search.google.com/structured-data/testing-tool/u/0/#url=%20https%3A%2F%2Fwebdesign-vellmar.de%2Fchild-theme-erstellen

Alles klar, aber wie war gleich der Teil vor „Bahnhof“?

Ohne tiefere Kenntnis der Materie können strukturierte Daten im SEO schnell zur Herausforderung werden, bei umfangreichen Projekten zu einer nicht mehr zu bewältigenden Masse. In der Folge wäre eine Suchmaschinen-Optimierung mit SEOPT bzw. Uns (Grips.Art) sinnvoll oder – sofern es die Unternehmensstruktur hergibt – ein Ausbau der eigenen SEO-Abteilung. Trotz möglicherweise hohem Aufwand bleiben wir bei unserer Überzeugung, dass sich der Einsatz strukturierter Daten definitiv lohnt.

Was meint ihr, nutzt ihr die Technik auch und habt ähnliche Erfahrungen gesammelt? Dann hinterlasst uns gerne einen Kommentar.

WordPress‐Hooks die coolsten Aufhänger seit es CMS gibt

Zwei Haken fürs bequeme Coden

Anschaulich erklärt:
Wie WordPress‐Hooks das Leben leichter machen.
So bereicherst du WordPress mit Funktionen, ohne den Core aufzubohren.

Hardcode im Core und das Problem beim WordPress‐Update…

Webentwickler kennen das Dilemma: Will man WordPress mit eigenen Funktionen erweitern, dann heißt es oftmals den Kern aufzubohren und am offenen Herzen zu coden. Nach mehr oder weniger vielen Komplikationen freut man sich dann, das Ergebnis zu haben, das man sich vorgestellt hat. Dabei gibt es allerdings einen kleinen Haken, denn beim nächsten Update geht die komplette Arbeit flöten. Das Übel könnte man nun mit einem mühsamen, ständigen Wiederholen aller Änderungen beseitigen oder mit WordPress selbst, denn das beliebte CMS hat auch Haken, die machen allerdings keine Probleme, sondern lösen sie schnell und elegant. Wir zeigen euch, wie’s geht.

WordPress‐Hooks – die systemeigenen Problemlöser

In unserer komplizierten Welt klingt die Funktionsweise der WordPress‐Hooks beinahe zu einfach, um wahr zu sein, doch es handelt sich tatsächlich um Häkchen, mit denen Funktionen im WordPress‐ Code eingehängt werden wie ein Kleiderbügel auf die Stange. Der riesige Vorteil dabei ist, dass unsere Kleiderbügel nicht irgendwo aufgehängt werden, sondern in der functions.php (Child-Theme) oder direkt in einem externen Plugin. So bleibt der WordPress‐Core unberührt und Änderungen überstehen jedes folgende WordPress‐Update, ohne überschrieben zu werden. Ratsam also, die Hooks genauer zu betrachten, die in zwei Arten unterschieden werden: Actions und Filters.

Action‐Hooks – mach’s einfach, ok?

Die Action‐ und Filter‐Haken funktionieren sehr ähnlich, aber nicht identisch. Vereinfacht ausgedrückt, kommt der Action‐Hook ganz im Wortsinne immer dann zum Einsatz, wenn „sich etwas tut“, wenn an der eingehakten Stelle also eine Aktion stattfinden soll. Beispielsweise könnte mit dem Action‐Hook automatisiert ein Twitter‐Beitrag abgesetzt werden, sobald ein WordPress‐Autor einen neuen Artikel veröffentlicht.

Filter‐Hooks – ein Geben und ein Nehmen

Mit Filter‐Hooks werden Daten abgerufen oder verändert, bevor sie im Browser dargestellt oder in der Datenbank gespeichert werden. Auch hier wird ein Beispiel für Klarheit sorgen: Möchte man am Ende eines Artikels die letzten drei Artikel derselben Kategorie mit einem Auszug von 200 Zeichen darstellen, ist ein Filter das Mittel der Wahl. Dieser greift auf die komplette Kategorie und deren Artikel zu, filtert die definierten Werte und stellt sie an der Stelle des Hooks dar. Entsprechend muss im Gegensatz zu Actions beim Filter mit „return“ ein Wert zurückgegeben werden.

Klingt gut, aber wo ist der Haken – und vor allem:
wie wird eingehakt?

Was die WordPress‐Hooks so großartig macht, ist, dass sie eben an jeder Funktion gesetzt werden können, sei es ein Action‐Hook beim Login oder ein Filter‐Hook bei den Kommentaren, z.B. um gepostete Links zu großen Online‐Shops automatisch mit der eigenen Partner‐ID zu verknüpfen. Der Kreativität sind keine Grenzen gesetzt und WordPress lässt sich bis ins Detail den eigenen Ansprüchen anpassen, ohne den PHP‐Quellcode zu verändern. Das Einfügen der WordPress‐Hooks ist dann auch kein Hexenwerk, sondern ruckzuck erledigt.

Den Action‐Hook setzt Du so:

1
add_action( $tag, $function_to_add, $priority, $accepted_args );

Die Parameter im Überblick:

  •  $tag bezeichnet den Hook, also die Stelle im Code, an der eine Funktion eingehakt werden soll
  •  $function_to_add bestimmt die neue Filterfunktion, die ausgeführt werden soll
  •  $priority gibt die Priorität an, in welcher Reihenfolge Funktionen an dieser Stelle ausgeführt werden sollen. Mögliche Werte reichen von 1‐999, der Standardwert ist 10. (Je geringer der Wert, desto früher erfolgt die Ausführung)
  •  $accepted_args beschreibt die Anzahl der akzeptierten Argumente. Der Standardwert ist 1.

Beim Action‐Hook sind die Standardwerte meist ausreichend, weil an dieser Stelle lediglich eine Aktion ausgeführt und keine Daten ausgegeben werden.

Entfernt wird ein Action‐Hook mit:

1
remove_action( $tag, $function_to_remove, $priority );

Das Setzen und Entfernen des Filter‐Hooks funktioniert genauso:

1
2
add_filter( $tag, $function_to_add, $priority, $accepted_args ); bzw.
remove_filter( $tag, $function_to_remove, $priority );

Die Parameter entsprechen denen des Action‐Hooks, wobei die Anzahl der Argumente beim Filter wichtiger ist, zum Beispiel, wenn aus einem Artikel mehrere Variablen wie Titel, Auszug oder Metadaten gefiltert und ausgegeben werden sollen.

Experimente am lebenden Code – Beispiele für die Praxis

Wie man sieht, sind die WordPress‐Hooks an sich relativ einfach gestrickt und bieten selbst unerfahrenen Webentwicklern unzählige Möglichkeiten, eigene WordPress‐Funktionen umzusetzen. Erfahrenen Codern steht mit den WordPress‐Hooks das Tor zu komplexen Funktionen offen, mit denen sich ganze WordPress‐Auftritte komplett umkrempeln lassen, ohne auch nur eine einzige Zeile im Quellcode anzurühren. Für einen breiteren Einsatz lassen sich ebenso mächtige Plugins realisieren, welche die WordPress‐Performance nicht ausbremsen, sondern – je nach Art – ein Plus an Stabilität und Sicherheit mit sich bringen können. Aber weil ein Code mehr sagt als tausend Worte, haben wir jeweils ein Code‐Schnipsel aus dem WordPress‐Codex zur Illustration der Action‐ und Filter‐Hooks für euch herausgesucht.

Action‐Hook: Im Folgenden erhält der Autor eines Artikels bei Veröffentlichung eine Bestätigung per E‐Mail über wp‐mail:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function post_published_notification( $ID, $post ) {
$author = $post‐>post_author; /* Post author ID. */
$name = get_the_author_meta( 'display_name', $author );
$email = get_the_author_meta( 'user_email', $author );
$title = $post‐>post_title;
$permalink = get_permalink( $ID );
$edit = get_edit_post_link( $ID, '' );
$to[] = sprintf( '%s <%s>', $name, $email );
$subject = sprintf( 'Published: %s', $title );
$message = sprintf ('Congratulations, %s! Your article “%s” has been published.' . "\n\n",
$name, $title );
$message .= sprintf( 'View: %s', $permalink ); $headers[] = '';
wp_mail( $to, $subject, $message, $headers );
}
add_action( 'publish_post', 'post_published_notification', 10, 2 );

Filter‐Hook: Das folgende Beispiel, ebenfalls aus dem WordPress‐Codex, zeigt, wie sich die voreingestellten Maße für eingebettete Medien beispielsweise für ein Child‐Theme per Filter verändern lassen:

1
2
3
4
5
add_filter( 'embed_defaults', 'modify_embed_defaults' ); function modify_embed_defaults() {
return array( 'width' => 750, 'height' => 375
); }

Was für WordPress‐Hooks gibt es denn so?

Der WordPress‐Core bietet eine beachtliche Anzahl bereits registrierter Hooks, an die sich eigene oder veränderte Funktionen andocken lassen. Eine nicht vollständige Übersicht der WordPress‐Hooks liefert das CMS selbst. Die gängigsten Action‐Hooks und Filter‐Hooks findest du im WordPress‐Codex übersichtlich aufgelistet mit teilweise detaillierterer Erklärung.

Action‐Hooks: https://codex.w…Action_Reference
Filter‐Hooks: https://codex.w…Filter_Reference

Woocommerce Hooks:
https://woocommerce.com/…/hook-docs.html

Be inspired – fast grenzenlose Möglichkeiten

Dank der WordPress‐Hooks gibt es im Grunde kaum eine Funktion, die sich nicht realisieren ließe. Vergessen deine Autoren zum Beispiel öfter mal das Beitragsbild bei der Veröffentlichung? Dann mach das Einfügen per Action‐Hook einfach zur Pflicht und lasst im WordPress‐Backend eine Fehlermeldung ausgeben, wenn das Bild vergessen wurde. Oder lasse dich per E‐Mail benachrichtigen, wenn ein Autor drei Mal das falsche Passwort beim Einloggen eingegeben hat.

Möge der Hook mit euch sein

Ganz gleich, wie kreativ deine Funktionen sind, die WordPress‐Hooks erlauben die Ausführung genauso, wie du es wünscht, und genau dort, wo du es willst. Auf diese Weise behälst du die volle Code‐Kontrolle und musst nicht auf dubiose Plugins setzen, die deine Performance ausbremsen, unsicheren Code enthalten oder gar Fehler verursachen. Weil deine Hooks von WordPress‐Updates auch zukünftig nicht überschrieben werden, können vor allem Webentwickler viel Zeit und Aufwand sparen, wenn zahlreiche Kundenprojekte betreut werden müssen.

Sich umfassend in diesem Artikel mit den WordPress‐Hooks zu beschäftigen ist unmöglich, zeigt aber eindrucksvoll, dass sich eine tiefere Auseinandersetzung mit dem Thema lohnt.

Du hast noch Fragen zu diesem Thema?
Stell sie uns unten in den Kommentaren!

Child-Theme erstellen – So wird es gemacht!

Wie und Wieso Sie ein Child-Theme erstellen sollten – erkläre ich Ihnen anhand von praktischen Beispielen im folgenden Tutorial.

Wieso ein Child-Theme erstellen?

Ein Child-Theme ist wohl der eleganteste Weg, Änderungen an ihrem Theme vorzunehmen, ohne die originalen Dateien zu überschreiben.

Das bringt zum einem den Vorteil, immer den Urzustand wiederherstellen zu können, aber viel wichtiger noch, bei einem Theme-Update die Änderungen nicht zu verlieren.

Diese Dinge können Sie mit einem Child-Theme ändern:

  • CSS Anweisungen einfügen oder ändern
  • Aufbau des Themes verändern
  • Theme Funktionen abändern oder hinzufügen
  • Spezielle Seiten-Templates anlegen

Doch Child-Themes haben auch Nachteile, welche das sind, finden Sie hier.

Die rote oder die blaue Pille?

Wie auch in der Matrix, müssen Sie sich für einen Weg entscheiden, gehen Sie den Weg mit einem WordPress Plugin oder erstellen Sie es selbst?

Ich habe für Sie 3 kostenlose Child-Theme-Plugins getestet, mehr dazu erfahren Sie am Ende dieses Beitrages.

Child Theme erstellen in 2 Schritten – Let´s Go!

Schritt 1: Die Child-Theme Grundstruktur

Als erstes verbinden Sie sich mit einem FTP-Programm mit ihrem Server/Webspace und navigieren zu ihrer WordPress-Installation in den Ordner /wp-content/themes . Hier sehen Sie alle Themes die installiert sind.

Auf dieser Ebene erstellen Sie nun einen neuen Ordner und benennen ihn nach folgender Struktur: themename_child
also z.B. twentyseventeen_child,
wenn Sie ein Child Theme für das neue Twenty Seventeen Theme erstellen wollen.

Erstellen Sie eine neue leere Datei mit der Bezeichnung „style.css“ in den eben angelegten Ordner.

Damit WordPress ihr Child-Theme als Theme erkennt, müssen Sie ein paar Zeilen Code in ihre neuen „style.css“ einfügen.

Hier ein Beispiel für das Twenty Seventeen Theme:

1

2

3

4

5

6

7

8

/*

Theme Name: Twenty Seventeen Child-Theme

Description: Ein Child-Theme für Twentyseventeen

Author: IB-IT

Author URI: https://ib-it.com

Template: twentyseventeen

Version: 1.0

*/

 

In Zeile 2 finden Sie den Namen, unter dem Sie Child-Theme später im Backend unter Design / Themen finden.

Am wichtigsten ist hier allerdings Zeile 6, denn hier müssen Sie den Verzeichnis-Namen ihres Parent-Themes, also des Themes für das Sie ein Child-Theme erstellten, einfügen.

Zur Grundstruktur eines Child-Themes gehört eine weitere Datei, die „functions.php“.

Legen Sie also eine neue, leere Datei mit dem Namen „functions.php“ in Ihrem Child-Theme Ordner an.

Mit der „functions.php“ können wir nun unsere CSS-Datei im Theme einbinden, da Sie aber sicherstellen müssen, dass ihre Child-CSS-Datei nach der originalen CSS-Datei geladen wird, müssen Sie erst die originale Datei deregistrieren und danach in der richtigen Reihenfolge wieder registrieren.

Wie das gemacht wird, zeige ich Ihnen hier:

1

2

3

4

5

6

7

8

9

10

<?php

function twentyseventeen_child_styles() {

wp_deregister_style( ‚twentyseventeen-style‘);

wp_register_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style(‚twentyseventeen-style‘, get_template_directory_uri(). ‚/style.css‘);

wp_enqueue_style( ‚childtheme-style‘, get_stylesheet_directory_uri().’/style.css‘,

array(‚twentyseventeen-style‘) );

}

add_action( ‚wp_enqueue_scripts‘, ‚twentyseventeen_child_styles‘ );

?>

 

Der Code schnell erklärt:
In Zeile 2 erstellen Sie eine function, die Sie in Zeile 8 mit der Funktion add_action() einhängen/aufrufen.

In Zeile 3 deregistrieren Sie die Originale CSS-Datei ihres Themes, der Handler (in diesem Fall „twentyseventeen-style“) ist von Theme zu Theme unterschiedlich und muss aus der Parent-Theme functions.php herausgesucht werden.

Im Falle des Twenty Seventeen Themen finden Sie ihn in Zeile 376.
twentyseventeen_child slug

Danach (Zeile 4-6) registrieren Sie die gleiche Datei wieder und binden beide CSS-Dateien, also die Originale und die ihres Child-Themes, in der richtigen Reihenfolge wieder ein.

Schritt 2: Das Backend

Nachdem Sie nun die Grundstruktur ihres Child-Themes erstellt haben, loggen Sie sich in ihr WordPress-Backend ein und navigieren zu den Themes.

wordpress_backend_themes

Genau! Denn das müssen sie noch in ihren Child-Theme Ordner legen.
Hierbei ist lediglich zu beachten, dass die Datei „screenshot.png“ heißen muss und eine Auflösung von 600px mal 450px haben sollte.

Aktivieren Sie nun dein Child-Theme, wie jedes andere Theme auch, über den Button „Aktivieren“.

Schritt 3: Spezifische Seiten-Template erstellen

Wenn Sie spezifische Seiten wie z.B. Beitragsseiten ändern möchten, können Sie dies sehr einfach tun.

Kopieren Sie hierfür die Datei „single.php“ aus ihrem Parent-Theme in dem Child-Theme-Ordner und nehmen ihre Änderungen vor.

Ein Beispiel für einen kurzen Test.

Setzen Sie eine h3-Überschrift in die neue „single.php“ ein und laden diese in ihren Child-Theme-Ordner:

überschrift im child-theme

Öffnen Sie ihren Blog im Browser und navigieren zu einem ihrer Beiträge.

Je nachdem, wo Sie ihre Überschrift im Code platziert haben, sehen Sie sie nun bei jedem ihrer Beiträge.

frontend

Gibt es auch Nachteile von Child-Themes?

Warum legen wir doch gleich Child-Themes an?

Genau, damit Sie Änderungen am Theme vornehmen können, ohne sie bei einem Update zu verlieren.

Aber das heißt auch, eventuelle Sicherheitslücken im Theme werden bei einem Update zwar im Parent-Theme geschlossen, Sie überschreiben den Fix aber mit deiner alten anfälligen Datei im Child-Theme.

Damit ist die Sicherheitslücke praktisch von Ihnen konserviert und existiert auch nach einem Theme-Update.

Also doch kein Child-Theme?

Doch, allerdings mit einem zusätzlichen Plugin.

Mit dem Plugin „Template Checker“ können Sie ihr Child-Theme mit dem Parent-Theme vergleichen, wenn es Unterschiede gibt, bekommen Sie eine Warnung angezeigt und können so entscheiden, ob es Änderungen sind die Sie gemacht haben, oder ob Änderungen am Parent-Theme nach einem Update gemacht wurden.

Mehr Informationen gibt es in dieser Slideshow von Torsten Landsiedel:

Child-Theme erstellen – mit einem Plugin

Für alle die mit noch weniger Aufwand diese Aufgabe erledigen wollen, gibt es wie für alles andere natürlich auch Plugins.

Aus diesem Grund habe ich die 2 am meisten aktiv genutzten Plugins aus der WordPress.org Plugin Liste ausprobiert und mir den Code der produziert wird genauer angeschaut.

child-theme-plugins

Das Plugin mit den meisten aktiven Installationen ist Child Theme Configurator von Lilaea Media. Bereits ziemlich abgeschlagen liegt das Child Theme Creator by Orbisius von Svetoslav Marinov.

Child Theme Configurator

  • Sehr übersichtliches Backend
  • Optionen gut und einfach beschrieben
  • Spezifische Dateien können eingebunden werden
  • Sauberer Quellcode

Orbisius Theme Editor

  • Spezifische Dateien können eingebunden werden
  • Dateien können im Backend angepasst werden
  • Erstellt unnötig 3 Seiten im Backend – Unübersichtlich am Anfang
  • Erstellt ohne Nachfrage direkt header.php und footer.php im Child-Theme

Fazit

Mit wenigen Handgriffen ist ein Child-Theme erstellt – ganz egal ob mit oder ohne Plugin.

Die Vorteile liegen auf der Hand und ich empfehle jedem ein Child-Theme anzulegen. Auch wenn man bezüglich der oben genannten Möglichkeiten von Sicherheitslücken immer ein Auge darauf behalten sollte.
Ich wünsche dir viel Spaß beim editieren deines Designs!

 

Haben Sie noch Fragen zu diesem Thema?
Dann beantworte ich diese gerne in den Kommentaren!

 

Mobile‐Shopping: Das Grundrecht für moderne Käufer

Wir wollen kaufen, wie und wann wir wollen – auch mit WordPress

Die Generationen verschieben sich und der moderne Konsument greift nicht mehr zu Zettel und Bleistift, um eine kleine Einkaufsliste zu schreiben, sondern zum Smartphone in der U‐ Bahn oder zum Tablet auf dem Sofa. Auf den mobilen Geräten werden die Wunschprodukte dann unmittelbar in den Warenkorb gepackt und erreichen meist einen Tag später den Käufer als zufriedenen Kunden – ein Paradigmenwechsel, dessen erfolgreiche Nutzung im Grunde auf drei Grundrechten beruht. Diese Grundrechte sowie die aktuellen Zahlen des Marktforschers Bitkom zum Onlineshopping in Deutschland verdeutlichen, warum auch kleine und mittlere Onlineshops ihren Erfolg mit mobiler Optimierung deutlich verbessern können:

Die Grundrechte des Onlineshoppings
Artikel 1 – Onlinekonsum

(1) Der Konsum der User ist unantastbar. Ihn zu achten, zu schützen und zu jeder Zeit, an jedem Ort nutzbar zu machen, ist Verpflichtung aller Onlineshop‐Betreiber.

Artikel 2 – Allgemeine Produktfreiheit

(1) Jedes Produkt hat das Recht auf die freie Entfaltung seiner Persönlichkeit soweit es nicht die Rechte anderer verletzt oder gegen geltende Gesetze verstößt.

(2) Nutzen Sie dieses Recht und versuchen Sie erst gar nicht, mit ähnlichen, größeren Anbietern zu konkurrieren – seien Sie kreativ, bleiben Sie einzigartig!

Artikel 3 – Gleichheit vor dem User

(1) Alle Geräte sind vor dem User gleich – ob Desktop, Laptop, Smartphone oder Tablet.

Darum sollten Onlineshop‐Betreiber die Grundrechte beherzigen

Mobile‐Shopping ist nicht mehr zu bremsen: Das Smartphone ist zum ständigen Begleiter einer großen Mehrheit geworden, der mobile Internetzugang zu immer günstigeren Preisen oftmals gleich mit an Bord. Damit steht dem schnellen Einkauf im Wartezimmer des Zahnarztes nichts mehr im Weg und auch die Zeit bis die Dauerwelle richtig sitzt kann unterhaltsam überbrückt werden. Nein, bei den Beispielen handelt es sich nicht um Klischees, sondern um Teilergebnisse einer Umfrage des Marktforschers Bitkom zum mobilen Shopping in Deutschland. Die Trendkurve? Steil nach oben!

Zahlen der Bitkom‐Umfrage:

  • 98% aller Internetnutzer ab 14 Jahren haben im vergangenen Jahr online eingekauft
    • 4% kaufen täglich im Internet ein
    • 14% shoppen ein‐ oder mehrmals pro Woche im Internet
    • 47% ein‐ oder mehrmals pro Monat
  • 68% der Einkäufe wurden mit dem Smartphone getätigt
  • Die beliebtesten Produkte
    • Kleidung (82%)
    • Bücher (76%)
    • Elektronische Haushaltsgeräte (59%)
    • Pharmaprodukte (56%)
    • Heimwerkerbedarf (38%)
    • Kosmetik (55%)
    • Tierfutter (25%)
    • Lebensmittel (24%)

Ein mobiler Onlineshop lohnt immer
und WordPress ist eine große Hilfe dabei

Im Zeitalter der Massenkommunikation hat man gegen die Massenanbieter von Massenprodukten doch gar keine Chance und außerdem ist der Aufwand für mobile Onlineshops viel zu hoch für ein paar kleine, hochwertige, liebevoll hergestellte Produkte, die nur darauf warten, entdeckt zu werden? Zweimal: nein. Handgemachte Produkte boomen, Manufakturen sprießen aus dem Boden wie Pilze und WordPress ist eine günstige, pflegeleichte Lösung, um die Sachen an den Mann, an die Frau und ins Internet zu bringen – auch mobil. Falls Sie also gute Ideen haben oder schon fertige, tolle Produkte, dann sollte es an der technischen Umsetzung nicht scheitern. WordPress bietet mittlerweile großartige Möglichkeiten für Onlineshops und falls Sie dafür professionelle Unterstützung benötigen, wissen Sie ja, wo Sie uns finden.

Sicher im Netz – WordPress Security leicht gemacht

WordPress Sicherheit
Die Lebensversicherung für Ihre Website

Wer sollte meine Website schon hacken wollen? Wir sind doch nur ein regionales Unternehmen und haben keine Feinde. Solche oder ähnliche Aussagen hört man oft, wenn es um die optimale WordPress Sicherheit des eigenen Internetauftritts geht. Das Problem daran: Nur in den allerseltensten Fällen werden Websites gezielt angegriffen. Der Mammutanteil der Opfer wird automatisiert und damit völlig zufällig ausgewählt. Wenn Ihre Website also Schwachstellen hat, dann ist sie gefährdet, ganz gleich, ob Sie nur einen Besucher im Monat aufweist oder eine Million. Lösung des Problems? Klar, einfach keine Schwachstellen zulassen.

Noch ganz dicht?
Die Schwimmflügel der WordPress Security

Die gigantischste Festung nutzt nichts, wenn der Haupteingang offen steht. Klingt logisch, ist für viele Internetnutzer aber eine Herausforderung, weil die Einrichtung von Content‐Management‐Systemen wie WordPress zwar immer einfacher wird, dafür allerdings serverseitige Sicherheitsaspekte in den Hintergrund geraten. Dabei bilden Dateiberechtigungen, ein effektiver htaccess‐Schutz der sensiblen wp‐admin‐php‐Seite sowie SSL‐Verschlüsselungen den Grundstein für die gesamte WordPress Sicherheit.

Immer up to date?
Der Lückenschließer am Puls der Zeit

WordPress verlangt schon wieder ein Update, um Sicherheitslücken zu schließen? Es stimmt, Updates können nerven, besonders dann, wenn viele Plugins verwendet werden, von denen jedes Einzelne zusätzlich ständig aktualisiert werden muss. Allerdings führt an den Updates kein Weg vorbei: Nur wenn alle Komponenten auf dem neuesten Stand sind, ist die WordPress Sicherheit gewährleistet.

Ist weniger mehr?
Wordpress Security Plugins meist nicht mehr als schicker Ballast

WordPress bietet mit seinen Plugins eine unglaubliche Vielfalt – auch für die Sicherheit. Allerdings kostet jedes weitere Plugin Serverperformance und kann seinerseits zum zusätzlichen Schwachpunkt für Angreifer werden. Entsprechend sollten die Erweiterungen sorgfältig auf den tatsächlichen Nutzen hin überprüft werden. Mit den zuvor genannten, korrekten Sicherheitseinstellungen sind viele WordPress Security‐Plugins schlicht und ergreifend überflüssig.

Und wenn’s mal kracht?
Backups können Leben retten… oder den Job des Admins

Falls trotz größter Vorsicht einmal etwas schief gehen sollte, brauchen Sie sich keine Sorgen machen, sondern können Ihre Daten ganz einfach aus Ihren Backups wieder einspielen. Die haben Sie doch, oder? Die Backups. Nein? Dann wird es aber allerhöchste Zeit, ganz ehrlich jetzt. Und falls Sie nicht so genau wissen, wie Sie das anstellen sollen mit den Backups, dann rufen Sie uns doch einfach an. Wir machen das schon.

WordPress Sicherheit vom Profi
Unsere Leistungen im Überblick:

  •   Korrekte Vergabe der Dateirechte auf dem Server
  •   Sichere Einrichtung von SSL‐Zertifikaten
  •   Serverseitiger htaccess‐Schutz der wp‐admin.php‐Seite
  •   Updates von WordPress und den genutzten Plugins schnellstmöglich nach Verfügbarkeit
  •   Regelmäßige Datensicherung durch monatliche Backups
Sie möchten bei der WordPress Sicherheit keine Experimente starten und lieber gleich auf erfahrene IT‐Profis vertrauen? Dann kontaktieren Sie uns gleich – wir unterstützen Sie gerne.

WordPress Timeline Tutorial

WordPress Timeline
Die Blogübersicht in einer Timeline darstellen

Worum geht es in diesem Tutorial und für wen ist es?
In diesem WordPress Timeline Tutorial zeigen wir euch, wie ihr aus einem HTML/CSS Snippet eine automatisierte Funktion für WordPress macht.
Ihr solltet hierfür Vorkenntnisse in HTML, CSS und PHP haben, wovon wir aber ausgehen, da dieses Tutorial wahrscheinlich
nur für Leute interessant ist, die ihr eigenes Theme schreiben wollen. Des Weiteren basiert der hier gezeigte Code auf dem Framework
Bootstrap, euer Theme solltet ihr also mit Bootstrap entwickelt haben, um dieses WordPress Tutorial erfolgreich absolvieren zu können.

Wie fangen wir also an?

Zuerst brauchen wir die Datei, die in unserem Theme verantwortlich für die Blog-Übersicht ist.
Dies ist die “index.php”, welche ohne jegliche Inhalte ersteinmal so aussehen sollte:

1
2
3
4
<?php get_header();?>
<body <?php body_class($class);?>>
<?php $permalink=get_permalink($id,$leavename);?>
<?php get_footer();?>

Die 4 Code-Zeilen schnell erklärt:
Zeile 1: Wir includen unsere “header.php” in die Seite.
Zeile 2: Wir geben unserem Body-Tag eine Klasse.
Zeile 3: Wir holen uns unseren Permalink
Zeile 4: Wir includen unsere “footer.php” in die Seite.

Das Snippet

Wo bekomme ich eigentlich Snippets her?
Hierfür gibt es sehr viele Anlaufstellen im Internet. Google spuckt tausende von Ergebnissen aus. Mit der Zeit jedoch sammeln sich Seiten an, auf denen man bevorzugt schaut. Eine dieser Seiten ist bei uns bootsnip.com, von der wir für dieses Tutorial auch ein Snippet verwenden werden.

Das WordPress Timeline Tutorial Snippet:
Zigzag Timeline Layout” von “andrewnite
(Thank´s for this nice snippet andrew!)

wordpress tutorial timeline
OK, wir haben jetzt ein Snippet und wollen diese Timeline für WordPress umsetzen.
Wir verzichten allerdings auf die Überschrift und den Text über der Timeline.

Als Erstes kopieren wir den Snippet-CSS-Code in unsere CSS-Datei. Danach reduzieren wir den Snippet-Code ersteinmal auf das Wesentliche.

Der Snippet HTML-Code auf das Wesentliche reduziert sieht dann so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
        <li>
          <div class="timeline-image">
            <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt="">
          </div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4>Step One</h4>
            </div>
            <div class="timeline-body">
              <p class="text-muted">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
          </div>
          <div class="line"></div>
        </li>
      </ul>
    </div>
  </div>
</div>

Diesen fügen wir nun in unsere index.php ein, um das Grundgerüst zu haben. Nun ist das Ganze aber noch statisch und bringt uns nicht viel. Bringen wir also unser Beitragsbild, den Titel, Post, Datum/Uhrzeit, etwas vom Content und natürlich den Link zum Blogbeitrag in´s Spiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <ul class="timeline">
       <?php if(have_posts()):while(have_posts()):the_post();?>
        <li>
          <div class="timeline-image">
            <?php if(has_post_thumbnail()){?>
            <a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">
            <?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>
            <?php }else{?>
            <a href="<?php the_permalink()?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>
            </a>
          </div>
          <div class="timeline-panel">
            <div class="timeline-panel">
               <div class="timeline-heading">
                     <a href="<?php the_permalink()?>" style="color:#1e71b8" rel="bookmark" class="title">
                       <h3><?php the_title();?></h3>
                     </a>
                   <h4 class="subheading"><?php the_date();?> | <?php the_time();?></h4>
                 </div>
                 <div class="timeline-body">
                   <p class="text-muted"><?php the_excerpt();?></p>
                 </div>
               </div>
             <div class="line"></div>
        </li>
        <?php endwhile;endif;?>
      </ul>
    </div>
  </div>
</div>

Code-Erklärung:
Zeile 5: Der Standard WordPress Loop, welchen wir in Zeile 32 wieder schließen.

Zeile 8: Eine Bedingung stellen: Wenn der Beitrag ein Beitragsbild hat, dann….
Zeile 9:

1
<a href="<?php the_permalink();?>" title="<?php the_title_attribute();?>">

Wir erstellen einen Link zum Beitrag, inklusive des Titel-Tags, welcher den Blogbeitrags-Titel enthält.

Zeile 10:

1
<?php the_post_thumbnail('thumbnail',array('class'=>"img-circle img-responsive"));?>

Hier lassen wir das Beitragsbild darstellen, fügen jedoch die CSS-Klassen “img-circle” und “img-repsonsive” hinzu.
Zeile 11: Wir schließen die if-Bedingung und geben mit else eine Anweisung, was passieren soll, wenn kein Bild vorhanden ist.

Zeile 12-15:

1
2
3
4
<a href="<?php the_permalink()?>" title="<?php the_title_attribute();?>">
            <img src="<?php echo get_template_directory_uri();?>/img/blog.jpg" class="img-circle img-responsive" />
            </a>
            <?php }?>

Ich denke zum Link muss ich nichts mehr sagen, da wir ihn bereits bei Zeile 9 besprochen haben. In Zeile 13 lassen wir nun ein Bild darstellen, welches wir uns selbst aussuchen und mit in unseren Themeordner legen. In unserem Fall haben wir im Themeordner noch einen Unterordner mit dem Titel “img” angelegt. In Zeile 15 schließen wir unsere Else-Bedingung.
Wenn wir dies jetzt aufrufen würden, würde das Beitragsbild vom vorhandenen Beitrag schon in unseren Kreisen sein. Sollte kein Beitragsbild im Backend definiert sein, erscheint unser ausgewähltes Standardbild.

Zeile 21-23:
Unser Beitragstitel als simple H3 Überschrift verlinkt mit dem Beitrag.

Zeile 24:
Ausgegeben wird eine H4-Überschrift, welche das Erstelldatum und Uhrzeit unseres Beitrages beinhaltet.

Zeile 27:
the_exerpt gibt den Beitragsinhalt aus. Achtung diesen müssen wir noch über unsere functions.php limitieren.

Zeile 32:
Wir schließen den WordPress Loop.

Die Länge des Beitragsausschnitts beeinflussen

Damit in unserer WordPress Timeline nicht der gesamte Inhalt unserer Blogbeiträge erscheint, müssen wir diesen limitieren. Am einfachsten machen wir das über die functions.php unseres Themes.
Der Quellcode hierfür sieht wie folgt aus:

1
2
3
4
5
6
<?php
function custom_excerpt_length( $length ) {
    return 30;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
?>

Nun haben wir unsere WordPress Inhalte in das statische Snippet gebracht und daraus eine dynamische Seite gemacht.
Dann ist das WordPress Timeline Tutorial hier wohl zu Ende, oder?

Nicht wirklich! Habt ihr euch eure Seite schon angeschaut?
Richtig, alle Beiträge sind auf der Linken Seite und nicht im ZigZag wie das Snippet verspricht.

Wir haben auch etwas ganz Entscheidendes weggelassen, denn wie im Snippet zu sehen ist, hat jedes zweite Timeline-Element eine zusätzliche CSS-Klasse.
Doch wie sollen wir Elementen, die wir in unserer index.php gar nicht geschrieben haben, sondern dynamisch erzeugen, eine zusätzliche CSS-Klasse geben?

Wir behelfen uns mit einem kleinen Trick!
Was wissen wir?
Wir wissen, dass jeder zweite Beitrag betroffen ist. Zusätzlich wissen wir, dass die Klasse “timeline-inverted” heißt.

Na dann lassen wir doch unsere Elemente erstmal zählen, teilen sie dann durch 2 und geben den Elementen die teilbar sind unsere CSS-Klasse.
Und wie geht das? 🙂

1
2
3
4
<ul class="timeline">
   <?php $i=0;?>
    <?php if(have_posts()):while(have_posts()):the_post();?>
     <li class="<?php $i++;if($i % 2!=1){echo "timeline-inverted";}?>">

Vor unserem Loop setzen wir unsere Variable i (die Beitragszahl), welche 0 beträgt. In unseren Timeline li-Elementen addieren wir dann jeweils unsere Variable um eins ($i++). Mit einer if-Abfrage fragen wir nun ob unsere Variable “i” durch 2 teilbar ist ($i % 2!=1) und geben nur wenn sie es ist “timeline-inverted” aus.

F5 oder Refresh!

Nachdem wir nun auch jedem zweiten Beitrag eine zusätzliche Klasse gegeben haben, funktioniert unsere “ZigZag-Timeline” wie gewünscht. Nun solltet ihr noch die Standard-Elemente einer Website einfügen, wie z.B. euer Seitenmenü und so weiter…
Ich hoffe wir konnten euch helfen und ihr habt ein bisschen was gelernt. Dies ist nun das erste Tutorial welches wir veröffentlichen und hoffen auf ein bisschen Feddback in den Kommentaren 😉

Schöne Grüße und Ahoi!

Gutes Ranking? Guter Traffic! Such­maschinen­optimierung

Prominent platziert: Suchmaschinen­optimierung vom Profi

SEO concept_klein
Stellen Sie sich vor, Sie haben eine Website und niemand besucht sie. Dann müssen Sie das natürlich schleunigst ändern und dafür sorgen, dass Ihre Internetpräsenz so einfach wie möglich gefunden wird. Mit der SEO – auf Deutsch: der Suchmaschinen­optimierung – stehen effektive Möglichkeiten zur Verfügung, Ihre Sichtbarkeit in Suchmaschinen zu erhöhen, damit Ihre Seite nicht nur existiert, sondern zum lebendigen Besuchermagneten wird.

Raus aus dem Versteck, rein ins Getümmel

Internetbesucher sind mit der Laufkundschaft in einer Einkaufsstraße zu vergleichen. Solange sich Ihr Laden unscheinbar in einer kleinen Seitengasse befindet, werden sich Neukunden nur selten zu Ihnen verirren, ganz gleich, wie gut Ihr Angebot auch sein mag. Ein paar Schilder oder Wegweiser in der belebten Innenstadt können die Situation allerdings deutlich verbessern und Interessenten gezielt zu Ihrem Unternehmen lotsen. Genau das geschieht im übertragenen Sinne bei der Suchmaschinen­optimierung mit Ihrer Website.

Google hat nur eine Seite: die erste

Internetbesucher landen gerne schnell am Ziel. Entsprechend entstehen die meisten Klicks auf der ersten Ergebnisseite von Suchmaschinen und selbst dort nur überwiegend im oberen Sichtbereich. In den Suchergebnissen genau dort zu landen, nämlich oben, ist natürlich Ziel jeder Suchmaschinen­optimierung – von der Keyword‐Analyse über Backlinks bis hin zum optimierten Pagespeed.

Zwischen Kunst und Handwerk – Sinnvolle Suchmaschinen­optimierung

Um eine Website optimal in den wichtigsten Suchmaschinen zu positionieren gibt es kein Patentrezept. Umso wichtiger ist es, einen Anbieter zu wählen, der neben dem technischen Knowhow zur Suchmaschinen­optimierung auch ausreichend Erfahrung auf diesem Gebiet mitbringt. Bei GripsArt bieten wir Ihnen beides und pushen Ihre Website in die Riege der Spitzenränge – das bringt Ihnen mehr Besucher und erhöht Ihre Wettbewerbsfähigkeit.

Unsere Suchmaschinen­optimierung im Überblick:

  •   Analyse des Ist‐Zustands Ihrer Website
  •   Keyword‐Analyse
  •   Umfassende Suchmaschinen­optimierung Onsite und Offsite

Auch Sie wünschen sich mehr Besucher auf Ihrer Website? Dann kontaktieren Sie uns gleich und die Suchmaschinen­optimierung kann beginnen.

Auf allen Geräten beeindrucken: Responsive Design für Ihre Website

Responsive Design –
So flexibel muss mobil sein

Nur schnell einen Preis nachschauen, kurz das Bankkonto checken oder die aktuellen Staumeldungen prüfen – immer und überall. Was früher noch unmöglich schien, ist heute nicht mehr aus dem Alltag wegzudenken und bereits über die Hälfte aller Internetnutzer sind mit ihren mobilen Geräten online. In der grenzenlos scheinenden Welt von Smartphones und Tablets gibt es nur einen klitzekleinen Haken: Nicht alle Websites sind für die Darstellung auf mobilen Geräten geeignet.

Die Aufgabe für Anbieter? – Schritt halten

Nutzer von Smartphones und Tablets machen kurzen Prozess. Ist eine Website nicht für die mobile Darstellung optimiert oder lässt sie sich auf dem mobilen Gerät nur kompliziert bedienen, wird die Seite einfach geschlossen. Ihre Inhalte oder Produkte spielen dann kaum noch eine Rolle im mobilen Internet. Wie lässt sich das aber verhindern? Für jedes Gerät eine eigene mobile Website einrichten?

Die smarte Lösung: Eine Website für alle Geräte!

Jeden Tag wächst die Zahl mobiler Internetnutzer und mittelfristig auch die Vielfalt mobiler Geräte. Mit einem responsive Design passt sich Ihre Website automatisch den unterschiedlichen Bildschirmgrößen an und macht auf allen Geräten eine gute Figur – optisch und funktional. Damit sind Sie technisch auf dem neuesten Stand und sichern die Usability für Ihre Besucher, ganz gleich, ob am heimischen TV‐Gerät, auf dem Smartphone oder mit dem Tablet.

Ihre Website in Topform? – Wir unterstützen Sie dabei

Ein responsive Design sorgt nicht nur bei Ihren Besuchern für eine bequeme, zufriedenstellende Online‐Erfahrung, sondern spart langfristig Ressourcen, weil Sie nur noch ein einziges Template benötigen. Selbstverständlich schneiden wir das Design individuell auf Ihre Ansprüche zu und gewährleisten eine optimierte technische Umsetzung.

Unser responsive Design im Überblick:

  •  Nur ein Template für die optimierte Darstellung Ihrer Website auf allen Geräten
  •  Realisation für WordPress, Typo3, Magento, usw.
  •  Individuelle Lösungen mit HTML5, PHP und Javascript

Profitieren Sie von unserer Erfahrung im responsive Design und kontaktieren Sie uns gleich – wir freuen uns auf Ihre Anfrage.
Hier können Sie mit uns Kontak aufnehmen.

Folgen Sie uns auch bei Facebook