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…
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.
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.
Bu üç eklentiden birisini kullanarak eklenti ile devamını oku butonunu sitenizde gösterebilirsiniz.
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.
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(); ?>
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.
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ş
Bu yazıya şimdiye kadar 2 Yorum yapılmıştır.
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
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.
Bir Cevap Yaz