WordPress

WordPress ist eine freie Software, die unter der GNU General Public License (GPL) lizenziert wurde. WordPress basiert auf der Skriptsprache PHP und benötigt eine MySQL-Datenbank. Laut Aussage der Entwickler rund um Matthew Mullenweg legt WordPress besonderen Wert auf Webstandards, Eleganz, Benutzerfreundlichkeit und leichte Anpassbarkeit. Derzeit arbeite ich an mehreren WordPress Sites und habe auch meine gute alte MediaWiki-basierte Seite umgestellt.

Akzeptanz

Akzeptanz_einer_Website

Akzeptanz ergibt sich aus mehreren Faktoren

Wann ist eine Internetseite „gut“? Eine gute Frage auf die man nicht mit einer einfachen Antwort antworten kann. Die Akzeptanz einer Internetseite hängt im wesentlichen von drei Faktoren ab:

  • Inhalt
  • Design
  • Funktionen

Dabei sollte sich eine „gute“ Internetseite stets diese drei Faktoren berücksichtigen. Eine Seite ohne nennenswerten Inhalt mag toll aussehen und alle möglichen Features wie Wettervorhersage-App, RSS-Feeds, Anzeige der IP-Adresse und Serverauslastung bieten. Die Seite wird dadurch nicht besser. Das andere Extrem wäre eine Seite, voll gestopft mit Text, aber ohne Links und Textformatierungen.

Eine gute Seite bietet guten Inhalt, lässt sich leicht bedienen und sieht auch noch ansprechend aus. Der „blaue Akzeptanzkreis“ im nebenstehenden Bild füllt dann das Dreieck möglichst großräumig aus. Leider kann ein Web-Designer meistens nur die Faktoren Design und Funktion positiv beeinflussen. Der Auftraggeber muss den Inhalt schon selbst erstellen und pflegen. Allerdings kann der Web-Designer mit einem gutem Design und hilfreichen Funktionen den künftigen Autoren die Arbeit erleichtern und ermutigen, guten Inhalt bei zusteuern. So entsteht eine gute Internetseite.

Genau wie der Geruch zu einem Haus gehört, so gehören die Farben zu einer grafischen Darstellung oder einer Internetseite. Welche Farbe hat Facebook? Welche Farbe hat die Telekom? Und welche Farbe hat Siemens, Veltins Brauerei, Opel… Jede Marke hat ihre Farben. Meisten eine Grundfarbe (blau, grün, gelb, türkis, pink…) und deren harmonische Nebenfarben. Die Farben werden sehr gezielt eingesetzt, denn wir Menschen assoziieren jede Farbe mit gewissen Eigenschaften. Leider sind die Vorlieben von Männern und Frauen nicht gleich.

Design Templates

Früher wurde das Design einer Internetseite durch HTML Elemente wie Tabellen, Hintergrundbilder und Frames fest gelegt. Heute nutzen fast alle moderne Internetseiten so genannte Cascading Stylesheets (CSS). WordPress bietet die Möglichkeit, verschiedene Design Vorlagen aus einem breiten Angebot auszuwählen und per Kopfdruck auf die eigene Internetseite anzuwenden. Heute spricht man von der Trennung von Inhalt und Design. Die einzelnen Artikel enthalten kaum noch „dekorative Elemente“ sondern stellen den Inhalt bereit. Die Design Vorlagen bestimmen im wesentlichen das Erscheinungsbild einer Internetseite.

Gute Design Vorlagen nutzen ausschließlich CSS Elemente und verzichten auf Tabellenkonstrukte zur Aufteilung der Internetseite. Hier ein paar Links zu kostenlosen Design Templates:

