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

Cara Membuat Carousel Featured Post untuk WordPress

by
Difficulty:IntermediateLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Naufal (you can also view the original English article)

Akan menjadi semakin umum bagi blog untuk menampilkan post tertentu di bagian atas halaman. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menerapkan ini di WordPress. Kami akan menggunakan theme default, Kubrik, sebagai tema dasar kami, tetapi penerapannya terhadap theme ini seharusnya juga dapat diterapkan dengan sebagian besar theme dengan beberapa modifikasi. Code-nya tidak banyak dan menampilkan post juga sederhana.

Apa yang akan kita buat

Kami akan memodifikasi theme Kubrik yang dikemas sebelumnya di WordPress untuk dapat menampilkan posting di bagian atas halaman. Tutorial ini hanya diuji pada WordPress 2.5.x tetapi seharusnya juga bekerja pada seri 2.3.x. Kami akan menganggap Anda menggunakan 2.5.x atau yang lebih tinggi. Pada akhir tutorial, Anda akan memiliki tampilan theme yang seperti ini:

Langkah 1 - Membuat gambar default

Sebelum kita melakukan apa pun, buka folder theme-nya di instalasi WordPress Anda (wp-content/themes/) dan buat backup dari folder "default". Ini adalah theme Kubrik yang akan kami edit. Backup bisa digunakan jika Anda ingin kembali ke theme asli yang belum dimodifikasi.

Pertama, kita akan membuat gambar default jika tidak ada gambar featured post yang sudah ditentukan sebelumnya. Mari tetap buat mudah dan sederhana untuk tutorial ini. Buka image editor yang Anda inginkan dan buat persegi panjang 233x130px dengan sudut bulat dengan radius 10px. Saya membuat background gradien radial putih ke abu-abu dan meletakkan beberapa teks di atasnya. Inilah yang saya miliki:

Simpan gambar sebagai "no-Featured-image.jpg" di folder "images" yang ada di dalam folder "default".

Langkah 2 - Tambahkan kode PHP

Sekarang untuk code-nya. Buka file "header.php" di dalam folder "default". Di akhir file, Anda akan melihat blok div dan tag hr seperti ini:

Antara tag div akhir dan hr yang ada, masukkan kode berikut:

Kode ini akan menampilkan tiga gambar dalam daftar tanpa urutan. Setiap gambar adalah link ke pos unggulan. Kami akan berbicara tentang cara mengkonfigurasi code ini setelah kami menambahkan CSS-nya.

Langkah 3 - Berikan Style dengan CSS

Selanjutnya kita perlu menambahkan beberapa style CSS. Buka file "style.css" dan letakkan kode berikut di bawah ini di akhir file. Yang dilakukan adalah mem-float elemen list ini ke kiri dan menempatkannya secara merata.

Langkah 4 - Memahami kode di atas

Mari kita lihat apa yang kode kita tambahkan. Di dalam container div (id = "featured") kami memiliki list tidak berurutan dan beberapa kode PHP untuk menghasilkan elemen list.

Baris pertama yang ditunjukkan di atas mengambil informasi post menggunakan function get_posts() dan memberikan data post tersebut ke variable $featured_post. Fungsi get_posts() excepts parameter tunggal berupa string kueri yang mirip dengan apa yang Anda mungkin melihat pada akhir URL (sans awal tanda tanya). Parameter pertama adalah "numberposts" yang kita tetapkan untuk 3 untuk tutorial ini. Parameter ini menetapkan berapa banyak posting featured post yang akan kami tampilkan. Parameter kedua adalah "category" yang telah kami tetapkan ke 1. Nilai parameter "category" harus menjadi ID dari kategori yang Anda gunakan untuk posting unggulan Anda. Anda dapat menemukan ID suatu kategori dengan membuka halaman manajemen kategori dan mengarahkan mouse Anda ke judul kategori. Status bar tersebut akan menampilkan link. Angka terakhir adalah ID kategori tersebut.

Baris berikutnya adalah foreach loop yang akan mengulangi postingan yang telah kami ambil menggunakan function get_posts(). Baris pertama di dalam foreach loop mengambil URL gambar menggunakan function get_post_custom_values​​() dan menyimpan URL nya dalam variable $custom_image. Parameter pertama menentukan kunci dari custom value yang kami gunakan, "featured_image". Parameter kedua menentukan dari pos mana kita mendapatkan value tersebut.

Pada baris berikutnya kita melakukan pemeriksaan cepat untuk melihat apakah suatu gambar memang ditentukan. Jika tidak ada gambar yang ditentukan, kami menetapkan variabele $image URL dari gambar default. Jika sebuah gambar sudah ditentukan, kami menggunakannya.

Pada baris terakhir kita sebenarnya menampilkan elemen list . Setiap elemen adalah gambar yang tertaut ke featured post.

Langkah 5 - Membuat Featured Posts

Itu dia! Sekarang, setiap kali Anda ingin menampilkan sebuah posting, tetapkan ke kategori unggulan (featured) dan buat nilai khusus dengan key "featured_image" dan value dari URL gambar tersebut. Gambar harus 233x130px.

Lihat dalam Prakteknya

Anda dapat melihat tema tersebut beraksi di server Demo NETTUTS WordPress 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.