Wissenswertes für Webdesigner beim Erstellen einer Website mit WordPress

  1. Zum Inhalt springen
Monika  &  Klaus

www.klamonfra.de

English

Wissenswertes für Webdesigner über WordPress beim Erstellen einer Website

Auf dieser Seite zeigen wir ein paar Tipps und Tricks, wie man einen Blog mit WordPress benutzerfreundlicher gestalten kann und möglichst barrierefrei erstellt.

Eine ganz wichtige Regel, die ich vor langer Zeit einmal gelesen habe, lautet:

Wenn Du wichtige Funktionsdateien veränderst, dann dokumentiere dies.

Diese Regel hat uns in der Vergangenheit schon viel Zeit erspart und so nutzen wir diese Seite auch, um die Veränderungen an dieser Website für uns zu dokumentieren und Ihnen als Nachschlagewerk zur Verfügung zu stellen.

Nützliches beim Einbinden von WordPress auf einer Webseite

07Jun2010

Kommentarlinks auf follow


Wir stellen unseren Blog auf "follow" um!
Google kann damit die Kommentarlinks in unserem Blog verfolgen. Wir betrachten das auch als "Kundenservice".

In WordPress wird leider an sämtlichen Kommentarlinks das Attribut "nofollow" angehängt. Es gibt sogar ein separates "Nofollow SEO Plugin", um dieses Attribut zu entfernen, und der Administrator kann für jeden Link entscheiden, ob er verfolgt wird oder nicht.
Eine schöne Sache, aber wir entfernen das nofollow ohne Plugin und bringen zusätzlich noch einen entsprechenden "title-Text" zum Link. Damit kommt dann auch noch ein Stück barrierefreie Webgestaltung hinzu, und das ist uns wichtig.


Vorgehensweise:

An vielen Stellen im Blog wird die Variable "comment_author_link" aufgerufen und damit die Website des Kommentators. Unsere Aufgabe ist es also, diese Variable anders zu beschreiben und ihr damit einen anderen Inhalt mit zu geben. Beschrieben wird diese Variable in der Datei "comment-template.php", die wiederum im Verzeichnis "wp-includes" abgelegt ist.
Ab Zeile 140 (ungefähr) finden Sie die zugehörige function zum "comment_author_link" und diese sieht in etwa so aus:

"comment-template.php" <?php function get_comment_author_link() { /** @todo Only call these functions when they are needed. Include in if... else blocks */ $url = get_comment_author_url(); $author = get_comment_author(); if ( empty( $url ) || 'http://' == $url ) $return = $author; else $return = "<a href='$url' rel='external nofollow' class='url'?>$author</a?>"; return apply_filters('get_comment_author_link', $return); } ?>

Hier ersetzen wir nun die Zeile mit der "nofollow-Anweisung" durch die nachfolgende Zeile:

"comment-template.php" <?php ... $return = "<a href='$url' class='url' title='Externer Seitenaufruf: Website von $author'?>$author</a?>"; ... ?>

Fertig! Ab jetzt können die Links von den Kommentatoren von Google verfolgt werden, und unser Blog ist wieder ein Stückchen barrierefreier geworden.


06Jun2010

Benachrichtigungsmail


Bei einer regen Diskussion unter einem Artikel, möchte vielleicht der ein oder andere Leser darüber informiert werden, wenn neue Kommentare geschrieben wurden. An dieser Stelle greifen wir auf das Plugin "Subscribe to comments" zurück.
Mit diesem Plugin werden die Kommentatoren auf Wunsch über neue Antworten per E-Mail informiert. Es ist damit eine sinnvolle Erweiterung hinsichtlich "Kundenservice".

Mit dem Original ist es aber leider möglich, jede beliebige Mail-Adresse als Adresse für die Benachrichtigung anzugeben.

Und damit sind leider folgende Szenarien möglich:

Deshalb gilt das anonyme Versenden einer E-Mail als Spam und kann somit zu rechtlichen Problemen führen.

Das von uns eingesetzte Plugin unterstützt auch die vom Gesetzgeber vorgeschriebene Bestätigung des Abonnements. Martin Spütz von infogurke.de hat das Plugin so erweitert, dass es nun eine E-Mail Bestätigungsfunktion enthält. Aktiviert ein Besucher die Checkbox und möchte über neue Antworten benachrichtigt werden, wird zuerst eine E-Mail mit einem speziellen Link versendet. Dieser muss angeklickt werden um die Benachrichtigungsmail zu aktivieren. Unsere Besucher haben damit also keine rechtlichen Probleme zu befürchten und Spameintragungen sind ausgeschlossen.
Herunterladen kann man das Plugin unter dem Beitrag: Gurken Subscribe to comments 2.0
An dieser Stelle möchten auch wir uns bei ihm für dieses Plugin bedanken.

