Özgün ‘Read More’ Butonu Yapımı

WordPress sistemlerinden aşina olduğumuz ‘read more’ yazısına özgünlük katarak buton haline getirebilir ve bu butonu .css yardımıyla istediğimiz gibi biçimlendirebiliriz.

Bununla ilgili işe yarar bir eklenti bulamadığımdan ve konuyla ilgili bir yazı da olmadığından ben de kendim yapmaya karar verdim ve benim gibi özgün ‘read more’ butonu yapmak isteyenlere kolaylık sağlaması açısından konuyu paylaşmaya karar verdim.

Öncelikle bize temamızda bulunan functions.php dosyası ve style.css dosyaları gerekmektedir. Yapmamız gereken ilk şey aşağıda yer alan kodu functions.php dosyasına eklemek.

function my_excerpt_more($more) {
global $post;
return '<div class="readmore"><a href="'. get_permalink($post->ID) . '" class="readmore:hover" style="color:white">Devamını Oku</a></div>';
}
add_filter('excerpt_more', 'my_excerpt_more');

Daha sonra functions.php dosyasında yer alan class’ı çağırmak için style.css dosyamıza aşağıda yer alan kodu ekliyoruz.

.readmore {
    float: right;
    width: 145px;
    background-color: #57ad68;
    color: #FFF;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    margin-bottom: -34px;
}

.readmore:hover {
    background-color: #5CB86F;
}

Hepsi bu kadar. Kendi arzunuza göre butonunuzu şekillendirebilirsiniz.

 

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir