Wie rufe ich Wordpress get_stylesheet_directory_uri() in JSON-Datei

Question

Erstens bin ich hoffnungslos mit Javascript und habe keine Ahnung von JSON.

Ich baue derzeit eine Website und integriert particles.js in das Design. Nach einigen Tagen Suche bin ich jedoch ratlos, wie ich die Funktion get_stylesheet_directory_uri() in der JSON-Konfigurationsdatei aufrufen kann.

Ich konnte herausfinden, wie man es in den particles.js und particles-app.js durch Deklarieren einer js-Variable in der Datei header.php global, aber wie für JSON, habe ich keine Ahnung.

Dies ist, wo ich brauche diese zu nennen:

"image": { 
    "src": "sprites/blueBlur.png", 
    "width": 100, 
    "height": 100 
    } 

Wenn ich es lassen, wie ist, es zeigt sich nur auf die Root-Wordpress-Datei.

Die ganze JSON-Datei ist:

{ 
    "particles": { 
    "number": { 
     "value": 43, 
     "density": { 
     "enable": true, 
     "value_area": 800 
     } 
    }, 
    "color": { 
     "value": "#00ffd8" 
    }, 
    "shape": { 
     "type": "image", 
     "stroke": { 
     "width": 0, 
     "color": "#000" 
     }, 
     "polygon": { 
     "nb_sides": 6 
     }, 
     "image": { 
     "src": "sprites/blueBlur.png", 
     "width": 100, 
     "height": 100 
     } 
    }, 
    "opacity": { 
     "value": 1, 
     "random": true, 
     "anim": { 
     "enable": false, 
     "speed": 1, 
     "opacity_min": 0.1, 
     "sync": false 
     } 
    }, 
    "size": { 
     "value": 2, 
     "random": false, 
     "anim": { 
     "enable": true, 
     "speed": 10, 
     "size_min": 40, 
     "sync": false 
     } 
    }, 
    "line_linked": { 
     "enable": false, 
     "distance": 200, 
     "color": "#ffffff", 
     "opacity": 1, 
     "width": 2 
    }, 
    "move": { 
     "enable": true, 
     "speed": 1.9, 
     "direction": "none", 
     "random": true, 
     "straight": false, 
     "out_mode": "out", 
     "bounce": false, 
     "attract": { 
     "enable": false, 
     "rotateX": 600, 
     "rotateY": 1200 
     } 
    } 
    }, 
    "interactivity": { 
    "detect_on": "canvas", 
    "events": { 
     "onhover": { 
     "enable": false, 
     "mode": "grab" 
     }, 
     "onclick": { 
     "enable": false, 
     "mode": "push" 
     }, 
     "resize": true 
    }, 
    "modes": { 
     "grab": { 
     "distance": 400, 
     "line_linked": { 
      "opacity": 1 
     } 
     }, 
     "bubble": { 
     "distance": 400, 
     "size": 40, 
     "duration": 2, 
     "opacity": 8, 
     "speed": 3 
     }, 
     "repulse": { 
     "distance": 200, 
     "duration": 0.4 
     }, 
     "push": { 
     "particles_nb": 4 
     }, 
     "remove": { 
     "particles_nb": 2 
     } 
    } 
    }, 
    "retina_detect": true 
} 

Grüße Michael

Answer 1

Da die URL zum globalen JS Variable in Kopf zugeordnet ist, können Sie es in das Objekt JSON nennen/anhängen wie diese.

var url = 'http://example.com/wp-content/themes/twentysixteen'; 

var json = { 
    "image": { 
    "src": url + "sprites/blueBlur.png", 
    "width": 100, 
    "height": 100 
    } 
}; 

console.log(json); 

Answer 2

Sie können die direkte URL Ihres Stylesheets über PHP verwenden.

Wie

<?php echo $_SERVER['SERVER_NAME']; ?>/wp-content/themes/your_theme/style_directory/file.css 

können diese Ihnen helfen.