Styling Read More Atau Baca Selengkapnya di WordPress | Cara Membuat Read More Atau Baca Selengkapnya di WordPress

2
16

Pembuatan read more atau baca selengkapnya pada umumnya digunakan untuk memotong artikel agar tidak ditampilkan secara keseleuruhan, baik blogger maupun WordPress dua-duanya sama sama menyediakan fitur read more, lalu  bagaimana Cara Membuat Read More Atau Baca Selengkapnya di WordPress dan bagaimana styling read more atau baca selengkapnya di wordpress?. kebetulan  saya juga sedang mempelajari CMS wordpress untuk suatu saat nanti secepatnya saya akan alihkan blog ini ke CMS wordpress, maka tidak ada salahnya saya sharing di blog ini.

sebelum saya jelaskan panjang lebar tentang cara styling kode read more atau baca selengkapnya di wordpress, dan Cara Membuat Read More Atau Baca Selengkapnya di WordPress terlebih dahulu saya asumsikan bahwa Anda sudah paham minimalnya sedikit tentang HTML, CSS, PHP, dan paham tentang pembuatan template wordpress.  Jika belum paham lebih baik dipelajari saja dulu.
oke, untuk permasalahan styling read-more di wordpress ini, kodenya saya dapet dari situs ini:
http://codex.wordpress.org/Customizing_the_Read_More
lalu saya sederhanakan kodenya menjadi seperti ini:

Baca juga:  Menampilkan Judul dan Deskripsi Website Pada Header di WordPress
<?php the_content('<a class="selengkapnya" href="' . get_permalink() . '">Read More</a>'); ?>

bisa dipahami? jika belum dipahami kodenya, saya akan jelaskan. tapi saya tidak menjelaskan semuanya, hanya template tags yang wordpress gunakan aja ya? okok?
untuk code

the_content()

itu template tags bikinan wordpress yang fungsinya secara otomatis menampilkan artikel-artikel kita. sedangkan yang ada di dalam kurung the_content itu adalah kode untuk menampilkan read more atau baca selengkapnya, sedangkan kode

get_permalink()

itu untuk mengarahkan artikel yang kita maksud ketika kita mengklik link read more atau baca selengkapnya.
saya harap Anda sudah paham. lalu kita akan coba styling tulisan read more atau baca selengkpanya, dalam hal ini pastinya kita menggunakan CSS untuk stylingnya. silahkan copy kode dibawah ini, lalu masuk ke file style.css lalu pastekan kode tadi.

.selengkapnya {
background: #d0ceb4;
width: 90px;
text-decoration: none;
font-size: 15px;
padding: 10px;
color: #4d4c3e;
}

.selengkapnya a {
text-decoration: none;
color: #4d4c3e;
text-align: center;
padding-left: 0;
margin-top: -80px;
}

.selengkapnya:hover {
background: #5f5d47;
color: white;
cursor: pointer;
}

.selengkapnya a:hover{
background: #5f5d47;
color: white;
cursor: pointer;
}

Save file style.css tadi, dan akhirnya Selesailah sudah styling read more di CMS wordpress.

Baca juga:  Gambar Tidak Muncul di Plugin Advanced Post Slider?

Tahapan lengkap cara membuat template WordPress bisa Anda lihat di http://www.kafeinkode.com/membuat-template-wordpress/

2 COMMENTS

  1. […] tepat dibawah kode tersebut. kemudian save. insya Allah muncul, saya sudah coba. Setelah read more berhasil dibuat, sobat bisa coba untuk styling read more bikinan sobat melalui tutorial ini […]

LEAVE A REPLY

Please enter your comment!
Please enter your name here