WordPress tema tasarlarken renk,renk uyumu,görsel çekiciliği,işlevselliği,seo ve hız konularına dikkat ederiz.Bu konumuzda ise hem sitenin hızına yarayacak hem de seo için bir artı niteliği taşıyacak bir tema desteği paylaşacağım.İnternette malesef wordpress için lazyload eklentiler halinde sunulmaktadır fakat kodlarla yapılacak çoğu şeyin de eklenti ile  yapılması bence gereksiz ve sisteme yük getirecektir.

Peki lazy load mantığı nedir ?

Lazy load mantığı sitenizdeki resim dosyalarının sadece ihtiyaç olduğunda çağrılmasıdır. Mesela bir konunuz var diyelim yüksek kalitede wallpaper paylaştınız. Ziyaretçi konuya girdiği an bütün resimler yüklenmeye başlar.Fakat lazy load ile bütün resimler değil sadece scroll çubuğunuzun olduğu bölümdeki resim yüklenecektir. Scroll aşağı indikçe de resimler gerektiğinde yüklenecektir.

İşte Eklentisiz jQuery Lazy Load Kullanımı

İlk önce ekte verdiğim lazy load dosyasını indirin.Ardından dosyayı açıp içindeki includes ,resim ve js adlı dosyayı temanızın bulunduğu ana klasöre ftp programı yardımıyla atın.

Daha sonra header.php de lazyload.php dosyasını çağıracağız. head tagları içine aşağıdaki kodu yazın.

[html]

<?php include(‘includes/lazyload.php’); ?>

[/html]

Burada yapacağımız iş bitti. Bir de includes/lazyload dosyasına bakalım.

Aşağıdaki kodlar lazyload.php dosyasının kodlarıdır burada kendinize göre düzenlemeniz gereken bir yer var. Tozbulutu.org yazan bölümde kendi sitenizin adresini yazın.Burada bir resim yolu belirlemeniz gerekmekte.Resim geç yüklenirse bu resim gösterilecek.

[html]

<script type="text/javascript" src="<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".ufakyan img,.konuResim img,.yaziresimleri img,konuAc img").lazyload({
placeholder : "http://tozbulutu.org/wp-content/themes/minimal/resim/grey.gif",
effect : "fadeIn"
});
});
</script>

[/html]

Burada dikkat etmeniz gereken bir husus daha var.Mesela resminiz index.php de konuresim classının içinde olsun. Siz css dosyasında konuresim img şeklinde biçim tanımlayacaksınız ve aşağıdaki kodda bulunan konuresim img,ufakyan img gibi yerleri kendinize göre düzenleyeceksiniz.

[html]
$(".ufakyan img,.konuResim img,.yaziresimleri img,konuAc img").lazyload({
[/html]

İşlem bu kadar. Hem güzel bir görüntü oluşturduk hem de sistem yükünü hafiflettik.

Örnek olarak blogumun anasayfasını yenileyip yavaşça scroll çubuğunu aşağı indirin.Resimlerin siz aşağıya indirdikçe açıldığını göreceksiniz.

Dosyalar : Buradan

Bir önceki yazımız olan WordPress Tema Yapımı-Sidebar.php başlıklı makalemizde hazır temalar, sidebar.php ve tema yap hakkında bilgiler verilmektedir.



Etiketler:, , ,