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

Cara Membuat Beranda dengan Banyak Daftar Menggunakan Pertanyaan Khusus

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Nurul Fatimah (you can also view the original English article)

WordPress memberi Anda beberapa opsi bawaan untuk halaman depan situs web Anda: tampilan posting blog terbaru atau halaman statis pilihan Anda. Tetapi bagaimana jika Anda ingin membuat sesuatu yang sedikit lebih menarik dari itu?

Jika situs Anda memiliki banyak data menggunakan kategori, taksonomi atau jenis pos khusus untuk mengelolanya, Anda mungkin ingin menampilkan data lebih dari satu jenis di beranda. Berita baiknya adalah Anda dapat melakukan ini menggunakan template khusus untuk beranda. Dalam template ini, Anda menulis sejumlah pertanyaan khusus untuk mencantumkan data dengan cara yang Anda inginkan. Dalam tutorial ini Anda akan belajar cara melakukan hal berikut:

  • Buat template beranda khusus untuk digunakan oleh tema Anda
  • Sertakan empat pertanyaan dalam template itu untuk menampilkan berbagai jenis data, termasuk tiga pertanyaan khusus

Pertanyaan akan mencantumkan posting standar ditambah satu jenis post khusus terdaftar untuk proyek ini, yang disebut 'animal'. Anda dapat menemukan file template dengan empat pertanyaan dalam bundel kode.


Apa yang Anda Butuhkan untuk Menyelesaikan Tutorial Ini

  • Instalasi pengembangan WordPress
  • Tema terpasang yang dapat Anda edit. Jika Anda bekerja dengan tema yang sudah ada, saya sarankan membuat tema turunan sehingga Anda dapat membuat file template tanpa mengedit tema induk. Saya menggunakan tema anak Twenty Twelve

Desain Beranda

Sebelum mulai menyiapkan template beranda, pertama-tama luangkan waktu untuk mengidentifikasi apa yang terkandung di beranda:

Front page design with header

Beranda berisi:

  • Header dengan spanduk dan menu navigasi
  • Konten beranda - teks dan gambar
  • Tiga daftar, masing-masing menggunakan pertanyaan khusus:
    • Updates - ini adalah pos standar dalam kategori 'Updates'
    • In Detail - post standar dalam kategori 'Detail'
    • Animals - ini menggunakan jenis post khusus yang disebut 'animal'
  • Footer standar

Elemen layout ini yang akan Anda kerjakan adalah konten beranda dan tiga daftar.


Sebelum Anda Mulai: Mengatur Data

Sebelum memulai, Anda harus memiliki beberapa item agar pertanyaan dapat digunakan:

  • Jenis pos kustom 'animal' terdaftar. Untuk detail tentang cara melakukan ini, lihat register_post_type di WordPress Codex. Atau, file functions.php dalam bundel kode termasuk kode yang melakukan ini
  • Dua kategori diatur untuk post normal - 'Updates' dan 'In Detail'
  • Pengaturan halaman statis disebut 'Beranda', dengan beberapa konten ditambahkan padanya. Ini harus ditetapkan sebagai beranda melalui halaman Settings di dasbor WordPress
  • Beberapa posting normal di setiap kategori dan beberapa hewan (menggunakan jenis posting khusus). Template akan menampilkan masing-masing hingga delapan

Membuat Template Halaman Depan

Langkah pertama adalah membuat file template untuk menyimpan kode Anda. Buat file kosong di folder tema Anda dan beri nama front-page.php. Tambahkan kode berikut ke file:

Simpan file Anda. Seperti yang Anda lihat, ini termasuk file template header dan footer di beranda Anda. Tidak ada sidebar yang disertakan karena itu bukan bagian dari desain beranda. Saat Anda mengunjungi beranda situs Anda, kini Anda akan memiliki halaman kosong dengan hanya header dan footer yang ditampilkan:

blank home page with header and footer, no content

Menambahkan Konten Statis ke Beranda

Selain menampilkan hasil pertanyaan khusus, beranda Anda akan menampilkan konten dari halaman statis 'Beranda'. Untuk menambahkan ini ke file template Anda, masukkan kode berikut untuk mengganti baris '// front page content goes here':

Ini adalah loop standar. WordPress akan menggunakannya untuk menampilkan konten halaman statis yang didaftarkan sebagai beranda. Beranda Anda sekarang akan berisi konten statis:

