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:

• Wenn du WordPress als Portfolio-Site betreibst, legst du nur Seiten an.
• Wenn du WordPress als Blog betreibst, legst du nur wenige Seiten an (Impressum, Datenschutz, Über uns). Hauptsächlich verfasst du Beiträge.

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.

Bild1: Website-Editor nach dessen direktem Aufruf im Browse-Modus

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)

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

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-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).

theme.json

Ist eine Konfigurationsdatei, mit der die globalen Einstellungen, Stile und mehr für das Design definiert 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)

{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {},
"styles": {},
"customTemplates": {},
"templateParts": {},
"patterns": []
}

Typografie Einstellungen

Es gibt Typografie-Einstellungen für:

• Stile – Bild-1: Ändere auf einmal das Design des gesamten Texts auf deiner Website.
• Blöcke –Bild-2: Ä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.

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.

Direkt-Link zum Begriff Vorlage

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)

2. Backend-Sprachen (Server-Side)

3. Datenbank-Sprachen

WooCommerce

WooCommerce ist ein kostenloses, Open-Source-Plugin für das Content-Management-System WordPress, das jede WordPress-Website in einen voll funktionsfähigen Online-Shop verwandelt. Es erweitert das CMS um alle notwendigen E-Commerce-Funktionen wie Produktverwaltung, Warenkorb, Checkout, Zahlungsabwicklung (z. B. PayPal, Kreditkarte) und Versandoptionen.

Wichtige Merkmale:

• Kostenlos: Die Kernsoftware ist frei verfügbar und kann direkt im WordPress-Plugin-Verzeichnis installiert werden. Es fallen keine monatlichen Plattformgebühren oder Umsatzbeteiligungen an. 
• Flexibel: Da es auf WordPress aufbaut, können unbegrenzt viele physische und digitale Produkte verkauft werden. Die Anpassungsmöglichkeiten sind durch Themes und Erweiterungs-Plugins nahezu unbegrenzt. 
• Datenhoheit: Im Gegensatz zu geschlossenen Systemen gehören die Shop-Daten vollständig dem Betreiber. 
• Marktposition: WooCommerce ist eines der weltweit beliebtesten E-Commerce-Systeme und wird von Millionen von Shops genutzt. 

Für den Betrieb sind zusätzlich eine Domain, Webhosting und ein SSL-Zertifikat erforderlich.  Für spezifische Anforderungen (wie deutsche Rechtssicherheit oder erweiterte Zahlungsmethoden) können weitere kostenpflichtige Plugins genutzt werden.

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.

X-Header a

Der

X-Header b

Der

Y-Header a

Der

Y-Header b

Der

Z-Header a

Der

Z-Header b

Der

Multibuttons

Es gibt mehrere Multibuttons. Eine gute Wahl ist der Buttons-Block von Kadence. Im Bild ist der MultiButtons von Gutenverse zu sehen. Die bessere Variante ist jedoch der Buttons-Block von Kadence.

Navigation

Eine Navigation besteht in einem Block-Theme immer aus zwei Teilen:

-einem Navigationsmenü mit Links(Menü)

-einem Navigationsblock dem das Menü zugewiesen ist

Der Navigationsblock kann in einem Block-Theme an einer beliebigen Stelle eingefügt werden (horizontal oder vertikal). Wenn irgendwo ein Navigationsblock eingefügt, wird diesem Block automatisch ein Menü zugewiesen (das erste im Alphabet). Natürlich kann man ein anderes Menü zuweisen, oder ein neues erstellen. In den Block-Eigenschaften (Zahnrad-Symbol) kann die Richtung für die Links, horizontal oder vertikal, gewählt werden.

Eine weitere Navigations-Möglichkeit ist eine Linkmarkierung. Hiermit kann ein Text/Bild/etc. markiert und mit einen Link verknüpfen werden. Fährt man mit der Maus über diese Markierung wird ein Handsymbol für einen Link-Hinweis angezeigt, mit einem klick springt man zu diesem Link. Mit dieser Methode können die Links vielfältiger gestaltet werden. Zum Beisp. auf einem Icon oder Bild. Diese Methode wenden wir im Footer an.

