Kas 022014
 
782 views

Bildiğiniz gibi WordPress ana sayfasında yazıları özet halinde (wordpress excerpt mod) göstermek isterseniz, bir çok html yaftası

etkisiz hale gelir ve özet yazı sade bir görünüm kazanır.
Eğer siz de benim gibi bu uygulamayı biraz abartılı bulanlardansanız, birazdan aktaracağım çözüm sizin de işinize yarayabilir.

Bu çözümün kodlarını hazırlayan kişi Boutros AbiChedid. İlgili kodları 2011 yılında yazmış ve WordPress 3.1.3 sürümüne kadarki testlerini de yapmış. Aynı kodları ben şu anda WordPress 4.0 üzerinde kullanıyorum. Önceki bir kaç sürümde de hiç bir sorun yaşamamıştım.

Excerpt modundaki sadeleştirmeyi yapan orijinal fonksiyon: get_the_excerpt($text) fonksiyonu. Boutros AbiChedid, bu fonksiyonun istenen fonksiyonla yer değiştirmesini sağlıyor. Fonksiyonun içeriğindekileri yorumlamak için fazla uzman olmaya bile gerek yok.

custom_wp_trim_excerpt($text) fonksiyonun içinde yer alan allowed_tags değişkenine, yazı özetinde hangi html işlemlerinin kullanılabileceğini tanımlıyorsunuz.

Özet yazının uzunluğunu $excerpt_word_count değişkeni aracılığıyla değiştirebilirsiniz. Özetler için varsayılan sözcük sayısı 55 kelimedir.

Yazı özetinin sonuna eklenecek işareti de $excerpt_end değişkeniyle tanımlamanız mümkün.

Tüm kod aşağıda yer alıyor:

Yukarıdaki kodun son iki satırında orijinal kod fonksiyon listesinden siliniyor ve onun yerine yeni fonksiyon atanıyor.

Aşağıdaki ilk resimde özet yazının orijinal hali yer alıyor. Tamamiyle sade ve gösterişsiz (biraz da kullanışsız ):

Orijinal excerpt sadeleştirme

Aşağıdaki resimde ise yukarıdaki kod uygulandıktan sonra aynı özet yazının yeni görünümü yer alıyor. Uygulama sonrasında özet içindeki linkler artık aktif.

Sadeleştirme azaltılmış excerpt uygulama

İsterseniz yukarıdaki kodu aynen yavru temanızın functions.php dosyasına ekleyebilir, ya da isterseniz izin vereceğiniz özellikleri arzunuza göre değiştirdikten sonra kopyalarsınız. Seçim size kalmış!

Umarım işinize yarar.

Beni izlemeyi unutmayın!

ahmet aksoy

Kas 022014
 
782 views

Twenty Fourteen teması thumbnail (küçük resim) için hazır bir çözüm sunmuyor bize.

Daha önce temamızın anasayfasında yazıların özet olarak görünmesini (excerpt mod) sağlamıştık. Ancak bu özetlerin yanında küçük resimler görünmüyor.

thumbnail-1

http://www.dognmonkey.com/techs/twenty-fourteen-theme-customization.html  adresindeki makalenin yazarı bu soruna nasıl çözüm bulacağımızı  anlatıyor.

1-  Bu çözüm için öncelikle get_the_image.php dosyasına ihtiyaç var. Zip dosyasını indirip açın ve içindeki kod dosyasını yavru tema klasörünüze kopyalayın.

2- İkinci aşamada yavru tema klasörünüzdeki functions.php dosyasına aşağıdaki kodları ekleyin:

3- Üçüncü aşamada  content.php dosyasına aşağıdaki kodları ekliyorsunuz. Orijinal metinde sadece   is_search()  sorgulanıyor. Siz isterseniz verdiğimiz koddaki tüm seçenekleri aktif olarak kullanabilir, ya da sadece is_home() fonksiyonunu eklemekle yetinebilirsiniz: Tamamen size kalmış.

Bu üç aşamayı uyguladığınız zaman yazınıza eklenmiş bir resim varsa ve onun thumbnail görüntüsünü de oluşturmuşsanız (Force Regenerate Thumbnail veya Smush It gibi bir eklenti, eksik thumbnail görüntülerinizi tamamlamanızı sağlar) küçük resim (thumbnail) özet yazınızın üst tarafında yerini alacaktır.

Thumbnail alone

Fakat ben küçük resmin sol tarafta olmasını ve yazıların da hemen onun sağ yanından başlamasını istiyorum.

Yukarıda linkini verdiğim yazıda bu ayrıntıya hiç girilmemiş. Onları da ben ekleyeyim:

