Seite, Webseite, Website
siehe auch: Stile für Websites.
Die gesamte WordPress-Installation wird als Website bezeichnet, also sämtliche Seiten und Beiträge mit deren Inhalt. Ein klick im Frontend auf Website bearbeiten, oben in der schwarzen Leiste, öffnet den Site-Editor.
Als Seite(Webseite) wird in WordPress eine einzelne Seite bezeichnet, zum Beispiel die über-uns-Seite. Angelegt wird eine Seite über einen Klick auf +Neu. Die spätere Bearbeitung erfolgt über Seite bearbeiten.
Zum Unterschied von Seite und Beitrag:
SEO
siehe auch: Stile für Websites.
SEO=Search Engine Optimization, also Optimierung einer Website für ein gutes Ranking bei den Suchmaschinen. Je besser eine Website bei Google platziert ist, desto mehr Besucher erhält sie. Unterschieden werden On-Page-SEO und Off-Page-SEO.
On-Page-SEO Maßnahmen sind auf der Website selbst:
- Suchmaschinenfreundliche URLs
- Suchmaschinenfreundliche Seitentitel und Zwischenüberschriften
- Einfügen von Keywords in Texten, Überschriften und Namen von Bilddateien
- Einbindung von (YouTube-) Videos, um die Aufenthaltsdauer der Besucher auf einer Website zu erhöhen
- Platzierung eines attraktiven Website-Icons, das auf den Ergebnisseiten von Google in einem Thumbnail angezeigt wird
- Einsatz von Caching
- Umbenennen der Kategorie „Allgemein“
Off-Page-SEO sind Maßnahmen die nicht auf der Website stattfinden:
- Gewinnung von Backlinks
- Verlinkung von Social-Media-Präsenzen auf die Website
- Verlinkung von einem Newsletter auf die Website
Zur Unterstützung der SEO bietet WordPress verschiedene Plugins, zum Beispiel RankMath und Yoast.
Site-Editor
siehe auch: Block-Editor
Der Site-Editor oder auch Website-Editor gennant, ist erreichbar über die Hauptnavigation vom Backend via Design > Editor, ermöglicht Full Site Editing bei Block-Themes, also die Anpassung der gesamten Website nur mit Blöcken ohne Eingriffe in den Code. Hiermit ist ein Page-Builder eher unnötig.
Im Website-Editor gibt es folgende fünf wichtige Bereiche zur Anpassung der Website(zu sehen in Bild rechts):
- Stile
- Navigation
- Seiten
- Template
- Vorlagen (inkl. Template-Teile)
Der Site-Editor startet im Browse-Modus(Bild1)und zeigt die Hompage an. Durch einen klick auf den Inhalt wird in den Edit-Modus(Bild2) gewechselt.
Website-Editor Browsemodus
Bild1: Website-Editor nach dessen direktem Aufruf im Browse-Modus
Website-Editor Editmodus
Bild2: Site-Editor im Edit-Modus
In WordPress sind der Site-Editor und Website-Editor dasselbe, es handelt sich um die offizielle Bezeichnung für die Funktion, die es ermöglicht, das gesamte Design und Layout einer WordPress-Website (Header, Footer, Templates) mithilfe von Blöcken zu bearbeiten, im Gegensatz zum Block-Editor, der nur für den Inhalt einzelner Beiträge oder Seiten gedacht ist. Der Name wird oft synonym verwendet, um auf das „Full Site Editing“ (FSE) mit Block-Themes hinzuweisen.
Die wichtigsten Begriffe um die WordPress-Editoren:
- Block-Editor (Gutenberg): Der Standard-Editor für Inhalte (Posts & Pages), um Text, Bilder, Videos usw. einzufügen.
- Site-Editor / Website-Editor: Der übergeordnete Editor, der Header, Footer, globale Stile, Navigation und alle Templates eines Block-Themes anpasst (zu finden unter Design > Editor).
- Full Site Editing (FSE): Der umfassende Ansatz, der durch den Site-Editor ermöglicht wird und die komplette Website-Gestaltung ohne Code erlaubt.
Kurz gesagt: Der Site-Editor ist der „große“ Editor für die Website-Struktur, der Block-Editor der „kleine“ für den Inhalt. Beide nutzen das Block-System, aber in unterschiedlichen Bereichen. Die zwei Editoren verschmelzen immer mehr zu nur noch einem(Zukunft).
Startseite
Die Startseite ist die erste Seite einer Website. Sie erscheint nach der Eingabe des Domain-Namens im Browser und wird auch Homepage genannt.
In WordPress dient der Titel der Website oben im Header als Link zur Startseite der Website.
Stile
siehe auch: Stile für Websites.
Stile dienen zur Gestaltung von Blöcken und erzeugen im Hintergrund Gestaltungsanweisungen in der Sprache CSS.
Im Block-Editor für Inhalte gibt es auf der Seitenleiste Einstellungen bei vielen Blöcken das Register Stile, auf dem es Optionen zur Gestaltung für den markierten Block gibt.
Im Site-Editor gibt es ebenfalls einen Bereich namens Stile. Hier gelten allerdings die Anpassungen für die gesamte Website (Global). Über den Site-Editor (im Backend Design > Editor) gelangen wir nach klick auf Stile in die Stile-Gestaltungsmöglichkeiten. Da können wir durch klick auf Stile durchstöbern in aller Ruhe, solange nicht auf speichern geklickt wird, die Möglichkeiten ausprobieren.
Als Stil wird in WordPress eine Kombination von Typography (Fonts Schriftarten), Farben (Palette), Hintergrund, Schatten und Layout(Hauptinhalt-Breite und Abstände) bezeichnet. Das Theme Twenty Twenty-Five verfügt über folgende neun Stile:
Stile
Palette (Farben)
Typography
1. Standard
Fira Code
Manrope
2. Abend
Fira Code
Manrope
3. Mittag
Beiruti
Literata(16 Var)
4. Dämmerung
Vollkorn(2 Var)
Fira Code
5. Nachmittag
Platypi(2 Var)
Ysabeau Office(2 Var:)
6. Zwielicht
Roboto Slab
Manrope
7. Morgen
Literata(16 Var)
Ysabeau Office(2 Var.)
8. Sonnenaufgang
Platypi(2 Var)
Literata(16 Var)
9. Mitternacht
Literata
Fira Sans(18 Var)
Klicke im Menü Stile auf das Stift-Icon, um in die Stile-Einstellungen zu gelangen, da werden die folgenden Optionen angezeigt:
- Stile durchstöbern (nur bestimmte Themes, wie TT5)
- Typografie
- Farben
- Hintergrund
- Schatten
- Layout
- einzelne Blöcke für Website designen
Website-Editor Stile
Stilbuch
Im Stilbuch sind die Typografie, Farbpalette, Schatten und das Layout eines Stils definiert.
- Über das Icon mit dem Auge kannst du das Stilbuch öffnen und die Einstellungen für Typografie, Farben, Schatten und Layout ansehen.
- Über das Icon mit dem Stift kannst du das Stilbuch bearbeiten und die Einstellungen für Typografie, Farben, Schatten und Layout ändern. Du kannst zum Beispiel die Linkfarben ändern oder allen Bildern einen Schlagschatten zuweisen.
In diesem Tutorial zeige ich dir, wie du die Linkfarben über das Stilbuch ändern kannst: Linkfarbe ändern
In diesem Tutorial zeige ich dir, wie du allen Bildern einen Schlagschatten zuweist.
Templates
WordPress ist ein template-basiertes CMS=Content-Management-System. Das bedeutet, dass alle WordPress-Seiten auf der Basis eines Templates erstellt werden. Templates sind also eine Art Schablone, die WordPress zur Erstellung von Webseiten nutzt. Templates können kleinere Bausteine enthalten, die Template-Teile wie z.Beisp. Header oder Footer.
In einem Block-Themes, im Site-Editor, können Templates ohne Programmierkenntnisse angepasst werden, da sie nur aus Blöcken bestehen.
In einem klassischen Theme ist die Anpassung von Templates nur mit Kenntnissen in Sprachen wie HTML, CSS, JavaScript und besonders PHP möglich.
Template Anzeige
Template-Anzeige
Die Template-Anzeige erreichen wir über Einstellungen für den Dokumenteneintrag Template, dort wählen Sie Template anzeigen.
So werden Block-Editor und Website-Editor einander immer ähnlicher:
- Im Block-Editor für Beiträge und Seiten sieht man standardmäßig nur den Inhaltsbereich. Template-Vorschau macht die gesamte Seite inklusive Header und Footer sichtbar.
- Im Site-Editor ist es genau umgekehrt. Hier ist standardmäßig die gesamte Seite zu sehen und man kann auf Wunsch nur den Inhaltsbereich einblenden.
Vielleicht werden die beiden Editoren ja irgendwann eins.
Template Anzeige
Template-Teil
Ein Template-Teil(engl. template part) ist ein kleiner Baustein, der in mehreren Templates eingebaut werden kann. Die bekanntesten Template-Teile sind Header und Footer.
Template-Teile findet man im Website-Editor im Bereich Vorlagen, und zwar ganz unten (Stand WordPress 6.4).
Template Anzeige
theme.json
Ist eine Konfigurationsdatei, mit der die globalen Einstellungen, Stile und mehr für das Design definierbar sind. Die Datei funktioniert sowohl mit Block- als auch mit klassischen Themen. Viele der in theme.json definierten Einstellungen können im Site-Editor überschrieben werden, sodass manuelle Änderungen an der Datei meist nicht nötig sind.
Mehr Infos: Introduction to theme.json (auf developer.wordpress.org)
Die theme.jason-Struktur
Die theme.json Datei kann in mehrere Abschnitte der obersten Ebene unterteilt werden, wie in diesem Codeausschnitt gezeigt:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}
theme.json
Typografie Einstellungen
Es gibt Typografie-Einstellungen für:
- Stile – Ändere auf einmal das Design des gesamten Texts auf deiner Website.
- Blöcke – Ändere das Textdesign bestimmter Elemente.
Wenn du auf einen Block klickst, siehst du in der rechten Seitenleiste die Blockeinstellungen. Sollte die Seitenleiste nicht angezeigt werden, musst du ggf. oben rechts in der Ecke auf das Icon Einstellungen klicken, um die Einstellungen zu öffnen. Dieses Icon sieht aus wie ein Quadrat mit zwei ungleichen Spalten:
In den Blockeinstellungen findest du wahrscheinlich direkt die Typografie-Einstellungen. In anderen Blöcken befinden sich die Typografie-Einstellungen unter dem Tab Stile. Das Bild rechts zeigt einen Block mit den Typografie-Einstellungen unter dem Tab Stile, der durch einen Klick auf das kreisförmige Icon geöffnet werden kann. Um alle Typografie-Optionen zu erhalten kann auf das Icon mit den 3 übereinander liegenden Punkte geklickt werden.
Beachte, dass nicht jeder Block Typografie-Einstellungen enthält. Die verfügbaren Einstellungen variieren je nach Theme und Art des Blocks.
Stile des Spalten-Block
URL
Eine URL wird als Internetadresse einer Webseite bezeichnet (Uniform Resource Locator):
| Was stellt die Zeile dar | URL | hinterer Teil der URL |
|---|---|---|
| URL eines realen Hoster (Start-Seite) | https://snsfamily.de/ | |
| URL eines realen Hoster (Beitrag) | https://snsfamily.de/website-editor-create-header | website-editor-create-header |
| URL in einer Testumgebung (Beitrag) | https://snsgvfamily3.local/website-editor-create-header/ | website-editor-create-header |
| URL in einer Testumgebung (Beitrag und mit Anker) | https://snsgvfamily3.local/wp-lexikon-4/#lex-url | wp-lexikon-4 |
Den hintere Teil der URL wird auch Slug oder Permalink genannt. Er wird von WordPress vergeben, sobald eine Seite oder ein Beitrag erstellt wird. Der Name entspricht dem Titel der Seite bzw. des Beitrags. Man kann den hinteren Teil aber auch nach eigenen Wünschen ändern.
Der hinterste Teil in der 3-ten Zeile das #lex-url ist ein Anker, auch Sprungmarke gennannt. Einfacher Weg, um zu einem bestimmten Punkt einer Website zu springen, auch auf externe Websites. Nur Kleinschreibung, ohne Leerzeichen, keine Umlaute, Bindestrich statt Unterstrich, wird in der Erweitert-Eigenschaft ohne # eines Blockelement notiert. Auf diesen Anker(Sprungmarke), kann dann verlinkt werden mit dem #-Zeichen vorab.
Vorlage
Vorlage
Eine Vorlage (engl. pattern) ist in einem Block-Theme eine vorgefertigte Kombination von Blöcken, die unter einem Namen abgespeichert, in einem Dokument eingefügt und dann angepasst werden kann. Eine spezielle Form ist die synchronisierte Vorlage.
Da der Begriff Vorlagen in vielen verschiedenen Zusammenhängen verwendet wird, nennt man eine aus Blöcken bestehenden Vorlage der Deutlichkeit halber manchmal auch Blockvorlage (engl. block pattern).
Vorlagen im Block-Inserter
Vorlagen findet man im Block-Inserter auf dem Register Vorlagen. Dort werden die installierten Vorlagen nach Kategorien geordnet angezeigt. Die Abbildung zeigt die Vorlagen nach einem Klick auf den Link Alle Vorlagen erkunden.
Es lohnt sich wirklich, die im Block-Inserter zur Verfügung stehenden Vorlagen zu erkunden und damit ein bisschen zu experimentieren, denn Vorlagen sparen viel Zeit und sind ausgesprochen nützlich.
Quellen für Vorlagen
Vorlagen können aus verschiedenen Quellen stammen:
- aus Themes und Plugins
- aus dem Vorlagen-Verzeichnis auf WordPress.org
- aus eigener Herstellung
Beim Stöbern im Vorlagen-Verzeichnis auf WordPress.org kann man die Vorlagen nach der Quelle filtern. Die Standardeinstellung Kuratiert zeigt nur Vorlagen vom WordPress-Team, die Option Community (siehe Abbildung) auch die von allen anderen Autoren.
Webentwicklung
In der modernen Webentwicklung im Jahr 2025 werden Sprachen meist nach ihrem Einsatzort – dem Frontend (was der Nutzer sieht) und dem Backend (die Logik auf dem Server) – unterschieden.
1. Frontend-Sprachen (Client-Side)
Das Frontend basiert auf drei Grundpfeilern, die von jedem Browser interpretiert werden können:
- HTML (HyperText Markup Language): Die Struktur jeder Website (Texte, Bilder, Links).
- CSS (Cascading Style Sheets): Das Design und Layout (Farben, Abstände, Animationen).
- JavaScript (JS): Macht Webseiten interaktiv (Pop-ups, dynamisches Laden von Inhalten).
- TypeScript: Eine Erweiterung von JavaScript, die 2025 besonders für skalierbare Projekte bevorzugt wird, da sie Fehler durch statische Typisierung minimiert.
2. Backend-Sprachen (Server-Side)
Diese Sprachen verarbeiten Daten, kommunizieren mit Datenbanken und steuern die Programmlogik.
- JavaScript (Node.js): Ermöglicht die Nutzung von JavaScript auch auf dem Server, was die Full-Stack-Entwicklung erleichtert.
- Python: 2025 die dominierende Sprache, getrieben durch den KI-Boom und seine einfache Syntax.
- PHP: Trotz seines Alters weiterhin weit verbreitet (ca. 19 % Marktanteil laut Umfragen) und Basis für CMS wie WordPress.
- Java & C#: Werden primär in großen Unternehmensumgebungen (Enterprise) für robuste Anwendungen eingesetzt.
- Go & Rust: Gewinnen 2025 stark an Bedeutung für Hochleistungsanwendungen und Cloud-native Dienste.
3. Datenbank-Sprachen
- SQL (Structured Query Language): Der Standard zur Verwaltung und Abfrage von relationalen Datenbanken.
Dashboard
WP-Admin
WP-Admin ist eine alternative Bezeichnung für das Backend.
Der Name leitet sich ab vom Ordner /wp-admin/, der auf dem Webspace die Dateien für das Backend enthält.
Dashboard
WP-Admin
WP-Admin ist eine alternative Bezeichnung für das Backend.
Der Name leitet sich ab vom Ordner /wp-admin/, der auf dem Webspace die Dateien für das Backend enthält.
