WordPress Animasyonlu Devamını Oku Butonu Yapımı [Manuel]

Hüseyin Körbalta

Selamlar,

Bu yazımda wordpress tabanlı blog sitelerin tasarımlarında olmazsa olmazlardan biri olan devamını oku butonunu manuel olarak nasıl yapacağınızdan bahsedeceğim. Sitenizin ana sayfasında yer alan yazıların tamamını göstermek yerine yazınızın sizin belirlediğiniz kısıma kadar gösterebilir ve daha sonra devamını oku butonunu göstererek okurlarınızın yazının tamamına ulaşmasını sağlayabilirsiniz.

Yüklediğiniz wordpress temalarında standart olarak bu özellik gelebilir ancak bazı durumlarda ya da bazı temalarda bu özellik bulunmuyor. Devamını oku özelliği bu durumda nasıl aktif edeceğinizi 3 farklı yöntem ile göstereceğim.

Hazırsanız başlayalım…

1- Yöntem: Yazı Editöründe ki “More” Etiketini Kullanarak

Yukarıda ki resimde mavi ok ve çerçeve ile gösterdiğim butona tıklayarak yazıda belirlediğiniz kısımdan sonra “devamını oku” yazısının çıkmasını sağlayabilirsiniz. Editör alanında yazınızı yazdınız ve bu yazınızın belli bir kısmının ana sayfada göstermek istiyorsanız eğer wordpress’in kendi içinde sunduğu bu özelliği kullanarak hiçbir eklentiye veya kodlamaya gerek kalmadan devamını oku işlemini yapabilirsiniz.

Ancak bu standart bir yazı çıkmasını sağlayacak ve kullandığınız temanızın tasarımını uymayabilir ya da göze hoş gelmeyebilir ya da bu işlemi yapmayı unutabilirsiniz. Böyle bir durumda ikinci yöntem olan wordpress eklentileri kullanmanız gerekebilir.

2.Yöntem: WordPress Eklentisi Kullanarak

Aşağıda sıraladığım eklentileri kullanarak hiçbir kodlamaya veya yukarıda ki yönteme gerek kalmadan otomatik olarak temanıza devamını oku özelliğini aktif edebilirsiniz.

1. Read More (Eklenti Sayfası)
2. Expand Maker (Eklenti Sayfası)
3. Read More Without Refresh (Eklenti Sayfası)

Bu üç eklentiden birisini kullanarak eklenti ile devamını oku butonunu sitenizde gösterebilirsiniz.

3.Yöntem: Temanızı Manuel Olarak Düzenleyip Kod İle Eklemek

Korkma korkma kod ile dediysem çok karışık kodlama yapmayacağız basit aslında. Adımları eksiksiz yerine getirdiğinde sorunsuz bir şekilde manuel olarak temana devamını oku butonu eklemiş olacaksın.

Normalde yine wordpress’in bize sunduğu manuel kod ile gerçekleştirebiliriz bu işlemi, ekstra bir işlem yapmamıza gerek kalmayacaktır ancak wordpress standart olarak 55 kelime ile kısaltma yapıyor yani yazınızın ilk satırdan başlayıp 55 harfe kadar olan kısmını alıp anasayfanızda özet olarak gösteriyor.  55’de yeter bana sen kodu ver hele diyenler için nasıl yapılacağını anlatayım.

WordPress admin panelinize giriş yapın, “Görünüm” sekmesinden “Düzenleyici” sekmesine tıklayın. Daha sonra sağ tarafta yer alan tema dosyalarınızdan “Ana İndeks Şablonu (index.php)” adlı dosyayı açın ve aşağıda ki işlemleri gerçekleştirin.

Dosyada bul: <?php the_content(); ?>  Bununla Değiştir: <?php the_excerpt(); ?>

Yukarıda ki işlemi yapıp, daha sonra alt kısıma gelerek “Dosyayı Güncelle” butonuna basarak bu basit işlemi tamamlayın. Daha sonra sitenizin anasayfasına bakın ve yazılarınızın kısaltılmış olduğunu, devamını oku yazısının geldiğini göreceksiniz.

Ancak dediğim gibi bu wordpress’in standart özelliği ve 55 kelime ile kısaltma yapıyor. Biz bu sayıyı kendimiz belirleyelim ve devamını oku yazısınıda kendimize göre tasarlayım diyorsanız aşağıda ki adımları eksiksiz yaptığınızda çok güzel bir animasyonlu devamını oku butonuna sahip olacaksınız.

Haydi başlayalım o zaman.

1.Adım:

WordPress admin panelinize giriş yapın, “Görünüm” sekmesinden “Düzenleyici” sekmesine tıklayın. Daha sonra sağ tarafta yer alan tema dosyalarınızdan “Ana İndeks Şablonu (index.php)” adlı dosyayı açın ve aşağıda ki işlemleri gerçekleştirin.

Dosyada bul: <?php the_content(); ?>  Bununla Değiştir: <?php the_excerpt(); ?>

2.Adım:

WordPress admin panelinize giriş yapın, “Görünüm” sekmesinden “Düzenleyici” sekmesine tıklayın. Daha sonra sağ tarafta yer alan tema dosyalarınızdan “Tema İşlevleri (functions.php)” adlı dosyayı açın ve aşağıda ki işlemleri gerçekleştirin.

Aşağıda ki kodu functions.php dosyanızda <?php ve ?> tagları arasında uygun bir yere ekleyin.

function hk_devamini_oku($length) {return 155;}
	add_filter('excerpt_length', 'hk_devamini_oku');
	function hk_devamini_oku_git($more) {
	global $post;
	return '<a href="'. get_permalink($post->ID) . '"><div class="devamini-oku">Devamını Oku...</div></a>';
}
add_filter('excerpt_more', 'hk_devamini_oku_git');

Gelelim kodların ne işlevi gördüğünü açıklamaya.

• return 155; yazan kod kısmı yazınızdan kaç karakterin alınıp,özet olarak göstereceğini belirten ifadedir. Yani, yazınızın ilk cümlesinden itibaren 155 harf,rakamı alır ve 155’den sonra ki yazıları göstermez, onun yerine devamını oku butonunu gösterir.
• İkinci return kodu ise standart olarak wordpress’de gelen devamını oku yazısını kendimize özel bir tasarım ile özelleştirmemiz sağlamak için kullanılmıştır.
• add_filter kısmı ise kısaltma fonksiyonumuzu wordpress’e tanıtmak amacı ile kullandığımız bir hook (kanca) yapısıdır.

Bu adıma kadar her şey anlaşıldı ise ve hata almadıysanız aşağıda ki CSS kodlarınıda temanızın style.css dosyasında uygun bir yere ekleyin.

See the Pen WordPress Devamını Oku (Read More) Animasyonlu Buton Örneği by Huseyin Korbalta (@huseyinkorbalta) on CodePen.

Yukarıda ki örnekten sadece CSS kısmını alın. Tasarladığım butonun nasıl görüneceğini görmeniz için canlı önizleme sundum. Siz butonu kendi temanız için özelleştirebilir, geliştirebilirsiniz. Gerekli CSS kodunu temanıza ekledikten sonra sitenizde CTRL+R kombinasyonunu kullanarak sayfanızı yenileyin ve çok daha iyi bir devamını oku butonuna sahip olduğunuzu göreceksiniz.

Hepsi bu kadar, iyi çalışmalar…