構建WordPress旋轉木製插件：第2部分-＆＃＆按-PHP中文網

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

>旋轉木馬不僅是鏈接列表，還存在以使它們更具吸引力的方式顯示鏈接作為項目。在上一篇文章中，我們看到瞭如何創建輪播以及如何顯示所需的HTML元素。現在是時候構建和設計我們的WordPress旋轉木製插件了。

>我們的旋轉木馬目前是一個簡單的鏈接列表，到本文結束時，我們將擁有適當的格式旋轉木馬。我們將看到如何應用我們需要的樣式，以使您在第1部分中的示例圖像中向您展示的結果。當然，您可以自定義許多屬性，網站在世界範圍內不必相同！

首先，我們將研究如何將CSS文件正確鏈接到WordPress中的網頁。然後，我們將設計元素，這將展示一些在許多不同情況下可能有用的CSS技巧。

鑰匙要點

通過鏈接外部CSS文件，可以增強WordPress旋轉木製插件，從而可以更輕鬆，更靈活。這包括包含文件的wp_enque_style（）函數。

旋轉木馬的大小是在CSS文件中定義的，每個項目都填充了創建的整個塊。還建立了鏈接的定位和容器的大小。
>使用諸如顯示，填充，顏色，背景色，文本align和text-shadow之類的CSS屬性自定義項目的名稱，描述和箭頭的樣式。
>
>鏈接外部CSS文件

為了包含文件，我們將使用WP_ENQUEUE_STYLE（）函數，如我們的文章中所述的有關包含腳本的正確方法。

>我們無法在任何地方調用此功能，必須在wp_head（）調用之前調用它（與腳本不同，我們不能在頁腳中包含CSS文件！）。我們可以使用wp_enqueue_scripts，當WordPress包含腳本和當前頁面的樣式（在前端）時，它被稱為，因此它非常適合此應用程序。 >

下面的代碼必須出現在插件的主文件中。

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

登入後複製

> wp_enqueue_style（）函數接受（至少）兩個參數，即樣式的名稱和對應文件的URI。 plugin_dir_url（）函數將為我們提供插件文件夾的URL，因為我的旋轉曲線。

請注意，我們沒有在功能中測試任何內容。 WordPress將將我們的CSS文件包括在每個頁面中。如果您在所有頁面上顯示旋轉木馬，這不是問題。但是，如果僅在某些頁面上顯示旋轉木馬（例如，僅在主頁上），則應在包含CSS文件之前測試訪問者是否在正確的頁面上（例如，使用IS_HOME（））。

現在是時候編輯我們的CSS文件了。

讓我們樣式的輪播！

旋轉木製的大小

>我們從主容器的大小開始，#carousel標識的DIV。在這裡，您可以設置所需的大小。當我們使用不調整大小的圖像時，固定尺寸是一個好主意。

>以後，我們將在此容器中添加第三個屬性，即溢出。目前，我們不會使用它，這樣我們就可以看到如何在頁面上佈置我們的物品。 >

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

登入後複製

>每個項目都會填充我們剛創建的整個塊。以下規則適用於項目本身（帶有類名稱旋轉鍊鍊接的標籤）及其父母。

定位鏈接

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

登入後複製

當我們向右走時會發生什麼？

>

>現在我們必須考慮我們想做什麼。當我們想建造旋轉木馬時，有很多可能性。我建議將我們的物品彼此放置在一個大容器中：它必須足夠大才能將我們所有的所有物品都包含在一行中。

用戶想查看另一個圖像時，我們將此容器移動以將下一個項目與#Carousel Div對齊。該Div將將屬性溢出設置為“隱藏”，這樣我們就不會看到其他鏈接。

> 下面的

是我們想要製作的模式。在綠色中，您可以在一行中看到帶有我們所有鏈接的大容器。為了讓我們查看右側的鏈接，該容器向左移動，反之亦然。黑色框架代表#carousel div：在此框架之外，一切都是看不見的。

容器的大小

首先，容器：我們不會創建另一個HTML元素，因為UL一個元素非常適合我們的目的。我們看到該容器必須足夠大，以將我們所有的鏈接包含在一行中。目前並非如此，我們的物品和我們的容器都有900像素的寬度。 > 為了改變這一點，我們將將容器的寬度增加到500％。 #Carousel確定的DIV的寬度為900像素，因此500％的寬度將使我們可以連續顯示五個鏈接。構建WordPress旋轉木製插件：第2部分

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