Ein kleines Manko gibt es aber beim Einbinden des Plugin in WordPress. Die "Checkbox" für die Aktivierung der Benachrichtigungen wird bei der Installation automatisch ans Ende der Kommentarbox, noch hinter dem Button "Kommentar absenden", gesetzt. Das ist nicht sehr benutzerfreundlich, denn die Checkbox gehört zum Formular und sollte vor dem Button "Kommentar absenden" platziert werden.
Aber auch dafür gibt es eine Lösung.


Vorgehensweise bei einer Benachrichtigungsmail:

Wir benutzen eine interne Funktion aus dem Plugin "Subscribe to comments", mit dem Namen "show_subscription_checkbox". Mit dieser ist es möglich, die "Checkbox" an einer beliebigen Stelle im Formular zu setzen. Das Formular selber wird mit der Datei "comments.php" aufgerufen und in dieser kopieren wir die nachfolgenden Zeilen ganz nach Belieben.

"comments.php" <?php if (function_exists('show_subscription_checkbox')) { show_subscription_checkbox(); } ?>

Damit ist die Kommentareingabe um eine Funktion erweitert worden und obendrein auch noch benutzerfreundlich gestaltet.


05Jun2010

Kommentar und Trackback trennen


In unserem Blog werden richtige Kommentare von Lesern und Verweise von anderen Webseiten auf den eigenen Artikel (Trackbacks/Pingbacks) getrennt dargestellt. Was man dafür tun muss, werden wir Ihnen hier aufzeigen.


Vorgehensweise bei Kommentare und Trackback trennen:

Die Änderungen, die wir vornehmen müssen, beziehen sich auf die Datei "comments.php", die für den Aufbau der Kommentare verantwortlich ist und auf die "function.php".

Im Groben sieht die "comments.php" wie folgt aus:

"comments.php" <ol class="commentlist"> <?php foreach ($comments as $comment) : ?> ... ... <?php endforeach; ?> </ol>

Die Anweisungen, die zwischen der "foreach"-Anweisung stehen, brauchen wir nicht zu betrachten.

Jetzt beginnen wir mit unseren Änderungen.
Die Zeile "foreach" wird ersetzt mit:

"comments.php" <?php foreach ($comments as $comment) : if (get_comment_type() == "comment") : ?>

Und die Zeile "endforeach" wird ersetzt mit:

"comments.php" <?php endif; endforeach; ?>

Unterhalb der "</ol>"-Anweisung fügen wir den folgenden Code, der die Trackbacks/Pingbacks anzeigen wird, ein.

"comments.php" <?php foreach ($comments as $comment) : if (get_comment_type() != "comment") : ?> <h3 id="pings">Trackbacks/Pingbacks</h3> <ol class="pinglist"> <?php wp_list_comments('type=pings&callback=list_pings'); ?> </ol> <?php endif; endforeach; ?>

Würden wir die Anweisung "wp_list_comments('type=pings')" benutzen, würden die Track-/Pingbacks genau so angezeigt werden, wie die echten Kommentare. Wir wollen aber, dass sie sich optisch von den Kommentaren abheben. Dazu richten wir eine neue "function" in der "function.php" ein.
Mit dem Aufruf "callback=list_pings" wird eine "function" mit dem Namen "list_pings" aufgerufen. Diese function werden wir in der function.php wie folgt ergänzen:

"function.php" <?php function list_pings($comment) { $GLOBALS[‘comment’] = $comment; ?> <li id="comment-&lt?php comment_ID(); ?>" title="Externer Seitenaufruf: &lt?php comment_author(); ?>"> <?php comment_author_link(); ?> - <?php comment_date('j. F Y'); ?> <?php } ?>

Mit "h3 id=pings" bei der Überschrift und "ol class=pinglist" bei der Liste können wir ebenfalls noch am Design Änderungen vornehmen.
Nun haben wir Ordnung in unseren Kommentaren!

Entschuldigung, noch nicht ganz.

Die Anzahl der Kommentare stimmt noch nicht, denn leider werden von WordPress die Track-/Pingbacks zu der Anzahl der echten Kommentare hinzu gezählt. Und das ist nun mal nicht korrekt.
Also packen wir noch einmal unsere "function.php" an und kopieren die folgenden Zeilen am besten direkt hinter die eben eingefügte function "list_pings".

