鑰匙要點(diǎn)

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

>沒有樣式，我們在本教程的第一部分中構(gòu)建的WordPress旋轉(zhuǎn)木馬只是項(xiàng)目列表，但從某種意義上來說，它至少是有用的。我們在本教程的第二部分中添加的CSS增強(qiáng)了輪播的顯示，但是現(xiàn)在問題是只有第一項(xiàng)向用戶顯示，并且無法顯示其余項(xiàng)目。

>我們將箭頭添加到我們的旋轉(zhuǎn)木馬中，以允許用戶在不同的項(xiàng)目之間導(dǎo)航，現(xiàn)在是時(shí)候讓它們有用的JavaScript。

>在本教程的延續(xù)中，我們將學(xué)習(xí)如何正確包含我們的腳本，然后我們編寫一個(gè)腳本，該腳本將啟動(dòng)一個(gè)函數(shù)，該函數(shù)在用戶擊中箭頭時(shí)會(huì)為項(xiàng)目動(dòng)畫。

>鏈接JavaScript文件

>在這里，我們將使用JavaScript使我們的箭頭有用。至于CSS部分，創(chuàng)建一個(gè)新文件。我稱其為carousel.js，并將其放在插件文件夾的根部。

>

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

>

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

。

第四參數(shù)是腳本的版本編號。這里不是很重要（有關(guān)更多信息，請參見之前鏈接的文章），但是我們需要使用最后一個(gè)參數(shù)并將其設(shè)置為true，以便我們的腳本將包含在頁腳中。

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

>

選擇頁腳而不是標(biāo)題的優(yōu)點(diǎn)是，我們可以在任何地方使用WP_ENQUEUE_SCRIPT（）。與WP_ENQUEUE_STYLE（）一樣，我們沒有在WP_head（）之前使用它的約束。然后，我們只有在必要時(shí)才能夠包含我們的腳本：僅當(dāng)我們顯示旋轉(zhuǎn)木馬時(shí)。

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

>

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

現(xiàn)在我們準(zhǔn)備好編輯我們的JavaScript文件。

>

我們想做什么？

>

首先，我們將所有代碼封裝在函數(shù)中。為了防止與其他庫發(fā)生沖突，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代碼，也有許多不同的方法來制作輪播。在這里，我建議您移動(dòng)UL塊。它連續(xù)包含我們的所有項(xiàng)目，因此我們可以通過設(shè)置其位置來水平移動(dòng)以顯示一個(gè)或另一個(gè)項(xiàng)目。請參閱下面已經(jīng)在本教程的上一部分中看到的架構(gòu)，以查看我們想做什么。

>

要移動(dòng)它，我們將使用其左側(cè)CSS屬性進(jìn)行播放。默認(rèn)情況下，它設(shè)置為0，因此“顯示”第一個(gè)項(xiàng)目。第一個(gè)項(xiàng)目足夠大，可以填充旋轉(zhuǎn)頻率塊和第二個(gè)項(xiàng)目，而第二個(gè)項(xiàng)目旁邊的第二項(xiàng)則無法看到溢出屬性。

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

>

這條簡單的線應(yīng)該得到解釋。如果測試它，則應(yīng)該看到未顯示第一項(xiàng)，而是看到第二個(gè)項(xiàng)目。您可以測試另一個(gè)值，以更好地了解發(fā)生了什么。使用-50px，我們將UL塊50像素移向左側(cè)。我在上面的CSS中向您展示的值，因?yàn)檩啿サ膶挾葹?00像素，我可以顯示第二個(gè)項(xiàng)目，值為-900px。

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

但是，我們可以使用百分比。優(yōu)點(diǎn)是該百分比相對于容器。在這里，“ 100％”等于“ 900像素”，因此，如果我們給出-100％的值，我們隱藏了第一個(gè)項(xiàng)目并顯示第二個(gè)項(xiàng)目。使用百分比使您可以修改容器的寬度，而無需修改邊距 - 左屬性的值。

>

顯示另一個(gè)項(xiàng)目的功能

首先，我們將編寫將顯示另一個(gè)項(xiàng)目的功能。這個(gè)將接受一個(gè)參數(shù)，方向。如果我們要顯示上一項(xiàng)，則必須將此方向設(shè)置為-1，并且，如果要顯示下一個(gè)項(xiàng)目，則必須將其設(shè)置為1。>。

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

我們要去哪里？

>

要確定要分配給邊緣左側(cè)的值，我們需要知道我們的位置。有多種可能的方法可以實(shí)現(xiàn)這一目標(biāo)，我選擇了一種僅使用邊距左屬性的當(dāng)前值的方法。

>

<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塊。正如我們稍后將重復(fù)使用的那樣，將其存儲在變量中是一個(gè)好主意。第二行似乎有些怪異。目的是存儲代表當(dāng)前顯示的項(xiàng)目的整數(shù)。第一個(gè)項(xiàng)目將以0為代表，第二項(xiàng)by 1等。

