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

此教程詳細信息創建WordPress鏈接鏈接Manager API的WordPress旋轉木載插件 - 管理WordPress中鏈接列表的最有效方法。 旋轉木馬將展示一系列物品，每個項目都具有背景圖像並鏈接到自定義URL。用戶使用“上一個”和“下一個”箭頭導航。

carousel本質上是存儲在WordPress Links Manager中的鏈接列表，它使用JavaScript和JQuery進行動畫。插件有助於其顯示屏。 添加項目需要指定名稱，URL，描述和正確尺寸的圖像。創建了專用的旋轉木馬類別； target>和rel屬性是可選的。

>

這個三部分系列探討了插件的構造。如前所述，鏈接管理器是鏈接管理的理想選擇。儘管其API簡潔，但它為有用的應用提供了足夠的功能。 wp_list_bookmarks()不使用；將採用以前文章的其他功能。

> 在繼續之前，建議對WordPress Links Manager及其API進行事先熟悉。

>

旋轉木馬設計：

我們的旋轉木馬顯示項目，每個物品都帶有背景圖像（可自定義）和自定義URL。 圖像名稱顯示上面的描述。 導航箭頭有助於瀏覽。

開發要求：

> WordPress鏈接管理器存儲了輪播的鏈接數據。

檢索這些鏈接。 JavaScript和jQuery處理動畫。 插件可確保清潔，可維護的代碼。 get_bookmarks()

添加旋轉木馬項目：

項目添加涉及選擇名稱，URL，說明和正確尺寸的圖像。 為組織創建了專用類別（例如，“旋轉木馬”）。

>和target屬性是可選的。 rel>

插件創建：

>插件使用多個文件，位於

>目錄中（或作為Mu-Plugin）。主文件（wp-content/plugins或所選名稱）聲明插件信息並定義了輪播顯示功能。 carousel.php

/*
Plugin Name: Carousel
Plugin URI:
Description: Creates a simple carousel
Version: 0
Author: Jérémy Heleine
Author URI: http://jeremyheleine.me
License: MIT
*/

旋轉木馬顯示功能（）：display_carousel()>

此功能使用

檢索項目。 一個空數組導致沒有顯示。 get_bookmarks()>

function display_carousel() {
    $args = array(
        'category_name' => 'carousel',
        'orderby' => 'link_id',
        'order' => 'DESC',
        'limit' => 5
    );

    $links = get_bookmarks($args);
    $n = count($links);

    if (!empty($links)) {
        ?>
        <div id="carousel">
            <ul>
                <?php foreach ($links as $i => $link) {
                    // Background image
                    $background = !empty($link->link_image) ? 'url(' . $link->link_image . ')' : 'rgb(' . rand(0, 255) . ', ' . rand(0, 255) . ', ' . rand(0, 255) . ')';

                    // Target attribute
                    $target = !empty($link->link_target) ? ' target="' . $link->link_target . '"' : '';

                    // Rel attribute
                    $rel = !empty($link->link_rel) ? ' rel="' . $link->link_rel . '"' : '';
                    ?>
                    <li style="background: <?php echo $background; ?>">
                        <a class="carousel-link" href="https://www.php.cn/link/67b3d697f52f61a5aae9588726d18edc" title="<?php echo $link->link_name; ?>"<?php echo $target . $rel; ?>>
                            <strong><?php echo $link->link_name; ?></strong>
                            <?php if (!empty($link->link_description)) { ?>
                                <em><?php echo $link->link_description; ?></em>
                            <?php } ?>
                        </a>
                        <?php if ($i > 0) { ?>
                            <a href="https://www.php.cn/link/5e83596334400305514565ee16b9106d" class="carousel-prev"><</a>
                        <?php } ?>
                        <?php if ($i < $n - 1) { ?>
                            <a href="https://www.php.cn/link/6349ccd8e98a367ae2eba1acfa755850" class="carousel-next">></a>
                        <?php } ?>
                    </li>
                <?php } ?>
            </ul>
        </div>
        <?php
    }
}

下一步： 後續零件將涵蓋CSS樣式和JavaScript動畫，以創建功能齊全的滑塊。 WordPress Carousel插件上的常見問題解答還包括在原始文本中，如果需要，可以在此處合併。

>

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