Advertisement
  1. Code
  2. WordPress

Membuat Portofolio dengan Multi-Tata Letak dengan WordPress

by
Difficulty:IntermediateLength:LongLanguages:

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

Wordpress, sebagai sistem manajemen konten, sering digunakan untuk membuat situs web portofolio. Dengan evolusi desain dan fungsionalitas antarmuka pengguna, tren baru telah muncul: menampilkan item portofolio dalam tata letak yang berbeda. Tutorial ini merinci proses pembuatan bagian portofolio khusus di backend WordPress, dan menggunakan jQuery dan CSS3 untuk menampilkan portofolio dengan cara yang berkelas.


Dalam tutorial ini, kita akan banyak menggunakan fitur-fitur canggih dari WordPress, seperti posting kustom, taksonomi kustom, dan kita juga akan menulis fungsi untuk mengambil kutipan kustom kita sendiri.


Langkah 1 - Menginstal Wordpress dan Menginisialisasi Tema.

Langkah pertama dalam membuat situs web portofolio kita adalah menginstal Wordpress. Ini adalah tugas yang sederhana, dan, bahkan lebih baik, kebanyakan web host di luar sana menyediakan penginstal satu klik. Namun, jika Anda baru dalam hal ini, berikut ini panduan luar biasa untuk membantu Anda dalam instalasi.

Setelah instalasi selesai, kita selanjutnya harus membuat tema kustom kita yang akan menampilkan portofolio kita. Ada berbagai metode untuk membuat tema kustom. Beberapa lebih suka membuat template putih kosong baru, sementara yang lain memilih untuk membuat tema anak dari template TwentyTen yang baru. Untuk tutorial ini, kita akan menggunakan tema Starker, oleh Elliot Jay Stocks. Ini benar-benar tema kosong tanpa penataan; ini adalah dasar yang bagus untuk membangun tema kita. Edit file styles.css, dan ubah nama tema yang direferensikan di bagian atas. Untuk menginstal tema, cukup tempelkan folder tema di folder wp-content > themes. Setelah tema diinstal, Anda dapat mengaktifkannya dengan membuka halaman themes.


Langkah 2 - Merencanakan Tata Letak

Situs portofolio kita tidak akan berisi banyak data. Situs portofolio dasar berisi gambar proyek, beberapa tag untuk mengidentifikasi proyek, dan deskripsi singkat masing-masing. Tema multi-layout akan berfungsi sedemikian rupa sehingga pengguna dapat memilih antara tata letak grid dan daftar. Seperti banyak situs web multi-tata letak yang tersedia, kita tidak akan memuat halaman yang berbeda ketika pengguna mengklik pada tampilan daftar atau tampilan grid. Sebagai gantinya, kita akan menggunakan AJAX untuk memuat secara asinkron di penampil baru. Ini adalah desain dasar tentang bagaimana situs portofolio kita akan muncul dalam mode grid:

Setelah pengguna mengklik pada kontrol tampilan daftar, seluruh tata letak akan berubah dengan lancar ke tampilan daftar yang akan berisi judul proyek, tag yang terkait dengannya, dan deskripsi singkat.


Langkah 3 - Menyiapkan Backend

Untuk portofolio kita, kita perlu mendaftarkan jenis posting kustom, yang disebut "project." Kita dapat menyesuaikan setiap aspek dari posting WordPress. Misalnya, kita dapat mengubah label yang terlibat, memilih berbagai fitur untuk posting seperti komentar, thumbnail, kutipan, dll.

Untuk menerapkan posting kustom, edit file functions.php yang terletak di dalam folder theme. Ini berisi banyak kode yang telah ditentukan, karena tema Starkers telanjang menyediakan beberapa fungsi dari template TwentyTen default. Jangan takut atau bingung; Anda dapat menambahkan kode berikut di bagian bawah atau atas file functions.php.

Jangan tinggalkan ruang kosong di akhir file functions.php.

Kita mengaitkan fungsi kustom kita dengan tindakan inisialisasi (init) dengan cara berikut:

Metode project_custom_init ini akan digunakan untuk mendaftarkan jenis posting kustom di database WordPress.

Anda dapat mempelajari secara detail tentang metode yang terlibat dalam mendaftarkan jenis posting kustom di sini.

Metode register_post_type membutuhkan nama untuk posting kustom, dan seperangkat argumen, yang menentukan karakteristik dari posting kustom. Pertama, kita perlu mendefinisikan label untuk posting kustom. Label-label ini akan digunakan untuk posting kustom di admin WordPress.

Setelah kita mendefinisikan label, kita perlu menentukan rangkaian argumen untuk jenis posting kustom. Array label yang didefinisikan sebelumnya akan menjadi argumen juga. Setelah argumen ditentukan, kita mendaftarkan jenis posting kustom sebagai "project".

