Dynamisch wechselndes Logo bei Scroll-function

Ich migriere eine statische Site auf WP. Derzeit habe ich eine Header-function, die das umgekehrte Logo in Vollfarbe auf Benutzerscrollen mit JS ändert. Siehe function bei Blättern

Aktuelle JS für Scroll-function:

$(window).scroll(function() { var top = $(window).scrollTop(); //Clears navbar timing functions on initial scroll clearTimeout(timeout); //Conditional to make function run if header is scroll pased 100px if ((top > 100) && $('#mainNav').is(':hidden')) { showNav(); timeout = setTimeout(hideNav, 2000); } else if ((top > 100) && $('#mainNav').is(':visible')) { showNav(); $('#logo').attr('src', 'https://wordpress.stackexchange.com/questions/272406/dynamically-changing-logo-on-scroll-function/assets/sg-logo-inverted.svg'); $('.nav-trigger-line').css({'background-color':'#fff'}); } else { $('header').css({ 'background-color': 'transparent' }); $('#logo').attr('src', 'https://wordpress.stackexchange.com/questions/272406/dynamically-changing-logo-on-scroll-function/assets/sg-logo-inverted.svg'); $('#logo').css({'width': '175px'}); $('.nav-trigger-line').css({'background-color':'#fff'}); } }); 

Aktuelles HTML-Markup:

 

Ich habe die Markierung in meiner Datei header.php überarbeitet, um das Site-Logo dynamisch über das WP Dashboard hinzuzufügen:

Überarbeitetes HTML-Markup:

 
<a href="https://wordpress.stackexchange.com/questions/272406/dynamically-changing-logo-on-scroll-function/" rel="home"> <img id="logo" src="https://wordpress.stackexchange.com/questions/272406/dynamically-changing-logo-on-scroll-function/" class="img-fluid" alt="Synchrony Group">

Die Bildlauffunktion funktioniert weiterhin, ersetzt jedoch das Bild nicht, da nach dem Bild im bestimmten Verzeichnis der Seite gesucht wird, das nicht existiert.

Frage: Wie kann ich das Logo bei der Scroll-function dynamisch ändern? Ist das etwas, das von PHP und nicht von JS gehandhabt wird? Was ist die richtige Methode, um dies zu tun?

Solutions Collecting From Web of "Dynamisch wechselndes Logo bei Scroll-function"

Ich gehe davon aus, dass sich die Datei, die Sie anzeigen möchten, in Ihrem Themenordner befindet.

Sie können get_template_directory_uri , um den Pfad des get_template_directory_uri des aktuell aktivierten Themes zu erhalten.

Wenn Sie get_stylesheet_directory_uri() Themen zu unterstützen, sucht get_stylesheet_directory_uri() im Ordner des aktuell aktivierten get_stylesheet_directory_uri() Themas nach, ob ein get_stylesheet_directory_uri() Thema verwendet wird.

Wenn Sie JavaScript in einer separaten Datei haben müssen, sollten Sie wp_localize_script() wie PHP-Variablen mit wp_localize_script() an Ihre JavaScript-Datei wp_localize_script() . Das ist ziemlich einfach.

Normalerweise übergebe ich eine Variable namens themeUrl mit der URL des Theme-Ordners und baseUrl mit der Basis-URL meiner Site zu meinem JavaScript.

Ohne erneutes Schreiben könnten Sie nur auf die absolute URL verweisen.

Also ...src', './wp-content/themes/YOUR_THEME_HERE/assets/sg-logo-inverted.svg'

Oder, ein schöner Weg wäre, wp_localize_script() zu verwenden, um auf den wp_localize_script() zu verweisen, und dann können Sie über JavaScript darauf zugreifen.