JS in OceanWP | ProjectDMC.org Deutsch

Um jQuery einzubinden, reicht es, wenn du in der functions.php des Child-Themes folgenden Code einfügst:

add_action( 'wp_enqueue_scripts', 'my_jquery_enqueue' );
function my_jquery_enqueue() {
  wp_enqueue_script( 'jquery' );
}

Das ist dann (im Gegensatz zu deinem Code-Beispiel) auch datenschutzkonform, da jQuery nicht von einem anderen Server geladen werden muss.

Achte aber darauf, dass WordPress jQuery im No-Conflict-Mode nutzt. Das bedeutet, dass du die Abkürzung $ für jQuery nicht nutzen kannst. Um das trotzdem zu nutzen, musst du die Funktion einbetten:

jQuery( document ).ready( function( $ ) {
    // $() kann statt jQuery() genutzt werden
   …
} );

vgl. wp_enqueue-script()

Ich hab gerade nochmal reingeschaut: OceanWP nutzt selber bereits jQuery. Du brauchst also keinen zusätzlichen Code in der functions.php eintragen, musst nur darauf achten, dass der Code im No-Conflict-Mode ausgeführt wird.

Kleine Zusatzinfo:
Für einen Sticky Header braucht man nicht zwingend JavaScript, CSS alleine tut’s auch. Tante google hilft 😀

@bscu

🤫 Pssst! Nicht verraten, @melojezzed wollte es doch möglichst kompliziert mit jQuery. 😜

Nein, im Ernst, ich habe mich strikt an den Titel der Frage gehalten, aber mit CSS ist es sicher einfacher einen Sticky Header zu erzeugen.

Hi zusammen,

vielen Dank für die flotten Antworten. Also, den einfachen Sticky Header ohne JS hab ich schonmal ausprobiert und es funktioniert. Aber bei diesem hier wird der Header und die Elemente darin ein bisschen kleiner und bekommen beim Scrollen einen Hintergrundfarbe, was ich gut fand. Allerdings habe ich die Antwort hier leider nicht ganz verstanden.

Also das brauche ich doch nicht mehr in die functions.php einzufügen, weil OceanWP bereichts jQuery abruft?

„add_action( ‚wp_enqueue_scripts‘, ‚my_jquery_enqueue‘ ); function my_jquery_enqueue() { wp_enqueue_script( ‚jquery‘ ); }“

Und das bette ich wo ein? Schreibe ich das so wortwörtlich rein?

„jQuery( document ).ready( function( $ ) { // $() kann statt jQuery() genutzt werden … } );“

Ich habe versucht das in die functions.php reinzuschreiben, aber dann kam eine Fehlermeldung wegen dem $. Hab ich das auch richtig verstanden, dass man statt „$“ auch „jQuery“ ausschreiben kann?

Generell hab ich den Eindruck, dass nichts funktioniert, was ich in die Custom JS reinschreibe. Hier hab ich was ähnliches gefunden und ausprobiert, aber da passiert auch nichts: https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

„

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById(„header“).style.fontSize = „30px“;
  } else {
    document.getElementById(„header“).style.fontSize = „90px“;
  }
}

„

Weiterhin dankeschön!