"function.php" <?php add_filter('get_comments_number', 'comment_count', 0); function comment_count( $count ) { if ( ! is_admin() ) { global $id; $comments_by_type = &separate_comments(get_comments('status=approve&post_id=' . $id)); return count($comments_by_type['comment']); } else { return $count; } } ?>

Jetzt sind wir aber fertig mit unserer Trennung zwischen normalen Kommentaren und Track-/Pingbacks.


04Jun2010

Antwort des Autoren hervorheben


Sie möchten die Antworten bei den Kommentaren der Autoren besonders hervorheben?
In diesem Artikel stellen wir Ihnen eine sehr einfache Variante dazu vor.


Vorgehensweise um die Antwort des Autoren hervorzuheben:

Als erstes verändern wir eine Kleinigkeit an der Datei "comments.php", die für den Aufbau der Kommentare verantwortlich ist. Die folgende Zeile:

"comments.php" <li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>

wird ersetzt durch:

"comments.php" <li class="<?php if ($comment->user_id == 1) $oddcomment = "authorstyle"; echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>

Hierbei ist nur zu beachten, dass Sie die User-ID des Autors eintragen. In diesem Beispiel hat die User-ID die Nummer 1. Damit hätten wir schon mal die Kommentare nach den Antworten des Autors gefiltert.

Jetzt müssen wir natürlich noch für das richtige Aussehen sorgen, und dafür ist das Herzstück des Designs, die "style.css" die zu jedem Theme dazu gehört, verantwortlich. In der style.css brauchen wir nur eine Zeile hinzuzufügen.

