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

Menggunakan Jenis Posting Kustom untuk Membuat Portofolio yang Luar Biasa

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Sangat mungkin penambahan terbaik untuk WordPress 3.0 adalah dari Jenis Posting Kustom. Ini menjadikan WordPress dari CMS yang dapat mengelola posting dan halaman agar dapat mengelola apa pun yang dapat dipikirkan oleh pengguna dengan lebih mudah. Anda tidak lagi harus menambahkan kolom kustom untuk memposting - Anda dapat menambahkan dukungan tingkat tinggi ke jenis Anda sendiri, membuat file halaman tema mereka sendiri dan area admin. Salah satu hal pertama yang saya lakukan menggunakan jenis posting kustom adalah mengubah portofolio saya dan hari ini saya akan menunjukkan kepada Anda bagaimana saya melakukannya!

Kami baru-baru ini menunjukkan kepada Anda beberapa alat yang rapi untuk membuat Jenis Posting Kustom "Instan". Hari ini adalah tentang membangun proyek menggunakan CPT dari awal... Kita akan melakukan semuanya mulai dari membuat jenis kustom - untuk menata gaya untuk digunakan dalam tema. CSS (dan CSS3!) yang saya gunakan harus cukup umum untuk sebagian besar tema, tetapi jika tidak, jangan ragu untuk mengubahnya! Ini dimaksudkan untuk digunakan sebagai titik awal bagi semua orang, jadi jangan ragu untuk menjadi kreatif!


Memulai Beberapa Pemikiran

Hal pertama yang perlu diperhatikan adalah ketika membuat Jenis Posting Kustom, kita memiliki beberapa opsi tentang bagaimana kita ingin mendekati mereka; Dua implementasi utama yang mungkin Anda pertimbangkan adalah:

  1. Sebagai bagian dari tema saat ini (biasanya melalui file functions.php)
  2. Karena ini adalah plugin yang berdiri sendiri.

Ada pro dan kontra untuk masing-masing. Dalam tutorial ini, karena kita mengintegrasikan dengan tema kita, kita akan menjadikannya bagian dari tema, memanggil semua yang kita butuhkan melalui file functions.php.

Catatan Pengembang: Karena kita akan membangun ini langsung ke dalam tema kita, itu tidak berarti bahwa ini adalah cara yang benar untuk Anda... pertimbangkan penggunaan akhir dari tema Anda. Jika ada peluang bagus bahwa pengguna Anda akan beralih tema di masa mendatang, atau Anda merilis tema Anda sebagai produk publik atau premium untuk digunakan banyak orang, Anda mungkin ingin membangun jenis posting kustom Anda sebagai file mandiri yang dapat diambil orang tanpa terlalu banyak menggali kode Anda.

Bayangkan dengan cara ini, jika tema Anda adalah satu-satunya yang memuat Jenis Posting Kustom dan Anda mengubah tema, data Jenis Posting Kustom tidak akan dapat digunakan; itu akan tetap ada di database, tetapi tidak akan muncul di tema baru dengan cara apa pun yang berarti. Kadang-kadang hal ini tidak mungkin dilakukan jika Anda benar-benar merombak tema untuk menggunakan CPT dengan menyertakan banyak penyesuaian dan template, tetapi setidaknya pertimbangkan apa yang mungkin perlu dilakukan pengguna untuk mempertahankan penggunaan data mereka dalam jangka panjang.

Mari kita mulai!


Apa yang akan kita buat

Langkah 1 Pengaturan

Seperti yang saya nyatakan di atas, kita akan menambahkan ini ke tema kita saat ini (saya menggunakan tema kustom saya sendiri), jadi hal pertama yang perlu kita lakukan adalah pergi ke tema kita dan membuka file functions.php. Kita akan menempatkan kode jenis posting kustom kita dalam file yang berbeda (hanya agar lebih mudah dibaca/dikelola), jadi kita akan memanggil file itu di bagian atas file functions kita:

Sekarang kita akan menambahkan dua file ke tema kita: portfolio-type.php dan portfolio.css. Seperti yang Anda mungkin bisa menebak, semua CSS kita untuk jenis baru akan masuk dalam file yang terakhir.


