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

WordPress: Pemula ke Master, Bagian 4

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Ambang Anasfa (you can also view the original English article)

Sepanjang seri pemula-ke-master 6 bagian ini, kita akan menggunakan fitur-fitur canggih dari WordPress untuk menciptakan portofolio & blog, lengkap dengan pilihan halaman, beberapa gaya kita sendiri dan dukungan untuk fitur WordPress 2,7 baru. Hari ini, kita akan bekerja pada portofolio itu sendiri.

Hari ini kita akan membuat halaman portofolio utama kami, yang benar-benar sangat mirip dengan 'Pekerjaan terbaru' bagian di homepage.

Kami juga akan membuat tampilan 'single post' portofolio barang, dimana rincian lebih lanjut dari item yang dapat ditampilkan.

Kami kemudian akan menyelesaikan dengan membuat 'Default halaman Template'. Ini akan digunakan pada semua halaman lain yang membutuhkan struktur normal – seperti halaman About atau Contact.


Juga tersedia dalam seri ini:

  1. WordPress: Pemula ke Master, Bagian 1
  2. WordPress: Pemula ke Master, Bagian 2
  3. WordPress: Pemula ke Master, Bagian 3
  4. WordPress: Pemula ke Master, Bagian 4
  5. WordPress: Pemula ke Master, Bagian 5
  6. WordPress: Pemula ke Master, Bagian 6

Melompat ke bagian


Portofolio

Template halaman portofolio sangat mirip dengan bagian pertama dari homepage kami:


Kami menampilkan item portofolio yang terbaru, yang ketika diklik pergi ke halaman 'tunggal' mereka.

Tambahkan baris berikut di bawah ini kode yang sudah ada di page-portfolio.php:

Anda harus menyadari pernyataan $paged dari blog-page memungkinkan kita untuk memisahkan item portofolio selama beberapa halaman. Di dalam query_posts() kita menggunakan variabel pagination, dan juga mengatur loop untuk mengambil hanya post dari kategori portofolio (cat= $ts_portfolio_cat).

Dan seperti loop pada homepage ketika mengambil dua item portofolio terbaru, kami telah meningkatkan $counter (seperti yang kita akan menggunakan ini lagi) dan memperoleh portofolio dan tanggal kustom-bidang kami menggunakan fungsi get_post_meta().

Berikutnya:

Kode di atas adalah persis sama seperti yang biasa kami pakai di frontpage. $counter digunakan untuk menambahkan kelas last ke setiap item lain (untuk menetapkan item inline).

Jika $preview custom-bidang digunakan, kami menampilkan itu- dan memproses melalui script TimThumb PHP untuk mengubah ukuran gambar.

Kami telah menutup Loop dengan endwhile, menampilkan tombol pagination dengan next_posts_link() dan previous_posts_link(), dan termasuk footer.

Simpan dan pratinjau halaman portofolio Anda. Itu sekarang selsai, dan tidak memerlukan styling tambahan karena kita kembali menggunakan gaya dari homepage. Seharusnya terlihat seperti gambar di bawah ini setelah Anda memiliki beberapa item lain yang ditambahkan ke portofolio Kategori:



Halaman tunggal portofolio

Ini adalah tata letak yang digunakan untuk menampilkan lebih detail untuk setiap item portofolio yang ketika diklik (pada halaman 'tunggal'); seperti yang ditunjukkan di bawah ini:


Ingat bahwa dalam bagian 3, kami menggunakan beberapa kode di single.php untuk mengarahkan permintaan untuk item dalam kategori 'Portofolio' ke file single-portfolio.php.

Berikut adalah garis besar dari setiap bagian halaman:


Dalam single-portfolio.php, mulai dengan berikut:

Header telah disertakan, dan normal WordPress Loop dimulai. Dalam loop kita mengambil preview, preview-full, date, client dan link  bidang kustom untuk post. pengingat cepat dari apa itu masing-masing bidang kustom (dari bagian 2):

  • preview (URL dari gambar lebar 930px dari pekerjaan Anda)
  • preview-full (versi lebih besar dari pekerjaan, akan ditampilkan dalam lightbox)
  • date (tanggal pekerjaan itu selesai)
  • client (bekerja untuk siapa)
  • link (ke versi live pekerjaan Anda)

Selanjutnya kami menyertakan judul yang menggunakan the_title(), dan jika ada gambar $preview dari bidang kustom, gambar diurai melalui script TimThumb untuk memastikan itu adalah 930px lebar dan output ke halaman-dibungkus dalam sebuah link ke gambar $previewfull jika ada :

Di bawah gambar adalah meta data untuk item (berisi bidang date, client dan link):

Pada baris pertama kami memeriksa apakah setidaknya salah satu dari tiga bidang mengandung apa pun-penggunaan || berarti 'Atau'.

Dalam itu, masing-masing bidang yang diperiksa secara individual dan tampilkan jika berisi sesuatu.

Akhirnya, the_content() digunakan untuk menampilkan konten utama, loop di tutup dan footer memasukan:

Preview tema, segala sesuatu harus terlihat halus-kecuali gambar pratinjau, dimana kita masih perlu untuk memasukkan Lightbox.

Lightbox

FancyBox jQuery Lightbox akan digunakan untuk menampilkan preview lebih besar dari gambar portofolio:


Download file-file, dan masukan ke /fancybox/ folder ke dalam folder tema /inc/.

Juga membuat file baru di /inc/ yang bernama animate.js.

di dalam header.php tambahkan berikut antara <?php wp_head(); ?> dan </head>:

Pertama, file CSS FancyBox's (/inc/fancybox/fancy.css) disertakan. Perpustakaan jQuery terbaru (v1.3.1) disediakan dari Google Code, diikuti oleh FancyBox's file javascript dan /inc/animate.js file.

Perpustakaan jQuery sedang dimuat dari Google Code untuk mengurangi waktu muat, karena pengunjung mungkin telah mengunjungi sebuah situs juga menggunakan perpustakaan host pada server Google, maka file akan di-cache. Itu adalah perbedaan kecil, tetapi Anda dapat selalu menyimpan jQuery perpustakaan ke folder /inc/ Anda dan referensi dari sana jika Anda lebih suka.

Akhirnya, kita hanya perlu memberitahu FancyBox link mana yang harus berlaku itu sendiri. Tambahkan baris berikut ke /inc/animate.js:

Jika Anda tidak akrab dengan jQuery, kita telah mereferensikan fungsi fancybox({}) ke setiap objek di #fancyopen a (link di div dengan ID dari fancyopen). Kami juga telah memasukan beberapa opsi: hideOnContentClick menutup gambar ketika diklik, dan overlayShow 'gelap' latar belakang ketika lightbox aktif.

Untuk paremeter FancyBox lebuih, lihat 'cara menggunakan' bagian di sini.

Tip: Ingin mempelajari lebih lanjut tentang jQuery? Lihat seri screencast Jeffrey's yang fantastis "jQuery untuk pemula mutlak" di ThemeForest Blog.

Refresh portofolio Anda, dan mencoba lightbox.



Template halaman default

Kami telah membuat halaman home & portofolio template, tapi kami belum membuat template 'default' yang akan digunakan untuk halaman (misalnya. About atau Contact Us).


Tambahkan beberapa baris ini ke akhir kode yang sudah ada di page.php:

Dasar WordPress loop menampilkan judul & konten. Sederhana.


Ringkasan

Periksa kembali besok ketika kami akan membuat komentar tata letak (dan mengambil keuntungan dari WordPress 2.7 baru 'komentar berulir' fungsi!) (Bagian 5 dalam seri kami.)

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.