Pilih Laman

sumber : https://www.onphpid.com/kostumisasi-halaman-depan-home-wordpress.html

cover-5

  1. Membuat Header dan Navigasi Melayang di bagian atas
  2. Menambah Post Thumbnail
  3. Mengatur Panjang Cuplikan (the_excerpt)
  4. Mengganti tanda […] dengan readmore

MEMBUAT HEADER DAN NAVIGASI MELAYANG DIBAGIAN ATAS

Langung saja kita mulai dengan nomer pertama, kita akan merapikan dulu bagian header lalu dilanjutkan keseluruh bagian.. yang kurang lebih akan tampak seperti gambar berikut jika sudah dirapihkan.

header melayang

Agar header kita bisa seperti gambar diatas cukup mudah. kita akan tambahkan CSS di style.css berikut CSSnya:

untuk Code lengkapnya kalian biasa copas di https://gist.github.com/wichaksono/c0fc123ada2796e2ab5c

Nah Sekarang Nomer 1 sudah kelar. kita akan lanjut ke Nomer 2.

MENAMBAH POST THUMBNAIL

Nomer 2 kita akan menambahkan gambar (post-thumbnail) yang pada sesi ketiga lalu kita sudah mengaktifkan fitur post-thumbnail di bagian setup theme. Nah di sesi kelima ini kita akan menggunakannya di theme kita

mula-mula buka file index.php dan tambahkan kode berikut tepat dibawah “<header class="header-post">

lalu untuk menampilkan gambarnya kalian bisa mempublish artikel baru atau meng-edit post yang sudah ada lalu menambahkan gambar melalui menu feature image dipojok kanan bawah.

post-featured

Lalu Klik publish atau update lalu check pada tampilan depan nah akan tampak seperti berikut :

thumbnial cacat

Lhoo kok hancur ??

oke tenang… sekarang akan tambahkan kode berikut ini untuk memperbaiki tampilan tersebut.

tambahkan di file “functions.php” tepat dibawah "add_theme_support('post-thumbnails');"

Kemudian Save.

Dan ini adalah saatnya kita menggunakan Regenerate Thumbnails yang sudah kita unduh…  Klik Menu Tools > RegenThumbnails dan klik Regenerate All Thumbnails  tunggu hingga proses selesai lalu reload halaman depan dan gambar thumbnailpun menjadi lebih rapi.

PENJELASAN :

has_post_thumbnail() adalah fungsi yang menghasilkan TRUE jika ada gambar dan FALSE jika tidak ada gambar

the_post_thumbnail() adalah gambar thumbnail itu sendiri. Sedangkan 'on-post-thumbnail' adalah custom parameter yang kita buat melalui add_image_size(). selain itu the_post_thumbnail() sudah memiliki parameter default yang bisa kalian check di https://codex.wordpress.org/Post_Thumbnails

dan apabila kita menggunakan custom parameter sebaiknya kita Regenerate Thumbnail terlebih dahulu agar semua images diset ulang sesuai custom parameter kita. hal ini juga berlaku ketika kita berganti Theme karena bisa jadi theme yang baru mempunyai ukuran tersendiri.

MENGATUR PANJANG CUPLIKAN (The_excerpt())

Nah sekarang di Nomer 3 kita akan mengatur seberapa panjang kalimat dalam cuplikan yang akan kita tampilkan di halaman depan.

tambahkan kode berikut di baris paling bawah file functions.php. disini kita akan mengatur cuplikan kita sepanjang 20 kata, atau kalian bisa memodifikasinya sendiri.. ingat satuan yang dipakai adalah “kata” bukan karakter.

Save dan Reload.

MENGGANTI TANDA […] DENGAN READMORE

Nomer 4. Ketika melihat tanda “[…]” di cuplikan artikel mungkin akan membuat mata kita sedikit terganggu.. ya rasanya kurang pas atau semacamnya..

Nah agar tidak terganggu bagaimana kalau kita ganti saja dengan readmore … biar lebih enak dipandang dan bermanfaat.

Untuk mengganti tanda […] dengan readmore cukup mudah..  hampir sama seperti halnya mengatur panjang cuplikan diatas.. kita cukup tambah kode berikut di baris paling bawah file functions.php

Save dan Reload.