Man wird dort viele Vorschläge finden von denen sich ebenso viele ähneln. Vermutlich werden Sie ein paar Templates in die engere Wahl nehmen. Hier ist es wichtig nicht zu viel Arbeit in die Anpassung (Finetuning) des Templates zu stecken. Ihr Projekt oder ihr Kunde wird seine eigenen Vorstellungen haben und Sie als Web-Designer verschwenden vorab zu viel Zeit in das Finetuning. Verständigen Sie sich besser auf ein bestimmtes Design und arbeiten die die Änderungen der Reihe nach ab. Bei der Auswahl der Design Vorlage sollte man auf folgende Punkte achten:

  • Fehlerfreie Darstellung
  • Lizenz
  • Tabellenfreies Design
  • Ausklappbare Menüs
  • Unterstützung von Widgets
  • Angepasste CSS-Datei für den WordPress

Übersetzung

Viele Design Templates wurden noch nicht ins Deutsche übersetzt. Da mag das Template noch so schön sein, wenn bei einer deutschsprachigen Internetseite alle Systemhinweise in englischer Sprache erscheinen kommt so mancher Besucher ins grübeln. Die Anpassung auf die gewünschte Sprache nennt man auch Localization oder kurz l10n.

Das Gegenteil von Lokalisierung ist Internationalisierung. Es beschreibt die Verfahren um eine Software ohne aufwendige Programm bzw. Quelltextänderungen in andere Sprachen zu übersetzen zu können. Die Abkürzung für Internationalisierung ist i18n da im englischen Wort internationalization zwischen ersten i und letztem n genau 18 Buchstaben zu finden sind ;-). Jetzt wisssen Sie auch, warum localization mit l10n abgekürzt wird…
Poedit

Poedit hilft beim Übersetzen der Sprachdateien

Daher sollte man darauf achten, dass für das Template eine deutsche Sprachdatei existiert, oder dass das Template translate-ready ist. „Übersetzungsvorbereitete“ Plugins erkennt man am language Ordner. Dieser Ordner enthält pro übersetzte Sprache eine .mo sowie eine .po Datei. Z.B:

  • de_DE.mo
  • de_DE.po

Falls es für das Template keine deutsche Übersetzung gibt, so können sie sich einfach selbst ans Werk machen. Bitte denken Sie daran, die Früchte Ihrer Arbeit auch Anderen zugänglich zu machen, im dem die die Sprachdatei auf Ihrer Internetseite zu download anbieten oder dem Template Autor zuschicken. Für die Übersetzung wird die freie Software Poedit genutzt. Mit Poedit kann man .po Dateien öffnen und bearbeiten. Poedit speichert neben den geänderten .po Datei auch eine komprimierte (nicht lesbare) .mo Datei.

„Startseite“ mit eigenem Seitentemplate und CSS ausblenden

Wenn man eine bestimmte Seite oder die Artikel einer bestimmten Kategorie anders darstellen möchte, so muss man zuvor ein individuelles Seitentemplate erstellen. Ich nutze z.B. für die Startseite oft ein Seitentemplate ohne Überschrift, welches auf .../wp-content/themes/<your-theme>/page.php basiert. Ich habe page.php nach pageStart.php kopiert und wie folgt geändert:

Diese Datei ist natürlich vom jeweiligen Template abhängig. Wichtig ist der Eintrag Template Name: <Name> um das Template auswählen zu können. Wenn dieses Template nun der Startseite zugewiesen wird, kann man über die Class „startpage“ gezielt den Titel der Startseite ausblenden indem man im Child-Template die style.css wie folgt ergänzt:

 

Seitentemplates anpassen

Die meisten Anwender werden sich auch der Vielzahl von frei verfügbaren Vorlagen ein passendes Template aussuchen. Aber nicht immer passt das Template zu 100% und so muss der Administrator das Template hier und da anpassen. Wie jede Software werden auch Seitentemplates hin und wieder aktualisiert. Was geschieht dann mit den mühsam erarbeiteten Anpassungen?

Unter dem Begriff „Child Theme“ können unter WordPress Eigenschaften von Seitentemplates an die Kinder vererbt werden. Das Child Theme enthält alle Eigenschaften des ursprünglichen „Parent Theme“. Der Administrator passt nun nur noch das Child Theme an. Falls das ursprüngliche Template vom Autor aktualisiert wird, so gehen die Änderungen im Child Theme nicht verloren.