登入後複製

>您在這裡可能會出現一個潛在的問題：項目數可能是可變的，因為我們的腳本實際上只能顯示三個項目。這並不是真正的問題，因為我們將項目數限制在最多五個，因此，即使只有三個都可以合適，並且空白空間不會干擾旋轉木馬的操作。

如果您選擇了另一個限制，則必須更改此寬度（例如，如果要顯示10，則必須更改為1000％）。當您不需要任何限制時出現問題。在這種情況下，您必鬚根據我們的$ n變量設置UL標籤樣式屬性的寬度，該變量包含要顯示的項目數。

定位鏈接

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

登入後複製

現在，我們需要糾正LI標籤的寬度。目前，它們的設置為100％，因此它們的整個容器的整個寬度太長了。

> LI標籤現在具有正確的寬度，並且正在漂浮。如果您現在測試我們的輪播，您將看到正確的結果，彼此相鄰五個項目。現在，您可以將溢出屬性添加到#carousel，以隱藏不應該可見的項目。

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

登入後複製

項目的名稱和描述

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

登入後複製

>可以按照您的意願進行樣式的項目名稱。在這裡，我將描述我如何創建您在本教程的上一部分中看到的樣式。

>

>提醒一下，該項目的名稱在A.Carousel-Link元素中以強標記顯示。可以用背景顏色獲得條帶，但我們希望該帶佔據整個寬度。為此，我們可以將顯示設置為阻止。填充和顏色屬性完成了樣式。

與名稱一樣，您可以個性化項目的描述。在這裡，我選擇使用下面的CSS在右側，名稱下方顯示它。

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

登入後複製

>顯示屬性的塊值允許EM標籤使用所有可用寬度。然後，我們在右側對齊文本，並帶有一些填充，因此文本並不難貼在邊緣。我在這裡選擇了深灰色的文字顏色。為了確保文本始終可以讀取，即使在黑暗圖像上，我也添加了一個白色的文本陰影。

造型箭頭

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

登入後複製

最後一步正確地顯示了箭頭。您在這裡有幾種選擇，具體取決於您要在哪裡顯示這些箭頭。

>我使用以下列出的屬性來實現對樣本項目的影響。我們將箭頭轉換為塊以修改它們的尺寸，然後修復此大小，然後樣式箭頭。我們還使用一個有用的技巧來垂直對齊文本（箭頭），我們將行高屬性設置為與高度相同的值，然後將文本以垂直為中心。

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

登入後複製

要復制圓角，我們將使用邊界 - 拉迪烏斯（Border-radius），但不在所有角落，在旋轉木馬側面的角落不應繞圓角。這就是為什麼我們將使用邊界拉迪烏斯的“子專業”，這使我們能夠選擇彎道。

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

登入後複製

>最後，我個人喜歡按鈕和鏈接以具有懸停效果。在這裡，我選擇只修改箭頭的顏色。

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

登入後複製

> CSS3允許我們輕鬆進行軟過渡，為什麼不使用它們？

定位箭頭

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

登入後複製

>這就是箭的樣式。現在，我們需要將它們放置在我們想要的地方。我們將使用絕對的定位，這是一個小技巧：我們不知道輪播本身的位置，因此我們無法將箭頭定位在屏幕角。取而代之的是，我們將使用旋轉木馬的角落，更確切地說是Li標籤。

>讓我們將箭頭定位為“絕對位置”。

如果嘗試此操作，箭頭將位於屏幕側。我們必須使用鮮為人知的絕對定位選擇。箭頭元件相對於其最接近的父母定位。在這裡，我們的箭頭沒有任何位置的父母，因此它們相對於屏幕。

問題是父母在正確的位置的箭：我們不想移動其中任何一個。訣竅包括使用相對定位，而無需更改其他任何內容。我們將將相對定位應用於我們箭頭最接近的父母的Li標籤。

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

登入後複製

然後將箭頭放在其最接近的父母的側面，li標籤，這是我們想要的。

下一步是什麼？

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

登入後複製

>我們的旋轉木馬所需的HTML元素已顯示出來，現在它們也已被設計。問題是我們的旋轉木馬完全沒有用，因為它只是顯示了第一項（如果沒有CSS，它更有用！）。

。

這就是為什麼我們需要添加最後一件事：JavaScript。在本教程的下一個（也是最後一個）部分中，我們將使箭頭按預期發揮作用，單擊箭頭時鏈接將滾動。那是一件好事，對