Langkah 2 Mendaftarkan Jenis Baru

Dukungan Thumbnail & Gambar Unggulan

Sebelum kita mendaftarkan jenis baru, kita perlu menambahkan dukungan untuk bagian integral dari presentasi portofolio - gambar unggulan. Setelah menambahkan tag php pembuka dan penutup ke portfolio-type.php, tambahkan kode berikut:

Baris-baris ini, setelah memeriksa untuk memastikan pemasangan khusus Anda mendukung thumbnail posting, akan menambahkannya ke tema Anda saat ini, kemudian mengatur beberapa ukuran default. set_post_thumbnail_size() akan, seperti namanya, mengatur ukuran default untuk thumbnail. Baris berikutnya (add_image_size() akan membuat gambar lain yang bisa kita sebut bernama 'screen-shot', yang akan menjadi 720x540. Kita akan menggunakan gambar-gambar ini ketika menampilkan portofolio kita.

Membuat Jenis Posting Baru

Di sinilah keajaiban terjadi- kita sekarang akan memberitahu WordPress tentang jenis posting baru kita. Tambahkan kode berikut ke portfolio-type.php:

Baris pertama di sini adalah hook di WordPress yang akan memanggil fungsi kita, portfolio_register() pada inisialisasi. Fungsi itu sendiri menetapkan berbagai argumen untuk dikirim dengan jenis posting kustom kita. Yang paling menonjol, kita menetapkan label admin kita, memberikan jenis ini semua kemampuan dari posting WordPress standar, memungkinkan penulisan ulang URL (untuk permalink yang cantik), dan menambahkan dukungan untuk bidang judul, editor, dan gambar unggulan. Anda dapat membaca lebih lanjut tentang semua argumen untuk register_post_type() di sini.

Setelah mengatur argumen array ($args), kita meneruskannya bersama dengan nama jenis ke fungsi register_post_type().

Menambahkan Taksonomi Kustom

Hal terakhir yang akan kita lakukan di bagian ini adalah membuat taksonomi kustom untuk jenis baru kita. Tambahkan baris kode berikut ke file portfolio-type.php Anda:

Ini akan menciptakan taksonomi baru 'project-type' dan menerapkannya ke jenis posting 'portfolio'. Anda dapat membaca lebih lanjut tentang register_taxonomy() di sini.


Langkah 3 Menambahkan Bidang Kustom

Membuat Kotak Bidang Kustom

Kita tidak akan memiliki banyak jenis kustom tanpa memiliki beberapa info tambahan untuk ditambahkan ke posting. Kita akan menambahkan info itu dalam formulir bidang kustom. Secara khusus, kita akan menambahkan satu bidang ekstra untuk tautan ke info lebih lanjut tentang proyek, atau ke proyek itu sendiri. Tambahkan kode berikut ke file portfolio-type.php Anda:


Kode ini akan membuat kotak "Project Options" yang kita lihat di sini.

Pertama kita menggunakan hook WordPress admin_init untuk memanggil fungsi kita portfolio_meta_box() ketika admin WordPress dibuat. Fungsi kita akan menambahkan kotak lain ke jenis portofolio kita, yang dapat diisi dengan apa saja. Kotaknya diisi dengan ditutupi oleh argumen ke-3, yang merupakan fungsi callback. Dalam hal ini, fungsi kita diberi nama portfolio_meta_options().

Di portfolio_meta_options() kita akan membuat bidang formulir yang akan digunakan untuk menangkap tautan proyek. Hal pertama yang kita lakukan adalah mengambil array $post global sehingga kita bisa mendapatkan bidang kustom untuk posting apa pun yang kita edit. Di baris berikutnya, kita memeriksa untuk memastikan WordPress saat ini tidak menyimpan posting atau bidang kustom; jika ya, kita mungkin melihat hasil yang tidak akurat ketika kita mengambil data kustom.

Jika WordPress tidak melakukan penyimpanan, kita mengambil bidang kustom untuk posting saat ini dan membuat bidang formulir menggunakan info tersebut. $custom (apa yang dikembalikan dari get_post_custom() adalah array 2D di mana kuncinya adalah apapun yang kita beri nama bidang formulir untuk kustom kita. Lihatlah kotak teks kita untuk tautannya. Anda akan melihat bahwa nama itu sesuai dengan indeks yang kita panggil dalam array $custom kita. Anda juga akan melihat bahwa kita tidak memiliki formulir atau tombol pengiriman terpisah. Bidang ini ditambahkan ke formulir yang digunakan untuk mengedit seluruh posting.

Meskipun kita hanya membuatnya di sini, Anda dapat membuat sebanyak yang Anda mau.

Menyimpan Data Kustom

Sekarang setelah kita membuat kotak meta kustom kita, saatnya untuk membuat fungsi yang akan menyimpan informasinya. Tambahkan baris kode berikut ke file portfolio-type.php Anda:

Pertama, seperti biasa, kita memiliki hook kita- kali ini untuk memanggil fungsi kita ketika posting disimpan. Dalam fungsi itu sendiri, kita kembali mengambil array $post sehingga kita bisa mendapatkan ID posting dan memeriksa untuk melihat apakah posting disimpan otomatis. Jika kita tidak menyertakan baris ini, kita akan kehilangan data kita, jadi penting bagi kita untuk menyimpannya.

Jika posting tidak diperbarui, kita menyimpan bidang kustom kita menggunakan update_post_meta(), mengirim id posting, nama bidang kustom, dan nilai baru.


Inilah yang seluruh tampilan kit dan caboodle!

Langkah 4 Menyesuaikan Kolom Admin

Di sini kita akan menyesuaikan daftar yang menampilkan semua proyek kita. Tambahkan kode berikut ke file portfolio-type.php Anda:


Inilah daftar Proyek kita yang baru dimodifikasi.

Setelah hook kita untuk fungsi pertama (project_edit_columns()), kita melakukan sesuatu yang cukup menarik dalam hal mengedit kolom. WordPress menempatkan kolom untuk daftar tampilan jenis posting ke dalam array dengan kunci dan nilai. Kita membuat pasangan kunci-nilai ini dalam fungsi ini. Pada fungsi berikutnya (project_custom_columns()), kita menggunakan pernyataan switch untuk mengambil kunci dan kemudian menampilkan informasi yang kita inginkan berdasarkan itu. Seperti yang Anda lihat, sama seperti di bagian sebelumnya, kita mendapatkan array $post global sehingga kita bisa mendapatkan ID posting untuk menampilkan informasi kustom dengan benar, seperti tautan dan taksonomi kita.

Anda mungkin telah memperhatikan bahwa jumlah case tidak sesuai dengan jumlah kolom dalam array $columns kita. Itu karena untuk kunci tertentu, seperti cb dan title, WordPress memiliki nilai default yang tidak ingin kita timpa.


Langkah 5 Menambahkan Beberapa Fungsi Tampilan

Sebelum kita membuat halaman template, saya ingin memberi Anda beberapa fungsi yang saya masukkan untuk menampilkan proyek dengan benar. Buka file functions.php Anda dan tambahkan tiga komponen berikut:

Dua pasang hook/fungsi pertama adalah umum untuk WordPress- mereka hanya mengubah panjang kutipan dan indikator "more text", yang telah saya ganti hanya dengan sebuah spasi. Harap perhatikan bahwa ini akan terjadi pada semua posting, bukan hanya posting portofolio, dan jika Anda menggunakan tema anak, ini mungkin tidak berfungsi.

Fungsi kustom, portfolio_thumbnail_url() mengambil ID posting sebagai argumen dan mengambil versi gambar screen-shot yang kita unggah. Kita akan memanggilnya di halaman template kita, jadi perhatikan!


Langkah 6 Membuat Halaman Template

Sekarang karena kita memiliki jenis posting kustom kita sudah diatur di admin, saatnya untuk membuat halaman tema sehingga kita dapat menampilkannya. Untuk mencapai ini, kita akan membuat template dengan nama, "Portfolio" dan kemudian menetapkan template ke halaman di WordPress. Meskipun kita juga dapat membuat archives-portfolio.php untuk menyelesaikan hal yang sama, kita tidak akan dapat menambahkan halaman itu ke menu dari admin WordPress, jadi rute ini adalah yang terbaik. Mengikuti konvensi penamaan WordPress, buat file baru bernama page-portfolio.php dan tambahkan kode berikut:


Ini akan membuat template 'Portfolio'.

Beberapa baris ini membentuk bagian terpenting dari halaman. Baris pertama memungkinkan WordPress mengetahui bahwa ini adalah template halaman yang harus diberi nama "Portfolio." Kemudian, setelah memanggil header tema, kita mengatur kueri untuk mengambil 9 posting terakhir dari jenis portfolio. Hal berikutnya yang harus dilakukan adalah menampilkannya. Tambahkan kode ini ke file page-portfolio.php Anda:

Anda akan melihat beberapa hal di sini: pertama, setelah kita berada di loop, kita perlu memangkas karakter '"' asing dari judul dan konten kita menggunakan str_ireplace(). Saya tidak tahu pasti mengapa mereka muncul di sini, tetapi dari apa yang saya dapat katakan ini adalah langkah yang perlu. Anda juga harus memperhatikan bahwa kita menggunakan lightbox. Meskipun kita dapat menambahkannya sendiri (yang mungkin saya sarankan jika ini adalah plugin), karena kita memodifikasi tema kita sendiri, kita dapat mengunduh salah satu dari banyak plugin lightbox yang tersedia di repositori WordPress. Pilih saja favorit Anda!

Selain itu, ini harus terlihat akrab untuk siapa saja yang bekerja dengan loop WordPress. Apa yang kita lakukan di sini adalah membuat blok dengan thumbnail dan deskripsi kita, yang menautkan ke (menggunakan lightbox) screen shot untuk masing-masing dari 9 proyek. Saya tidak menyertakan tautan ke halaman lain (jika Anda memiliki lebih dari 9 proyek) karena saya hanya ingin pengguna saya melihat 9 proyek terbaru. Anda dapat mengizinkan pengguna untuk mendapatkan posting lain menggunakan posts_nav_link(), jika Anda memilih demikian.

Saya juga harus mencatat bahwa saya menghapus tautan default WordPress karena tautan tersebut tertaut ke halaman posting tunggal, dan saya ingin menggunakan lightbox, jadi saya membangun milik saya sendiri.


Langkah 7 Menata Jenis Portfolio Kita

Inilah bagian yang menyenangkan: membuat jenis portfolio kita terlihat cantik. Berikut beberapa CSS yang saya masukkan- Anda dapat menambahkannya ke bagian bawah style.css sheet Anda, atau ke dalam file portfolio.css yang baru kita buat. Pastikan untuk menggunakan @import untuk memanggil portfolio.css di bagian atas style.css tema Anda (tidak akan berfungsi di tempat lain):

Jika Anda akan mereferensikan halaman template kita, Anda akan melihat bahwa setiap proyek dibungkus dalam div yang disebut "item," yang sekarang kita terapkan CSS padanya. Karena tidak ada dua tema yang sama, Anda mungkin harus menyesuaikan sedikit CSS Anda sendiri, tetapi di sini adalah titik awal yang bagus untuk Anda. Saya juga menyertakan kelas untuk float self-clearing. Ini adalah teknik yang saya dapat dari Dan Cederholm, dan saya pikir itu sedikit lebih elegan bahwa metode "clearfix" standar membersihkan konten setelah float div.


Kesimpulan

Itu saja! Anda sekarang memiliki portofolio sederhana menggunakan jenis posting kustom. Sementara ini dibangun untuk melayani kebutuhan saya, dan saya ingin menjaga hal-hal tetap sederhana, kemungkinan ini tidak terbatas karena Anda dapat menyesuaikannya agar sesuai dengan jenis portofolio apa pun yang Anda miliki (menulis/artikel, fotografi, desain grafis, dll.). Jika Anda tidak ingin menggunakan lightbox untuk menampilkan proyek tunggal, Anda juga dapat membuat halaman tema dengan nama single-portfolio.php, yang kemudian akan menerapkan kode ke dalam masing-masing proyek, seperti yang dilakukan oleh single.php untuk posting blog.

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.