.authorstyle { background: #e0f2f4!important; border: 1px ridge; border-color: #000 }

Wir haben, passend zu unserem Logo, einen hellblauen Hintergrund und einen schmalen schwarzen Rahmen gewählt. Aber hier ist Ihrer Fantasie keine Grenze gesetzt.


03Jun2010

Datenbank von WordPress wird schlanker


Wer seine Datenbank schlank halten möchte, für den kann der folgende Tipp hilfreich sein.


Vorgehensweise um die Datenbank von WordPress schlanker zu machen:

Zuerst einmal sichern wir uns über unseren Hoster die Datenbank von unserem Blog. Und wer auf Nummer "Sicher" gehen möchte, sichert sich auch noch die Konfigurationsdatei von WordPress, also die "wp_config.php", denn in dieser wollen wir ein paar Zeilen ergänzen.

1. Post Revisions deaktivieren und Intervalle der Auto-Speicherung verlängern

Nun deaktivieren wir unsere "Post Revisions". Das bedeutet, dass keine unterschiedlichen Revisionen unserer Artikel oder Seiten mehr angelegt werden und dadurch die Datenbank nicht mehr aufgeblasen wird. Der Zugriff auf die Datenbank dürfte ebenfalls schneller werden. Ich denke, wenn nur ein Autor die Artikel verfasst, kann man auf diesen Service verzichten.

Aber bitte beachten: Wir löschen damit keine Revisionsstände, sondern wir vermeiden zukünftige Revisionen.

Und da wir die "wp_config.php" schon bearbeiten, werden wir zusätzlich das automatische Speichern auf 600 Sekunden verlängern.

Wir schreiben also die folgenden Zeilen in unsere "wp_config.php" und laden sie auf unseren Server.

"wp_config.php" define('WP_POST_REVISIONS', false ); define('AUTOSAVE_INTERNAL', 600);

Prima! Das wäre geschafft! Für die Zukunft halten wir unsere Datenbank schlank.

Anmerkung: Das Deaktivieren der Revisionen funktioniert leider ab WordPress Version 2.9 nicht mehr!

"Und was ist denn mit all den vorhandenen Revisionen?" Damit befassen wir uns im nächsten Abschnitt.

2. Datenbank von Post Revisions säubern

Für den folgenden Tipp haben wir zur Sicherheit unsere Datenbank gesichert. Aber keine Angst, ich habe es getestet und es funktioniert!

Wir melden uns dafür an unserem Hoster an und gehen über "PhpMyAdmin" in die Datenbank des Blogs. Dort geht man auf den Reiter "SQL", und in der aufgehenden Maske führen wir den folgenden SQL Befehl in der Datenbank aus: DELETE FROM wp_posts WHERE post_type = "revision";

Das war's und hat gar nicht weh getan.

Wir haben dafür gesorgt, dass zukünftige Post Revisions nicht mehr angelegt werden und bereits vorhandene aus der Datenbank gelöscht wurden.


02Jun2010

Sicherheit für WordPress


In den heutigen Zeiten wird gerade das beliebte WordPress für Hacker immer interessanter - leider.
Aus diesem Grund möchten wir in diesem Artikel verschiedene Mechanismen aufzeigen, die einen Blog mit WordPress sicherer machen und die wir natürlich auch getestet und eingebaut haben.

1. Schützen der wp-config.php

Wenn Sie in Ihrem Blog die "wp-config.php" aufrufen, und es erscheint eine leere Seite, sollten Sie den folgenden Schutz in Ihrem Blog integrieren.

Vorgehensweise beim Schutz der wp-config.php:

In der "wp-config.php" stehen unter anderem die Daten, die zum Einloggen in der Datenbank benötigt werden. Deshalb ist es sehr wichtig, diese Datei zu schützen. Und das geht relativ einfach mit einem Eintrag in der ".htaccess" wie unten aufgeführt.

# Schutz der wp-config.php <files wp-config.php> Order deny,allow Deny from all </files>

Mit dem Eintrag in der ".htaccess" erscheint nun beim Aufruf der "wp-config.php" die Fehlerseite "HTTP 403 - Forbidden".

2. User-ID ändern

Im Normalfall hat der "admin" die User-ID = 1. Diese sollte man ganz am Anfang, wenn man den Blog aufsetzt, in eine andere Zahl ändern. Es geht natürlich auch noch später, aber dann ist es etwas aufwändiger.

Vorgehensweise um die User-ID zu ändern:

Zuerst loggt man sich in seine Datenbank ein und dann geht es los mit den Änderungen. In den folgenden Tabellen muss die User-ID mit der neuen Nummer versehen werden. Und es ist zwingend notwendig, dass die Nummern identisch sind!

Tabelle . . . . . . . . Spalte
wp_links        link_owner
wp_posts        post_author
wp_usermeta     user_id
wp_users        user_id

3. User Name ändern

Nachdem wir nun die User_ID erfolgreich geändert haben, empfiehlt es sich natürlich, den "User Namen" auch noch zu ändern, denn der Administrator trägt standardmäßig den Namen "admin". Und dieser ist den Hackern hundertprozentig bekannt!

Vorgehensweise um den User Name zu ändern:

Diese Änderung geht jetzt aber relativ schnell, da man nur in der Tabelle "wp_users" etwas ändern muss. Wir wählen die Zeile des "admin" aus und gehen in den Bearbeitungsmodus. In der nun aufgehenden Maske geben wir den neuen Namen in der Zeile "user_login" und "user_nicename" ein. Fertig!


31Mai2010

Erstellen einer Sitemap


Für uns gehört eine Übersicht der erstellten Artikel, also eine Sitemap, zu einem Blog dazu. Mit einem Klick erhält der Besucher einen Überblick über die Struktur der Website und über alle Artikel, sortiert nach den einzelnen Kategorien und Unterkategorien. So verliert man garantiert nie den Durchblick. Dieser Service ist eines der Markenzeichen einer benutzerfreundlichen und barrierefreien Website, oder wie hier, eines Blogs.

"Muss ich denn jetzt jedes Mal meine Sitemap ändern, wenn ich einen neuen Artikel geschrieben habe?"
Nein. Wir zeigen hier eine Möglichkeit, wie man die Sitemap nur beim Erstellen einer neuen Kategorie anpassen muss. Alles andere regelt sich von selbst.


Vorgehensweise beim Erstellen einer Sitemap:

Für diese Sitemap erstellen wir uns als erstes eine eigene Vorlage, im allgemeinen Jargon auch "Template" genannt. Damit können wir uns das Aussehen der Sitemap selbst gestalten. Näheres zu Templates ist auch auf der Seite von WordPress beschrieben. In dem zugehörigen Forum haben wir uns Anregungen zur Vorgehensweise geholt und werden es hier mit unseren Tipps ergänzen.

Wir machen uns die Arbeit etwas leichter, in dem wir uns aus unserem Theme die Seite "page.php" in den gleichen Ordner kopieren und ihr den Namen "sitemap.php" geben. Dieses Vorgehen hat den Vorteil, dass wir uns alle Anpassungen, die wir an unserer normalen Seite bereits vorgenommen haben, nicht mehr neu überlegen müssen.

Dass wir ein neues Template haben, müssen wir noch in der Datei selber, also der sitemap.php, ganz am Anfang wie folgt bekannt geben:

"sitemap.php" <?php /* Template Name: Sitemap */ ?>

Damit haben wir schon unser eigenes Template mit dem Namen "Sitemap" erstellt.

Als nächstes beschäftigen wir uns mit dem Aussehen der Sitemap. Sie soll das folgende Aussehen haben:
Überschrift 1. Kategorie
Artikel der zugehörigen Kategorie

Überschrift 2. Kategorie
Überschrift 1. Unterkategorie
Artikel der zugehörigen Kategorie

Überschrift 2. Unterkategorie
Artikel der zugehörigen Kategorie
usw.

Wie erreichen wir das?

In unserer sitemap.php suchen wir die Zeile in der der content eingelesen wird: "<?php the_content('<p>Weiterlesen &raquo;</p>'); ?>".

So ähnlich steht es in jeder page.php eines Themes, da mit diesem Befehl normalerweise der Inhalt in die Datei geschrieben wird. Wir wollen aber unseren selbst geschriebenen Inhalt an dieser Stelle einfügen. Also wird diese Zeile mit unserem eigenen HTML (HyperText Markup Language)-Code nach folgendem Schema ersetzt:

"sitemap.php" <ul> <li>Kategorie "Design" Auflistung der zugehörigen Artikel </li> <li>Kategorie "Programmierung" <ul> <li>Kategorie "Barrierefreiheit" Auflistung der zugehörigen Artikel </li> <li>Kategorie "Design" Auflistung der zugehörigen Artikel </li> <li>Kategorie "Programmierhilfen" Auflistung der zugehörigen Artikel </li> </ul> </li> </ul>

Damit haben wir schon mal ein strukturiertes Aussehen unseres Inhaltsverzeichnisses geschaffen.

Die Auflistung der Artikel in den einzelnen Kategorien wird nun wie folgt geschrieben:

"sitemap.php" <?php $Kategorie_Inhalt = get_posts('numberposts=20&category=40'); $Kategorie_Ausgabe = ''; if (is_array($Kategorie_Inhalt)) { foreach ($Kategorie_Inhalt as $post) { $Kategorie_Ausgabe .= '<a href="' . get_permalink($post->ID) . '" title="' . $post->post_title . '">' . $post->post_title . '</a> (' . mysql2date('d. M Y', $post->post_date) . ') <br>'; } } echo $Kategorie_Ausgabe; ?>

In diesem Teil des Quellcodes legt man als erstes die Anzahl der Artikel, die pro Kategorie ausgegeben werden, mit dem Befehl "numberposts" fest. Wir haben für das erste 20 Beiträge angegeben.

Jetzt braucht man eigentlich nur noch für jede Kategorie (category) die "ID-Nummer" zu ermitteln, denn aus dieser Kategorie wollen wir schließlich unsere Artikel heraus filtern. In unserem Beispiel hat die Kategorie "Programmierhilfen" die ID-Nummer 40. Am einfachsten erhält man die ID mit folgender Vorgehensweise. Anmelden bei WordPress und unter "Artikel/Kategorien" sind sämtliche Kategorien aufgelistet. Geht man nun mit der Maus auf eine Kategorie, wird in der Fußzeile die zugehörige Adresse mit der ID-Nummer angezeigt (...categories.php?action=edit&cat_ID=40").

Damit ist das Template "Sitemap" fertig erstellt.

Entschuldigung, aber ganz fertig sind wir leider noch nicht.

Für den letzten Schritt melden wir uns wieder bei unserem WordPress an und erstellen eine neue Seite. In dieser neuen Seite braucht kein zusätzlicher Text eingegeben zu werden. Die Seite wird lediglich mit unserem "Template" verbunden. Dafür wählt man unter Attribute das Template "Sitemap" aus. Die neue Seite wird veröffentlich und schon hat der Besucher Zugriff auf die Sitemap.


Tipp:

Wird nun eine neue Kategorie erstellt braucht diese Sitemap in WordPress nicht mehr angefasst zu werden. Es wird lediglich im Template sitemap.php nach bewährtem Muster die neue Kategorie ergänzt.

Achtung:

Ein kleiner Fehler kann allerdings auftreten. Nachdem ich das Template fertig hatte, wurde es in meinem WordPress nicht zur Auswahl angeboten. Es half nur der Wechsel auf ein anderes Themes und wieder zurück. Und schon konnte ich auch mein Template auswählen.

Zum Seitenanfang springen