headerbild_livepreview

Design anpassen mit Live-Vorschau

Es gibt die Möglichkeit sein eigenes Theme über den Menüpunkt Design / Anpassen mithilfe einiger Codezeilen sehr nutzerfreundlich anzupassen. Dabei gibt man dem User die Möglichkeit das Theme anzupassen und das Ergebnis direkt im Live-Reload zu sehen. WordPress spricht hier vom Theme Customization.

Man kann Farben, das Logo oder auch einfach nur Textfelder editierbar machen und die Änderungen direkt im Vorschaufenster sehen. Im folgenden Beispiel geht es um ein austauschbares Logo.

Als erstes geht man in die functions.php und gibt folgende Zeilen ein, um die Customize(Anpassen)-Seite um die Logo-Option zu erweitern:

Jetzt sieht man im Backend Design / Anpassen ein weiteres Feld mit der Möglichkeit ein Bild hochzuladen. Aber natürlich tut sich auf der Seite noch nichts, da an der entsprechenden Stelle im Theme noch ein php Schnipsel fehlt zum Auslesen der Daten.

Dafür geht man in die Template Datei, in der Regele die header.php und sucht die Stelle raus an der das Logo erscheinen soll. Dort kommt folgender Code hinein (das ist nur ein Beispiel. Klassen können natürlich verändert werden). WICHTIG ist die ID logo. Über die ID wird der DIV referenziert, damit der Live-Preview funktioniert:

get_theme_mod() holt sich entsprechende Daten aus der Datenbank. Hier wird also die URL des Logos ins HTML geladen. Was noch nicht funktioniert ist der Live-Reload der Seite beim Auswechseln des Logos. Dafür brauchen wir noch ein kleines js File. jQuery ist dafür auf der Seite Voraussetzung. Das sollte allerdings standardmäßig bei WordPress geladen werden.

Ihr erstellt also eine js Datei (z.B. theme-customize.js) und packt die in eurem Template Verzeichnis in einen scripts Ordner:

Was jetzt funktioniert, ist der Austausch des Logos über die „Anpassen Seite“. Was nicht funktioniert, ist der Live-Reload der Seite. Dafür muss die js korrekt über die funktions.php in den head eingebunden werden. Hier der Code für das Einbinden des Live-Preview Scripts:

Wenn alles korrekt eingebunden wurde, könnt Ihr jetzt dynamisch im Backend das Logo austauschen.

Ich erweitere die Anleitung demnächst um CSS Styles für den Live-Preview.

 

Weiterführende LinksWP Customize API

Anzeige


headerbild_cpt

Tutorial: Custom Post Types

Custom Post Types sind eine hervorragende Möglichkeit um eine WordPress Installation individuell zu erweitern. Es können Mitarbeiter, Prospekte, Modelle, oder sonst irgendwas definiert werden und im Backend gepflegt werden.

Diese lassen sich dann mit Hilfe einer einfachen Query im Template auslesen und darstellen. Die Post Types lassen sich ebenfalls kategorisieren und verschlagworten. Das ganze definiert man in der Funktion, welche in die functions.php kommt. Es gibt natürlich auch diverse Plugins dafür, aber jedes Plugin, welches wir uns sparen können, lassen wir weg. Selbst zu entwickeln macht eh mehr Spaß.

Im Folgenden ist der Beispiel-Code für einen Mitarbeiter Custom Post Type.

 

Query für den Custom Post Type

In eurem Template könnt Ihr jetzt die Mitarbeiter auslesen, indem Ihr folgenden Code eingebt. Damit werden alle Mitarbeiter aufgelistet.

 

Weiterführende Links: WordPress Codex

Anzeige


headerbild_sicherheit

Eine WordPress Seite sicher einrichten

Hier gibt einen kleinen fünf Schritte Guide, der Dir helfen soll, Deine WordPress Installation sicher einzurichten. Dabei geht es um grundlegende Einstellungen, die man vornehmen sollte, um sich gegen Hacker-Angriffe zu schützen. Darüber hinaus gibt es natürlich noch viel mehr Möglichkeiten, um sein WP sicher zu gestalten. Gerne erweitern wir den Guide entsprechend im Nachhinein…

Benutzername

Bei der Einrichtung werdet Ihr nach dem Administrator Benutzernamen gefragt. Nehmt nicht den Standard, also „admin“. Entscheidet euch für irgendetwas anderes, denn sonst macht Ihr es automatisierten Angriffen noch einfacher, die Login Kombination zu knacken.

 

Updates

Es ist enorm wichtig das System immer aktuell zu halten. Ob WordPress selbst, oder einzelne Plugins. Haltet es immer auf dem laufenden. Denn veraltete Plugins können Sicherheitslücken beinhalten. Werden diese nicht geschlossen, ist die Seite deutlich anfälliger für Hacks.

Wer keine Lust hat dauernd ins Backup zu gucken, kann sich ein Plugin installieren, welches einen über anstehen Updates benachrichtigt.

WP Updates Notifier

 

DB-Präfix

Bei der Einrichtung eurer wp-config.php Datei solltet Ihr drauf achten, dass Ihr nicht den Standard Präfix verwendet. Standardmäßig ist er auf „wp_“ gesetzt und sollte von euch vor der WordPress Installation geändert werden.

Standard Präfix

 

Eigener Präfix

 

