Die folgenden Hinweise beziehen sich auf die Erstellung und Wartung dieser WordPress Site.
- Neue Seite ergänzen
Zuerst über das Dashboard eine neue Seite erzeugen, Titel eingeben und speichern. Danach “Build with Nimble Builder” anwählen und z.B. Layout mit 2 Spalten einfügen. In Jede Layout-Spalte RichText-Editor einfügen. - Visueller Editor – Code-Editor (Toggle-Schalter mit [Ctrl][Shift][Alt][M])
Normale Texte werden im Visuellen Editor geschrieben. Die darunterliegende HTML-Formatierung bleibt dabei unsichtbar. Man sieht sofort den eingegebenen Text, wie er auch später sichtbar sein wird.
Will man das generierte HTML prüfen oder eigene HTML-Formate ergänzen, so muss man in den Code-Editor umschalten, z.B. über Menu rechts oben (drei Punkte) / Editor / “Visueller Editor” oder “Code-Editor”. - Einbettung von Quellcode – Probleme mit Syntax-Highlighter-Plugins
Es gibt diverse Plugins, mit denen man Quellcode-Schnipsel in den Text einbetten kann. Bei diesen Plugins kann meist die Programmiersprache eingestellt werden und damit ein passendes Syntax-Highlighting aktiviert werden. Speziell für C++ gibt es aber häufig Probleme bei der Übernahme des Quellcodes, z.B. Pasten des Referenz-Symbols “&” führt dazu dass im dargestellten Code-Schnipsel die HTML-Folge “&” sichtbar wird. Analoge Probleme gibt es mit der spitzen Klammer. Manuelle Formatierungen zur Hervorhebung einzelner Code-Bereiche sind i.d.R. auch nicht möglich. Stellt man nachträglich auf ein derartiges Plugin um oder probiert nacheinander mehrere Plugins aus, so wirkt sich das auch auf bereits erstellte Seiten aus. Evtl. kann insbesondere die gleichzeitige Aktivierung mehrerer Plugins dazu führen, dass fehlerhafte Formatierungen entstehen, die manuell wieder korrigiert werden müssen. Siehe auch https://robosumo.wordpress.com/2019/04/18/adding-c-c-code-to-a-wordpress-post/ - Einbettung von Quellcode – pragmatischer Ansatz
- Verwendung des Standard Code-Blocks von WordPress.
Der Quellcode kann direkt hinein gepastet werden und die resultierende Darstellung stimmt. Es gibt aber kein Syntax-Highlighting oder sonstige Features wie Scrollbar für längere Zeilen. - Manuelle Formatierung beliebiger Bereiche
Nach Umschaltung in den Code-Editor (s.o.) können auf elementarer HTML-Ebene mit Vergabe des HTML-Tags “strong” an beliebigen Stellen gelbe Textmarkerbereiche festgelegt werden. Dazu wurde über ein CSS Stylesheet die Formatierung angepasst (über ein eigenes GFa Plugin). Nachteil: Im Edit-Modus wird ggf. ein Hinweis auf unerwarteten oder ungültigen Inhalt ausgegeben, der toleriert werden muss.
Es reicht auch aus, wenn man im visuellen Editor innerhalb des Codeblocks bestimmte Bereiche mit “B” (fett) markiert.
- Verwendung des Standard Code-Blocks von WordPress.
- Sitemap
Die Sitemap wird erzeugt durch das Plugin “SiteTree”, das über das WordPress Dashboard eingestellt werden kann. Dort unter SiteTree/DashBoard/SiteTree/Configure die Einstellungen aufrufen und nach Veränderung ggf. abspeichern. - Bilder einfügen
Zuerst Dashboard / Medien / Datei hinzufügen, dann im regulären Gutenberg-Editor über das Plus-Zeichen / Alle durchsuchen / Bild einfügen. - Backup (z.B. vor Aktualisierung)
Einfachste Möglichkeit über Strato-Kurzanleitung/manuelles SofortBackup.
Zusätzliche Möglichkeit über Powershell mit Server verbinden und dann das ganze Verzeichnis mit “tar -zcvf backup<datum>.tar.gz wordpress_01” kopieren und komprimieren. Infos siehe:
Strato: Direkter Zugriff über Powershell und ssh
Strato: Backup wichtiger Dateien
[Hinweis: Plugin BackWPup ist deaktiviert/nicht mehr funktionsfähig]
Dashboard / BackWPup / Aufträge / SofortBackup / Jetzt starten
Zielverzeichnis für Backup bei Strato ist STRATO-apps/wordpress_01/app/wp-content/uploads/backwpup-dae762-backups/MyWordPress-Backup…zip, von dort (oder über Link “Herunterladen” in der Auftragsliste) herunterladen nach C:\xampp\htdocs\www.gerald-fahrnholz.eu\_WP_BACKUPS
Verschiedene Tipps
Farbliches Hervorheben von Textbereichen
Stark und schwach markierte Bereiche sind über das HTML-Tag “span” folgendermaßen möglich:
<span class="gfa-mark">Stark</span> und <span class="gfa-mark2">schwach</span>...Innerhalb von Code-Schnipseln ist das HTML-Tag “strong” zu verwenden:
<strong>double</strong> myVar;Wirkung:
double myVar;Eigenes Plugin “GFa Plugin”
- bisheriger Zweck: CSS-Formate zur Hervorhebung von Text
- Quellen liegen unter C:\xampp\htdocs\www.gerald-fahrnholz.eu_wordPressPlugin\gfa-plugin
- Verzeichnis muss hochgeladen werden nach sftp://ssh.strato.de/STRATO-apps/wordpress_01/app/wp-content/plugins/gfa-plugin
- gfa-plugin.css enthält die speziell definierten CSS-Formate
- gfa-plugin.php lädt die css-Datei über eine entsprechende Action-Hook-Schnittstelle von WordPress
- Anleitung siehe Ein WordPress Plugin erstellen – so geht’s
Probleme mit CSS
Um z.B. die Formate in Tabellen und Code-Abschnitten anzupassen, hat die Definition von CSS-Formaten über das Plugin bisher noch nicht ausgereicht. Als Workaround hat jedoch die Definition direkt über die Konfigurationsseite funktioniert:
- Anwahl Dashboard / Design / Customizer
- dann unten “Weitere Optionen (Individuelles CSS)”
- unter “Zusätzliches CSS” CSS-Definitionen ergänzen, z.B.:
thead tr {
background-color:darkslateblue !important;
color: white !important;
}
tr td, tr th {
border: solid black 1px !important;
padding : 6px !important;
text-align: left !important;
}
tr td {
color: black !important;
}
table {
width: auto !important;
border: solid black 1px !important;
}
div pre {
padding : 6px !important;
line-height:110% !important;
background-color:#eeeeee !important;
}Hinweis: es ist nicht empfehlenswert mit der Eigenschaft “important” zu arbeiten. Hier ist noch nach Alternativen zu suchen.
Referenzen
Einführungs-Video WordPress (Oliver Pfeil)
Tabellen in WordPress, einfach erklärt
So bindest Du WordPress Code Snippets auf Deiner Website ein
Ein WordPress Plugin erstellen – so geht’s