2017-05-19 35 views
0

首先,我對JavaScript沒有希望,對JSON一無所知。如何在JSON文件中調用Wordpress get_stylesheet_directory_uri()

我目前正在構建一個網站,並將particles.js納入設計中。然而,在搜索了幾天之後,我感到茫然,至於如何將get_stylesheet_directory_uri()函數調用到JSON配置文件中。

我能夠弄清楚如何在particles.js和particles-app.js中通過在全局的header.php文件中聲明一個js變量來做到這一點,但對於JSON,我不知道。

這是我需要調用此:

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

如果我離開它是,它僅指向根WordPress的文件。

整個JSON文件是:

{ 
    "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 
} 

問候 邁克爾

回答

0

由於URL被分配給全局變量JS在頭部,你可以調用/追加它的JSON對象像這裏面。

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

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

console.log(json); 
+0

嗨@gvgvgvijayan,我都試過,但我得到這個錯誤在Chrome DevTools''未捕獲的語法錯誤:在XMLHttpRequest.xhr.onreadystatechange意外標記V IN JSON在350 位置JSON.parse() (顆粒.js?ver = 4.7.5:1530)'' - 我已經使用整個JSON文件代碼更新了原始文章。 – user3436334

+0

@ user3436334使用firefox進行檢查並報告輸出內容。 – gvgvgvijayan

+0

檢查傳遞給'JSON.parse'的參數是字符串而不是JSON對象。如果在將其串化之後如此傳遞該值。 – gvgvgvijayan

0

您可以使用PHP的樣式表的直接URL。

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

可能這會幫助你。