Der WordPress-Admin
Gehen wir am besten der Reihe nach durch den WordPress-Admin.
Alle Seiten und Beiträge sollten nur im Textmodus bearbeitet werden. Der visuelle Modus entfernt Formatierung aus dem Quelltext, die man vermissen würde, wenn auch nichts markantes. Hier ist der visuelle Modus komplett ausgeschaltet.
- Dashboard: Nichts besonders, außer, dass unter Aktualisierungen die nötigen Updates von WordPress und Plugins angezeigt werden. Einfach immer auf Aktualisieren klicken.
- Beiträge: Hier finden sich sämtliche Texte der News, der neueste zuoberst. Alte Beiträge können gelöscht, aktuelle geändert und neue erstellt werden. Jeder Beitrag hat ein Bild, das am besten 450 x 350 Pixel hat.
Die vier Beiträge auf der Startseite fügt das Plugin „Display Posts Shortcode“ ein, der Shortcode dafür steht im Text der Startseite.
Kategorien und Schlagwörter entfallen.
- Mediathek: Hier werden die Bilder verwaltet. Möchte man ein Bild ersetzen, sollte man erst das alte löschen, dann das neue hinzufügen („Datei hinzufügen“).
In alle Seiten und Beiträge können von hier Bilder eingefügt werden: Beitrag/Seite bearbeiten >> „Dateien hinzufügen“. Alle Größenangaben und Klassen sind zu entfernen, ebenso <title>, aber <alt> ist immer auszufüllen. Am besten löscht man gleich beim Hochladen in der Mediathek den Titel des Bilder und fügt dort den alternativen Text ein.
- Alle Seiten: Hier werden Seiten erstellt, geändert und gelöscht. Für jede Seite, ebenso wie für jeden Beitrag, gibt es unter dem Text das SEO-Feld, in dem man
<title> und <description> eingeben kann.
Die Anordnung der Seiten entsteht durch Hierarchie und Nummerierung: Bei jeder Seite sollte man rechts die übergeordnete Seite einstellen und dann die Nummer der Reihenfolge angeben. Aus der Hierarchie entstehen auch die URLs, also z.B. https://oi-academy.ch/academy/ansprechpersonen/
- Kommentare: wird nicht benötigt, die Funktion ist ausgeschaltet.
- Formulare: „Contact Form 7“. Hier bearbeitet man die Formulare. Die Shortcodes auf der Übersichtsseite werden passend in die Seiten eingesetzt.
Alle Formatierungen der Formulare sind im CSS ab dem Wert label aufgeführt.
Plugin „Contact Form 7 Honeypot“ ersetzt den Sicherheitscode. Man erzeugt ein unsichtbares Feld im Formular, das Spambots abhält.
Das Plugin „Contact Form 7 Dynamic Text Extension“ ermöglicht die Übergabe von Feldwerten in einem Link.
- Design: Alle Angaben und Einstellungen zum Theme.
- Themes: Die Auswahl des aktiven Themes.
- Customizer: Am besten ignorieren, wird nicht gebraucht.
- Menüs: Hier werden manuell die Menüs in Header und Footer angelegt und verwaltet.
- To Top: Die Einstellungen des animierten „Nach-oben“-Pfeils rechts unten.
- Editor: Wichtig: Hier werden die Themedateien geändert. Weiteres: siehe unten.
- Plugins: Hier werden die Plugins verwaltet, auch aktualisiert. Neue können installiert, unbenötigte gelöscht werden. Weiteres: siehe unten.
- Benutzer: Benutzerverwaltung. Anlegen, ändern und löschen von Benutzern. Hier kann der unsägliche „visuelle Modus“ für jeden Benutzer separat wieder aktiviert werden.
- Werkzeuge: Gebraucht wird „Sweep“, und zwar oft, die Bereinigung der Datenbank.
Nach Abschluss der täglichen Arbeit wird immer außerhalb von WordPress mit dem „MySQL-Dumper“ die Datenbank gesichert!
- Einstellungen: Alle grundlegenden Einstellungen. Hier finden sich auch „Shariff“, das Plugin für Facebook etc., und der „Google Tag Manager“. Das Plugin „Shariff Wrapper“ ermöglicht eine sogar in Deutschland gesetzeskonforme Verlinkung zu den sozialen Medien.
- SEO: Die umfangreichen Einstellungen des „Yoast-SEO-Plugins“
Die Dateien des Themes werden hier bearbeitet. Rechts die Datei anklicken, bearbeiten, aktualisieren und dann die Seitenansicht der Homepage komplett aktualisieren, um die Änderung sehen zu können.
Man muss sich das Zusammenspiel wie ein Puzzle oder einen Baukasten vorstellen. Eigentlich zerschneidet man den Seitenquelltext in mehrere Teile, ersetzt einiges durch WordPress-Code. Am Ende muss alles zusammenpassen, ohne ein <div> zu viel oder zu wenig! Ist eine Seite zerrissen, liegt es meist an einem <div>-Fehler.
Die Startseiten-Themedatei z.B. enthält gar keine <div>. Das dient der Gestaltungsfreiheit der Startseite, aber entsprechend muss man das <div>-Gerüst in den Seiteninhalt selbst setzen (siehe Alle Seiten >> Startseite).
- 404.php: Fehlerseite für falschen URLs
- breit.php: Content mit voller Breite ohne Seitenleiste, z.B. Lehrgänge oder Seminare.
- footer.php: Die Vorlage für den Footer. Neben dem sichtbaren Inhalt des Footers sind hier am Ende nach
<?php do_action('wp_footer'); ?> auch Scripte eingefügt, die nur auf bestimmten Seiten aktiv werden.
Während Plugins ihre Scripte meist auf allen Seiten aktivieren und das Plugin „Plugin Organizer“ mittlerweile mehr schadet als nützt, kann man die Scripte im Footer veranlassen, bei bestimmten Seiten aktiv zu werden, indem man die Seiten-ID angibt. Man findet sie unter „Alle Seiten“, wenn man mit der Maus auf den Seitennamen geht.
Z.B.: <?php if (is_page(array(290,292,296,298))) { ?> ...
- functions.php: Eingerichtet sind: CSS- und Javascript-Einbindung, Google-Font „Open Sans“, die „Dashicons“, die Aktivierung der Menüs sowie etliche Angaben, die ich immer einsetze, aber längst vergessen habe, was sie tun. Die Einrichtung so ist aber richtig. Ganz am Ende steht, auf welchen Seiten allein ein Formular aktiviert wird.
- header.php: Hier ist alles bis zum Hauptmenü eingesetzt.
- index.php: Diese Seite bestimmt nur den Inhalt der Seite News (als Blogseite). Da es keine weiteren News-Kategorien, Tags oder Autorenseiten gibt, existiert auch keine Datei archive.php.
- page.php: Die Vorlage für die Standardseiten mit rechter Seitenleiste (z.B. https://oi-academy.ch/academy/ansprechpersonen/).
- search.php: Die Vorlage für die Suchergebnisse.
- searchform.php: Die Vorlage für das Suchformular oben rechts.
- sidebar.php: Die Vorlage der rechten Seitenleiste der Standardseiten. Nur hier kann dieser Inhalt geändert werden.
- single.php: Die Vorlage für die einzelnen News-Beiträge.
- special.php: Vorlage für eine Standardseite, wie page.php, aber ohne die von WordPress erzeugte Überschrift H1, d.h. man kann und muss eine vom Seitennamen abweichende H1-Überschrift einfügen.
- start.php: Die Vorlage der Startseite ohne jegliche Formatierung. Das gesamte Boxengerüst findet sich im Seiteninhalt selbst.
- style.css: Die CSS-Datei, die das gesamte Aussehen der Elemente steuert.
Es gibt nur einen sinnvollen Weg, die CSS-Angaben zu ändern:
Gehen Sie auf eine Seite der Homepage, die das zu ändernde Element enthält.
Benutzen Sie Google Chrome oder Firefox.
Klicken Sie mit der rechten Maustaste auf das Element und wählen Sie: „Untersuchen“.
Nun öffnet sich unten ein Tool, mit dem Sie detailliert das Element nach seinen Eigenschaften untersuchen können.
Suchen Sie die gefundene Eingenschaft in der CSS-Datei und ändern Sie sie dort.
Kontrollieren nicht vergessen.
Diese WordPress-Plugins sind installiert und aktiv. Was tun sie?
- Add Target Fixer: ergänzt automatisch target=“_blank“ in Links um rel=“noopener noreferrer“
- Contact Form 7: stellt die Formularfunktion zur Verfügung.
- Contact Form 7 – Dynamic Text Extension: ermöglicht die Übergabe eines Feldwerts in einem Link.
- Contact Form 7 Honeypot: ersetzt den Sicherheitscode durch ein unsichtbares Feld.
- Display Posts Shortcode: fügt vier neueste Beiträge in die Startseite ein.
- Dynamic To Top: der dynamische Pfeil „nach oben“ rechts unten.
- Google Tag Manager for WordPress: Funktionen für Google.
- Login LockDown: Schutz des Admins beim Einloggen.
- Shariff Wrapper: erstellt die Buttons für die sozialen Medien.
- WP-Sweep: bereinigt die Datenbank. Sollte öfter benutzt werden.
- Yoast SEO: erstellt die automatischen oder individuellen
<title> und <description> aller Seiten und Beiträge.
Weitere Anmerkungen
Sinnvoll ist es sowieso, sich vor der ersten Änderung die gesamte WordPress-Installation per FTP auf den PC herunterzuladen. Damit sichern Sie nicht nur die Datenbank (siehe oben), sondern auch alle WordPress-Dateien und das Theme.
Es ist ein Plugin „Add Target Fixer“ aktiviert, dass jedem Link mit target="_blank" den benötigten Ausdruck rel="noopener noreferrer" hinzufügt. Deswegen sollte man diesen Ausdruck nicht manuell einsetzen, da er sonst zweimal erscheint.