Buat Pesan Kustom untuk Posting 'Project'

Kita juga dapat menambahkan secara opsional pesan kustom untuk jenis posting kustom. Pesan-pesan ini akan ditampilkan di dashboard WordPress ketika kita mengedit atau memperbarui posting kustom. Kita dapat melakukan ini dengan membuat filter untuk memposting pesan yang diperbarui dengan cara berikut:

Mendaftarkan Taksonomi Kustom

Kita selanjutnya perlu mendefinisikan taksonomi kustom untuk tag yang akan digunakan dengan masing-masing item portofolio. Anda dapat mempelajari lebih lanjut tentang metode pendaftaran taksonomi di sini.

Kembali ke dashboard WordPress Anda, dan buka pengaturan media dari tab settings. Di sini, Anda harus mengatur ukuran default untuk thumbnail gambar portofolio. Anda juga akan melihat di sidebar bahwa jenis posting kustom "Project" telah berhasil didaftarkan, bersama dengan taksonomi kustom, "tags." Kita dapat mendaftarkan ukuran thumbnail default menggunakan metode set_post_thumbnail, tetapi saya akan menunjukkan cara lain untuk mencapainya. Anda dapat mempelajari lebih lanjut tentang cara menetapkan ukuran thumbnail posting lewat program di sini.

Membuat Item Portofolio Demo

Buat beberapa item portofolio demo dengan masuk ke projects dan klik pada add new. Kita membutuhkan judul untuk proyek, konten, dan thumbnail. Kita dapat melihat bahwa bagian tag juga muncul dan menegaskan bahwa taksonomi kustom kita berhasil didaftarkan. Tambahkan beberapa tag untuk item portofolio, juga.


Langkah 4 Pengkodean dan Gaya Template

Mengkode template statis

Untuk membuat tema, pertama-tama kita akan membuat template HTML/CSS3 statis untuk situs web. Ini memisahkan dua tugas membuat situs web terlihat konsisten dengan desain, dan mengambil konten dari database. Mengkode tema secara langsung mungkin kadang-kadang agak membingungkan bagi pemula - khususnya, jika banyak konten hadir dalam tema. Buat tiga folder, bernama
"css", "images" dan "js," masing-masing. Struktur umum untuk area konten utama akan seperti ini:

Gaya Template

Gaya template tergantung pada Anda. Anda dapat bereksperimen dengan berbagai warna dan gambar yang sesuai dengan kebutuhan Anda. Tetapi untuk template ini, kita akan membuat tema grunge gelap dan menggunakan beberapa CSS3 yang menyenangkan untuk mencapai efek dan transparansi yang halus. Memotong desain menjadi gambar lebih baik. Karena itu, saya tidak akan membahas detailnya di sini.

Gaya dasar untuk kontainer utama dan pengaturan tata letak adalah sebagai berikut

Berikut ini adalah gaya umum untuk daftar proyek. Kita kemudian akan melakukan penataan khusus untuk setiap mode tata letak grid dan mode tata letak daftar tergantung pada kelas saat ini dari daftar folio.

Juga catat bahwa kita tidak menggunakan metode opacity umum untuk mencapai transparansi menggunakan CSS3. Menggunakan metode opacity juga mempengaruhi anak-anak dari kontainer induk di mana opacity diterapkan. Sebagai gantinya, kita menggunakan metode RGBa untuk menambahkan warna latar ke kontainer, dan menggunakan nilai alpha untuk mengontrol transparansi dari kontainer.

Anda dapat membaca lebih lanjut tentang Properti RGBa di artikel yang luar biasa ini.

Ini tidak mempengaruhi transparansi elemen anak-anak. Kita juga perlu membuat kode CSS spesifik IE untuk mendukung transparansi alpha.

Dalam struktur HTML, Anda akan melihat bahwa ada kelas yang diberikan ke daftar portofolio.

Pada dasarnya, kelas "grid" digunakan untuk menampilkan daftar dalam tampilan grid dan kelas "list" digunakan untuk menampilkan daftar dalam tampilan daftar. Dalam mode grid, semua konten tambahan disembunyikan dari pengguna, dan dalam mode daftar, semua konten terlihat oleh pengguna. Kita memiliki dua set gaya terpisah untuk setiap mode. Gaya untuk mode grid adalah sebagai berikut:

Gaya mode daftar adalah sebagai berikut. Setiap saat, hanya satu dari gaya grid atau daftar yang aktif.

Gunakan jQuery untuk Menambahkan Efek

