Styling Read More Atau Baca Selengkapnya di Wordpress | Cara Membuat Read More Atau Baca Selengkapnya di Wordpress | KafeinKode

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

Anonim Sat, October 18, 2014 2 Comments

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:  Cara Memasang Facebook Popup Likebox Dengan Cookie di WordPress Blogger

[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:  Bahaya Menggunakan Theme Nulled

[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/

[shareaholic app="share_buttons" id="20730860"]
[shareaholic app="recommendations" id="20730868"]

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Thank you ever so for you article.Much thanks again. Really Cool.

    Reply
Please disable your adblock for read our content.
Refresh