Blog

Die wichtigsten Bestandteile von WordPress

Die wichtigsten Bestandteile von WordPress: Funktion, Inhalt & Design

Im Hintergrund von WordPress arbeiten diverse Dateien und Tabellen miteinander. Davon bekommen weder die Besucher einer Website, noch Sie als Anwender etwas mit. Gleichwohl ist es gut zu wissen, wie die technische Grundstruktur von WordPress aufgebaut ist. Lesen Sie weiter, wir graben nicht zu tief, versprochen. Zunächst aber gehen wir kurz darauf ein, wie Sie überhaupt mit WordPress arbeiten.

Die zwei Seiten der Medaille: Frontend und Backend

Außer ganz hinten im Universum gibt es immer zwei Seiten bei einer Sache. So auch bei WordPress. Die eine Seite nennt sich Frontend und ist nichts anderes als das, was jeder Besucher ihrer Website im Browser sieht.

WordPress Frontend

WordPress Frontend – In der Regel für alle Besucher

Die andere Seite nennt sich Backend, und hier spielt die Musik. Sie stellt sich ebenfalls im Browser dar, aber nur Ihnen, nachdem Sie sich in WordPress eingeloggt haben. Alle Änderungen, die Sie im Backend vornehmen, werden im Frontend sichtbar, nachdem Sie die Webseite neu geladen haben. Das Backend wird daher auch Administrationsbereich genannt. Von intuitiver Benutzeroberfläche sprechen viele, WordPress hat sie.
WordPress Backend

WordPress Backend – Zugriff nur mit Erlaubnis

Werfen wir einmal einen kurzen Blick in das Backend. Die vielen Menüpunkte auf der linken Seite müssen Sie nicht irritieren. Sie benötigen zunächst die wenigsten davon und können sich nach und nach mit ihnen vertraut machen. Speziell für die die wichtigsten Einstellungen in WordPress haben wir einen Beitrag verfasst.

Server, Verzeichnisse und Ordner

Den Begriff „Server“ haben sie vielleicht schon einmal gehört. Er klingt aufregend, im Grunde ist ein Server aber nur ein Computer mit einer großen Festplatte und einer schnellen Anbindung an das Internet. Dieser Computer steht bei Ihrem „Hoster“, also der Firma, bei der Sie Ihre Domain (z.B. www.ihrewebsite.de) bestellt haben. Auf dem Server liegt WordPress und damit Ihre Website.
Wie die Dateien auf Ihrem PC, werden auch bei WordPress die benötigten Dateien und Verzeichnisse in einer wohlgeordneten Struktur organisiert. Sie müssen diese Verzeichnisse und Dateien zunächst nicht alle kennen, es reicht aus zu wissen, dass WordPress je nach dem Aktionsmuster und Anforderung des Besuchers Ihrer Website einige dieser Dateien lädt — und andere nicht.

WordPress-Dateienstruktur

WordPress-Dateienstruktur

Schauen wir uns die nebenstehende  Verzeichnisstruktur einmal kurz an. Wie Sie sehen, beginnen viele Dateien mit „wp-“. Als grobe Handlungsanweisung können Sie sich merken: Die Verzeichnisse „wp-admin“ und „wp-includes“ sollten Sie nie betreten, um dort Dateien zu verändern. Sie sind prinzipiell Tabu. Im Verzeichnis „wp-content“ finden Sie dagegen einige relevante Verzeichnisse und Dateien, die Sie eventuell später einmal verändern werden. Die wichtigsten seien schon jetzt genannt:

  • Im Verzeichnis wp-content/uploads legt WordPress alle Bilder und andere Dateien ab, die Sie über das Backend hochgeladen haben.
  • Im Verzeichnis wp-content/themes liegen die sog. „Themes“, also die Designvorlagen. WordPress bringt von Haus aus einige Themes mit, andere Gratis- oder kostenpflichtige Themes können Sie im Backend selbst dazu installieren.
  • Im Verzeichnis wp-content/plugins sind die sog. „Plug-ins“ organisiert. Dies sind Erweiterungsmodule, die von Ihnen eingebunden werden können, um die Funktionalität von WordPress zu erweitern.
  • Im Verzeichnis wp-content/languages liegen die Sprachdateien von WordPress, die die Wortwahl sowohl für das Front- wie das Backend bestimmen. WordPress ist mittlerweile in über 150 Sprachen erhältlich.

Wie Sie sehen, haben viele Dateien die Endung .php. Das ist ein rekursives Akronym für „PHP: Hypertext Preprocessor“. PHP ist eine Programmiersprache für dynamische Webseiten. Warum dynamisch? Im Gegensatz zu statischen Webseiten, die aus einem HTML-Dokument auf dem Server dargestellt werden, werden Webseiten in WordPress aktiv im Moment der Anforderung erzeugt. WordPress trägt die Daten aus einer Datenbank und den PHP-Dateien zusammen und erstellt daraus ein HTML-Dokument, welches vom Webserver an den Browser übertragen und beim Benutzer angezeigt wird.

Die Datenbank: Der gut sortierte Aktenschrank

Es wird Sie vielleicht wundern, aber in diesen vielen Dateien liegt jetzt und auch später nichts von den eigentlichen Inhalten, die Sie schreiben werden. All diese werden in einer Datenbank abgespeichert. WordPress verwendet eine Datenbank im MySQL-Format. Eine solche Datenbank kann man sich als Aktenschrank vorstellen. In diesem Aktenschrank sind Tabellen die Aktenordner. Die Tabellen enthalten Zeilen und Spalten, Sie kennen das vielleicht aus Excel. WordPress speichert in dieser Datenbank alle Seiten, Beiträge, Einträge, Kommentare, Kategorien, E-Mail-Adressen, Benutzer und deren Passwörter und Kontaktformulare. Das war’s: Aus dieser Datenbank und den verbundenen Dateien baut WordPress Ihre Website zusammen, wenn ein Besucher sie betritt. Das deutet auf die Relevanz dieses Aktenschranks hin. Obwohl Sie die Datenbank im Normalbetrieb nie sehen, ist sie die zentrale Instanz Ihrer WordPress-Installation.
Was das bedeutet, ahnen Sie: Die Datenbank muss gesichert werden. Das ist nicht schwer und geschieht mit Hilfe eines Plug-ins. Mehr dazu erfahren Sie in unserem Beitrag „WordPress Backup-Lösungen mit Plug-in Empfehlungen„.

Das Design: Ein paar Worte zu CSS

Wir haben bis jetzt über die Funktionen (PHP-Dateien) und Inhalte (Datenbank) einer WordPress-Webseite gesprochen. Die dritte Säule der Gewaltenteilung in WordPress ist das Design, also der nicht ganz unwichtige Teil einer Website, der das Aussehen im Browser festlegt. WordPress und viele andere Webanwendungen trennen Funktionen, Inhalte und Design strikt. Wenn Sie in eine PHP-Datei schauen (würden), dann sind dort zwar allerhand Befehle zu sehen, aber keine Anweisungen für das Design. Ebenso finden Sie in der Datenbank nichts dazu, ob eine Überschrift beispielsweise schwarz oder rot ist. Solche Anweisungen werden in modernen Systemen wie WordPress mittels CSS definiert. Die Abkürzung steht für „Cascading Style Sheets“, was sich etwas schräg mit „abgestufte Formatvorlagen“ übersetzen lässt. CSS ist eine leicht erlernbare Auszeichnungsprache, die für jedes erdenkbare Element auf einer Webseite dessen Darstellung festlegt. Die Dateien, in denen die CSS-Befehle aufgeführt sind, liegen, wie die oben beschriebenen PHP-Dateien, im Verzeichnisbaum von WordPress auf dem Server.
Mit CSS können auch für verschiedene Ausgabemedien unterschiedliche Darstellungen vorgeben werden. So können Bilder zum Beispiel vom Drucken ausgeschlossen werden. CSS sorgt ebenso dafür, dass Ihre Website „responsive“ und auf dem iPhone ebenso lesbar ist, wie auf einem großen Monitor.
Der praktische Vorteil: Alle Einstellungen, die das Design betreffen, sind an zentraler Stelle versammelt. Genau gesagt, liegen sie in einer Datei mit Namen style.css im Verzeichnis Ihres WordPress-Themes. Das macht Veränderungen extrem einfach! So muss man nur an einer Stelle eine Modifikation vornehmen, wenn man zum Beispiel die Schriftgröße der Überschriften für die gesamte Website ändern will.
Und selbst diese Arbeit kann Ihnen WordPress abnehmen. Fast alle kommerziellen Themes bringen im Backend eine Benutzeroberfläche mit, in der Sie Schriftgrößen, Farben und vieles andere mehr einstellen können, ganz einfach, wie in Word. Dies übersetzt das System dann in CSS.
Später werden Sie merken: Je weiter Sie in WordPress vordringen, desto interessanter wird der Umgang mit CSS. Denn dann reichen Ihnen womöglich die Einstellungen innerhalb der Themes nicht mehr aus. Es kann sich also lohnen, sich frühzeitig mit der Syntax von CSS anzufreunden. Ein prima Anlaufpunkt dafür und für weitere Fragen rund um dem Aufbau von Webtechniken ist die Website Selfhtml-Wiki.


Quelle Bilder: Eigene Screenshots

turned_in_not

Schreiben Sie einen Kommentar

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

Fill out this field
Fill out this field
Bitte geben Sie eine gültige E-Mail-Adresse ein.

Menü