> 為了實(shí)現(xiàn)這一目標(biāo)，我們獲得了邊距左側(cè)屬性的當(dāng)前值。問題在于，此值大約是-200％，我們希望一個(gè)數(shù)字：要?jiǎng)h除“％”，我們使用ParseInt（）函數(shù)將值轉(zhuǎn)換為整數(shù)（例如'-200％'變?yōu)?200）。由于我們想要一個(gè)積極的整數(shù)，我們添加了一個(gè)“減”標(biāo)志（例如，從-200獲得200個(gè)），然后除以100，以獲取所需的價(jià)值（例如2，而不是200）。

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

。

>現(xiàn)在我們可以計(jì)算出要顯示的項(xiàng)目的索引，這要?dú)w功于我們功能的參數(shù)中給出的方向。

新項(xiàng)目是否存在？

在顯示新項(xiàng)目之前，我們需要測試它是否存在。如果new_link小于或等于-1，或者大于或等于項(xiàng)目總數(shù)，則它不存在，我們無法顯示，因此移動(dòng)UL塊不是一個(gè)好主意。請注意，此測試似乎是多余的，因?yàn)楫?dāng)我們無法進(jìn)一步走時(shí)不會(huì)顯示箭頭，但是確保實(shí)際上可以完成某件事總是一個(gè)好主意。

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

>

首先，我們獲得項(xiàng)目總數(shù)，這是我們列表中LI標(biāo)簽的數(shù)量。這個(gè)數(shù)字對于我們上面描述的條件很有用，因?yàn)槲覀兿胍粋€(gè)不得大于或等于項(xiàng)目數(shù)量的正整數(shù)（不要忘記我們以0而不是1開始）。

顯示新項(xiàng)目

最后，可以通過一條線實(shí)現(xiàn)塊移動(dòng)。我們必須計(jì)算邊緣左側(cè)的新值。為此，讓我們考慮一下。對于每個(gè)“通過”項(xiàng)目，我們的寬度為100％旅行。這樣，保證金的新價(jià)值是我們剛剛計(jì)算的新項(xiàng)目位置的100倍，而左符號則是左側(cè)的符號。

>

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

>我選擇在這里使用jQuery動(dòng)畫，但是您可以自由創(chuàng)建自己的動(dòng)畫，甚至修改了此設(shè)置。

>

一些更實(shí)際用途的別名

>現(xiàn)在，我們將每次單擊箭頭上單擊箭頭時(shí)都會(huì)創(chuàng)建功能。這些功能不需要大量的代碼，因?yàn)樗麄兾ㄒ灰龅木褪菍arousel_show_another_link（）函數(shù)使用正確的參數(shù)調(diào)用。以下是當(dāng)我們單擊“上一個(gè)”箭頭時(shí)稱為函數(shù)的代碼。

>

<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;為了防止我們的箭頭的默認(rèn)行為（別忘了它們是鏈接）。這樣，用戶單擊箭頭時(shí)，URL不會(huì)更改。

>

顯示“下一個(gè)”項(xiàng)目的函數(shù)完全相同，但1作為carousel_show_another_link（）的參數(shù)為1。我選擇稱其為carousel_next_link（）。

附加事件

>最后，我們必須通過將正確的事件附加到正確的元素來使這些功能有用。我們將在一個(gè)新功能中執(zhí)行此操作，當(dāng)我們確定創(chuàng)建元素時(shí)調(diào)用：加載文檔時(shí)。

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

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

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

>

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

>您可以測試此代碼，但應(yīng)該出現(xiàn)一個(gè)錯(cuò)誤：carousel_show_another_link（）函數(shù)首次調(diào)用我們的UL塊的CSS屬性邊距 - 左側(cè)不存在，因此當(dāng)我們嘗試檢索時(shí)會(huì)發(fā)生錯(cuò)誤它的值。

為了防止此錯(cuò)誤，我們可以初始化此屬性的值。仍在文檔準(zhǔn)備就緒時(shí)調(diào)用的函數(shù)（例如，在附加事件之前），添加以下行。

>將UL塊的邊距左屬性設(shè)置為0，為默認(rèn)值。現(xiàn)在將存在此屬性，而無需移動(dòng)塊。

>

>您現(xiàn)在可以單擊箭頭，旋轉(zhuǎn)旋轉(zhuǎn)木馬已完成！

總結(jié)

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

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

>

在結(jié)束時(shí)，我會(huì)說，即使我們保留了生成的HTML代碼，也可以選擇許多不同的方法來構(gòu)建轉(zhuǎn)型旋轉(zhuǎn)木馬：我們可以選擇不同的樣式或編寫腳本的不同方法。實(shí)際上，我們在這里寫的腳本只是一個(gè)示例，我們可以編寫一個(gè)完全不同的結(jié)果。

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

>

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

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

以上是構(gòu)建WordPress旋轉(zhuǎn)木制插件：第3部分的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！