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

 03 Mar 2017

Hüseyin Körbalta

 2 Yorum »

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…

• 

  WordPress’de QUIC Cloud Nasıl Aktif Edilir?

  2 hafta önce kişisel blog sayfamı Quic.cloud altyapısına geçiş yaptırdım. Bu geçiş sürecinde yaşadığım Türkçe kaynak sıkıntısı, güncel olmayan bilgilerden dolayı bu konu ile ilgili bir kaynak oluşturmaya karar verdim. Blog sayfamı Quıc altyapısına geçirmeye karar verme sebebim; kullanmış olduğum ücretsiz CDN servisinin artık ücretsiz olmamasıydı. Tek neden bu değil…
• 

  WordPress İçin İki Adımlı Kimlik Doğrulama Nasıl Kurulur? Google Authenticator Ayarları Nasıl Yapılır?

  Wordpress'in admin paneline veya kullanıcı hesaplarına giriş kısmı kişisel bilgilerinize, değerli içeriğinize ve işiniz için değerli olan birçok şeye giriş noktasıdır. Bizim için bu kadar önemli olan bir alanın saldırganlar tarafından da ele geçirilmek istenmesi kadar doğal bir şey yoktur. Bunun için zorlayarak giriş yapma adını verdiğimiz brute force (kaba…
• 

  WordPress’te Favicon Nasıl Eklenir?

  Favicon internet sitenizin web tarayıcısında ki sayfa başlığında görüntülenen küçük bir ikondur. Favicon, tarayıcıların geçmişinde, yer imleri sekmesinde ve internet sitenizin görsel bir kimliğe ihtiyaç duyduğu her yerde gözükmektedir, kullanılmaktadır. Wordpress'te Favicon Nasıl Eklenir? Oldukça basit ve küçük bir detaydır favicon, çoğu zaman unutulur ancak unutulmaması gereken bir özelliktir. Sitenizin…
• 

  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ı…

Bu yazıya şimdiye kadar 2 Yorum yapılmıştır.

• 

   Yanıtla

  Burak Hünkaroğlu Ziyaretçi

  6 Mart 2017 Saat: 04:54

  teşekkür ederim, kullandığım temada devamını oku özelliği yoktu bu yazın sayesinde temama entegre etmeyi başardım. Bu tarz yazılarının devamını gelmesini bekliyorum, blogun çok güzel başarılar
• 

   Yanıtla

  Recep GÜLER Ziyaretçi

  21 Ekim 2019 Saat: 22:05

  Merhaba,
  Yazınızdaki 3. Yöntemi denedim, en temizi. Çünkü diğer yöntemler istediğim gibi olmadı. Birincisinde CSS kullanamıyoruz, dümdüz yazı. Eklentilerde ise, en küçük işlemde pro versiyon istiyor. En temizi manuel.

  index.php ‘de değilmiş benim kodlar 🙂
  Temaya değişiyor sanırım. Bütün *.php uzantılı şablonlarda arayıp kodları değiştirdim.

  İkinci adımda ise, function.php dosyasının en sonuna sizin verdiğiniz kodları yapıştırdım. return 155 bendeki yazılara ve temaya göre fazla geldi. Her yazıda çıkmıyor. Ben bunu 18’e düşürdüm.

  Son olarak, CSS kodları, sizdeki kodlarda bir hareket olmayınca kendi kafama göre bir şeyler karaladım. Kullanmak isteyen olursa;
  (Not olarak: Style.css değilde Ek CSS olarak ekledim css kodlarını. Görünüm>Temalar> Seçili temayı özelleştir deyip Ek CSS sekmesine direk yapıştırıyorsunuz.)

  .devamini-oku {
color: #fff !important;
text-decoration: none;
background: #000;
padding: 4px 24px 4px 24px;
display: inline-block;
transition: all 1s ease 0s;
border-radius: 780px;
border:6px solid #fff;
}
.devamini-oku:hover {
color: #000 !important;
background: #fed170;
border-bottom:6px solid;
border-bottom-color: #000 !important;
-webkit-transition:all 0.7s ease-out;
-moz-transition:all 0.7s ease-out;
-o-transition:all 0.7s ease-out;
transition:all 0.7s ease-out;
}

  Ve işlemler tamam.

  Paylaşımınız için teşekkürler.
  İyi günler dilerim.