Membina Plugin Carousel WordPress: Bahagian 1

Butiran tutorial ini mewujudkan plugin Carousel WordPress yang memanfaatkan API Pengurus Pautan WordPress - kaedah yang paling berkesan untuk menguruskan senarai pautan dalam WordPress. Carousel akan mempamerkan satu siri item, masing -masing memaparkan imej latar belakang dan menghubungkan ke URL tersuai. Pengguna menavigasi menggunakan anak panah "sebelumnya" dan "seterusnya".

Carousel, pada dasarnya senarai pautan yang disimpan dalam pengurus pautan WordPress, menggunakan JavaScript dan jQuery untuk animasi. Plugin memudahkan paparannya. Menambah item memerlukan menentukan nama, URL, deskripsi, dan imej bersaiz yang betul. Kategori karusel khusus dicipta; Atribut target dan rel adalah pilihan.

Siri tiga bahagian ini meneroka pembinaan plugin. Pengurus Pautan, seperti yang dibincangkan sebelumnya, sangat sesuai untuk pengurusan pautan. Walaupun APInya ringkas, ia menawarkan fungsi yang mencukupi untuk aplikasi yang berguna. wp_list_bookmarks() tidak akan digunakan; Fungsi lain dari artikel sebelumnya akan digunakan.

kebiasaan sebelum dengan pengurus pautan WordPress dan APInya disyorkan sebelum meneruskan.

Reka bentuk Carousel:

Carousel kami memaparkan item, masing -masing dengan imej latar belakang (saiz disesuaikan) dan URL tersuai. Nama imej muncul di atas, keterangan di bawah. Anak panah navigasi memudahkan penyemakan imbas.

Keperluan Pembangunan: Pengurus Pautan WordPress menyimpan data pautan Carousel. mengambil pautan ini. JavaScript dan JQuery Handle Animation. Plugin memastikan kod yang bersih dan dikekalkan.

get_bookmarks() Menambah item karusel:

Penambahan item melibatkan memilih nama, URL, deskripsi, dan imej bersaiz yang betul. Kategori yang berdedikasi (mis., "Carousel") dicipta untuk organisasi. Atribut dan

adalah pilihan.

target rel Penciptaan Plugin:

Plugin menggunakan pelbagai fail, yang tinggal di direktori (atau sebagai mu-plugin). Fail utama (

, atau nama yang dipilih) mengisytiharkan maklumat plugin dan mentakrifkan fungsi paparan karusel.

wp-content/plugins carousel.php

Fungsi paparan karusel ():

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

Fungsi ini mengambil item menggunakan . Arahan kosong mengakibatkan tiada paparan. display_carousel()

Langkah -langkah seterusnya: 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
    }
}

Bahagian seterusnya akan meliputi gaya CSS dan animasi JavaScript untuk membuat slider berfungsi sepenuhnya. Soalan Lazim pada plugin Carousel WordPress juga termasuk dalam teks asal dan boleh dimasukkan di sini jika dikehendaki.

Atas ialah kandungan terperinci Membina Plugin Carousel WordPress: Bahagian 1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!