Dieses Tutorial detailliert beschreibt ein WordPress -Karussell -Plugin mit der WordPress Links Manager -API - die effizienteste Methode zum Verwalten von Linklisten in WordPress. Das Karussell pr?sentiert eine Reihe von Elementen, die jeweils ein Hintergrundbild enthalten und mit einer benutzerdefinierten URL verknüpfen. Benutzer navigieren mit "vorherigen" und "n?chsten" Pfeilen.

Das Karussell, im Wesentlichen eine Linkliste, die im WordPress Links -Manager gespeichert ist, verwendet JavaScript und JQuery zur Animation. Ein Plugin erleichtert sein Display. Das Hinzufügen von Elementen erfordert das Angeben eines Namens, einer URL, einer Beschreibung und eines korrekten Bildes. Eine dedizierte Karussellkategorie wird erstellt; target und rel Attribute sind optional.

Diese dreiteilige Serie untersucht die Konstruktion des Plugins. Der Links -Manager ist, wie zuvor erl?utert, ideal für das Link -Management. W?hrend seine API pr?zise ist, bietet sie ausreichende Funktionen für nützliche Anwendungen. wp_list_bookmarks() wird nicht verwendet; Andere Funktionen aus früheren Artikeln werden verwendet.

Vorherige Vertrautheit mit dem WordPress Links -Manager und deren API wird vor dem Fortschritt empfohlen.

Karussell -Design:

Unser Karussell zeigt Elemente mit jeweils ein Hintergrundbild (anpassbar) und eine benutzerdefinierte URL an. Der Bildname wird oben angezeigt, die Beschreibung unten. Navigationspfeile erleichtern das Surfen.

Entwicklungsanforderungen:

Der WordPress Links -Manager speichert die Linkdaten des Karussells. get_bookmarks() ruft diese Links ab. JavaScript und JQuery behandeln Animation. Ein Plugin sorgt für sauberen, aufrechterhaltenen Code.

Karussellartikel hinzufügen:

Element Addition beinhaltet die Auswahl eines Namens, einer URL, einer Beschreibung und eines korrekten Bildes. Für die Organisation wird eine dedizierte Kategorie (z. B. "Karussell") erstellt. target und rel Attribute sind optional.

Plugin -Erstellung:

Das Plugin verwendet mehrere Dateien, die sich im Verzeichnis wp-content/plugins (oder als MU-Plugin) befinden. Die Hauptdatei (carousel.php oder ein gew?hlter Name) deklariert Plugin -Informationen und definiert die Karussellanzeigefunktion.

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

Karussellanzeigefunktion (display_carousel()):

Diese Funktion ruft Elemente mit get_bookmarks() ab. Ein leeres Array führt zu keiner Anzeige.

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="http://m.miracleart.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="http://m.miracleart.cn/link/5e83596334400305514565ee16b9106d" class="carousel-prev"><</a>
                        <?php } ?>
                        <?php if ($i < $n - 1) { ?>
                            <a href="http://m.miracleart.cn/link/6349ccd8e98a367ae2eba1acfa755850" class="carousel-next">></a>
                        <?php } ?>
                    </li>
                <?php } ?>
            </ul>
        </div>
        <?php
    }
}

N?chste Schritte:

nachfolgende Teile behandeln das CSS -Styling und die JavaScript -Animation, um einen voll funktionsf?higen Schieberegler zu erstellen. FAQs auf WordPress Carousel -Plugins sind ebenfalls im Originaltext enthalten und k?nnen hier bei Wunsch hier integriert werden.

Das obige ist der detaillierte Inhalt vonBauen eines WordPress -Karussell -Plugins: Teil 1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!