在Wordpress中包含一個github jquery插件

我想在我的wordpress網站上包含一個來自github的插件（https://github.com/rendro/countdown）。經過幾個小時的研究，在這裏，我仍然無法找到使其工作的方法。在Wordpress中包含一個github jquery插件

如果我使用的默認方法：

1）添加這些線到我header.php文件的<head>：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="/path/to/jquery.countdown.js"></script>

2）初始化與我的期望的構型的插件在</head>和之間<body>在我的header.php文件中，在這種情況下：

<script> 

    $(function() { 
     var endDate = "November 30, 2015 10:00:00"; 

      $('.countdown.styled').countdown({ 
       date: endDate, 
       render: function(data) { 
       $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>"); 
       } 
      }); 
    }); 

</script>

3），然後調用在我的HTML文件中的插件：

<?php if(is_front_page()) { ?> 

    <div id="cdtoevent" class="countcont"> 
    <div class="countdown styled"></div> 
    </div> 

<?php } ?>

它完美！

但是，如果我嘗試做，通過使用默認的方法，我讓用戶下載正確的方式

（如果我沒理解好，在默認情況下WordPress的船舶與jQuery jQuery的這兩次我增強了加載時間，以及，右）

這意味着入隊的jQuery，然後我在我的functions.php文件腳本像這樣：

wp_enqueue_script('jquery'); 

function add_cdtoevent() { 
     wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true); 
} 

add_action('wp_enqueue_scripts', 'add_cdtoevent');

然後重複步驟2）和3）的默認方法，它只是不是工作！我試圖在步驟2）包裝我的jQuery代碼，就像這樣：

jQuery(document).ready(function($) { 

    // $ Works! You can test it with next line if you like 
    // console.log($); 

});

但它仍然無法正常工作。如果有人可以幫助，它將真正不勝感激！

我目前在我的header.php：

<?php if(is_front_page()) { ?> 

    <div id="cdtoevent" class="countcont"> 
    <div class="countdown styled"></div> 
    </div> 

<?php } ?>

我目前在我的footer.php：

<script type="text/javascript"> 

    $(function() { 
     var endDate = "November 14, 2015 10:00:00"; 

      $('.countdown.styled').countdown({ 
       date: endDate, 
       render: function(data) { 
         $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>"); 
      } 
     }); 
    }); 

</script>

我目前在我functions.php：

// Loads JavaScript file with functionality specific to LCQC. 

wp_enqueue_script('jquery'); 

function add_cdtoevent() { 
     wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true); 
} 

add_action('wp_enqueue_scripts', 'add_cdtoevent');

The jquery plugin （.js）

來源

2015-11-04 Jake C.

'head'中的腳本會使網站變慢。它最好在關閉主體標籤之前使用腳本。這樣所有的內容都被加載。當完成時，JavaScript被加載。這樣用戶已經看到了一些東西。 – SuperDJ

我的腳本標記位於我的''和''標記之間，而不在''之間。不過謝謝你的這個小建議。我會確保修改！ –

它不起作用？控制檯中有任何錯誤？ – vard

使用函數排隊腳本是個好主意。但是：你在哪裏調用這個函數？你需要調用它來排隊你的腳本。要做到這一點的最佳方法是將其附加到正確的操作（wp_enqueue_scripts）：add_action('wp_enqueue_scripts', 'add_cdtoevent');。

如果您想了解更多關於此功能的信息，我寫了一本關於including scripts in WordPress的指南。瞭解它是如何工作是有用的，因爲您可以發現手動排隊jQuery是無用的：您指出它是一個依賴項，所以WordPress會根據需要自動添加它。

來源

2015-11-04 16:31:43 Jeremy

我今天早上真的看過你的文章！我試過這個： 'add_action（'wp_enqueue_scripts'，'add_my_script'）; function add_my_script（）{ wp_enqueue_script（ 'your-script'，//爲您的腳本命名，以便您可以附加其他腳本並取消註冊等。 get_template_directory_uri（）。'/js/your-script.js' ，//這是你的腳本文件的位置 array（'jquery'）//這個數組列出你的腳本所依賴的腳本）; }' 但它似乎沒有工作。你告訴我的是，我不需要「wp_enqueue_script（'jquery'）;」因爲我使用「數組」？ –

剛編輯我的帖子，因爲這（'add_action（'wp_enqueue_scripts'，'add_cdtoevent'）;'）已經在我的函數後面添加。我仍然得到這個錯誤：「Uncaught TypeError：$不是一個函數」。 Je viens juste de voir que tu esfrançais，que le monde est petit：'D。 –

可能包含腳本的順序有問題嗎？如果你的腳本在包含jQuery之前試圖使用'$'，它將不起作用。爲了確保你的腳本包含在正確的順序中，把你的腳本放在一個外部文件中，並按照包含其他腳本的方式（使用jQuery插件作爲依賴）排入此文件。（我繼續用英文寫，所以每個人都可以找到答案，如果他們搜索:)） – Jeremy

我終於搞定了！

首先，我後來把它錯，因爲它是在我functions.php文件中的另一個函數內..

// Loads JavaScript file with functionality specific to LCQC. 

wp_enqueue_script('jquery'); 

function add_cdtoevent() { 
     wp_enqueue_script('countdown', get_template_directory_uri() . 'countdown.js', array('jquery'), true); 
} 

add_action('wp_enqueue_scripts', 'add_cdtoevent');

，我確信我的劇本是這樣聲明（由於noConflict（）可變WordPress使用）我的結束標記之前右：

<script type="text/javascript"> 

jQuery(document).ready(function($) { 
    $(function() { 
     var endDate = "November 14, 2015 10:00:00"; 
      $('.countdown.styled').countdown({ 
       date: endDate, 
       render: function(data) { 
         $(this.el).html("<div>" + this.leadingZeros(data.days, 2) + " <span>days</span></div><div>" + this.leadingZeros(data.hours, 2) + " <span>hours</span></div><div>" + this.leadingZeros(data.min, 2) + " <span>minutes</span></div><div>" + this.leadingZeros(data.sec, 2) + " <span>seconds</span></div>"); 
      } 
     }); 
    }); 
}); 

</script>

最後，我修改jquery.countdown.js下面幾行：

jQuery.fn.countdown = function(options) { 
    return $.each(this, function(i, el) { 
    var $el = $(el); 
    if (!$el.data(NAME)) { 
     // allow setting the date via the data-date attribute 
     if ($el.data(DATA_ATTR)) { 
     options.date = $el.data(DATA_ATTR); 
     } 
     $el.data(NAME, new Countdown(el, options)); 
    } 
    }); 
};

到：

jQuery(document).ready(function($) { 
    jQuery.fn.countdown = function(options) { 
     return $.each(this, function(i, el) { 
     var $el = $(el); 
     if (!$el.data(NAME)) { 
      // allow setting the date via the data-date attribute 
      if ($el.data(DATA_ATTR)) { 
      options.date = $el.data(DATA_ATTR); 
      } 
      $el.data(NAME, new Countdown(el, options)); 
     } 
     }); 
    }; 
});

謝謝大家的幫助！

來源

2015-11-04 17:41:13

在Wordpress中包含一個github jquery插件

回答

相關問題