Hier ein Beispiel für Anpassungen am responsiven Template Origin. Das original Theme befindet sich im Ordner .../wp-content/themes/origin/ und das Child Theme im Ordner .../wp-content/themes/origin-child/. Der Ordner mit dem Child Theme ist recht übersichtlich und enthält nur die beiden Dateien style.css und screenshot.png.

In der Child Theme Datei style.css sind folgende Angaben wichtig:

Template 
Hier den Ordnernamen des ursprünglichen (Parent) Template angeben. Achtung: Case sensitive!
Theme Name 
Der ursprünglichen Namen ergänzen damit das Child Theme sich vom Paren Theme unterscheidet
@import url(…); 
Hier wird die ursprüngliche CSS Datei geladen

Plugins

Editor TinyMCE Advanced

Ein Blog lebt vom Inhalt und der Inhalt muss irgendwann geschrieben werden. So genannte WYSIWYG-Editoren machen es einem Blogger sehr einfach, Artikel, Beiträge oder Seiten zu schreiben. Der Editor ist das wichtigste Werkzeug und sollte einfach zu bedienen sein.

WordPress kommt mit einer abgespeckten Version von TinyMCE daher. Ich würde erst gar nicht anfangen in vielen Konfigurationsdateien herum zu wühlen sondern würde direkt das Plugin TinyMCE Advanced installieren. Das Plugin erweitert den bereits vorhandenen TinyMCE um weitere Funktionen und einen grafischen „Buttonlisteneditor“. Siehe nebenstehendes Bild. Die wichtigste Erweiterung von TinyMCE Advanced sind:

  • Buttons Arrangement: Der Buttonleisteneditor ist Gold Wert
  • Tabellenfunktion: Mit der Erweiterung kann man komfortabel („wie in Word“) Tabellen anlegen und bearbeiten.
  • Links zu anderen Artikeln/Beiträgen oder Seiten
  • Einfaches einbinden der Editor CSS Datei

Editor Width, Blockformats, Google Maps

Jedes Design Template (=Theme) besitzt die Konfigurationsdatei .../wp-content/themes/<your-theme>/functions.php in der die Eigenschaften des Editors geändert werden können. Diese Datei kann direkt über das WordPress Dashboard bearbeitet werden: Design --> Editor --> Theme wählen --> functions.php

Am Ende der Datei, vor dem ?> kann man die gewünschten Konfigurationsänderungen einfügen:

Bei der Breite $init['width'] ist zu beachten, das damit die Breite der Menüleiste bzw des CSS Containers ??? vorgegeben wird. Die Scrollbar beim Firefox ist 15px breit. Hinzu kommen evtl Innenabstände (padding) damit der Text ein wenig Abstand vom Rand hat. Die Breite des Editor sollte natürlich der Artikelbreite im Frontend entsprechen. Allerdings muss die vorgegebene Breite mit der Buttonleiste des TinyMCE zusammen passen.

Editor Stylesheet

Die WYSIWYG Editoren ermöglichen die Bearbeitung von Beiträgen mit Live Vorschau: Der Beitrag sieht im Editor genau so aus wie der Besucher den Beitrag. Leider greifen die WYSIWYG Editoren im Dashboard nicht auf die Theme Stylesheets zurück. Daher bietet WordPress mit dem Editor Plugin TinyMCE Advanded die Möglichkeit an, ein spezielles Stylesheet für den Editor zu nutzen. Das Editor Stylesheet findet hier:

Für die Anpassung von Theme-CSS und Editor-CSS eignet sich besonders gut das Firefox Plugin Web Developer. Ohne diese Feinanpassung ist es eben kein WYSIWYG sondern SZGAIANWDW. Die vertikale Scrollbar sollte immer eingeblendet sein, damit die ober vorgegebene Breite auch passt. Das klappt, wenn man in die editor-style.css folgende Definition aufnimmt:

Mediathek

Die in WordPress bereits enthaltene Mediathek dient zur Verwaltung (hochladen, organisieren, löschen…) von Bilder, Texten oder sonstigen Mediandateien. Sie ist für die meisten Anwender vollkommen ausreichend. Allerdings erlaubt sie Mediathek auch den Upload von Dateien die nichts auf einer Internetseite zu suchen haben: exe, js, doc… Das Plugin Manage Upload Types erlaubt die Vorgabe von zulässigen Dateitypen.

Ok, nun haben die Benutzer nur noch eine beschränkte Auswahl an Dateitypen, aber sie können immer noch riesengroße Dateien hochladen. Um auch dieses Problem zu beheben, kannst du in der Konfigurationsdatei .../wp-admin/php.ini die maximale Dateigröße beschränken:

Falls die Datei php.ini nicht existiert, kannst du sie einfach neu erstellen. Wie immer hilft hierbei der freie FTP/SFTP-Client WinSCP für Windows. Leider funktioniert diese Einstellung nicht bei allen Web Hostern. Bei Strato klappt’s, bei Canhost leider nicht.

Kontaktformular

Wer eine Internetseite besucht möchte vielleicht auch mit dem Autor oder der Firma in Kontakt treten. Jede gute Seite sollte dem „kontaktwilligen“ Besucher möglichst keine Hürden in den Weg legen und an vielen verschiedenen Stellen Kontaktmöglichkeiten anbieten:

  • Kommentare erlauben
  • Kontaktformular anbieten
  • Social Media (Like it) Verknüpfungen

Das Kontaktformular ist die „herkömmliche“ Methode bei der der Besucher seine Anfrage unkompliziert in ein Formular eingibt und an die Betreiber der Seite schickt. WordPress hat kein eingebautes Kontaktformular sondern man muss ein passendes Plugin installieren. Ich favorisiere:

CAPTCHA

Durch einen Captcha Code muss den Benutzer der Internetseite „lesen, verstehen und handeln“. Es muss eine Buchstaben/Zahlenkombination entziffern und in ein Eingabefeld eingeben. Das so geschützte Formular wird erst weiter verarbeitet, wenn die eingegebene Buchstaben/Zahlenkombination passt. So soll verhindert werden, das irgendwelche Robots oder Skripte haufenweise Kommentare abschicken. So den Plan…

Der Captcha Code kann in verschiedenen Formularen (Login, Registrierung, Password vergessen, Kommentar) verwendet werden.

Taxonomy

Die Klassifizierung von Artikeln nach bestimmten Kriterien nennt man Taxonomie. WordPress bietet von Hause aus:

  • Kategorien
  • Schlagworte

Will man Artikal nach weiteren Kriterien klassifizieren, som helfen spezielle Taxonomy Plugins wie:

Der Ultimate Taxonomy Manager speichert die Klassifizierung in der Tabelle <db-prefix>options ab unter der Option xydac_taxonomies ab.

Query Multiple Taxonomies

Das Plugin bieten ein Widget, welches in der Sidebar verwendet werden kann und die einfache Filterung nach verschiedenen Kriterien erlaubt.

I have modified the dropdowns.html and want to share the code in some few lines:

  • Put a „Please choose: ….“ into HTML selector
  • Add some CSS to HTML selectors to keep it more compact
  • Add „onChange“ event handler to start searching if one dropdown field has been changed

You simply have to copy the three files in .../wp-content/plugins/query-multiple-taxonomies/templates folder to .../wp-content/themes/<your-theme>/qmt-templates and modify dropdowns.html as follows:

Search and Replace

WordPress arbeitet mit absoluten Links. Das bedeutet, das Linke zu anderen Artikeln und im Menü immer die komplette Domain der Seite enthalten. Wenn man nun eine WordPress Seite aus dem Schattendasein einer „versteckten“ Subdomain oder einer Testumgebung herausnehmen möchte und produktiv setzen möchte, so müssen alle Links geändert werden.

