![WordPress Animasyonlu Devamını Oku Butonu Yapımı [Manuel]](https://cdn.huseyinkorbalta.com/wp-content/uploads/2017/03/wordpress-devamini-oku-butonu-yapimi.jpg)
WordPress Animasyonlu Devamını Oku Butonu Yapımı [Manuel]
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.
- Read More (Eklenti Sayfası)
- Expand Maker (Eklenti Sayfası)
- 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…
Yazı Bağlantısını Kopyala & Paylaş
Benzer Yazılar
-
WordPress’te Birden Fazla Yazı Kısaltma Fonksiyonu Nasıl Yapılır?
Wordpress'te varsayılan olarak blog yazıları 55 kelime kısaltılmakta. Wordpress'in yazı uzunluğu filtreleme fonksiyonu kullanılarak bu varsayılan değeri değiştirebiliyoruz ve bu değiştirdiğimiz de sadece bir yerde kullanabiliyoruz, peki ya birden fazla alanda farklı kelime uzunlukları kullanmak istiyorsak? Birden fazla yazı türüne sahip bir internet sitesi geliştiriyorsanız, her farklı alan için farklı… -
WordPress Easy WP SMTP Eklentisinde Önemli Güvenlik Açığı!
Geçtiğimiz hafta Wordpress'in en çok kullanılan mail işlemcisi eklentisi olan Easy WP SMTP'nin yapmış olduğu bir güncelleme çok önemli bir güvenlik açığına neden oldu. Wordpress'in paylaştığı verileri göre 300,000 site tarafından aktif olarak kullanılmakta olan bu eklentinin 1.3.9 sürümünde meydana gelen güvenlik açığı bir çok internet sitesini etkilemiştir. Blog yazımda… -
WordPress Eklentisiz Yazı İçi Reklam Alanı Nasıl Oluşturulur?
Wordpress dünyanın en geniş eklenti kütüphanesine sahip yazılımıdır. Hemen hemen her şey için bir eklentisi mevcut, fakat Wordpress her ne kadar eklenti açısından zengin olsa da her şeyi eklentiyle yapmak sitenizin yayın yaptığı hosting ya da sunucuyu bir süre sonra yormaya başlayacaktır. Bende size bu blog yazımda eklenti kullanmadan yazı… -
WordPress’te Önceki ve Sonraki Yazı Linkleri Nasıl Eklenir?
Yakın bir zamanda kişisel blog sitem için yeni bir tema tasarlayıp, kodladım. Bir önce ki temamı da kendim tasarlayıp, kodlamıştım ancak Wordpress'in 5.0 sürümü yayınlandıktan sonra yeni görsel editör olan Guttenberg'i kullanmaya başladım. Guttenberg editörüne gelen ara güncellemeler ile eski temam da uyumsuzluklar oluşmaya başladı örneğin yazdığım yazılar sayfa dışına…
Bir Cevap Yaz