Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Posts

Melampirkan file ke Post Anda menggunakan WordPress Custom Meta Boxes, Bagian 2

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Gustiawan (you can also view the original English article)

Dalam post pertama, kami melihat bagaimana untuk melampirkan file - khususnya, PDF - WordPress post dan halaman tanpa harus menggunakan plugin atau solusi pihak ketiga. Pada titik ini, Anda dapat meng-upload file - tidak ada cara untuk benar-benar menonaktifkan link atau menghapus link ke file setelah itu telah di-upload. Dalam post ini, kita akan melihat bagaimana memberikan styling sedikit lebih baik untuk download link dan bagaimana untuk memperluas fungsi custom meta boxes dengan memungkinkan pengguna untuk menghapus file setelah mereka men-download mereka.


Dress Up

Jika Anda mengikuti bersama dengan kode dalam post pertama, maka Anda harus memiliki demo fungsional bagaimana melampirkan PDF ke post WordPress (atau halaman) bekerja; Namun, secara keseluruhan presentasi tidak tampak baik:

Sebelum melangkah lebih jauh, mari kita membersihkan ini sedikit sehingga tampak sedikit lebih terintegrasi dengan tema default. Ingat bahwa kita menggunakan Twentyeleven sebagai tema default kami agar kami semua pada halaman yang sama seperti kita bekerja melalui tutorial.

Pertama, mari kita pindahkan download link ke lokasi yang lebih logis. Jika Anda telah mengikuti sejak post pertama, Anda akan ingat bahwa kami menempatkan download link di single.php yang berlokasi di root direktori tema. Buka file dan temukan blok kode yang terlihat seperti ini:

Salin Semua kecuali baris pertama dari kode dan menghapusnya dari file. Ini harus meninggalkan hanya panggilan ke get_template_part.

Selanjutnya, menemukan custom-single.php. Ini adalah file template terletak di root direktori tema. Menemukan panggilan untuk the_content() dan kemudian paste kode Anda hanya disalin langsung di bawah ini. Ini harus menghasilkan blok kode berikut:

Sekarang, mari kita bungkus link dalam wadah sehingga kita dapat dengan mudah menberi style. Aku memberikan wadah saya ID dari 'wp_custom_attachment.' Merasa bebas untuk menggunakan apapun yang Anda suka, hanya ingat untuk merujuk benar ke dalam stylesheet Anda.

Berikut adalah markup saya:

Dan inilah CSS:

Mengizinkan Anda telah menulis segala sesuatu dengan benar, download link sekarang harus terlihat seperti ini:

Jauh lebih baik, kan? Itu sekarang telah ditata sedemikian rupa sehingga tampak lebih erat dengan tema yang terintegrasi. Ingatlah untuk membuat perubahan yang sesuai kepada page.php, serta (mempertimbangkan bahwa kami mendukung lampiran file pada kedua post dan halaman).


Men-download, bila tersedia

Sebelum pindah, kita memiliki satu lebih kecil untuk membuat perubahan pada kode yang kita tambahkan. Sekarang, download link ditampilkan tanpa syarat. Ini berarti bahwa apakah atau posting benar-benar memiliki file atau tidak, kami menampilkan download link.

Idealnya, kita hanya ingin menampilkan download link setiap kali ada file untuk men-download. Dengan demikian, kita akan perlu conditional. Secara khusus, kita harus mendapatkan data meta terkait post, menentukan apakah ada URL sebenarnya untuk lampiran file. Jika demikian, kami akan menampilkan link; Jika tidak, kita tidak akan.

Blok kode yang kami tambahkan ke konten-single.php, tempat pembukaan if statement di atas wp_custom_attachment pembukaan tag dan menutup pernyataan di bawah penutup wadah tag. Sekarang, kode akan terlihat seperti ini:

Kita perlu memeriksa adanya dokumen URL. Ada sejumlah cara untuk melakukan ini, tetapi saya biasanya memeriksa dengan mengambil melihat atribut URL nya. Blok kode yang dihasilkan adalah:

Pada titik ini, download link hanya harus menampilkan ketika ada sebuah file sah yang melekat memberikan post atau halaman. Cobalah.


Menghapus File

Pada titik ini, kami telah terikat berakhir longgar beberapa dari post sebelumnya dan kami siap untuk menyelesaikan fungsi yang diperlukan untuk menghapus lampiran.

Fondasi

Ingat dari post terakhir bahwa sekali pengguna mencoba untuk meng-upload file, kami memiliki fungsi serialisasi yang dijalankan yang bertanggung jawab untuk benar-benar menulis file ke disk. Untuk referensi, ini ada di save_custom_meta_data.

Untuk benar menghapus file, kita perlu untuk melacak lokasi file yang sudah ada dan apakah atau tidak pengguna telah benar-benar meminta untuk menghapus file. Kita akan melakukannya dengan input box dan anchor.

Pertama, Cari fungsi 'wp_custom_attachment' bahwa kita diciptakan dalam post terakhir. Ini adalah dimana kami menambahkan elemen input file. Tepat di bawah elemen input Tambahkan kode berikut (fungsi penuhnya akan diberikan di bawah ini):

Ini akan menambahkan sebuah elemen input teks yang melacak nilai URL dokumen upload. Kami akan membersihkan ini agak kemudian dalam tutorial, tetapi untuk sekarang, mari kita memperkenalkan sebuah anchor untuk menghapus file. Hanya di bawah dua baris kode yang baru kita tambahkan, menulis berikut:

Perhatikan: kami telah memberikan anchor id yang unik. Ini akan diperlukan ketika kita mulai mengaitkan area administrasi untuk menangani event pengguna. Jika Anda tidak memberikan anchor ID ini, membuat catatan apa pun yang anda tetapkan.

