Membina Plugin Carousel WordPress: Bahagian 3

Takeaways Key

Untuk membuat anak panah karusel berfungsi, fail JavaScript dibuat dan dihubungkan dengan WordPress menggunakan fungsi WP_ENQUEUE_SCRIPT (), yang diletakkan dalam keadaan fungsi Display_Carousel () untuk memastikan ia hanya dimasukkan apabila karusel dipaparkan.
Blok UL Carousel dipindahkan secara mendatar untuk memaparkan item yang berbeza dengan menyesuaikan harta CSS margin-kiri; Margin kiri negatif menjajarkan bahagian kiri item seterusnya dengan sebelah kiri blok karusel.
Fungsi, carousel_show_another_link (), dicipta untuk memaparkan item lain berdasarkan parameter arah (-1 untuk item sebelumnya, 1 untuk item seterusnya); Ia mengira indeks item baru untuk memaparkan dan memeriksa jika ia wujud sebelum memindahkan blok UL.
dua fungsi, carousel_previous_link () dan carousel_next_link (), dicipta dan dilampirkan pada peristiwa anak panah masing -masing, dan panggil fungsi carousel_show_another_link () dengan parameter yang sesuai; Pepijat dicegah dengan memulakan harta margin-kiri blok UL hingga 0 apabila dokumen sudah siap.

Tanpa gaya, karusel WordPress yang telah kami bina di bahagian pertama tutorial ini hanyalah senarai item, tetapi sekurang -kurangnya berguna, dalam erti kata bahawa mereka semua kelihatan. CSS yang kami tambahkan dalam bahagian dua tutorial ini meningkatkan paparan karusel, tetapi sekarang masalahnya adalah bahawa hanya item pertama yang ditunjukkan kepada pengguna dan tidak ada cara untuk memaparkan seluruh item.

Kami menambah anak panah ke karusel kami, untuk membolehkan pengguna menavigasi antara item yang berbeza, dan kini sudah tiba masanya untuk menjadikannya dapat digunakan, dengan sedikit JavaScript.

Dalam kesinambungan tutorial ini, kami akan belajar bagaimana untuk memasukkan skrip kami dengan betul, maka kami akan menulis skrip yang akan melancarkan fungsi yang menghidupkan item apabila pengguna memukul anak panah.

Menghubungkan fail JavaScript

di sini kami akan menggunakan JavaScript untuk menjadikan anak panah kami berguna. Bagi bahagian CSS, buat fail baru. Saya memanggilnya carousel.js dan meletakkannya di akar folder plugin.

kita perlu menunjukkan kepada WordPress bahawa kita menggunakan fail JavaScript. Untuk melakukan ini, kami akan menggunakan fungsi WP_ENQUEUE_SCRIPT ().

Dua parameter pertama adalah sama seperti untuk wp_enqueue_style (). Kemudian kita dapati array. Arahan ini menyenaraikan kebergantungan, skrip yang diperlukan oleh skrip kami untuk berfungsi. Saya memilih untuk menggunakan jQuery untuk mendapatkan isu -isu keserasian penyemak imbas jadi saya menunjukkan kepada WordPress bahawa saya ingin menggunakannya: seperti yang kita lihat dalam artikel kami tentang dengan betul termasuk skrip di WordPress, 'jQuery' adalah nilai yang diiktiraf dalam WordPress.

Parameter keempat ialah nombor versi skrip. Ia tidak begitu penting di sini (lihat artikel yang dihubungkan sebelum ini untuk maklumat lanjut), tetapi kami perlu menggunakan parameter terakhir dan menetapkannya kepada benar supaya skrip kami akan dimasukkan ke dalam footer.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Kelebihan memilih footer dan bukannya header ialah kita boleh menggunakan wp_enqueue_script () di mana sahaja kita mahu. Kami tidak mempunyai kekangan menggunakannya sebelum wp_head () seperti wp_enqueue_style (). Kami kemudian akan dapat memasukkan skrip kami hanya jika perlu: hanya jika kita memaparkan karusel.

