Zum Hauptinhalt springen

Wordpress – Tipps und Tricks

Tipps und Tricks von WordPress, den Themes und den Plugins werden aufgrund der Bereiche aufgelistet.

Darin auch allgemeine Informationen über Webdesign oder auch Hosting.

Ich bin das Menü

Installation

wordpress – habe website über inseln, dort als post strände, dörfer, andere sehenswürdigkeiten. die sind schon mit schlagworten versehen, z.B. dorf, strand. möchte die hintergründe aufgrund dieser schlagworte leicht anders einfärben. geht das mit einfachstem zusätzlichem css im child-theme, und falls, so ähnlich wie eine if-then-else-schlaufe? es betrifft nur posts. und es betrifft nicht nur hintergrund im column-settings, auch in anderen bereichen.

03:52

Das funktioniert hervorragend und ist mit einfachem CSS im Child-Theme (in der style.css) oder im Customizer unter Zusätzliches CSS möglich. [1, 2, 3]
Eine «if-then-else-Schlaufe» im klassischen Sinne gibt es in CSS nicht, aber WordPress weist jedem Beitrag automatisch spezifische Klassen im <body>– und <article>-Tag zu (z. B. tag-strand oder tag-dorf). Diese Klassen können Sie wie eine Bedingung nutzen («Wenn Tag X vorhanden ist, wende Design Y an»).
1. Das Prinzip (Beispiel-Code)
WordPress generiert für jedes Schlagwort die CSS-Klasse tag-slug. Den Slug (die URL-freundliche Version Ihres Schlagwortes) können Sie im WordPress-Backend unter Beiträge > Schlagwörter einsehen. [1]
Fügen Sie diesen Code in Ihre CSS-Datei ein:
css
/* --- Standard-Hintergrund für alle Posts (das "Else") --- */
body.single-post {
    background-color: #f4f4f4; /* Hellgrau */
}

/* --- Fall A: Schlagwort "strand" --- */
body.single-post.tag-strand {
    background-color: #e0f2fe; /* Hellblau */
}

/* --- Fall B: Schlagwort "dorf" --- */
body.single-post.tag-dorf {
    background-color: #fef3c7; /* Hellgelb */
}
Verwende Code mit Vorsicht.

2. Bereiche außerhalb der «Column» anpassen
Da WordPress diese tag-...-Klassen ganz oben beim <body> oder <article> einfügt, können Sie alle untergeordneten Elemente dieses Beitrags gezielt ansprechen. Sie müssen die Klassen nur kombinieren:
css
/* Wenn das Schlagwort "strand" ist, ändere zusätzlich Überschriften und Boxen */
body.single-post.tag-strand h1, 
body.single-post.tag-strand h2 {
    color: #0369a1; /* Dunkelblau für Überschriften */
}

body.single-post.tag-strand .wp-block-column {
    background-color: #bae6fd; /* Eigener Hintergrund nur für Columns */
}
Verwende Code mit Vorsicht.

3. Was Sie beachten sollten (Einschränkungen)
    • Mehrere Schlagwörter: Wenn ein Post die Schlagwörter «Strand» und «Dorf» hat, erhält er beide Klassen (tag-strand tag-dorf). In CSS gewinnt immer die Regel, die in der Datei weiter unten steht.
    • Seiten (Pages): Diese Tags funktionieren standardmäßig nur für Beiträge (Posts). Wenn Ihre Insel-Einträge als «Seiten» statt «Posts» angelegt sind, greift die Klasse tag-... nicht.

Falls Sie Elementor, Divi oder den Gutenberg-Block-Editor verwenden, können Sie den Hintergrund auch dynamisch steuern. Bevorzugen Sie eine visuelle Lösung im Editor oder benötigen Sie Hilfe beim genauen Auslesen Ihrer Schlagwort-Namen?

  • Anpassen von Aussehen und Einstellungen Ihres WordPress …

    WordPress-Themedetails anpassen * Klicken Sie im linken Menü der WordPress-Administration auf Design. Weitere Unterpunkte werden e…

    www.ionos.de

  • WordPress CSS lernen: Einfache Techniken, die ich vom ersten Tag an gekannt haben wollte

    CSS ist in Ihrem WordPress-Theme integriert. Sie können Ihr eigenes benutzerdefiniertes CSS über den Customizer ( Darstellung » An…

    Duplicator Pro
  • style.css – Wie du dein WordPress mit CSS optisch veränderst

    Doch keine Angst, das ist garnicht schwer. Die erste Möglichkeit dein eigenes CSS zu hinterlegen besteht direkt im Customizer unte…

    www.deinwp.de
Alle anzeigen

You said: Was ich natürlich wissen muss, sind die korrekten kürzel für jedes Element, z.B. .wp-block-column. wie finde ich am einfachsten, schnellsten raus, welch ein element wie heisst und was möglich ist? am besten natürlich an meiner eigenen seite – ohne css-studium?

04:01

Der einfachste und schnellste Weg führt über die Entwicklertools (DevTools) Ihres Webbrowsers (Chrome, Firefox, Safari oder Edge). Sie müssen dafür kein CSS studieren – der Browser zeigt Ihnen die Klassen per Klick direkt auf Ihrer eigenen Website an.
1. Der «Element untersuchen»-Trick (Schnellste Methode)
    1. Öffnen Sie einen Ihrer Beiträge im Browser.
    2. Machen Sie einen Rechtsklick auf das Element, dessen CSS-Klasse Sie wissen möchten (z. B. auf eine Spalte, den Hintergrund oder die Überschrift).
    3. Wählen Sie im Menü «Untersuchen» (oder «Element untersuchen»).

Es öffnet sich ein Fenster im Browser. Links sehen Sie den HTML-Code, rechts die aktuellen CSS-Befehle.
2. So lesen Sie die Klassen ab
    • Wenn Sie den Mauszeiger im HTML-Code (links) über die Zeilen bewegen, leuchtet das entsprechende Element auf Ihrer Website farbig auf.
    • Suchen Sie nach dem Wort class="...". Alles, was dort in Anführungszeichen steht, sind die CSS-Klassen dieses Elements.
    • Wichtig für Ihr CSS: Vor jede Klasse müssen Sie im Code einen Punkt setzen (z. B. wird aus class="wp-block-column" im CSS dann .wp-block-column).

3. Spickzettel: Die häufigsten WordPress-Klassen
Da Sie den Gutenberg-Block-Editor nutzen, heißen die wichtigsten Elemente fast immer gleich:
    • Ganzer Beitragsinhalt: .wp-block-post-content
    • Überschriften: h1, h2, h3 (ohne Punkt davor!)
    • Absätze / Text: p (ohne Punkt davor!)
    • Spalten-Gruppe: .wp-block-columns
    • Einzelne Spalte: .wp-block-column
    • Bilder: .wp-block-image
    • Zitate: .wp-block-quote

4. Der «Live-Test» im Browser (Was ist möglich?)
Sie können in den Entwicklertools (rechte Seite unter «Styles») direkt live Code hineinschreiben, um zu sehen, was passiert. Das verändert Ihre Website nicht dauerhaft, sondern nur für Sie im Moment:
    1. Klicken Sie rechts in ein bestehendes CSS-Feld.
    2. Tippen Sie zum Testen background-color: red; ein.
    3. Wenn sich das Element rot färbt, haben Sie die richtige Klasse getroffen.
    4. Kopieren Sie diesen Klassennamen dann einfach in Ihr Child-Theme.

Möchten Sie, dass wir ein konkretes Element zusammen heraussuchen? Nennen Sie mir einfach das Element (z. B. den Beitrags-Titel oder den Inhalts-Container), und ich gebe Ihnen das exakte Kürzel dafür.

You said: fürs erste, wie kann ich am beispiel der eigenen Antwort, z.B. «4. Der «Live-Test» …» die umrandung als grafische darstellung länger farbig halten, dass ich es auch verstehen kann?

04:13

Um das Element visuell «einzufrieren», damit Sie die CSS-Klassen in Ruhe analysieren können, nutzen Sie am besten die Dauer-Markierung (Fokus) oder den Zeichenstift (Gitter-Modus) der Entwicklertools.
Hier sind die zwei schnellsten Wege, wie Sie das Element dauerhaft farbig umrandet halten:
Methode 1: Der «Inspektor-Lock» (Am einfachsten)
    1. Drücken Sie F12 (oder Rechtsklick -> Untersuchen), um die Entwicklertools zu öffnen.
    2. Klicken Sie ganz oben links in den Entwicklertools auf das Pfeil-Symbol mit dem Kasten (Umschalt + Strg + C / bzw. Cmd + Shift + C am Mac).
    3. Bewegen Sie die Maus über den Text «4. Der «Live-Test»…». Der Browser umrandet das Element jetzt farbig und zeigt ein kleines Info-Fenster mit den Maßen und Klassen an.
    4. Klicken Sie einmal mit der linken Maustaste auf den Text.
    5. Der Effekt: Der HTML-Code springt genau zu dieser Stelle und bleibt dort fixiert (blau hinterlegt). Sie können die Maus jetzt wegbewegen, das Element bleibt im Code-Fenster ausgewählt.

Methode 2: Das Element künstlich umranden (Zum besseren Verständnis)
Wenn Sie die farbige Umrandung direkt auf der echten Website sehen möchten, während Sie den Code studieren, fügen Sie ihm im Browser einen temporären Rahmen hinzu:
    1. Machen Sie einen Rechtsklick auf den Text «4. Der «Live-Test»…» und wählen Sie Untersuchen.
    2. Auf der rechten Seite im Bereich «Styles» sehen Sie ganz oben eine leere Zeile unter element.style {.
    3. Klicken Sie in diese Klammern { } und tippen Sie Folgendes ein:
      border: 3px solid red;
    4. Der Effekt: Der Text erhält sofort einen dicken, roten Rahmen auf der Website. Dieser bleibt so lange sichtbar, bis Sie die Seite neu laden (F5). So können Sie genau sehen, wie groß die Box des Elements ist und welche anderen Elemente sie umgeben.

Methode 3: Das Layout-Raster einblenden (Für Container und Spalten)
Gerade bei verschachtelten Elementen (wie Spalten oder Boxen) hilft das eingebaute Gitter-Werkzeug:
    1. Wenn Sie ein Element im HTML-Code (links) angeklickt haben, sehen Sie daneben oft ein kleines, graues Badge mit der Aufschrift grid oder flex.
    2. Klicken Sie auf dieses grid / flex Badge.
    3. Der Effekt: Der Browser zeichnet Ihnen permanente, farbige Linien und Abstände direkt auf die Website, die alle Spaltengrenzen und Ränder exakt sichtbar machen – ideal, um das Box-Modell von CSS ohne Theorie zu verstehen.

Soll ich Ihnen zeigen, wie Sie die Abstände (Padding/Margin) dieses Elements in der Grafik farbig sichtbar machen, um zu sehen, wo der Hintergrund aufhört?

ich möchte ein komplettes beispiel mit hexadezimal-farbcode, für dorf mit #edeefa, als css im customizer und als element in dieser extraklasse. ich habe ja noch posts die weder strand, noch dorf sind, sondern dritte oder ganz ohne farbige formatierung

Hier ist das komplette, einsatzbereite Beispiel für Sie.
Dieser Code deckt alle Ihre Bedingungen ab: Er färbt das Dorf-Element in Ihrer Wunschfarbe, lässt Beiträge ohne Schlagworte unberührt und verwendet Hexadezimal-Farbcodes (mit einer Besonderheit für die Transparenz).
1. Eintrag im Impreza-Backend (beim Bleistift)
Öffnen Sie die Zeilen-Einstellungen der betroffenen Zeile in Ihrem Post.
    • Feld „Extraklasse“: insel-zeile

2. Der CSS-Code für den Customizer
Kopieren Sie diesen Block eins zu eins in Ihr WordPress unter Design > Customizer > Zusätzliches CSS:
css
/* ==========================================================================
   Dynamische Zeilen-Hintergründe nach Schlagworten (Impreza)
   ========================================================================== */

/* --- FALL 1: Beitrag hat das Schlagwort "dorf" --- */
body.tag-dorf .insel-zeile .l-section-overlay {
    /* #edeefa mit 80% Deckkraft (80% entspricht am Ende dem Kürzel cc) */
    background-color: #edeefacc !important; 
}

/* --- FALL 2: Beitrag hat das Schlagwort "strand" (Beispiel für Hex-Code) --- */
body.tag-strand .insel-zeile .l-section-overlay {
    /* Beispiel: Ein softes Strand-Blau mit Deckkraft */
    background-color: #e0f2fecc !important; 
}

/* --- FALL 3: Alle anderen Posts (weder dorf, noch strand, oder ohne Schlagwort) --- */
/* Hier müssen Sie im CSS nichts eintragen! 
   Da die Bedingung "body.tag-dorf" oder "body.tag-strand" nicht erfüllt ist,
   ignoriert der Browser den Code oben komplett. Die Zeile bleibt völlig normal,
   so wie Sie sie in Impreza oder im Standard-Layout eingestellt haben. */
Verwende Code mit Vorsicht.

Der Hex-Code-Trick für Transparenz (Die letzten zwei Zeichen)
Da es sich um eine Hintergrundüberlagerung handelt, würde ein reiner Hex-Code wie #edeefa das Hintergrundbild komplett verdecken.
Moderne Browser erlauben es, achtstellige Hex-Codes zu nutzen. Die letzten beiden Stellen bestimmen die Durchsichtigkeit (Alpha-Kanal):
    • #edeefa = 100% deckend (man sieht kein Bild mehr durch)
    • #edeefacc = ca. 80% deckend (Empfehlung, die Farbe wirkt kräftig, das Bild schimmert durch)
    • #edeefa80 = 50% deckend (sehr transparent)

Möchten Sie den Code so direkt in Ihrem Customizer testen, oder soll ich Ihnen für ein drittes Schlagwort (z. B. «sehenswuerdigkeit») direkt die passende Zeile mit CSS-Hex-Code vorbereiten?