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

Diposting pada

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:  Membuat Fasilitas Download di WordPress

[php]
<?php the_content(‘<a class="selengkapnya" href="’ . get_permalink() . ‘">Read More</a>’); ?>
[/php]

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

[html]
the_content()
[/html]

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

Baca juga:  Membuat Image Slide Show di Wordpress

[html]
get_permalink()
[/html]

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.

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

Baca juga:  Tutorial Cara Membuat Footer di WordPress

.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;
}
[/css]

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

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

2 thoughts on “Styling Read More Atau Baca Selengkapnya di WordPress | Cara Membuat Read More Atau Baca Selengkapnya di WordPress

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *