Eigene Verbindung zur Datenbank
Für ein einfaches Glossar habe ich nach einer Möglichkeit gesucht, Einträge in einer eigenen Tabelle zu tätigen und aufzulisten. Innerhalb von WordPress ist die Syntax etwas anders als man es sich gewohnt ist.
Aber wie ist denn eine Datenbank überhaupt aufgebaut?
Eine Datenbank enthält mindestens eine Tabelle. Im Fall von WordPress sind das mehrere Tabellen. Die Tabelle für das Glossar kommt nun noch dazu.
Für jedes Feld enthält die Tabelle eine Spalte. In der Spalte ‘glossar_term’ sind die Begriffe gespeichert, in der Spalte ‘glossar_description’ die Beschreibung. Wichtig, jede Tabelle soll eine Spalte mit einer eindeutigen ID für jede Zeile haben. In den Zeilen werden die Daten gespeichert. Eine Zeile bildet einen sogenannten Datensatz.
glossar_ID | glossar_term | glossar_description |
1 | Begriff | Beschreibung |
2 | Text | ist viel Lorem ipsum |
3 | Tabelle | besteht aus Spalten und Zeilen |
Entstanden sind 4 Funktionen, 3 für die Datenbank, eine für die Navigation zwischen den Funktionen. Die Funktionen können mittels Shortcode in die Seite integriert werden. Ich habe 3 Seiten angelegt, die Erste für das Glossar, eine Auflistung aller Begriffe mit der Beschreibung, die Zweite für das Formular um neue Einträge hinzuzufügen und eine dritte Seite um die Einträge zu bearbeiten.
Auf allen Seiten habe ich mittels [rad-glossar-nav] eine Navigationszeile eingefügt. Damit erreiche ich die Funktionen zur Administration. Die Navigation wird nur angezeigt, wenn man als Administrator eingeloggt ist.
Auf der Glossarseite für die Besucher ist die Funktion [rad-glossar-index] eingefügt.
Diese Funktion liest den Inhalt der kompletten Tabelle und gibt ihn alphabetisch sortiert aus.
Mit [rad-glossar-adminlist] füge ich die Funktionen zur Bearbeitung der Tabelle ein. Sie listet ebenfalls erst mal alle Einträge auf, jedoch nur die Hauptspalte, in diesem Fall den ‘Begriff’. Ein Klick auf auf einen Begriff, zeigt das Bearbeitungsformular an. Es kann nicht gespeichert werden, wenn der Begriff leer ist. Die Beschreibung darf leer sein (auch wenn das keinen Sinn macht).
Das Formular enthält auch einen Löschen-Button. Nach einem Klick darauf erfolgt nochmals eine Nachfrage und der Speichern-Button erhält die Beschriftung ‘Abbrechen’.
Hinweis zur Optik: Damit im Formular die beiden Buttons nicht aneinender kleben (CSS alleine funktioniert nicht), kommt eine transparente Grafik zum Einsatz.
Auf der Seite für neue Einträge hinzuzufügen ist die Funktion [rad-glossar-admin-insert] eingefügt.
Auch hier kann der Eintrag nicht gespeichert werden, wenn der ‘Begriff’ leer ist.
In WordPress haben wir die Eigenheit, dass beim Speichern in die Datenbank das Feldformat mit angegeben werden muss. Was das für einen Sinn macht, ich weiss es nicht. Zu beachten ist dabei, für die Feldnamen und die Feldformate gibt es 2 Arrays, dabei ist auf die identische Reihenfolge der Felder /Formate zu achten.
Möglich sind nur drei Arten von Werten. %s steht für String (Text), %d für Integer (ganze Zahlen) und %f für Float (Gleitkommazahlen).
Für diese Beispiele benötigen Sie eine Datenbanktabelle mit 3 Spalten. Diese können Sie mir folgendem XML-Code erzeugen, indem Sie mit einem Programm wie phpMyAdmin den Code importieren. Der Code erstellt die Tabelle, 3 Spalten und 3 Zeilen (Datensätze).
Nebst den beiden Spalten für Begriff und Beschreibung brauchen wir in einer Tabelle grundsätzlich immer auch eine Datensatz-ID. Mit dem Attribut ‘auto increment’ erreichen wir, dass automatisch eine fortlaufende Nummer vergeben wird. Eine solche ID ist unerlässlich für relationale Verknüpfungen. In diesem Fall verwenden wir die ID um im Bearbeitungsformular die richtigen Daten zu laden und wieder in den richtigen DS zu speichern, sowie zum löschen eines Datensatzes.
Mit dem folgenden XML-Code kann die nötige Tabelle in der Datenbank erzeugt werden.
<?xml version="1.0" encoding="utf-8"?>
<!--
- phpMyAdmin XML Dump
- für R.A.D. Glossar
- Das xxx muss gegen das Präfix Ihrer WordPress Datenbank ersetzt werden.
- Das ... muss gegen den Namen der Datenbank ersetzt werden.
-->
<pma_xml_export version="1.0" xmlns:pma="https://www.phpmyadmin.net/some_doc_url/">
<!--
- Structure schemas
-->
<pma:structure_schemas>
<pma:database name="..." collation="utf8_unicode_ci" charset="utf8">
<pma:table name="xxx_rad_glossar">
CREATE TABLE `xxx_rad_glossar` (
`glossar_ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
`glossar_term` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL DEFAULT '',
`glossar_description` text COLLATE utf8mb4_unicode_ci NOT NULL,
PRIMARY KEY (`glossar_ID`),
KEY (`glossar_term`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
</pma:table>
</pma:database>
</pma:structure_schemas>
<database name="...">
<table name="xxx_rad_glossar">
<column name="glossar_ID"></column>
<column name="glossar_term">Begriff</column>
<column name="glossar_description">Beschreibung</column>
</table>
<table name="xxx_rad_glossar">
<column name="glossar_ID"></column>
<column name="glossar_term">Text</column>
<column name="glossar_description">Text ist viel Lorem Ipsum.</column>
</table>
<table name="xxx_rad_glossar">
<column name="glossar_ID"></column>
<column name="glossar_term">Tabelle</column>
<column name="glossar_description">Eine Tabelle besteht aus Spalten und Zeilen</column>
</table>
</database>
</pma_xml_export>
Das folgende CSS enthält alle Klassen die nötig sind das Glossar komplett zu formatieren. Das CSS entspricht demjenigen, wie es auf dieser Seite zur Anwendung kommt. Alle Glossar-Ausgaben haben eigene eindeutige Klassen für eine vollumfängliche, eigene Formatierung.
/* Überschrift der Funktionen */
.glossartitel{
font-size: 1.5em;
margin-bottom: 50px;
}
/* Beschriftung Formularfelder */
.glossarfieldname{
font-size: 0.9em;
margin-bottom: 1px;
}
/* Anzahl der Einträge */
.glossarnumrows{
font-style: italic;
font-size: 0.8em;
}
.glossarnumrows:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.2em;
content: '\f002';
padding-right: 0.8rem;
}
/* Glossarliste: Begriff */
.glossarterm{
font-size: 1.1em;
font-weight: bold;
}
/* Glossarliste: Beschreibung */
.glossardescription{
margin: -20px 20px 20px 50px;
}
/* Link im Fliestext */
.glossartextlink{ /* noch unbenutzt*/
color: red;
}
/* Formfeld: Begriff */
.glossarfield{
width: 300px;
}
/* Formfeld: Beschreibung */
.glossararea{
width: 550px;
height: 100px;
padding: 5px 5px 5px 15px;
}
/* Formbutton */
.glossarbutton{
float: left;
border-width: 1px;
border-color: #698431;
background: #7aa228;
padding: 0.3em 0.8em 0.3em 0.8em;
cursor: pointer;
color: #ffffff;
border-radius: 0.5em;
outline: none;
border-bottom: 5px solid #698431;
}
a.glossarbutton {
color: #ffffff;
text-decoration:none;
}
a.glossarbutton:hover {
color: #e0faac;
text-decoration:none;
}
/* Abstand zwischen den Buttons */
.glossarspacer{
float: left;
margin: 0px 10px 0px 0px;
}
/* Bestätigung OK*/
.glossarinfo-true{
color: #0B610B;
}
.glossarinfo-true:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.3em;
content: '\f058';
padding-right: 0.8rem;
}
/* Bestätigung ERROR */
.glossarinfo-false{
color: #B40404;
}
.glossarinfo-false:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.3em;
content: '\f057';
padding-right: 0.8rem;
}
Mit einer 5. Funktion kann nun das Glossar auch in den Content und Excerpt integriert werden.