the home page with static page content

Pertanyaan Khusus Pertama Dengan WP_Query

Untuk pertanyaan khusus, Anda akan menggunakan kelas WP_Query. Ini memungkinkan Anda mengatur pertanyaan khusus dan menjalankan loop berdasarkan masing-masing untuk menampilkan post.

Menggunakan WP_Query adalah praktik yang jauh lebih baik daripada menggunakan fungsi query_posts karena yang terakhir sepenuhnya me-reset pertanyaan utama dan dapat menyebabkan masalah kinerja. WP_Query mengambil serangkaian parameter yang menentukan pertanyaan yang ingin Anda jalankan. Beberapa contoh parameter yang dapat Anda tentukan meliputi (tetapi tidak terbatas pada):

  • post_type - post, halaman, lampiran, atau jenis post khusus
  • kategori
  • tag
  • istilah-istilah taksonomi
  • posts_per_page - jumlah post untuk ditampilkan
  • order - ASC atau DESC
  • orderby - Anda dapat memesan berdasarkan tanggal, nama, penulis, menu_order atau banyak parameter lainnya
  • ...dan banyak lagi

Untuk detail parameter yang dapat digunakan dengan WP_Query, lihat WP_Query di WordPress Codex. Untuk menggunakanWP_Query , Anda memasukkan kode berikut:

Di beranda Anda ingin mencantumkan delapan post terakhir dalam kategori 'Updates'. Untuk melakukannya, tambahkan kode berikut antara pertanyaan utama dan panggilan ke footer:

Ini membuat elemen <section> untuk berisi listing Anda dan membuka listing dengan tautan ke arsip kategori dalam tag <h2>. Itu kemudian mendefinisikan argumen untuk WP_Query dan menjalankan loop berdasarkan pertanyaan itu. Kelas-kelas tambahan dapat digunakan untuk gaya daftar setiap individu.


Pertanyaan Kustom Kedua

Pertanyaan khusus kedua hampir identik dengan yang pertama, hanya pertanyaan post dari kategori yang berbeda. Tambahkan yang berikut ini setelah pertanyaan pertama dan segera sebelum tag </section> penutup kedua:

Ini menambahkan daftar posting kedua untuk posting dalam kategori 'In Detail'.


Pertanyaan Khusus Ketiga: Pertanyaan Jenis Post Khusus

Pertanyaan ketiga dan terakhir tidak meminta posting standar, tetapi jenis post khusus 'animal' yang Anda daftarkan sebelum membuat file template Anda. Setelah pertanyaan khusus kedua, tambahkan berikut ini:

Anda sekarang memiliki semua pertanyaan di tempat dan ditampilkan di halaman beranda:

the home page with all queries added

Gaya Daftar

Langkah terakhir adalah menambahkan beberapa gaya. Saat ini daftar berada di bawah yang lain, dengan sangat sedikit jarak ruang atau dekorasi.

Pada langkah ini Anda akan menambahkan beberapa gaya sederhana untuk meningkatkannya. Di stylesheet tema Anda, tambahkan berikut ini:

Ini akan memastikan bahwa daftar dihapus di bawah konten utama, dan menempatkannya berdampingan. Hal ini juga menambahkan beberapa jarak antara item dalam setiap daftar:

the home page with the listings styled

Ringkasan

Anda sekarang memiliki beranda khusus yang mencakup konten halaman statis plus tiga pertanyaan khusus yang mencantumkan jenis konten berbeda. Anda dapat menyesuaikan pendekatan ini dengan persyaratan yang berbeda. Sebagai contoh

  • Untuk halaman depan yang hanya menunjukkan arsip dan tidak ada konten statis, cukup hapus loop pertama
  • Untuk mencantumkan jenis post 'animals' dengan cara yang berbeda, Anda dapat menentukan taksonomi dalam argumen Anda untuk WP_Query
  • Anda dapat menambah atau mengubah konten yang ditampilkan untuk setiap post, misalnya menggunakan the_thumbnail() untuk menampilkan thumbnail post (atau gambar unggulan)
  • Anda bisa menambahkan pertanyaan khusus ke template sidebar atau footer Anda untuk menampilkannya di semua halaman

Sumber

Beberapa sumber yang bermanfaat:

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.