content.php dosyasına eklediğimiz kodu incelersek, resmimizin içine yerleştiği div kodunun “cover” sınıfı ile ilişkilendirildiğini görüyoruz. Ancak “cover” sınıfı hiç bir yerde tanımlı değil. Biz de yazılarımızın resmin sağ tarafında kalmasını sağlayacak css kodunu yavru temamızın style.css dosyasına ekliyoruz.

cover” sınıf tanımında div alanının sola dayalı olmasını, sağ tarafında 10 piksellik bir boşluk bulunmasını ve çevreleyen metne göre sol tarafta yer almasını belirtiyoruz.

Artık ana sayfadaki yazı özetlerimizin sol tarafında, küçük resimlerimiz de (thumbnail) yerini almış durumda.

Thumbnail on left

Yukarıdaki açıklamaların yetersiz kaldığı sorun veya sorularınız varsa, aşağıdaki yorum alanını kullanarak bana aktarabilirsiniz. Sizi en kısa zamanda yanıtlayacağımdan emin olun!

Beni izlemeyi unutmayın!

ahmet aksoy

 

 

 

Eki 202014
 
663 views

WordPress 2014 Temasında Değişiklik Yapma

Sitemizde kullandığımız 2014 (twenty fourteen) temasında bir çok yerde gereksiz yere başlıklar büyük harfe (uppercase) dönüştürülmüş.

Bunu düzeltmek için gereken değişiklikler sadece style.css üzerinden yapılabiliyor.

Aşağıda, yavru tema (child theme) style.css dosyasına eklenecek satırları vereceğim. Ama siz de bu tarz değişiklikler yapmak istediğinizde önce gidip ana temanın style.css dosyasında ayrıntılı bir inceleme yapın. Bazı elemanların isimleri yeterli açıklamayı sağlıyor olsa da, bazı durumlarda daha hassas bir araştırma, hatta çok sayıda deneme-yanılma gerektirebilir.

Bu yazıda ele aldığımız sorunu yaratan tek bir kod var:

text-transform: uppercase;

Bu kod, dahil olduğu sınıfa ait yazıyı tamamen büyük harfe çeviriyor. Onu etkisiz hale getirmenin yolu ise

text-transform: none;

şeklinde. Bu durumda ilgili yazı/başlık nasıl girilmişse, aynen gösterilecek demektir.

Ana temanın style.css dosyasındaki “text-transform: uppercase;” satırlarını tek tek bulup, değiştirilmesi gerekip gerekmediğine karar vermeniz gerekiyor. Ben, aşağıdaki örnekte yanal banttaki harf büyütmelere dokunmadım. Onun dışındaki tüm dönüşümleri iptal ettim.

Aşağıdaki satırlar, yavru temanın style.css dosyasına eklediğim satırlar.

.site-navigation a {
text-transform: none;
}
.entry-title {
text-transform: none;
}
.entry-meta {
text-transform: none;
}
.cat-links {
text-transform: none;
}
.entry-meta .tag-links a {
text-transform: none;
}
.entry-content th,
.comment-content th {
text-transform: none;
}
.entry-content .edit-link {
text-transform: none;
}
.page-links {
text-transform: none;
}
.post-navigation .meta-nav {
text-transform: none;
}
.paging-navigation .page-numbers {
text-transform: none;
}
.comment-reply-title,
.comments-title {
text-transform: none;
}
.comment-list .reply,
.comment-metadata {
text-transform: none;
}
.no-comments {
text-transform: none;
}
.comment-navigation {
text-transform: none;
}
.widget .widget-title {
text-transform: uppercase;
}
.widget_calendar caption {
text-transform: uppercase;
}
.widget_twentyfourteen_ephemera .post-format-archive-link {
text-transform: uppercase;
}
.content-sidebar .widget .widget-title {
text-transform: uppercase;
}
.featured-content .entry-title {
text-transform: none;
}
@media screen and (min-width: 783px) {
.primary-navigation {
text-transform: none
}
}

Yavru tema uygulaması sayesinde ana temada hiç bir değişiklik yapmıyoruz. Eğer ana temada WordPress taarfından herhangi bir değişiklik yapılırsa, gerekli değişikliği ana temaya uygulamak bizim yaptığımız değişkliklere bir zarar vermeyecektir.

Eğer ana tema dosyalarında değişiklik yapma alışkanlığınız varsa, bir an önce bundan vazgeçip, yavru tema uygulamasına geçmenizi öneriyorum. Güvende olacaksınız!

ahmet aksoy