構建WordPress旋轉木製插件：第3部分

鑰匙要點

• >使輪播箭頭起作用，使用wp_enqueue_script（）函數創建JavaScript文件並鏈接到WordPress，該函數放置在display_carousel（）函數條件中，以確保僅在顯示旋轉器時包含它。 >
>旋轉木馬的UL塊水平移動以通過調整其左側CSS屬性來顯示不同的項目；負左側邊緣將下一個項目的左側與旋轉木塊的左側對齊。
>創建一個函數，carousel_show_another_link（），以根據方向參數顯示另一個項目（上一個項目的-1，下一個項目為1）;它計算出新項目的索引以顯示並在移動UL塊之前檢查它是否存在。
• 。
>在相應的箭頭事件上創建並附加了兩個函數，Carousel_previous_link（）和carousel_next_link（），並使用適當的參數調用carousel_show_another_link（）函數；在文檔準備就緒時，通過將UL塊的邊距左側屬性初始化為0來阻止錯誤。
• >

>沒有樣式，我們在本教程的第一部分中構建的WordPress旋轉木馬只是項目列表，但從某種意義上來說，它至少是有用的。我們在本教程的第二部分中添加的CSS增強了輪播的顯示，但是現在問題是只有第一項向用戶顯示，並且無法顯示其餘項目。

>我們將箭頭添加到我們的旋轉木馬中，以允許用戶在不同的項目之間導航，現在是時候讓它們有用的JavaScript。

>在本教程的延續中，我們將學習如何正確包含我們的腳本，然後我們編寫一個腳本，該腳本將啟動一個函數，該函數在用戶擊中箭頭時會為項目動畫。

>鏈接JavaScript文件

>在這裡，我們將使用JavaScript使我們的箭頭有用。至於CSS部分，創建一個新文件。我稱其為carousel.js，並將其放在插件文件夾的根部。

>

我們需要向WordPress表示我們正在使用JavaScript文件。為此，我們將使用wp_enqueue_script（）函數。

>

前兩個參數與WP_ENQUEUE_STYLE（）相同。然後我們找到一個數組。此數組列出了依賴項，我們的腳本需要工作的腳本。我選擇使用jQuery來解決瀏覽器兼容性問題，因此我向WordPress表示我想使用它：正如我們在文章中看到的有關WordPress中的腳本（'jquery'的腳本）中所見，“ jQuery”是WordPress的公認價值。

。

第四參數是腳本的版本編號。這裡不是很重要（有關更多信息，請參見之前鏈接的文章），但是我們需要使用最後一個參數並將其設置為true，以便我們的腳本將包含在頁腳中。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

>

選擇頁腳而不是標題的優點是，我們可以在任何地方使用WP_ENQUEUE_SCRIPT（）。與WP_ENQUEUE_STYLE（）一樣，我們沒有在WP_head（）之前使用它的約束。然後，我們只有在必要時才能夠包含我們的腳本：僅當我們顯示旋轉木馬時。

>放置wp_enqueue_script（）的最佳場所，因此在我們的display_carousel（）函數的條件下。我們只有在有項目顯示時才顯示旋轉木馬，因此我們將包含具有相同條件的腳本。

>

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

現在我們準備好編輯我們的JavaScript文件。

>

我們想做什麼？

>

首先，我們將所有代碼封裝在函數中。為了防止與其他庫發生衝突，WordPress禁用在jQuery中使用$。我們可以通過此功能再次啟用它。

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

即使沒有修改我們的HTML代碼，也有許多不同的方法來製作輪播。在這裡，我建議您移動UL塊。它連續包含我們的所有項目，因此我們可以通過設置其位置來水平移動以顯示一個或另一個項目。請參閱下面已經在本教程的上一部分中看到的架構，以查看我們想做什麼。

>

要移動它，我們將使用其左側CSS屬性進行播放。默認情況下，它設置為0，因此“顯示”第一個項目。第一個項目足夠大，可以填充旋轉頻率塊和第二個項目，而第二個項目旁邊的第二項則無法看到溢出屬性。

> 為了顯示第二個項目，我們必須將UL塊移到左側，以便將第二個項目的左側與旋轉木馬塊的左側對齊。這可以通過負左側邊緣來實現。為了測試我們需要使用的值，我們可以嘗試一些CSS代碼（我們不需要它，我們就立即刪除了它）。

>

這條簡單的線應該得到解釋。如果測試它，則應該看到未顯示第一項，而是看到第二個項目。您可以測試另一個值，以更好地了解發生了什麼。使用-50px，我們將UL塊50像素移向左側。我在上面的CSS中向您展示的值，因為輪播的寬度為900像素，我可以顯示第二個項目，值為-900px。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

但是，我們可以使用百分比。優點是該百分比相對於容器。在這裡，“ 100％”等於“ 900像素”，因此，如果我們給出-100％的值，我們隱藏了第一個項目並顯示第二個項目。使用百分比使您可以修改容器的寬度，而無需修改邊距 - 左屬性的值。

>

顯示另一個項目的功能

首先，我們將編寫將顯示另一個項目的功能。這個將接受一個參數，方向。如果我們要顯示上一項，則必須將此方向設置為-1，並且，如果要顯示下一個項目，則必須將其設置為1。 >。

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

我們要去哪裡？

>

