jQuery function in WordPress will nicht


#1
Hallo Forum,

ich möchte innerhalb einer WP-Website eine eigene jQuery function einsetzen,
die ein responsives Menü mit Slider öffnen bzw. schließt. Klingt wahrscheinlich simpel.

Dazu habe ich zuerst jQuery über die functions.php eingebunden, zumindest wird
HTML:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
im Sourcecode gezeigt.

Zusätzlich wird eine selbst erstellte Datei scripts.js auf die gleiche Weise eingebunden.
Auch sie wird korrekt im Sourcecode dargestellt.

Diese Datei enthält nun exakt folgenden Inhalt:

Javascript:
jQuery(document).ready(function() {
    jQuery('.menu-trigger').click(function(e) {
        jQuery('#site-navigation').slideToggle(500);
 
        e.preventDefault();
    });
    
});
Kein weiteres Zeichen steht in der Datei.

Leider führt der Klick auf das Div .menu-trigger zu absolut keiner Reaktion.

Falls es hilft, zeige ich gerne auch noch den HTML Code der entsprechenden Sektion:
HTML:
<div id="menu-trigger"><span>&#9776;</span></div>
                
<nav id="site-navigation" class="menu-1">
<div class="menu-kopf-container">
<ul id="site-menu" class="menu">
<li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46"><a href="/login/">Login</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href="/home/">Start</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="/about/">Hallo</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="/blog/">Blog</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href="/kontakt/">Kontakt</a></li>
</ul>
</div>
</nav>
Was mache ich falsch? Ich verstehe es nicht ...
 
#2
Die JQuery-Adresse dürfte falsch sein.
Nach dem Punkt kommt eine CLass, nicht eine ID.
Für die ID braucht man ein #
Javascript:
jQuery('#menu-trigger').click(function(e) {
 
#3
Hallo Yaslaw,

da hast Du vollkommen Recht, aber trotz Korrektur dieses Fehlers will es nicht funktionieren.

Es scheint so, als sei die function falsch, obwohl das eigentlich nicht sein kann.
Oder muss ich durch add_action() oder ähnliches erstmal dafür sorgen, dass die function überhaupt anläuft?
 
#7
Okay, vielen Dank. Da steht:

Code:
Das Skript von "https://www.xxx.xx/scripts.js" wurde geladen, obwohl sein MIME-Typ ("text/html") kein für JavaScript gültiger MIME-Typ ist.
2 test
Laden fehlgeschlagen für das <script> mit der Quelle "https://www.xxx.xx/scripts.js". test:141:1
 

Sempervivum

Erfahrenes Mitglied
#8
OK, Problem beim Laden deines Skripts. Genau weiß ich es nicht, aber der MIME-Typ wird wohl vom Webserver gesetzt. Da muss dir jemand mit weitergehenden Kenntnissen weiter helfen.
 

Sempervivum

Erfahrenes Mitglied
#10
Mir fehlt zwar das Präsenzwissen, aber ich habe gegoogelt und bei einem Apache-Webserver scheint es ganz einfach zu sein, den MIME-Type zu setzen:
Adding MIME types - Apache .htaccess Guide, Tutorials & Examples
Allerdings sollte er normaler Weise standardmäßig gesetzt sein und wenn er das nicht ist, vermute ich, dass dein Provider das Laden und Ausführen von Javascript-Dateien blockieren will. Wer ist denn dein Provider?
 
#11
Die Website liegt bei einem größeren Provider und WordPress selbst benutzt ja JavaScript an allen Ecken, oder? Deshalb kann ich mir nicht vorstellen, dass es hier irgendeine Blockade geben kann.

Ich dachte, ich muss vielleicht in die scripts.js Datei einen Header einsetzen, wie

Javascript:
<doc type="javascript" bla="blub">
 

Sempervivum

Erfahrenes Mitglied
#12
Nein, das würde nur gehen, wenn die Datei z. B. von einem PHP-Skript erzeugt würde. Eine js-Datei darf nur Javascript-Code enthalten. Versuche, ob Du mit einer .htaccess-Datei zum Ziel kommst.
 

basti1012

Erfahrenes Mitglied
#13
Ich weiss nicht wie das bei Wordpress ist, aber wenn bei mir in der Console der mist mit den mime type drinn steht , mache ich bei der Zeile
Code:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
einfach das weg type='text/javascript' .

Wollte das mal dazwischen schmeißen vieleicht hilft es euch ja irgendwie
 
#14
Vielen Dank für die Tipps und Hilfe.

Ich habe den Fehler gefunden, es war schlicht eine falsche Referenzierung. WP hat versucht, auf das Parent Theme zuzugreifen, statt auf das Child Theme ... also komplett mein Fehler.