Dadurch verringert man die Chancen von automatisierten Angriffen auf die Datenbank. Diese suchen in der Regel nach den Standardeinstellungen von WordPress. Diese sind also weitesgehend von euch zu individualisieren.

 

Und wo Ihr gerade in der wp-config seid, achtet drauf, ob der Sicherheitsschlüssel automatisch eingerichtet wurde. Wenn nicht, könnt Ihr ihn hier generieren und entsprechend ersetzen..

 

Passwort

Ein leidiges Thema. Generiert euch ein sicheres Passwort. In diesem zwar alten, aber dennoch inhaltlich aktuellen Beitrag, sind die 25 meist verwendeten Passwörter aufgelistet. Von solchen Listen gibt es noch viel mehr und noch viel ausführlichere. Solche können automatisiert mit Benutzernamen zum Login ausprobiert werden. Oft werden Benutzernamen bei Blogeinträgen mit angezeigt. Von daher ist dieser bereits bekannt.

Verringert die Chancen solcher Login Automatismen und generiert euch ein sichere Passwort. Als Hilfe könnt ihr Seiten wie den Passwort-Generator nutzen. Nehmt ruhig ein zehn stelliges Passwort mit Sonderzeichen. Auf euren Geräten, könnt ihr es ja für zukünftige Logins abspeichern.

 

Backups

Falls doch noch etwas passieren soll, sind Backups von Dateisystem und von der Datenbank gold wert! Das Einrichten automatischer Backups ist keine Kunst und sollte immer Standard sein.

Besonders einfach macht es einem das Plugin BackUpWordPress. Plugin installieren, aktivieren und dann einrichten. Dabei reicht ein wöchentliches Datenbakup und ein tägliches Datenbankbackup aus.  Denkt dran, nicht alle Backups zu behalten, denn sonst ist der Server bald voll. jeweils die letzten fünf sollten ausreichen.

BackUpWordPress

Anzeige


headerbild_child-theme

Tutorial: Child-Theme

Ein Child-Theme zu nutzen ist sehr praktisch, wenn man Anpassungen an nicht selbst entwickelten Themes vornehmen möchte.

Ändert man den Code eines Themes, läuft man bei jedem Update die Gefahr, dass die Änderungen rückgängig gemacht werden, da sie überschrieben werden. Für viele ist dann die Lösung, das Theme nicht zu updaten, was allerdings gefährlich sein kann. Denn ein Theme kann immer Sicherheitslücken aufweisen, die nur durch Updates und Weiterentwicklung geschlossen werden können.

Deshalb basteln wir uns ein Child-Theme. Dabei wird ein zweites Theme erstellt, welches die Funktionen und Styles eines anderen Themes erbt. Alle im Child Theme definierten Änderungen, werden dem Eltern-Theme dann vorgezogen.

Im Grunde genommen, benötigt man nur zwei Dateien:

style.css & function.php

 

Schritt für Schritt am Beispiel des Themes „Twenty fifteen“

Anlegen des Child-Theme Ordners:

Im Ordner wp-content/themes/ legst Du einen Ordner für Dein Child-Theme an: „twenty-fifteen-child“.

 

Anlegen der beiden Dateien:

In dem Ordner erstellst du die style.css und die functions.php.

 

style.css

Diese Datei sorgt für Deine CSS Anpassungen.

 

function.php

Hier wird die CSS Datei des Eltern-Theme geladen.

 

Sind Übersetzungen des Themes erforderlich? Dann solltest Du entsprechend die language Files Des Eltern-Themes laden und im Child-Theme bearbeiten. Dafür musst Du entsprechend den Ordner im Child-Theme erstellen und die .mo und .po Daten hinein kopieren.

Wichtig ist dabei, dass die Dateien korrekt benannt sind: languages/de_DE.mo

 

screenshot.png

Als letzten optionalen Schritt, kannst Du Dir noch eine screenshot.png Bild-Datei in den Child-Theme Ordner legen. Damit hast Du fürs Backend eine schöne Möglichkeit, Dein Theme zu individualisieren. Nimm Dir dafür einfach die png Datei aus dem Theme und bearbeite sie.

 

Was schreibt Ihr alles in eure functions.php?

Anzeige


headerbild_plugin_widget

Wie schreibt man ein Widget Plugin?

Um an einem praktischen Beispiel ein Plugin zu schreiben, welches ein Widget registriert, suchen wir uns einen Anwendungsfall der für viele andere Anwendungen nützlich ist.

Letztendlich sind es drei Schritte:

  1. PHP Datei erstellen
  2. Plugin aktivieren
  3. Widget aktivieren und positionieren

Aber der Reihe nach:

PHP Datei erstellen

Um das ganze praktisch zu beschreiben, basteln wir uns hier ein Plugin, welches ein Widget registriert, mit dem wir eine adsense Werbefläche in der Sidebar anzeigen. Eine Plugin Datei beginnt immer mit dem Part in welchem Du Dein Plugin beschreibst.

 

 

Danach geht es mit dem Grundgerüst des Widgets weiter.

 

Datei hochladen

Die php Datei wird nun in Plugins Verzeichnis Deiner WordPress Installation hocgeladen und kann im Anschluss im Backend unter Plugins aktiviert werden.

 

Widget platzieren

Nach der Aktivierung des Plugins, steht das Widget unter Design >> Widgets zur Verfügung.

 

Anzeige