Tempat terbaik untuk meletakkan wp_enqueue_script () oleh itu adalah dalam keadaan fungsi Display_Carousel () kami. Kami akan memaparkan karusel hanya jika terdapat item untuk dipaparkan, jadi kami akan memasukkan skrip kami dengan keadaan yang sama.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Sekarang kami sudah bersedia untuk mengedit fail JavaScript kami.

Apa yang kita mahu lakukan?

Pertama kita merangkumi semua kod kami dalam fungsi. Untuk mengelakkan perlanggaran dengan perpustakaan lain, WordPress melumpuhkan penggunaan $ dalam jQuery. Kita boleh mengaktifkannya lagi dengan fungsi ini.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Terdapat banyak cara untuk membuat karusel, walaupun tanpa mengubah kod HTML kami. Di sini saya cadangkan anda memindahkan blok UL. Ia mengandungi semua item kami berturut -turut supaya kami dapat memindahkannya secara mendatar untuk memaparkan satu atau item lain dengan menetapkan kedudukannya. Lihat skema di bawah, sudah dilihat di bahagian sebelumnya tutorial ini, untuk melihat apa yang kita mahu lakukan.

Untuk memindahkannya, kami akan bermain dengan harta CSS margin-kiri. Secara lalai ia ditetapkan kepada 0 dan oleh itu "memaparkan" item pertama. Item pertama cukup besar untuk mengisi blok karusel dan item kedua, yang bersebelahan dengannya, tidak dapat dilihat terima kasih kepada harta limpahan.

Untuk memaparkan item kedua, kita perlu memindahkan blok UL ke kiri, untuk menyelaraskan bahagian kiri item kedua dengan bahagian kiri blok karusel. Ini boleh dicapai dengan margin kiri negatif. Untuk menguji nilai apa yang perlu kita gunakan, kita boleh bereksperimen dengan beberapa kod CSS (yang kita keluarkan selepas itu, kerana kita tidak memerlukannya).

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Baris mudah ini layak mendapat penjelasan. Jika anda mengujinya, anda harus melihat bahawa item pertama tidak dipaparkan, kita lihat sebaliknya item kedua. Anda boleh menguji nilai lain untuk lebih memahami apa yang berlaku. Dengan -50px kita memindahkan blok UL 50 piksel ke kiri sebagai contoh. Dengan nilai -nilai yang saya tunjukkan kepada anda di CSS di atas, kerana karusel mempunyai lebar 900 piksel, saya boleh memaparkan item kedua dengan nilai -900px.

bagaimanapun kita boleh menggunakan peratusan sebaliknya. Kelebihannya ialah peratusan ini adalah relatif kepada bekas. Di sini "100%" adalah sama dengan "900 piksel" jadi, jika kita memberikan nilai -100%, kita menyembunyikan item pertama dan memaparkan yang kedua. Menggunakan peratusan membolehkan anda mengubah suai lebar bekas tanpa mengubah nilai harta margin-kiri.

fungsi untuk memaparkan item lain

Pertama, kami akan menulis fungsi yang akan memaparkan item lain. Yang satu ini akan menerima satu parameter, arah. Jika kita mahu memaparkan item sebelumnya, arah ini mesti ditetapkan ke -1 dan, jika kita mahu memaparkan item seterusnya, ia mesti ditetapkan ke 1.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

ke mana kita pergi?

Untuk menentukan nilai yang akan diberikan kepada margin-kiri, kita perlu tahu di mana kita berada. Terdapat beberapa cara yang mungkin untuk mencapai matlamat ini, dan saya memilih satu yang hanya menggunakan nilai semasa harta margin-kiri.

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Baris pertama mengambil blok UL. Seperti yang kita akan gunakan semula kemudian, menyimpannya dalam pembolehubah adalah idea yang baik. Baris kedua mungkin kelihatan agak pelik. Matlamatnya adalah untuk menyimpan integer yang mewakili item yang dipaparkan semasa. Item pertama akan diwakili oleh 0, yang kedua oleh 1, dan lain -lain