Das geschieht entweder über einen direkten Zugriff auf die Datenbank (z.B. über phpMyAdmin) oder eben über das Plugin Search and Replace.

WP-Lightbox 2

Die WP-Lightbox zeigt die Bilder eines Beitrags in einem animierten Popup an. Dazu muss das Bild mit der Mediandatei verknüpft werden. Damit alle Bilder eines Artikels in einer Art „Slideshow“ angezeigt werden, müssen die einzelnen Bilder markiert werden. Das geschieht über die Angabe des rel-Tag in den Link-Beziehungen:

Also Bild im Beitrag bearbeiten und im Feld Link-Beziehungen den o.g. Tag angeben. Der Platzhalter <post-id> entspricht der Beitrags-ID-

 

Sonstiges

Automatische Speicherung

WordPress speichert Änderungen an Artikeln i.d.R. alle 60 Sekunden. Wem das zuviel ist, kann die Intervalle sowie die Anzahl der Sicherungen in der wp-config.php ändern:

WP HTTP Error: couldn’t connect to host…

Über diese Fehlermeldung im Dashboard hatte ich mich schon länger geärgert. Auch die Fehler beim Suchen von WordPress Templates oder die fehlenden Updates von WP oder den Plugins störten. Ich hatte erst vermutet, dass es es mit der PHP Funktion curl oder mit allow_url_fopen zusammen hängt. Die Lösung war jedoch viel einfacher: Der Webhoster Canhost hat irgendwann den Zugriff vom Server auf URLs im Internet gesperrt. Die PHP Skripte von WordPress konnten also nicht eigenständig aktuelle Infos wie Updates, News oder Templates laden. Der (Canhost) Kunde kann den Zugriff auf bestimmte Ports dediziert freischalten lassen und schon klappt’s…

Benutzername ändern

Die meisten WorPress Projekte nutzen vermutlich den Login Namen admin. Wenn Auch Sie diesen Login verwendet haben werden Sie feststellen, dass man den Login Namen nicht über das WordPress Dashboard ändern kann. Man kann den Nickname oder den angezeigten Namen ändern, nicht aber den Login Namen.

Wer trotzdem den Login Namen ändern möchte, muss einfach nur in der Datenbank die Tabelle <prefix>_users den betreffenden Benutzer suchen und kann dann ändern:

  • user_login
  • user_nicename
  • display_name

Zum Glück hängt das verschlüsselte Kennwort nicht wie bei MediaWiki mit dem user_login zusammen. Die Änderungen klappen natürlich nur, wenn man Zugriff auf die Datenbank hat uns sich traut mit phpMyAdmin umzugehen.

Zeilenumbruch

Einen guten Hinweis habe ich von https://blog.ff-webdesigner.de/world-wide-webdesign/umbruch-in-wordpress.html erhalten: Das WordPress Skript /wp-includes/formatting.php ist verantwortlich für Formatumwandlungen. Viele Formatumwandlungen nutzen dazu die PHP-Funktion preg_replace(). Sie müssen in dieser Datei nur zwei Zeilen auskommentieren und schon werden <br>-Tags nicht mehr gegen <p>-Tags ersetzt:

Nun muss nur noch das Problem mit den Initialen <p>-Tag gelöst werden. Normalerweise beginnt bei WordPress 3.3.1 jeder Artikel mit einem <p>-Tag. Egal ob man ihn eingegeben hat oder nicht.

Links und Rechts

  1. WYSIWYG: What you see is what you get
  2. SZGAIANWDW: Sieht zwar gut aus, ist aber nicht was du willst ;-)
  3. Limit File size: https://www.thecreatology.com/how-to-increase-upload-media-file-size-limit-in-wordpress.html
  4. Siehe auch https://regexp-evaluator.de/tutorial/php-funktionen/preg-replace/ oder https://www.inside-php.de/referenz/function.preg-replace.html
Veröffentlicht in Internet Getagged mit:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*