Springe zum Hauptinhalt

So ändern Sie die Hintergrundfarben in WordPress

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Einer unserer Abonnenten fragte uns, ob es möglich sei, die Farbe des WordPress-Hintergrunds zufällig zu ändern. Hintergrundfarben spielen eine wichtige Rolle in Ihrem Publikum. Sie können die Art und Weise ändern, wie Benutzer mit Ihrer Website interagieren. In diesem Tutorial zeigen wir Ihnen, wie Sie die Hintergrundfarbe Ihres WordPress-Blogs zufällig ändern können.

1-Methode: Manuelles Hinzufügen zufälliger Farben

Diese Methode ist für Entwickler gedacht. Dazu müssen Sie einen Teil des Codes in Ihre Plugins oder Themes einfügen. Denken Sie daran, Sie wurden gezeigt Wie erstelle ich ein WordPress-Plugin?.

Sie müssen lediglich den folgenden Code in Ihr Plugin oder in die Datei "functions.php" Ihres Themas einfügen.

bpc_bg Funktion () {$ rand = array ( '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' 'a', 'b', 'c', 'd', 'E', 'F'); $ Farbe = '#'. $ Rand [rand (0,15)]. $ Rand [rand (0,15)]. $ Rand [rand (0,15)]. $ Rand [rand (0,15)] $ rand [rand (0,15)] $ rand [rand (0,15)] .. $ Farbe Echo; }

Diese Funktion zeigt nur die Hexadezimalfarben an, die zuvor generiert wurden.

Sie müssen daher die Datei header.php Ihres Themas ändern, in der sich das Boy-Tag wie im folgenden Bild befindet:

>

Sie sollten es mit dem folgenden Code ersetzen:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

style = "Hintergrundfarbe: ">>

Speichern Sie Ihre Datei und aktualisieren Sie Ihre Seite. Sie werden feststellen, dass sich jedes Mal die Farbe ändert.

zufälliger WordPress Hintergrund

Die Farben, die Sie auswählen können, sind unbegrenzt. Es ist sogar möglich, dasselbe mit Farben zu tun, die Sie vordefiniert haben.

Methode 2: So ändern Sie die Hintergrundfarben mit einem Plugin

Das Rendern dieser Methode ist besser. Weil Sie damit mehrere Farben gleichzeitig und dynamisch anzeigen können. Alles was Sie tun müssen, ist das Plugin zu installieren und zu aktivieren sagenhafte Hintergrundfarben. Sie können unser Führer lesen zum Installieren und Aktivieren von WordPress-Plugins.

animierter Hintergrund

Beim Zugriff auf Ihr Blog werden Sie feststellen, dass die Hintergrundfarben als Streifen dargestellt werden, die sich in einem Verlaufsübergang ändern.

3-Methode: Hinzufügen einer benutzerdefinierten Farbe durch Spielen mit CSS-Klassen

Fast alle gängigen WordPress-Themes verwenden die Funktion " body_class WordPress auf dem "body" -Tag. Diese Funktion fügt CSS-Klassen, die von WordPress oder Plugins generiert wurden, zum Body-Tag Ihres Blogs hinzu. Jede Klasse variiert je nach Standort. Die Kategorie der Kategorien unterscheidet sich daher von der der Archive oder Autoren.

Wenn Sie beispielsweise ein Blog mit der Kategorie " Fotografie“, Dann finden Sie die entsprechende Klasse auf der Seite des Blog-Archivs.

Blog-Artikel Klasse

Von diesem Moment an können Sie diesem Tag einen bestimmten Stil zuweisen.

body.category-Fotografie {background-color: #faebd7; }

Ebenso können Sie einen bestimmten Code für eine bestimmte Kategorie anwenden

body.postid-65 {background-color: #faebd7; }

Das ist ungefähr alles, was Sie wissen müssen. Ich hoffe, mit diesem Tutorial können Sie Ihrem WordPress-Blog benutzerdefinierte Klassen hinzufügen. Teilen Sie diesen Artikel gerne mit Ihren Freunden in Ihren bevorzugten sozialen Netzwerken.

Dieser Artikel enthält Kommentare 2

  1. Guten Tag,
    Ihr "Stück Code" interessiert mich und ich möchte es an meine Bedürfnisse anpassen.
    Dies beinhaltet das Ändern der Farben alle, sagen wir 5 Sekunden.
    Ich habe keinen Weg gefunden, es zu tun. Ich weiß nicht über PHP und die Verwendung eines Timers.
    Kannst du mich bitte auf den Weg bringen?

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
2 Aktien
Aktie2
tweet
Registrieren