Untuk mencapai matlamat ini, kami mendapat nilai semasa harta margin-kiri. Masalahnya ialah nilai ini adalah seperti -200%dan kami mahu nombor: untuk mengeluarkan "%" kami menggunakan fungsi parseInt () yang mengubah nilai menjadi integer (mis. '-200%' menjadi -200). Seperti yang kita mahukan integer positif kita menambah tanda "tolak" (mis. Untuk mendapatkan 200 dari -200), dan kita membahagikan dengan 100 untuk mendapatkan nilai yang kita mahu (mis. 2, bukan 200).

Anda mungkin tertanya-tanya mengapa kami tidak menggunakan ul.css ('margin-left') untuk mendapatkan nilai harta margin-kiri. Malah, .css () adalah kaedah jQuery dan, dalam konteks kita, nampaknya merupakan idea yang lebih baik. Masalahnya ialah kaedah ini tidak akan memberi kita peratusan. Menggunakan nilai yang sama seperti di atas, jika item semasa adalah yang ketiga, harta margin -kiri ditetapkan kepada -200% manakala kaedah .css () akan kembali -1800px. Untuk mengira item semasa menggunakan nilai ini dalam piksel, kita perlu menggunakan lebar bekas besar, dan saya lebih suka menggunakan blok UL.

Sekarang kita boleh mengira indeks item untuk dipaparkan, terima kasih kepada arahan yang diberikan dalam hujah fungsi kita.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Adakah item baru wujud?

Sebelum memaparkan item baru, kita perlu menguji sama ada ia wujud. Jika New_link kurang daripada atau sama dengan -1, atau lebih besar daripada atau sama dengan jumlah item, maka ia tidak wujud dan kita tidak boleh memaparkannya, jadi memindahkan blok UL bukan idea yang baik. Perhatikan bahawa ujian ini kelihatannya berlebihan kerana anak panah tidak dipaparkan apabila kita tidak dapat pergi lebih jauh, tetapi memastikan bahawa sesuatu sebenarnya boleh dilakukan adalah idea yang baik.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

Pertama, kami mendapat jumlah item, iaitu bilangan tag LI dalam senarai kami. Nombor ini berguna untuk keadaan yang kami nyatakan di atas kerana kami mahukan integer positif yang tidak boleh lebih besar daripada atau sama dengan bilangan item (jangan lupa bahawa kita bermula dengan 0 dan bukan 1).

memaparkan item baru

Akhirnya, langkah blok dapat dicapai dengan satu baris. Kita perlu mengira nilai baru margin-kiri. Untuk melakukan itu, mari kita fikirkannya. Untuk setiap item "lulus" kami mempunyai lebar 100% untuk perjalanan. Dengan cara itu, nilai baru margin-kiri adalah 100 kali kedudukan item baru yang kami hitung, dengan tanda tolak untuk pergi ke kiri.

<span>wp_enqueue_script('carousel', plugin_dir_url(__FILE__) . 'carousel.js', array('jquery'), '1.0', true);</span>

Saya memilih di sini untuk menggunakan animasi jQuery, tetapi anda bebas untuk membuat sendiri, atau mengubah suai tetapan yang satu ini.

beberapa alias untuk kegunaan yang lebih praktikal

Kami kini akan membuat fungsi yang akan dipanggil setiap kali pengguna mengklik pada anak panah. Fungsi ini tidak memerlukan sejumlah besar kod, kerana satu -satunya perkara yang mereka lakukan ialah memanggil fungsi carousel_show_another_link () dengan parameter yang betul. Berikut adalah kod untuk fungsi yang dipanggil apabila kita mengklik anak panah "sebelumnya".