Kita selanjutnya akan menggunakan jQuery UI untuk mengubah kelas daftar folio sehubungan dengan tombol tata letak yang diklik oleh pengguna. Kita mendeteksi event click tombol kontrol tata letak, mengambil kelas saat ini dan kelas baru yang akan diaktifkan, dan kemudian menggunakan metode add dan remove kelas untuk mengubah kelas. Kita juga memiliki satu set parameter yang menentukan kecepatan event yang terjadi.


Langkah 5 Integrasi dengan Tema WordPress

Sekarang setelah kita menyelesaikan versi statis dari situs ini, kita dapat mengintegrasikannya dengan tema WordPress dalam hitungan menit. Yang perlu kita lakukan hanyalah melakukan perulangan pada posting menggunakan objek wp_query dengan kueri untuk jenis posting kustom. Kemudian, kita menempatkan konten di posisi masing-masing dalam template.

Edit header.php

Pertama, kita perlu memodifikasi template header.php, dan menyertakan file JavaScript kustom kita. Dalam tutorial ini, kita akan menyertakan jQuery menggunakan versi CDN Google. Kita akan membatalkan pendaftaran jQuery yang disediakan oleh WordPress, dan mendaftarkan jQuery versi CDN Google. Tempel cuplikan berikut di file functions.php Anda.

Pindahkan folder css, js dan images - yang Anda buat sebelumnya untuk template statis - ke folder tema WordPress. Masukkan file kustom jQuery UI, dan file skrip utama di header. Pastikan itu dimasukkan di bawah metode wp_head.

Buat Template Utama

Sekarang, Anda dapat membuat template lain dalam tema - misalnya, page-home.php - atau Anda dapat memodifikasi index.php yang sudah ada di folder tema. Jika Anda memilih metode sebelumnya, maka:

  • Buat sebuah halaman
  • Atur template halaman sebagai template yang baru Anda buat.
  • Buka pengaturan reading di tab settings.
  • Pilih homepage sebagai yang statis.
  • Pilih halaman yang baru Anda buat sebagai beranda.

Template pertama-tama akan berisi header, yang dapat Anda panggil menggunakan metode get_header(), kemudian konten utama, yang akan Anda kodekan di dalam template itu sendiri. Terakhir, footer, yang dapat Anda masukkan, melalui metode get_footer().

Kode berikut menunjukkan bagaimana Anda bisa membuat kueri kustom menggunakan objek wp_query.

Kita menggunakan variabel, count untuk menghitung jumlah item dalam daftar. Kita memerlukan ini karena kita hanya akan menyimpan empat item di setiap baris dan menetapkan kelas 'rightmost' ke setiap elemen daftar keempat. Kelas 'rightmost' menghilangkan margin kanan ke elemen daftar. Atau, kita bisa, dalam file CSS kita, menggunakan penyeleksi li:nth-child(4n).

Kode berikut menunjukkan bagaimana kita dapat mengulang melalui posting dan memasukkan konten, seperti yang diperlukan.

Di dalam loop, kita memasukkan konten dalam cara WordPress normal, menggunakan objek wp_query $loop, tentu saja. Kode berikut menunjukkan bagaimana kita bisa mengambil thumbnail dari posting proyek dan memasukkannya ke dalam template. Buat catatan yang tepat tentang bagaimana kita menggunakan variabel $count untuk memasukkan kelas 'righmost' pada setiap elemen daftar keempat.

Sekarang di bagian konten di mana kita perlu memasukkan judul, tag, deskripsi singkat dan mengambil kutipan untuk posting dengan metode kutipan kustom. Memasukkan judul agak mudah, seperti juga tag. Ingat, kita sebelumnya membuat taksonomi kustom dengan nama tags.

Anda akan melihat bahwa kita tidak menggunakan metode the_excerpt() umum, yang disediakan oleh WordPress. Sebagai gantinya, kita mendefinisikan metode khusus kita sendiri dengan menambahkan beberapa filter. Metode excerpt umum mengembalikan kutipan yang lebih panjang dari yang kita butuhkan. Oleh karena itu, versi kustom. Kita juga memodifikasi teks 'Continue Reading...' yang ditambahkan di akhir kutipan default, dan menggantinya dengan 'Read More'. Cuplikan berikut melayani tujuan kita. Metode kutipan khusus ini sangat berguna untuk banyak situasi.


Langkah 6 Kesimpulan

Metode di atas untuk menciptakan portofolio multi-tata letak cukup sederhana, dan menggunakan trik dasar CSS dan jQuery untuk mencapai hasilnya. Bahkan lebih baik lagi, teknik ini dapat diterapkan ke berbagai proyek. Teknik lain dalam tutorial ini, seperti jenis posting kustom, taksonomi kustom, dan penambahan filter ke metode kutipan, dapat digunakan dengan berbagai cara inovatif lainnya!

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.