在Wordpress中運行jquery腳本

Question

我正在嘗試使用一個類似的腳本，其中一個是WordPress，但它不會工作，我知道這是WordPress的主角/看到jQuery的方式。如何寫這個在WordPress中工作？我只是交換圖像的方框。

var fadeinBox = $("#box2"); 
 
var fadeoutBox = $("#box1"); 
 

 
function fade() { 
 
    fadeinBox.stop(true, true).fadeIn(2000); 
 
    fadeoutBox.stop(true, true).fadeOut(2000, function() { 
 
     var temp = fadeinBox; 
 
     fadeinBox = fadeoutBox; 
 
     fadeoutBox = temp; 
 
     setTimeout(fade, 1000); 
 
    }); 
 
} 
 

 
fade();

.box { 
 
    position: absolute; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
#wrapper {position: relative;} 
 

 
#box1 {background-color: #F00;} 
 
#box2 {background-color: #00F; display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="box1" class="box"></div> 
 
    <div id="box2" class="box"></div> 
 
</div>

下面是我對jsfiddle

Answer 1

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     var fadeinBox = $("#box2"); 
     var fadeoutBox = $("#box1"); 

    function fade() { 
    fadeinBox.stop(true, true).fadeIn(2000); 
    fadeoutBox.stop(true, true).fadeOut(2000, function() { 
    var temp = fadeinBox; 
    fadeinBox = fadeoutBox; 
    fadeoutBox = temp; 
    setTimeout(fade, 1000); 
    }); 
    } 

    fade(); 
    }); </script>         

Answer 2

發現在WordPress的例子中，你必須創建一個js文件和排隊這個js文件主題functions.php這樣：

function theme_scripts() { 
    wp_enqueue_script('jsfile', get_template_directory_uri()."/js/yourjs.js", '', '', true); 
} 
add_action('wp_enqueue_scripts', 'theme_scripts'); 

請把新的在您的主題目錄中的js文件夾中創建js文件。

Answer 3

像Atif tariq說的，你需要使用wp_enqueue_script函數在WordPress中包含一個jQuery腳本。

或者，您可以下載一個名爲「Add Script To Post」的插件，由arefly激活。它將允許你通過在[script] [/ script]（而不是）之間加入jQuery代碼來直接在頁面或文章中執行腳本。

注意：您還需要在執行代碼之前加載jQuery API，最好在[script] ... [/ script]之前和之外。使用這一行來加載它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>