<span>function display_carousel() {
</span>	<span>// …
</span>	<span>// Here we retrieve the links
</span>	<span>// …
</span>	
	<span>if (!empty($links)) {
</span>		<span>wp_enqueue_script(/* parameters listed above */);
</span>		
		<span>// …
</span>		<span>// Display
</span>		<span>// …
</span>	<span>}
</span><span>}</span>

Perhatikan pulangan palsu; Untuk mengelakkan kelakuan lalai anak panah kami (jangan lupa bahawa mereka adalah pautan). Dengan cara itu, URL tidak akan berubah apabila pengguna mengklik anak panah.

Fungsi yang memaparkan item "seterusnya" adalah sama, tetapi dengan 1 sebagai parameter untuk carousel_show_another_link (). Saya memilih untuk memanggilnya carousel_next_link ().

melampirkan peristiwa

Akhirnya kita perlu membuat fungsi -fungsi ini berguna, dengan melampirkan peristiwa yang tepat kepada unsur -unsur yang betul. Kami akan melakukannya dalam fungsi baru, yang dipanggil apabila kita dapat memastikan bahawa unsur -unsur kita dicipta: apabila dokumen dimuatkan.

<span>jQuery(function($) {
</span>	<span>// The code we will write must be placed here
</span><span>});</span>

Kami mahu melampirkan fungsi carousel_previous_link () ke setiap anak panah "sebelumnya". Dengan pokok dom karusel kami, kami dapat mengambilnya dengan mudah, dengan cara yang sama kami mengambilnya apabila kami mahu menggayakannya di CSS.

<span><span>#carousel ul</span> {
</span>	<span>margin-left: -100%;
</span><span>}</span>

maka kita boleh melampirkan fungsi carousel_next_link () ke anak panah kanan (#carousel ul li a.carousel-next) dengan cara yang sama.

anda boleh menguji kod ini tetapi pepijat harus muncul: kali pertama fungsi carousel_show_another_link () dipanggil, margin margin harta CSS untuk blok UL kami tidak wujud, jadi ralat akan berlaku apabila kami cuba mengambil nilainya.

Untuk mengelakkan pepijat ini kita dapat memulakan nilai harta ini. Masih dalam fungsi yang dipanggil apabila dokumen sudah siap (sebelum melampirkan peristiwa misalnya), tambahkan baris berikut.

<span>function carousel_show_another_link(direction) {
</span><span>}</span>

Ini menetapkan harta margin-kiri blok UL kami kepada 0 sebagai lalai. Harta ini sekarang akan wujud, tanpa memindahkan blok.

anda kini boleh mengklik di anak panah, karusel selesai dan ia berfungsi!

Kesimpulan

Dalam tutorial ini kami berjalan melalui membina plugin karusel menggunakan API Pengurus Pautan WordPress. Ini adalah contoh yang baik untuk menggunakan API ini, tetapi juga cara yang baik untuk melihat cara menggabungkan PHP, HTML, CSS dan JavaScript dalam plugin WordPress.

Dalam penutupan, saya akan mengatakan bahawa terdapat banyak cara untuk membina karusel, walaupun kita menyimpan kod HTML yang kita hasilkan: kita boleh memilih gaya yang berbeza, atau cara yang berbeza untuk menulis skrip. Malah, skrip yang kami tulis di sini hanyalah satu contoh dan kami boleh menulis yang sama sekali berbeza dengan hasil yang sama.

Anda boleh membuat keputusan sendiri jika anda suka kod yang kami gunakan di sini. Jika tidak, jangan ragu untuk mengeditnya!

Walaupun anda suka apa yang kami lakukan di sini, anda masih boleh meningkatkan hasilnya. Sebagai contoh, pelawat mesti memukul anak panah untuk melihat item lain: anda boleh cuba untuk menghidupkan karusel secara automatik dengan fungsi setTimeout ().

Jika anda ingin melihat kod siap, atau cuba plugin untuk diri sendiri, ia boleh dimuat turun di sini.

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