Tutorial WordPress: Cara Membuat Plugin Flip Halaman Keren

Artikel ditulis oleh:
  • Inbound Pemasaran
  • Diperbarui: Sep 15, 2014

Catatan: Kami tidak lagi mendukung plugin WP ini karena penulis tidak menulis untuk kami untuk saat ini.

Mulai hari ini, setiap minggu kami akan menampilkan tutorial pengodean yang luar biasa, mengajarkan Anda cara melakukan hal-hal khusus menggunakan WordPress, dari dasar hingga lanjutan. Hari ini kita akan membuat sebuah plugin (jadi Anda akan mempelajari langkah-langkah dasar dalam hal ini) untuk menghasilkan galeri "halaman balik", menggunakan JS.

Saya yakin Anda telah melihat salah satu dari mereka di hari-hari awal web Anda, tetapi kebanyakan dilakukan menggunakan flash, yang sekarang cukup usang (masih memiliki nilainya, tetapi itu bukan pilihan terbaik untuk hal semacam ini lagi).

Fungsionalitas dasar akan membuat yang baru jenis galeri berdasarkan beberapa gambar dan ukurannya, melalui shortcode.

Mari kita mulai!

Zip & Pasang

Cara terbaik untuk melihatnya dalam tindakan adalah menginstalnya sendiri. Kamu bisa download di sini. Instal dan aktifkan plugin, maka yang perlu Anda lakukan hanyalah menambahkan shortcode di halaman, seperti ini:

[id flip_book = "78 79 78 79 79 78 78 79 79 78" lebar = "300" height = "225" display = "ganda"]

Preview cepat

Dan ini adalah jenis hasil yang akan Anda dapatkan:

Efek Flipbook

Tapi sihir hitam macam apa yang ada di sana? Sebenarnya cukup sederhana. Mari belajar cara membuat sesuatu seperti ini.

The Header

Pertama-tama Anda harus membuat folder baru dan file .php baru. Pada titik ini akan luar biasa jika Anda memiliki lingkungan pengujian, sehingga Anda dapat memecahkan dan menguji hal-hal.

File dan folder harus memiliki nama yang sederhana dan unik, jadi Anda akan menghindari konflik dengan plugin yang ada. Maka isi dasar dari file kami adalah sesuatu seperti ini:

/ * Nama Plugin: Galeri FlipBook Deskripsi: Buat kode pendek untuk galeri flipbook. Versi: 1.0 Penulis: Lisensi Blog Pendapatan Web: GPL2 * /

Cukup sederhana, ya? Setelah Anda membuat file ini, Anda akan melihat plugin Anda dalam daftar di bawah admin WP> Plugin, dan Anda dapat mengaktifkannya (tetapi jika Anda hanya memiliki konten ini di file Anda, itu tidak akan mengubah banyak situs Anda).

Memanggil skrip

Sekarang kita perlu memasukkan beberapa aset eksternal yang penting di sini. File eksternal yang diperlukan untuk fungsi dasar adalah:

  • jQuery (1.9 +)
  • Skrip Turn.js
  • Ubah gaya dasar

Jika Anda hanya menambahkan skrip dan tag gaya di sana Anda akan memiliki beberapa masalah. Misalnya, panggilan jQuery ganda mungkin akan merusak situs Anda. Selain itu, WordPress sendiri tidak akan "tahu" bahwa Anda telah membuat item tersebut, jadi jika plugin yang berbeda memanggil turn.js lagi atau styling yang berbeda, itu akan merusak situs Anda.

Itu sebabnya kita harus selalu menggunakan fungsi wp_enqueue_script dan wp_enqueue_style. Berikut adalah penggunaan dasar:

function plugin_scripts () {wp_enqueue_script ('jquery'); wp_enqueue_script ('turn', plugins_url ('js / turn.js', __FILE__), array ('jquery'), '1.3', false); wp_enqueue_style ('turnCSS', plugins_url ('css / style.css', __FILE__), false, '1.3', 'all'); }

Kami memanggil item eksternal dengan 3 cara yang berbeda, di sini mereka adalah:

  • Memanggil item yang ada: jQuery - Kita tidak perlu melewatkan banyak parameter jika kita tahu pasti bahwa WordPress sudah memuat skrip ini, kita hanya mengatakan kepadanya “Dude, skrip ini HARUS berada di sini jika tidak kode kami tidak akan kerja"
  • Membuat skrip baru - Anda harus meneruskan beberapa atribut seperti nama, lokasi file, item yang diperlukan (dalam hal ini memerlukan jQuery), versi, dan jika dimuat di footer atau header (false = header, true = footer)
  • Membuat gaya baru - Hampir sama dengan yang sebelumnya, dengan perbedaan kecil pada atribut terakhir, yang mengatakan jenis media mana gaya ini jika untuk

