Hinzufügen eines glatten Effekts zum Ändern der Hintergrundfarbe in WordPress
Möchten Sie auf Ihrer WordPress-Website einen sanften Effekt für den Wechsel der Hintergrundfarbe hinzufügen? Vielleicht haben Sie auf einigen beliebten Websites gesehen, wie die Hintergrundfarbe eines bestimmten Bereichs oder der gesamten Webseite automatisch von einer Farbe zur anderen übergeht. Dieser schöne Effekt kann Ihnen helfen, die Aufmerksamkeit der Benutzer zu gewinnen und das Engagement auf Ihrer Website zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen sanften Effekt für den Wechsel der Hintergrundfarbe in WordPress hinzufügen können.
Was ist der Effekt "Weicher Farbwechsel im Hintergrund"?
Der Effekt des sanften Hintergrundfarbwechsels ermöglicht Ihnen einen automatischen Übergang zwischen verschiedenen Hintergrundfarben.
Der Wechsel geschieht langsam und durchläuft verschiedene Farben, bis er die endgültige Farbe erreicht.
Es sieht wie folgt aus: 
Diese Technik wird verwendet, um die Aufmerksamkeit des Benutzers mit sanften Effekten zu erregen, die das Auge erfreuen. Schauen wir uns also an, wie man diesen Effekt des sanften Hintergrundfarbwechsels in jedem WordPress-Theme hinzufügen kann.
Hinzufügen des Effekts "Weicher Hintergrundfarbenwechsel" in WordPress
Für dieses Tutorial müssen Sie Code in Ihren WordPress-Dateien hinzufügen.
Wenn Sie dies noch nicht getan haben, werfen Sie bitte einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Code in WordPress. Zunächst müssen Sie die CSS-Klasse des Bereichs herausfinden, den Sie ändern möchten. Dies können Sie mit dem Inspektionswerkzeug in Ihrem Browser tun.
Gehen Sie einfach mit der Maus auf den Bereich, den Sie ändern möchten, und klicken Sie mit der rechten Maustaste, um das Inspektionstool auszuwählen.
Als nächstes müssen Sie die CSS-Klasse notieren, auf die Sie abzielen möchten.
Im obigen Screenshot wollen wir zum Beispiel den Widget-Bereich im unteren Bereich anvisieren, der die CSS-Klasse "page-header" hat. Im nächsten Schritt müssen Sie einen einfachen Texteditor auf Ihrem Computer öffnen und eine neue Datei erstellen. Sie müssen diese Datei als wpm-background-tutorial.js auf Ihrem Desktop speichern.
Als nächstes müssen Sie den folgenden Code in Ihre JS-Datei einfügen:
jQuery(function($){ $('.page-header').each(function(){ var $this = $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331']; setInterval(function(){ var color = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); })
Wenn Sie diesen Code studieren, werden Sie feststellen, dass wir die CSS-Klasse, auf die wir abzielen wollen, im Code verwendet haben.
Außerdem haben wir vier Farben hinzugefügt. Unser weicher Hintergrundeffekt beginnt mit der ersten Farbe, geht dann zur nächsten Farbe über und fährt mit diesen Farben fort. Vergessen Sie nicht, Ihre Änderungen in der Datei zu speichern. Als nächstes müssen Sie die Datei wpm-bg-tutorial.js per FTP in den Ordner /js/ Ihres WordPress-Themes hochladen. Wenn Ihr Theme keinen js-Ordner enthält, müssen Sie einen erstellen.
Nachdem Sie Ihre JavaScript-Datei hochgeladen haben, ist es an der Zeit, sie in WordPress zu laden.
Sie müssen den folgenden Code in die Datei functions.php Ihres Themes einfügen.
function wpm_bg_color_scripts() { wp_enqueue_script( 'wpm-background-tutorial', get_stylesheet_directory_uri() .
'/js/wpm-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ) } add_action( 'wp_enqueue_scripts', 'wpm_bg_color_scripts' )
Dieser Code lädt die JavaScript-Datei und das abhängige jQuery-Skript, das Sie für die Funktion dieses Codes benötigen, ordnungsgemäß.
Das ist alles, Sie können nun Ihre Website besuchen, um es in Aktion zu sehen. Sie werden feststellen, dass sich die Hintergrundfarbe in dem Bereich, den Sie ausgewählt haben, sanft ändert. Es gibt viele andere Möglichkeiten, Hintergrundfarben in WordPress zu verwenden, um die Aufmerksamkeit der Benutzer zu erregen oder Ihren Inhalt hervorzuheben.
Zum Beispiel können Sie es versuchen:
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie den Effekt des glatten Hintergrundfarbwechsels in WordPress leicht hinzufügen können.