Kod di bawah mesti muncul dalam fail utama plugin anda.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

fungsi wp_enqueue_style () menerima (sekurang -kurangnya) dua parameter, nama gaya dan URI ke fail yang sepadan. Fungsi plugin_dir_url () akan memberi kami URL ke folder plugin kami, kerana fail carousel.css saya terletak di akar folder ini saya tidak mempunyai subdirektori untuk ditambah di sini, tetapi anda mesti menggabungkannya jika anda menggunakannya.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Masalah yang berpotensi mungkin berlaku kepada anda di sini: Bilangan item boleh berubah, kerana skrip kami sebenarnya boleh memaparkan hanya tiga item misalnya. Ia tidak benar -benar menjadi masalah kerana kita mengehadkan bilangan item kepada maksimum lima, jadi walaupun hanya ada tiga yang mereka semua akan sesuai dan ruang kosong tidak akan mengganggu operasi karusel.

Jika anda memilih had lain, anda mesti menukar lebar ini (contohnya hingga 1000% jika anda ingin memaparkan 10). Masalah muncul apabila anda tidak mahu sebarang had. Dalam kes ini, anda perlu menetapkan lebar dalam atribut gaya tag UL, berdasarkan pembolehubah $ n kami yang mengandungi bilangan item yang akan dipaparkan.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Posisi pautan

Sekarang kita perlu membetulkan lebar tag li. Pada masa ini mereka ditetapkan kepada 100% supaya mereka akan mengambil lebar lebar bekas kami yang lima kali terlalu lama.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

Tag li kini mempunyai lebar yang betul dan terapung. Jika anda menguji karusel kami sekarang, anda akan melihat hasil yang betul, lima item di sebelah satu sama lain. Anda kini boleh menambah harta limpahan ke #Carousel untuk menyembunyikan item yang tidak boleh dilihat.

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

nama dan keterangan item

Nama item boleh digayakan seperti yang anda inginkan. Di sini saya akan menerangkan bagaimana saya mencipta gaya yang anda lihat di bahagian sebelumnya tutorial ini.

Sebagai peringatan, nama item dipaparkan dalam tag yang kuat dalam elemen A.Carousel-Link. Jalur ini boleh didapati dengan warna latar belakang, tetapi kami mahu jalur ini menduduki keseluruhan lebar. Untuk melakukan itu, kita boleh menetapkan paparan untuk menyekat. padding dan sifat warna melengkapkan gaya.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Seperti nama, anda boleh memperibadikan keterangan item. Di sini saya memilih untuk memaparkannya di sebelah kanan, di bawah nama, menggunakan CSS di bawah.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

Nilai blok untuk harta paparan membolehkan tag EM menggunakan semua lebar yang tersedia. Kami kemudian menyelaraskan teks di sebelah kanan, dengan beberapa padding supaya teks tidak sukar menentang kelebihan. Saya memilih di sini kelabu gelap untuk warna teks. Untuk memastikan bahawa teks itu akan sentiasa dibaca, walaupun pada imej gelap, saya menambah bayangan teks putih.

Styling the Arrows

Langkah terakhir adalah dengan betul memaparkan anak panah. Anda mempunyai beberapa pilihan di sini, bergantung kepada tempat anda ingin memaparkan anak panah ini.

Saya menggunakan sifat -sifat yang disenaraikan di bawah untuk mencapai kesan pada item sampel. Kami mengubah anak panah menjadi blok untuk dapat mengubah saiz mereka, kami kemudian menetapkan saiz ini, dan kami gaya anak panah. Kami juga menggunakan helah berguna untuk menyelaraskan secara menegak teks (anak panah), kami menetapkan harta yang ketinggian garis ke nilai yang sama yang kami berikan kepada ketinggian, teks kemudiannya akan berpusat secara menegak.

<span><span>function enqueue_carousel_style() {</span>
</span>    wp_enqueue_style(<span>'carousel', plugin_dir_url(__FILE__) . 'carousel.css');
</span>}
add_action(<span>'wp_enqueue_scripts', 'enqueue_carousel_style');</span>

Untuk menghasilkan semula sudut bulat, kami akan menggunakan radius sempadan, tetapi tidak di semua sudut, yang berada di bahagian karusel tidak boleh dibulatkan. Itulah sebabnya kita akan menggunakan 'sub-sifat' radius sempadan yang membolehkan kita memilih sudut untuk bulat.

<span>#carousel {
</span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span>    <span><span>height: <span>350px</span></span>;
</span></span><span><span>}</span></span>

Akhirnya, saya secara peribadi suka butang dan pautan untuk mempunyai kesan hover. Di sini saya memilih untuk mengubahsuai warna anak panah.

<span>#carousel ul,
</span><span>#carousel ul li,
</span><span>#carousel ul li a.carousel-link {
</span><span>    <span><span>display: block</span>;
</span></span><span>    <span><span>width: <span>100%</span></span>;
</span></span><span>    <span><span>height: <span>100%</span></span>;
</span></span><span><span>}</span></span>

sebagai CSS3 membolehkan kita dengan mudah mempunyai peralihan yang lembut, mengapa tidak menggunakannya?

<span>#carousel ul {
</span><span>    <span><span>width: <span>500%</span></span>;
</span></span><span><span>}</span></span>

meletakkan anak panah

Itu semua untuk gaya anak panah. Sekarang kita perlu meletakkan mereka di mana kita mahu mereka. Kami akan menggunakan kedudukan mutlak, dengan sedikit helah: kami tidak tahu kedudukan karusel itu sendiri supaya kami tidak dapat meletakkan anak panah dari sudut skrin. Sebaliknya, kami akan menggunakan sudut karusel dan, lebih tepatnya, sudut tag li.

mari kita meletakkan anak panah kita dengan kedudukan yang ditetapkan untuk mutlak.

<span><span><span><ul style="width: <?php echo $n * 100; ?></span>%;"></span></span>

Jika anda mencuba ini, anak panah akan diletakkan di sisi skrin. Kita mesti menggunakan pilihan kedudukan mutlak yang kurang dikenali. Elemen anak panah diletakkan berbanding dengan ibu bapa yang terdekat. Di sini, anak panah kami tidak mempunyai ibu bapa yang diposisikan sehingga mereka berada di kedudukan yang relatif terhadap skrin.

Masalahnya ialah ibu bapa anak panah berada di tempat yang betul: kami tidak mahu memindahkan mana -mana. Caranya terdiri daripada menggunakan kedudukan relatif, tanpa mengubah apa -apa lagi. Kami akan memohon kedudukan relatif kepada tag li yang merupakan ibu bapa terdekat anak panah kami.

<span>#carousel ul li {
</span><span>    <span><span>float: left</span>;
</span></span><span>    <span><span>width: <span>900px</span></span>;
</span></span><span><span>}</span></span>

maka anak panah diposisikan di sisi ibu bapa yang terdekat mereka, tag li, yang kami inginkan.

Apa yang akan datang?

Unsur -unsur HTML yang diperlukan oleh karusel kami dipaparkan dan, sekarang, mereka juga digayakan. Masalahnya adalah bahawa karusel kita sama sekali tidak berguna, kerana ia hanya menunjukkan item pertama (ia lebih berguna tanpa CSS!).

Itulah sebabnya kita perlu menambah satu perkara terakhir: JavaScript. Di bahagian seterusnya (dan terakhir) tutorial ini, kami akan menjadikan anak panah kami berfungsi seperti yang diharapkan, pautan akan menatal apabila anak panah diklik. Itulah perkara yang baik, kan?