首页 >CMS教程 >WordPress >构建WordPress旋转木制插件：第1部分

构建WordPress旋转木制插件：第1部分

William Shakespeare原创: 2025-02-16 12:35:09928浏览

此教程详细信息创建WordPress链接链接Manager API的WordPress旋转木载插件 - 管理WordPress中链接列表的最有效方法。旋转木马将展示一系列物品，每个项目都具有背景图像并链接到自定义URL。用户使用“上一个”和“下一个”箭头导航。

carousel本质上是存储在WordPress Links Manager中的链接列表，它使用JavaScript和JQuery进行动画。插件有助于其显示屏。添加项目需要指定名称，URL，描述和正确尺寸的图像。创建了专用的旋转木马类别； target>和rel属性是可选的。

这个三部分系列探讨了插件的构造。如前所述，链接管理器是链接管理的理想选择。尽管其API简洁，但它为有用的应用提供了足够的功能。 wp_list_bookmarks()不使用；将采用以前文章的其他功能。

> 在继续之前，建议对WordPress Links Manager及其API进行事先熟悉。

旋转木马设计：

我们的旋转木马显示项目，每个物品都带有背景图像（可自定义）和自定义URL。图像名称显示上面的描述。导航箭头有助于浏览。

Building a WordPress Carousel Plugin: Part 1

开发要求：

> WordPress链接管理器存储了轮播的链接数据。

检索这些链接。 JavaScript和jQuery处理动画。插件可确保清洁，可维护的代码。get_bookmarks()

添加旋转木马项目：

项目添加涉及选择名称，URL，说明和正确尺寸的图像。为组织创建了专用类别（例如，“旋转木马”）。

>和target属性是可选的。rel>

插件创建：

>插件使用多个文件，位于

>目录中（或作为Mu-Plugin）。主文件（wp-content/plugins或所选名称）声明插件信息并定义了轮播显示功能。carousel.php

<code class="language-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
*/</code>

旋转木马显示功能（）：display_carousel()>

此功能使用

检索项目。一个空数组导致没有显示。get_bookmarks()>

<code class="language-php">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; ?>" echo .>>
                            <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
    }
}</code>

下一步：后续零件将涵盖CSS样式和JavaScript动画，以创建功能齐全的滑块。 WordPress Carousel插件上的常见问题解答还包括在原始文本中，如果需要，可以在此处合并。

以上是构建WordPress旋转木制插件：第1部分的详细内容。更多信息请关注PHP中文网其他相关文章！

php JavaScript jquery css Array if for while Directory using function this display background animation WordPress Other

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：The Definitive List of WordPress Theme Frameworks下一篇：Mastering Image Optimization in WordPress

查看更多