Kostumisasi Halaman Depan (home) WordPress

 

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.

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

/* global */ a, a:hover, a:focus, a:visited { text-decoration: none; } /* header ===========================*/ .header-container { background: #354b60; position: fixed; /* static nav bar */ left: 0; right: 0; z-index: 9; } .header-inner {} .header-inner .site-title { margin: 0; line-height: 50px; font-size: 20px; } .header-inner .site-title a { color: #f4f4f4; } /* navigation ============================*/ .header-inner .main-navigation { line-height: 50px; } .header-inner .main-navigation ul { margin: 0; padding: 0; } .header-inner .main-navigation ul li { padding: 0; position: relative; display: inline-block; } .header-inner .main-navigation ul li a { color: #f4f4f4; display: block; padding-left: 10px; padding-right: 10px; } .header-inner .main-navigation ul li:hover, .header-inner .main-navigation ul li a:hover { background: #8e44ad; } .header-inner .main-navigation ul li.menu-item-has-children .sub-menu { display: none; position: absolute; top: 50px; background: #354b60; width: 200px; left: 0; z-index: 999; } .header-inner .main-navigation ul li.menu-item-has-children:hover > .sub-menu { display: block; } .header-inner .main-navigation ul li.menu-item-has-children .sub-menu li { display: block }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82

/* global */ a, a:hover, a:focus, a:visited {     text-decoration: none; } /* header ===========================*/ .header-container {     background: #354b60;     position: fixed;     /* static nav bar */     left: 0;     right: 0;     z-index: 9; } .header-inner {} .header-inner .site-title {     margin: 0;     line-height: 50px;     font-size: 20px; } .header-inner .site-title a {     color: #f4f4f4; } /* navigation ============================*/ .header-inner .main-navigation {     line-height: 50px; } .header-inner .main-navigation ul {     margin: 0;     padding: 0; } .header-inner .main-navigation ul li {     padding: 0;     position: relative;     display: inline-block; } .header-inner .main-navigation ul li a {     color: #f4f4f4;     display: block;     padding-left: 10px;     padding-right: 10px; } .header-inner .main-navigation ul li:hover, .header-inner .main-navigation ul li a:hover {     background: #8e44ad; } .header-inner .main-navigation ul li.menu-item-has-children .sub-menu {     display: none;     position: absolute;     top: 50px;     background: #354b60;     width: 200px;     left: 0;     z-index: 999; } .header-inner .main-navigation ul li.menu-item-has-children:hover > .sub-menu {     display: block; } .header-inner .main-navigation ul li.menu-item-has-children .sub-menu li {     display: block }

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">” .

<?php if (has_post_thumbnail()) { the_post_thumbnail('on-post-thumbnail'); } ?>

1 2 3 4

<?php if (has_post_thumbnail()) {      the_post_thumbnail('on-post-thumbnail'); } ?>

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.

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

Lhoo kok hancur ??
oke tenang… sekarang akan tambahkan kode berikut ini untuk memperbaiki tampilan tersebut.

add_image_size('on-post-thumbnail', 850, 200, true);

1	add_image_size('on-post-thumbnail', 850, 200, true);

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 > Regen. Thumbnails 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.

// custom length the_excerpt function custom_excerpt_length($length) { return 20; } add_filter('excerpt_length', 'custom_excerpt_length', 999);

1 2 3 4 5 6

// custom length the_excerpt function custom_excerpt_length($length) {     return 20; } add_filter('excerpt_length', 'custom_excerpt_length', 999);

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

function onphpid_excerpt_more($more) { global $post; $more = '<div class="readmore"> '; $more .= '<div class="readmore-button"> '; $more .= '<a href="'.get_permalink($post->ID).'" class="btn btn-sm btn-danger">'; $more .= 'Readmore <i class="glyphicon glyphicon-chevron-right"></i>'; $more .= '</a>'; $more .= '</div> '; $more .= '</div> '; return $more; } add_filter('excerpt_more', 'onphpid_excerpt_more');

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function onphpid_excerpt_more($more) { global $post; $more = '<div class="readmore">'; $more .= '<div class="readmore-button">'; $more .= '<a href="'.get_permalink($post->ID).'" class="btn btn-sm btn-danger">'; $more .= 'Readmore <em class="glyphicon glyphicon-chevron-right"></em>'; $more .= '</a>'; $more .= '</div>'; $more .= '</div>'; return $more; } add_filter('excerpt_more', 'onphpid_excerpt_more');

Save dan Reload.
Dengan selesainya Nomer 4 menandakan berakhir juga sesi kelima ini.. jangan lupa baca juga artikel di sesi keenam tentang kostumisasi di page.php dan single.php.
Apabila ada pertanyaan silahkan sampaikan melalui kolom komentar berikut ini sekian dan terima kasih…

Share this:

• Click to share on Twitter (Opens in new window)
• 11Click to share on Facebook (Opens in new window)11
• Click to share on Google+ (Opens in new window)
• Click to share on Telegram (Opens in new window)
• Click to share on WhatsApp (Opens in new window)
•