Es gibt folgende Link-Arten:
-Backlink: führt von einer Website zu einer anderen Website.
-interner Link: verweist auf eine Unterseite innerhalb einer Websiste
-externer Link: verweist auf eine Unterseite einer anderen Website
-Anker: auch Sprungmarke gennannt. Einfacher Weg, um zu einem bestimmten Punkt einer Website zu springen, auch auf externe Websites. Kleinschreibung und ohne Leerzeichen in der Erweitert-Eigenschaft eines Blockelement. Auf diesen Anker, kann dann verlinkt werden mit dem #-Zeichen vorab.

PDF

siehe auch: https://de.wordpress.org/pdf/

Hier sind schöne und funktionale HTML-Vorlagen sowie Design-Tipps speziell für das Calculated Fields Form (CFF) PDF Generator Add-on. Da das Add-on HTML zur Generierung der PDFs verwendet, liegt der Schlüssel zu einem schönen Design in der Kombination aus sauberem HTML und eingebettetem CSS.

Grundstruktur einer guten Rechnung

Diese Vorlage eignet sich hervorragend für Quittungen, Rechnungen oder Bestellbestätigungen. Sie nutzt ein zweispaltiges Layout für den Kopfbereich und eine klare Tabelle für die Positionsliste.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <style>
        /* Basis-Styling für das PDF */
        body {
            font-family: 'Helvetica', 'Arial', sans-serif;
            font-size: 12px;
            color: #333;
            line-height: 1.5;
        }
        
        /* Kopfzeilen-Design */
        .header {
            width: 100%;
            margin-bottom: 20px;
            border-bottom: 2px solid #0056b3;
            padding-bottom: 10px;
        }
        
        .company-info {
            float: left;
            width: 50%;
        }
        
        .invoice-info {
            float: right;
            width: 40%;
            text-align: right;
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
        }

        /* Tabellen-Design */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th {
            background-color: #0056b3;
            color: #ffffff;
            padding: 8px;
            text-align: left;
            font-weight: bold;
        }

        td {
            border-bottom: 1px solid #ddd;
            padding: 8px;
        }

        /* Gesamtbetrag hervorheben */
        .total-row td {
            font-weight: bold;
            font-size: 14px;
            background-color: #eef2f5;
        }

        /* Fußzeile */
        .footer {
            margin-top: 40px;
            text-align: center;
            font-size: 10px;
            color: #777;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
        
        /* Hilfsklassen */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
    </style>
</head>
<body>

    <!-- Kopfbereich -->
    <div class="header clearfix">
        <div class="company-info">
            <h2 style="margin:0; color:#0056b3;">Ihr Firmenname</h2>
            <p>
                Musterstraße 1<br>
                12345 Musterstadt<br>
                USt-IdNr.: DE123456789
            </p>
        </div>
        <div class="invoice-info">
            <strong>Rechnung Nr.:</strong> <%itemnumber%><br>
            <strong>Datum:</strong> <%submissiondate_ddmmyyyy%><br>
            <strong>Kunde:</strong><br>
            <%fieldname_kundenname_value%><br>
            <%fieldname_kundenadresse_value%>
        </div>
    </div>

    <!-- Positionsliste -->
    <table>
        <thead>
            <tr>
                <th width="50%">Beschreibung</th>
                <th width="15%">Menge</th>
                <th width="15%">Einzelpreis</th>
                <th width="20%">Gesamt</th>
            </tr>
        </thead>
        <tbody>
            <!-- Beispiel für eine dynamische Zeile -->
            <tr>
                <td><%fieldname_beschreibung_value%></td>
                <td><%fieldname_menge_value%></td>
                <td><%fieldname_einzelpreis_value%> €</td>
                <td><%fieldname_gesamtpreis_value%> €</td>
            </tr>
            <!-- Weitere Zeilen können hier hinzugefügt werden, falls das Formular wiederholende Gruppen unterstützt -->
        </tbody>
        <tfoot>
            <tr class="total-row">
                <td colspan="3" style="text-align:right;">Endsumme:</td>
                <td><%fieldname_endsumme_value%> €</td>
            </tr>
        </tfoot>
    </table>

    <!-- Fußzeile -->
    <div class="footer">
        Vielen Dank für Ihren Auftrag! Fragen? Kontaktieren Sie uns unter info@ihrefirma.de
    </div>

</body>
</html>   

Wichtige Hinweise zur Implementierung

1. Feld-Tags ersetzen: Ersetzen Sie die Platzhalter wie <%fieldname_kundenname_value%> durch die tatsächlichen Tags Ihrer Formularfelder. Diese finden Sie im CFF-Editor unter „Special Tags“.
2. HTML-Qualität: Der HTML-Code im CFF PDF-Generator muss wohlgeformt sein.  Alle Tags müssen geschlossen werden (z.B. <br /> statt <br>), da der Generator sonst das PDF möglicherweise nicht erstellt.
3. CSS im Head: Das CSS muss zwingend im <head>-Bereich innerhalb von <style>-Tags definiert werden. Externe CSS-Dateien werden vom PDF-Generator in der Regel nicht geladen.

Design-Tipps für spezielle Anforderungen

<p style="page-break-before: always;">Neuer Abschnitt auf nächster Seite</p>

@page { margin: 100px 50px; }
#header {
    position: fixed;
    top: -80px;
    left: 0;
    right: 0;
    height: 60px;
    text-align: center;
}
#footer {
    position: fixed;
    bottom: -80px;
    left: 0;
    right: 0;
    height: 60px;
    text-align: center;
}

