Support » Allgemeine Fragen » JS in OceanWP

  • melojezzed

    (@melojezzed)


    Hi zusammen,

    ich habe hier (https://www.youtube.com/watch?v=Wy_fCecpPgE) eine Anleitung gefunden, wie man einen Sticky Header so grob wie ich haben will programmieren kann. Dabei handelt es sich um eine HTML-Datei und eine CSS. Ich nutze OceanWP als Theme (habe auch ein Childtheme installiert) und möchte die Seite mit dem Elementor Pagebuilder bauen.

    Nun habe ich den CSS Code kopiert und beim Custom CSS/JS eingefügt und JS Code der HTML-Datei unten in den Custom JS Bereich eingefügt.

    Nun steht da, man soll den Code ohne die <script> Tags einfügen. Jedoch befindet sich innerhalb des ersten Tags das:

    src=“https://code.jquery.com/jquery-3.5.1.min.js&#8220; integrity=“sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=“ crossorigin=“anonymous“

    Nun weiß ich leider nicht, wie ich das reinschreiben soll.

    Hier der Link zu dem Code:

    https://github.com/codingWithElias/Animated-Sticky-Navbar/blob/master/index.html

    Vielen Dank fürs Feedback!<script>$(document).ready(function(){$(window).on(’scroll‘, function(){if ($(window).scrollTop()) {$(„header“).addClass(‚bgc‘);}else{$(„header“).removeClass(‚bgc‘);}});});</script>

    • Dieses Thema wurde geändert vor 1 Jahr von melojezzed.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Moderator Bego Mario Garde

    (@pixolin)

    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()

    Moderator Bego Mario Garde

    (@pixolin)

    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.

    bscu

    (@bscu)

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

    Moderator Bego Mario Garde

    (@pixolin)

    @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.

    Thread-Starter melojezzed

    (@melojezzed)

    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!

Ansicht von 5 Antworten - 1 bis 5 (von insgesamt 5)
  • Das Thema „JS in OceanWP“ ist für neue Antworten geschlossen.