Kita belum selesai. Ingat bagaimana kita setup single post dan tampilan halaman kondisional layar download link? Kita perlu melakukan hal yang sama untuk menghapus link. Secara khusus, kita perlu untuk hanya menunjukkan link Hapus jika dokumen ada. Jadi, dengan cara yang sama, bungkus anchor dalam conditional statement yang memeriksa adanya dokumen URL:

Tidak ada yang terlalu berat, kan? Untuk menjadi lengkap, di sini adalah fungsi penuh seperti berdiri:

Kami akan meninjau kembali fungsi ini sedikit tetapi kemudian dalam tutorial tapi, sekarang, mengujinya. Pertama, arahkan ke post yang tidak punya lampiran. Anda akan melihat input file dan input box kosong. Setelah meng-upload file, Anda akan melihat input box berisi URL dari file yang diikuti oleh link untuk menghapus file.

Tapi kita belum selesai. Setelah semua, Hapus link benar-benar tidak melakukan apa pun.

Wiring up

Selanjutnya, menemukan direktori 'js' dalam root tema. Menambahkan sebuah file baru yang bernama custom_attachment.js. Kami akan menulis kode untuk ini sejenak, tetapi tujuan file akan apa yang memungkinkan kita untuk benar-benar menghapus PDF yang kita sudah melekat pada post.

Setelah itu, membuka functions.php dan menambahkan fungsi berikut pada akhir file:

Fungsi ini akan membaca file JavaScript yang hanya dibuat dan memasukkannya pada halaman manapun administratif di WordPress backend. Enqueuing dan mendaftar script berada di luar cakupan tutorial, tapi saya menyarankan membacanya.

Selanjutnya, mari kita kembali ke JavaScript file. Secara umum, kode harus melakukan hal berikut:

  • Menentukan apakah link Hapus ada
  • Jika link ada, melampirkan custom event handler yang membersihkan out input teks yang berisi URL dari file
  • Menyembunyikan link setelah file telah ditandai untuk penghapusan

Kode sumber berada di bawah dan telah sepenuhnya berkomentar untuk membantu menjelaskan apa yang lakukan setiap baris:

Pada titik ini, file tidak akan dihapus tetapi Anda harus memiliki pandangan fungsional. Mencari halaman yang memiliki file melekat padanya. custom meta box Anda akan terlihat seperti ini:

Setelah mengklik 'Delete Link' anchor, custom meta box akan terlihat seperti ini:

Jika tidak, periksa konsol debugging Anda untuk memverifikasi bahwa Anda tidak memiliki kesalahan JavaScript.


Menghapus File

Pada titik ini, kami telah melakukan semua tapi benar-benar menghapus file. Untuk melakukan ini, kita akan perlu untuk memperbarui save_custom_meta_data fungsi yang kita tulis dalam post pertama. Ingat bahwa fungsional termasuk bersyarat memeriksa isi dari kumpulan _FILES $ berasal dari requset POST. Jika koleksi diisi, kemudian kami serialisasi filenya.

Karena kita sedang berusaha untuk menghapus file, kumpulan _FILES $ tidak boleh berisi data sehingga semua kode kami akan perlu tercantum dalam klausul lain. Kode sumber lengkap untuk fungsi akan diberikan di bawah ini, tapi di sini adalah bagaimana fungsional harus bekerja:

  • Periksa untuk melihat apakah ada dokumen yang terkait dengan post
  • Periksa untuk melihat apakah text box yang digunakan untuk file URL kosong
  • Jika file ada dan text box kosong, menghapus file dan memperbarui data meta terkait

Ini harus langsung: kami telah memberikan setiap post elemen teks yang berisi URL untuk file. Jika file URL kosong, itu berarti pengguna telah mengklik link 'Hapus File' dan meminta untuk menghapus file. Berikut adalah bagaimana kita dapat mencapai hal itu:

Setelah berkas dihapus, perhatikan bahwa kita juga harus memperbarui posting meta data oleh pengurasan lampiran nilai serta nilai URL lampiran. Dalam kasus aneh bahwa file tidak menghapus, kami menampilkan pesan kesalahan sederhana. Penanganan lanjutan kesalahan adalah di luar lingkup dari post ini.

Seperti yang dijanjikan, berikut adalah fungsi penuh serialisasi:

Sekarang, Anda punya custom meta box berfungsi sepenuhnya. Mencobanya.


Cleaning it Up

Kami punya satu perubahan kecil yang terakhir untuk membuat hanya untuk membuat UI kami lengkap. Ingat input teks yang kami tambahkan sebelumnya dalam tutorial yang bertanggung jawab untuk menjaga file URL? Kita dapat menandai bahwa sebagai tersembunyi - tidak ada alasan kebutuhan pengguna untuk melihatnya. Sumber JavaScript akan masih menggunakannya dengan benar dan nilainya akan dibaca dalam fungsi serialisasi.

Fungsi wp_custom_attachment akhir akan terlihat seperti ini:

Dua posting ini mencakup banyak informasi. Ada sejumlah solusi kaleng - baik itu plugin, tema, atau Pengaya lainnya-tersedia untuk mengintegrasikan fungsi seperti ini, tetapi bagian dari menjadi seorang pengembang yang baik adalah mengetahui kapan harus menggunakan solusi pihak ketiga dan ketika untuk roll Anda sendiri.

Selain itu, jika Anda bekerja dengan WordPress dalam kapasitas profesional, maka itu penting untuk memahami API. Mudah-mudahan seri ini telah membantu menunjukkan banyak dari apa yang dapat dilakukan dengan memanfaatkan fungsionalitas inti dari WordPress.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.