PHP

siehe auch: Wikipedia-Artikel zu PHP

PHP ist eine serverseitige Programmiersprache zur Erstellung von Webanwendungen wie z. B. WordPress, die im World Wide Web von einem Webserver ausgeführt werden.

Serverseitig bedeutet, dass PHP-Befehle auf dem Webserver ausgeführt werden. Im Quelltext der Webseiten im Browser ist kein PHP mehr vorhanden. Dort gibt es nur HTML, CSS und JavaScript.

Plugins

siehe auch: https://de.wordpress.org/plugins/

Plugins erweitern WordPress-Websites mit zusätzlichen Funktionen:

• Das Plugin WooCommerce erweitert eine Website um einem Shop.
• Die Plugins RankMath und Yoast unterstützen die SEO.
• Die Gutenverse Plugins Gutenverse (ca. 50 zusätzliche Blöcke für den Block-Editor) und Gutenverse Form (mit Form Builder). Diese Plugins erweitern den Block-Editor und ermöglichen ein einfaches gestalten von Formularen.

Plugins-Verwaltung über das Backend via Menüleiste mit klick auf Plugins -> Plugin hinzufügen.

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:

R1

easfdsasdse.

G

hhpiu.

Header

Eine Webseite besteht meistens aus einem Header, Inhalt und Footer, wobei der Inhalt zwichen Header und Footer eingeklemmt ist. Als Header wird der Kopf, also der obere Bereich einer Website bezeichnet. Alles, was du im Header platzierst (z. B. Logo, Kontakt, Navigation) erscheint auf jeder einzelnen Seite. Das Gegenstück zum Header ist der Footer, der untere Bereich einer Website. Bei Header+ Footer wird häufig ein schwarzer Hintergrund gewählt (quasi Standard). Zwischen Header und Footer ist der Inhalt (content) eingeklemmt.
Tutorial: WordPress-Header bearbeiten.

html

HTML ist neben CSS und JavaScript eine von 3 Sprachen im Quelltext von Webseiten.

Die Buchstaben HT-M-L stehen für HyperText Markup Language:

• Hypertext ist ganz normaler Text, der Hyperlinks enthält.
• Markup steht für Auszeichnung oder Markierung. Gemeint sind die in spitzen Klammern stehenden Tags (tähgs gesprochen), die typisch für HTML sind:
  <p>Dieser Text ist ein Absatz.</p>
• Das L steht für Language. HTML ist eine Sprache, und dementsprechend gibt es Vokabeln und Grammatikregeln zu deren Einsatz.

HTML ist das Fundament einer jeden Webseite. In WordPress müssen Sie das HTML nicht selbst schreiben, da es vom Theme im Hintergrund automatisch erzeugt wird.

Auch wenn Sie es nicht selbst schreiben müssen, sind HTML-Grundkenntnisse bei der Arbeit mit WordPress sehr hilfreich. Infos dazu gibt’s auf html-und-css.de.

Innenabstand

Innenabstand (engl. padding) siehe Box-Modell.

JavaScript

JavaScript ist neben HTML und CSS eine der drei Sprachen im Quelltext von Webseiten.

JavaScript ist eine Programmiersprache, mit der man das Verhalten der Webseite steuern und so zum Beispiel deren Bedienung erleichtern kann. Einfache Webseiten kommen fast ohne JavaScript aus, in interaktiven Webapplikationen spielt es hingegen eine Hauptrolle.

Gute Links erkennen

Gute Links stehen meist im Content-Bereich selbst. Sie sind farblich erkennbar und zudem meist noch unterstrichen. Sie werden auf Ankertexte gesetzt, die gut verständlich sind und dem Leser bereits einen ersten Eindruck verschaffen, was diesen bei einem Klick auf den Link erwartet. Ferner stehen sie in einem Bezug zum Inhalt des Texts. Idealerweise werden vor allem solche Beiträge mit Links befüllt, die über einen hohen Traffic verfügen. Wichtig ist es darauf zu achten, dass die gesetzten Links untereinander nicht in Konkurrenz stehen.

Keyword

Als Keywords werden wichtige Begriffe oder Phrasen bezeichnet. Die Aufgabe von Keywords besteht darin, den Inhalt einer Website (oderWebseite) zusammenzufassen und die Benutzer einer Suchmaschine dorthin weiterzuleiten. Beispiel: Die Begriffe Klang, Entspannung und Wellness sind geeignete Keywords für eine Website zum Thema Klangmassage. Das Platzieren von Keywords in Überschriften, Texten und URLs ist Teil der Suchmaschinenoptimierung (SEO).

klassische Themes

Ein klassisches Theme wird mit dem Customizer angepasst. Es ist der Vorgänger der heutigen, modernen Block-Themes die den Website-Editor zum anpassen verwenden.

Templates von klassischen Themes bestehen aus HTML, CSS, JavaScript und vor allem aus PHP. Klassische Themes sind Astra, GeneratePress oder Kadence, und auch nicht im Theme-Verzeichnis gelistete Themes wie Divi oder Avada sind klassische Themes.

Klassisch vs. Block-Themes:

• Klassisch: Steuerung des Designs über Customizer und Page Builder Plugins.
• Block (FSE): Nutzen den Site-Editor für vollständige Designkontrolle, auch für Header, Footer und Templates, direkt in WordPress.

Wann klassische Themes verwendet werden:

• Wenn Sie bereits eine Website mit einem klassischen Theme betreiben und zufrieden sind.
• Wenn Sie spezifische Funktionen eines Page Builders wie Elementor oder Divi benötigen.
• Für Projekte, die Flexibilität durch diese beliebten Themes suchen

Link

Links verweisen von einem Text zum nächsten. Die Qualität eines Links bestimmt das SEO-Ranking bei Google(Search-Engine-Optimization). Es gibt verschiedene Arten von Links:
-Backlink: führt von einer Website(von fremd) zu einer anderen Website(auf deine). Wichtig für SEO.
-interner Link: verweist auf eine Unterseite innerhalb einer Websiste
-externer Link: verweist auf eine Unterseite einer anderen Website
-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, in der Erweitert-Eigenschaft eines Blockelement ohne #. Auf diesen Anker, kann dann verlinkt werden mit dem #-Zeichen vorab (z.Beisp.: https://snsfamily.de/wp-lexikon-1/#lex-content).

