Membina Plugin Carousel WordPress: Bahagian 2

Carousel bukan hanya senarai pautan, ia wujud untuk memaparkan pautan sebagai item dengan cara yang menjadikannya lebih menarik. Dalam artikel sebelumnya, kita melihat bagaimana untuk membuat karusel, dan bagaimana untuk memaparkan unsur -unsur HTML yang kita perlukan. Kini sudah tiba masanya untuk membina dan gaya plugin Carousel WordPress kami.

Carousel kami kini merupakan senarai pautan yang mudah, pada akhir artikel ini kita akan mempunyai karusel yang diformat dengan betul. Kami akan melihat bagaimana untuk menggunakan gaya yang kita perlukan untuk mendapatkan hasil yang saya tunjukkan dalam imej sampel dalam Bahagian 1. Sudah tentu terdapat banyak sifat yang anda boleh menyesuaikan, laman web tidak perlu sama di seluruh dunia!

Pertama kita akan melihat bagaimana kita boleh menghubungkan fail CSS dengan betul ke laman web dalam WordPress. Kemudian kita akan gaya unsur -unsur kita, yang akan menunjukkan beberapa helah CSS yang boleh berguna dalam banyak situasi yang berbeza.

Takeaways Key

Plugin Carousel WordPress dipertingkatkan dengan menghubungkan fail CSS luaran, yang membolehkan gaya yang lebih mudah dan lebih fleksibel. Ini termasuk fungsi wp_enqueue_style () untuk kemasukan fail.
Saiz karusel ditakrifkan dalam fail CSS, dengan setiap item mengisi seluruh blok yang dibuat. Kedudukan pautan dan saiz bekas juga ditubuhkan.
Gaya nama, keterangan, dan anak panah item disesuaikan dengan menggunakan sifat CSS seperti paparan, padding, warna, warna latar belakang, teks-align, dan bayang-bayang teks.
Plugin Carousel disiapkan dengan menambah JavaScript untuk membuat anak panah berfungsi, yang membolehkan menatal apabila anak panah diklik. Ini akan diliputi di bahagian seterusnya tutorial.

Menghubungkan fail CSS luaran

Untuk membuat gaya karusel kami sebagai fleksibel dan mudah, kami mengehadkan penggunaan gaya inline untuk hanya satu atribut, latar belakang setiap item. Untuk semua gaya lain, kami akan menggunakan fail CSS luaran (stylesheet). Anda boleh memilih nama anda sendiri untuk fail (seperti carousel.css) dan letakkan di folder plugin anda (atau dalam subdirektori).

Untuk memasukkan fail yang akan kami gunakan fungsi WP_ENQUEUE_STYLE () seperti yang diterangkan dalam artikel kami tentang cara yang betul untuk memasukkan skrip.

kita tidak boleh memanggil fungsi ini di mana sahaja, ia mesti dipanggil sebelum panggilan WP_HEAD () (tidak seperti skrip, kita tidak boleh memasukkan fail CSS di footer!). Kita boleh menggunakan WP_ENQUEUE_SCRIPTS, yang dipanggil apabila WordPress termasuk skrip dan gaya untuk halaman semasa (di bahagian depan), jadi ia sesuai untuk aplikasi ini.

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.

Perhatikan bahawa kami tidak menguji apa -apa dalam fungsi kami. WordPress akan memasukkan fail CSS kami ke setiap halaman. Ini bukan masalah jika anda memaparkan karusel anda di semua halaman. Walau bagaimanapun, jika anda memaparkan karusel anda hanya pada beberapa halaman (mis. Hanya di halaman utama), anda harus menguji sama ada pengunjung berada di halaman yang betul sebelum memasukkan fail CSS (mis. Dengan is_home ()).

Sekarang sudah tiba masanya untuk mengedit fail CSS kami.

mari kita gaya karusel kita!

saiz karusel

kita mulakan dengan saiz bekas utama, div yang dikenal pasti oleh #Carousel. Di sini anda boleh menetapkan saiz yang anda mahukan. Seperti yang kita gunakan imej yang kita tidak akan mengubah saiz, saiz tetap adalah idea yang baik.

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

Kemudian, kami akan menambah harta ketiga ke dalam bekas ini, limpahan. Buat masa ini kita tidak akan menggunakannya, dengan cara itu kita dapat melihat bagaimana item kita dibentangkan di halaman.

Setiap item akan mengisi keseluruhan blok yang baru saja kami buat. Peraturan berikut terpakai kepada item itu sendiri (tag dengan nama kelas Carousel-Link) serta ibu bapanya.

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

Posisi pautan

Apa yang berlaku ketika kita pergi ke kanan?

Sekarang kita perlu memikirkan apa yang kita mahu lakukan. Terdapat banyak kemungkinan apabila kita mahu membina sebuah karusel. Saya cadangkan meletakkan barang -barang kami bersebelahan dengan harta terapung ke dalam bekas besar: Ia mesti cukup besar untuk mengandungi semua item kami dalam satu baris.

Apabila pengguna ingin melihat imej lain, kami memindahkan bekas ini untuk menyelaraskan item seterusnya dengan #Carousel Div. Div ini akan mempunyai limpahan harta yang ditetapkan untuk tersembunyi, dengan cara itu kita tidak akan melihat pautan lain.

di bawah adalah skema apa yang kita mahu buat. Dalam hijau, anda dapat melihat bekas besar dengan semua pautan kami dalam satu baris. Untuk membolehkan kita melihat pautan di sebelah kanan, bekas itu pergi ke kiri, dan sebaliknya. Bingkai hitam mewakili #Carousel Div: Di luar bingkai ini, semuanya tidak kelihatan.

saiz bekas

Pertama, bekas: Kami tidak akan membuat elemen HTML yang lain, kerana UL adalah sempurna untuk tujuan kami. Kami melihat bahawa bekas ini mesti cukup besar untuk mengandungi semua pautan kami dalam satu baris. Pada masa ini ini tidak berlaku, item kami dan bekas kami mempunyai lebar 900 piksel.

Untuk mengubahnya, kita akan meningkatkan lebar bekas hingga 500%. Div yang dikenal pasti oleh #Carousel mempunyai lebar 900 piksel sehingga lebar 500% akan membolehkan kita memaparkan lima pautan berturut -turut.

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

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