Construire un plugin de carrousel WordPress: Partie 1

Ce didacticiel détaille la création d'un plugin de carrousel WordPress Tirageant l'API WordPress Links Manager - la méthode la plus efficace pour gérer les listes de liens dans WordPress. Le carrousel présentera une série d'éléments, chacun avec une image d'arrière-plan et un lien vers une URL personnalisée. Les utilisateurs naviguent à l'aide de flèches "précédentes" et "suivantes".

Le carrousel, essentiellement une liste de liens stockée dans le WordPress Links Manager, utilise JavaScript et JQuery pour l'animation. Un plugin facilite son écran. L'ajout d'éléments nécessite de spécifier un nom, une URL, une description et une image de taille correcte. Une catégorie de carrousel dédiée est créée; Les attributs target et rel sont facultatifs.

Cette série en trois parties explore la construction du plugin. Le gestionnaire de liens, comme indiqué précédemment, est idéal pour la gestion des liens. Bien que son API soit concise, elle offre des fonctionnalités suffisantes pour des applications utiles. wp_list_bookmarks() ne sera pas utilisé; D'autres fonctions des articles précédents seront utilisées.

La familiarité préalable avec le gestionnaire de liens WordPress et son API est recommandée avant de procéder.

Conception du carrousel:

Notre carrousel affiche des éléments, chacun avec une image d'arrière-plan (taille personnalisable) et une URL personnalisée. Le nom de l'image apparaît ci-dessus, la description ci-dessous. Les flèches de navigation facilitent la navigation.

Exigences de développement:

Le gestionnaire de liens WordPress stocke les données de liaison du carrousel. get_bookmarks() récupère ces liens. JavaScript et jQuery Handy Animation. Un plugin assure un code propre et maintenable.

Ajout d'éléments de carrousel:

L'ajout d'élément implique la sélection d'un nom, d'une URL, d'une description et d'une image de taille correcte. Une catégorie dédiée (par exemple, "Carousel") est créée pour l'organisation. Les attributs target et rel sont facultatifs.

Création du plugin:

Le plugin utilise plusieurs fichiers, résidant dans le répertoire wp-content/plugins (ou en tant que mu-plugin). Le fichier principal (carousel.php, ou un nom choisi) déclare les informations du plugin et définit la fonction d'affichage du carrousel.

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

Fonction d'affichage du carrousel (display_carousel()):

Cette fonction récupère les éléments à l'aide de get_bookmarks(). Un tableau vide ne donne aucun affichage.

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
    }
}

Étapes suivantes:

Les parties suivantes couvriront le style CSS et l'animation JavaScript pour créer un curseur entièrement fonctionnel. Les FAQ sur les plugins de carrousel WordPress sont également incluses dans le texte d'origine et peuvent être incorporées ici si vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!