Gute Links erkennen

Gute Links stehen meist im Content-Bereich selbst. Sie sind farblich erkennbar und zudem meist noch unterstrichen. Sie werden auf Ankertexte gesetzt, die gut verständlich sind und dem Leser bereits einen ersten Eindruck verschaffen, was diesen bei einem Klick auf den Link erwartet. Ferner stehen sie in einem Bezug zum Inhalt des Texts. Idealerweise werden vor allem solche Beiträge mit Links befüllt, die über einen hohen Traffic verfügen. Wichtig ist es darauf zu achten, dass die gesetzten Links untereinander nicht in Konkurrenz stehen.

Login

Das Login ist die Anmeldeseite für das Backend. Man kann es mit der folgenden Adresse aufrufen:

• domain/wp-login.php

Fast immer funktionieren auch Kürzel wie /login /admin oder /wp-admin.

Content

Inhalt

Content ist fast alles, was wir in unterschiedlichen Medien wahrnehmen. Wer herausstechen will, setzt auf einzigartigen Content, um Besucher und somit Traffic zu generieren, was in den meisten Fällen mit Umsätzen und Leads in Verbindung gebracht wird.

Dashboard

Nach der Anmeldung im Backend wird automatisch auf das Dashboard fokusiert, auf Deutsch Armaturenbrett. Standardmäßig hat es zwei Unterseiten:

• Startseite zeigt das Wichtigste zur Website auf einen Blick.
• Aktualisierungen zeigt eine Übersicht anstehender Updates.

Dashboard, auch weit verbreitet als Bezeichnung für das gesamte Backend, aber genau genommen ist es nur der erste Menüpunkt.

Details-Block

siehe auch Akkordeon

die Editoren in WordPress

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 gesamte 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. 

Footer

WordPress besteht fast immer auch aus einem Footer (dt. Fußbereich), das ist ein Bereich ganz unten auf einer Website, der auf allen Webseiten wiederholt wird. Genau gleich wie der Header, zusammen bilden diese zwei einen Rahmen für den Inhalt dazwischen.

Ein Footer enthält häufig den Titel der Website (als Link zur Startseite) und ein Menü mit den rechtlichen Pflichtlinks wie Impressum und Datenschutzerklärung sowie standardmäßig einen Link wie Stolz präsentiert von WordPress. Darüber hinaus kann man im Footer auch zahlreiche Widget-Blöcke unterbringen, die zusätzliche Informationen zeigen.

In Block-Themes ist der Footer ein Template-Teil, das man mit dem Website-Editor nach Belieben anpassen kann.

Frontend

WordPress besteht immer aus einem Frontend und einem Backend:

• Frontend  ist die Fassade, die ganz normale Website, die Besuchende sehen.
• Backend ist der Verwaltungsbereich, der nur für Mitarbeitende zugänglich ist. Hier stehen alle administrative Funktionen zur Verwaltung von Inhalten und der gesamten Website zur verfügung.
  Adminbereich von https://snsfamily.de/wp-admin

Das Frontend ist also die ganz normale Website, so wie Besuchende sie sehen, und ist nach der Installation meist unter einem Domain-Namen wie z. Beispiel snsfamily.de erreichbar.

FSE

Full Site Editing (FSE) bezeichnet WordPress-Features, um die Bearbeitung der gesamten Website ohne Codeberührung mit folgenden Wekzeugen und Techniken zu ermöglichen:

• Site-Editor
• Block-Editor _{Blöcke können an allen Stellen der Website platziert werden}
• Stile _{Voreinstellungen, z.B. für Farbe und Fonts}
• Stilbuch _{Stile betrachten und anpassen}
• Block-Themes
• theme.json