要確定要分配給邊緣左側的值，我們需要知道我們的位置。有多種可能的方法可以實現這一目標，我選擇了一種僅使用邊距左屬性的當前值的方法。

>

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

第一行檢索UL塊。正如我們稍後將重複使用的那樣，將其存儲在變量中是一個好主意。第二行似乎有些怪異。目的是存儲代表當前顯示的項目的整數。第一個項目將以0為代表，第二項by 1等。

> 為了實現這一目標，我們獲得了邊距左側屬性的當前值。問題在於，此值大約是-200％，我們希望一個數字：要刪除“％”，我們使用ParseInt（）函數將值轉換為整數（例如'-200％'變為-200）。由於我們想要一個積極的整數，我們添加了一個“減”標誌（例如，從-200獲得200個），然後除以100，以獲取所需的價值（例如2，而不是200）。

>您可能會想知道為什麼我們不使用UL.CSS（'Margin-Left'）獲取邊距左側屬性的價值。實際上，.css（）是一種jQuery方法，在我們的背景下，似乎是一個更好的主意。問題是這種方法不會給我們一個百分比。使用與上述相同的值，如果當前項目是第三個項目，則保證金左派屬性設置為-200％，而.css（）方法將返回-1800px。要使用像素中的此值來計算當前項目，然後我們需要使用大容器的寬度，我更喜歡僅使用UL塊。

。

>現在我們可以計算出要顯示的項目的索引，這要歸功於我們功能的參數中給出的方向。

新項目是否存在？

在顯示新項目之前，我們需要測試它是否存在。如果new_link小於或等於-1，或者大於或等於項目總數，則它不存在，我們無法顯示，因此移動UL塊不是一個好主意。請注意，此測試似乎是多餘的，因為當我們無法進一步走時不會顯示箭頭，但是確保實際上可以完成某件事總是一個好主意。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

>

首先，我們獲得項目總數，這是我們列表中LI標籤的數量。這個數字對於我們上面描述的條件很有用，因為我們想要一個不得大於或等於項目數量的正整數（不要忘記我們以0而不是1開始）。

顯示新項目

最後，可以通過一條線實現塊移動。我們必須計算邊緣左側的新值。為此，讓我們考慮一下。對於每個“通過”項目，我們的寬度為100％旅行。這樣，保證金的新價值是我們剛剛計算的新項目位置的100倍，而左符號則是左側的符號。

>

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

>我選擇在這裡使用jQuery動畫，但是您可以自由創建自己的動畫，甚至修改了此設置。

>

一些更實際用途的別名

>現在，我們將每次單擊箭頭上單擊箭頭時都會創建功能。這些功能不需要大量的代碼，因為他們唯一要做的就是將Carousel_show_another_link（）函數使用正確的參數調用。以下是當我們單擊“上一個”箭頭時稱為函數的代碼。

>

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

請注意返回false;為了防止我們的箭頭的默認行為（別忘了它們是鏈接）。這樣，用戶單擊箭頭時，URL不會更改。

>

顯示“下一個”項目的函數完全相同，但1作為carousel_show_another_link（）的參數為1。我選擇稱其為carousel_next_link（）。

附加事件

>最後，我們必須通過將正確的事件附加到正確的元素來使這些功能有用。我們將在一個新功能中執行此操作，當我們確定創建元素時調用：加載文檔時。

我們要將carousel_previous_link（）函數附加到每個“以前”箭頭。使用旋轉木馬的DOM樹，我們可以輕鬆地檢索它們，就像我們想在CSS中造型時檢索它們一樣。

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

然後，我們可以以相同的方式將carousel_next_link（）函數連接到右箭頭（#carousel ul a.carousel-next）。

>

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

>您可以測試此代碼，但應該出現一個錯誤：carousel_show_another_link（）函數首次調用我們的UL塊的CSS屬性邊距 - 左側不存在，因此當我們嘗試檢索時會發生錯誤它的值。

為了防止此錯誤，我們可以初始化此屬性的值。仍在文檔準備就緒時調用的函數（例如，在附加事件之前），添加以下行。

>將UL塊的邊距左屬性設置為0，為默認值。現在將存在此屬性，而無需移動塊。

>

>您現在可以單擊箭頭，旋轉旋轉木馬已完成！

總結

<span>function carousel_show_another_link(direction) {
</span><span>}</span>

在本教程中，我們使用WordPress Links Manager API瀏覽了Carousel插件。這是使用此API的一個很好的例子，但這也是查看如何將PHP，HTML，CSS和JavaScript組合到WordPress插件中的好方法。

>

在結束時，我會說，即使我們保留了生成的HTML代碼，也可以選擇許多不同的方法來構建轉型旋轉木馬：我們可以選擇不同的樣式或編寫腳本的不同方法。實際上，我們在這裡寫的腳本只是一個示例，我們可以編寫一個完全不同的結果。

>您可以自己決定是否喜歡我們在此處使用的代碼。如果沒有，請不要猶豫編輯！

>

即使您喜歡我們在這裡所做的事情，您仍然可以增強結果。例如，訪問者必須擊中箭頭才能查看其他項目：您可以嘗試使用function settimeout（）。

如果您想查看完成的代碼，或者自己嘗試插件，則可以在此處下載。

以上是構建WordPress旋轉木製插件：第3部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！