So laden Sie ein Skript nur für Mobilgeräte auf WordPress

Ich versuche, einen einfachen Javascript-Code auf WordPress nur auf dem Handy im Header zu laden.

Ich habe Plugins ausprobiert und codiert, aber es scheint nicht in meiner Reichweite zu sein und brauche Hilfe: D

Ciao!

function custom_load_scripts() { 
   // Load if not mobile 
   if ( ! wp_is_mobile() ) { 
      // Example script 
      wp_enqueue_script( 'script-name',get_template_directory_uri() . '/js/example.js', array (), '1.0.0', true ); 
      } 
}

add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );

Andere Antworten haben vorgeschlagen, die WordPress-Funktion zu verwenden wp_is_mobile() beim Einreihen eines Skripts. Seien Sie dabei sehr vorsichtig. Wenn Sie Caching-Plugins verwenden oder wenn Ihr Host PHP-Anfragen zwischenspeichert, könnte dies diese Methode unbrauchbar machen.

Stattdessen würde ich empfehlen, die JavaScript-Datei zu laden und zu testen, ob der Browser mobil ist oder nicht, basierend auf der Bildschirmgröße des Geräts, das JavaScript verwendet.

Hier ist ein Beispiel (verwendet jQuery):

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Add your script that should run on mobile here
    }
 });

Sie sollten JS- (oder CSS-) Dateien nicht direkt zu Ihrer hinzufügen header.php oder footer.php Dateien.

Was Sie stattdessen tun können, ist Enqueue- und Dequeue-Skripte und -Stile, die das verwenden wp_enqueue_scripts Haken.

Innerhalb einer Funktion an diesem Hook fügen Sie Skripte mit dem hinzu wp_enqueue_script() Funktion. Setzen Sie das 5. Argument auf true fügt den Code in den Header ein.

Sie werden feststellen, dass das dritte Argument ein Array ist, das ist ein Array von Skripten, von denen Ihr Code abhängig ist, z. B. wenn Ihr Code auf jQuery angewiesen ist, können Sie dies ändern in array( 'jquery' )

Schließlich hat WordPress eine Funktion zur Erkennung mobiler Geräte, die relativ gut funktioniert, bequem aufgerufen wp_is_mobile().

Wir können also einfach prüfen, ob das zurückkehrt true bevor wir unser Skript einreihen.

Fügen Sie diesen Code in Ihre ein functions.php Datei, natürlich nachdem Sie die URL durch die URL zu Ihrem Skript ersetzt haben.

add_action( 'wp_enqueue_scripts', 'jung_mobile_only_js');
function jung_mobile_only_js(){
    if( wp_is_mobile() ){
        wp_enqueue_script( 'jung-mobile-only-js', 'URL_TO_YOUR_JS_FILE_HERE', array(), '1.0', true );
    }
}