Salah satu hal penting yang harus Anda pertimbangkan ketika Anda memanggil skrip eksternal adalah jika ada lebih banyak kode yang akan bergantung pada plugin ini. Itulah dasarnya yang mendefinisikan apakah file Anda akan dipanggil di header atau footer.

Dalam kasus kami, kami memiliki beberapa skrip tambahan untuk mengatur galeri hanya ketika HTML-nya dibuat, dan itu akan ditambahkan di dalam tubuh. Inilah sebabnya mengapa kita HARUS menambahkan skrip ini di kepala, jika tidak ketika kode kita disebut fungsi "putar" belum ada.

Setelah kode yang bagus ini kita perlu memberitahu WordPress untuk memuatnya sebagai skrip, tindakan "wp_enqueue_scripts" akan melakukan ini:

add_action ('wp_enqueue_scripts', 'plugin_scripts');

Kode Pendek

Mari kita mulai dengan tindakan untuk membuat shortcode. Ini cukup sederhana, Anda hanya perlu menambahkan pemicu shortcode, dan fungsi yang akan dieksekusi:

add_shortcode ("flip_book", "create_flip_book");

Sekarang kita perlu membuat fungsi kita dan mendapatkan atribut kita. Tetapi beberapa atribut dapat bersifat opsional, yang berarti bahwa kita perlu membuat nilai default untuk mereka. Kita bisa membuat banyak jika ada pengujian jika atribut kosong, tetapi ini adalah salah satu kasus di mana operasi terner lebih baik daripada panggilan biasa.

Operasi biner adalah jenis jika pernyataan langsung dalam nilai variabel. Jika mengikuti struktur ini:

$ variable = (KONDISI)? "VALUE IF CONDITION IS TRUE": "VALUE IF CONDITION IS FALSE";

Anda dapat melihat mereka beraksi di bagian pertama dari fungsi kami:

function create_flip_book ($ attr) {// Mempersiapkan ID untuk diproses $ array ['ids'] = explode ("", $ attr ['ids']); // mode tampilan $ array ['display'] = kosong ($ attr ['display'])? "single": $ attr ['display']; // nilai standar // width $ array ['width'] = kosong ($ attr ['width'])? 400: $ attr ['width']; // height $ array ['height'] = kosong ($ attr ['height'])? 300: $ attr ['height'];
    // HTML dan kode lainnya ada di sini}

Maka kita perlu membuat HTML, dan panggilan dasar untuk gambar kita. Poin penting lainnya di sini adalah untuk menyesuaikan ukuran jika kita menggunakan gaya majalah (harus 2x lebarnya karena kita akan memiliki gambar 2 bukan satu):

<? php if ($ array ['display'] == "double") {$ array ['width'] = $ array ['width'] * 2; } // HTML, JS dan Black Magic?> <Div id = "flipbook"> <? Php for ($ i = 0; $ i <sizeof ($ array ['id']); $ i ++) {?> < div> <? php echo wp_get_attachment_image ($ array ['ids'] [$ i], 'full'); if ($ array ['display'] == "single") {?> <span> <? = "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['id'])?> </span> <? php} else {?> <spanright ":" left ");?>"> <? php echo "". ($ i + 1)?> / <? echo "" .sizeof ($ array ['id']); ?> </span> <? php}?> </div> <? php}?> </div> <script type = "text / javascript"> jQuery ("# ​​flipbook"). turn ({width: < ? php echo $ array ['width'];?>, height: <? php echo $ array ['height'];?>, autoCenter: true, display: '<? php echo $ array [' display ']; ?> ', // percepatan satu halaman atau dua halaman: true, gradients:! jQuery.isTouch,}); </script>

Bagaimana menurut Anda?

Sekarang Anda dapat men-tweak dan memodifikasi ini sesuai keinginan Anda, menambahkan lebih banyak opsi (lihat contoh mengagumkan mereka untuk lebih banyak inspirasi), sesuaikan apa yang tidak berhasil untuk Anda, atau gabungkan ini dengan plugin lain.

Apakah Anda memiliki konsep WordPress yang ingin Anda pelajari sedikit lebih banyak? Mungkin sesuatu yang ingin Anda pelajari cara melakukannya? Beri tahu kami melalui komentar dan kami akan senang untuk menyertakan ini di posting selanjutnya!

Tentang Rochester Oliveira

Saya seorang desainer web dan pengusaha dari Itajubá (MG), Brasil. Saya suka menulis tentang topik yang tidak jelas dan melakukan beberapa hal keren.