Süleyman Sönmez yine yapmış yapacagını

Her yazının tabanında o konuya ait resim bulunuyor buyrun kendi yazısından alıntıdır



Aşağıdaki kodu CSS bilenler incelediklerinde görecekler ki sayfadaki her elemetin altında kalan bir div tanımlıyoruz. Bunun için style içinde z-index değerini -1 yaptım. Position değerlerini sabitledim ve sonrasında içine bir resim ekledim. Bu resmi her bir yazı için nereden alıyorum? Wordpress kullanıcıları yazı yazdıkları editör ekranında kendilerine saklama alanları yani custom field açıp kullanabilirler. Birkaç yıl önce her yazımın resimle daha etkili olduğunu görüp resim eklemeye başlamıştım ve yaziresmi adında bir custom field açarak her yazı için, bu alana seçtiğim resmin sadece adını .jpg yazmadan eklemiştim. İşte sonunda kullanmak için bir yer çıktı Eğer bu değer doluysa php koduyla buraya getiriyorum. 







<body>
<div style="background:#283045;position:absolute; position: fixed; z-index:-1;width:100%; height:100%; top:0px;left:0px;">

<img src="<?php if ( get_post_meta($post->ID, 'yaziresmi', true) ) { ?>/resim/<?php echo get_post_meta($post->ID, "yaziresmi", $single = true); ?>.jpg<?php } ?>" style="margin:-3% 0 0 -3%; width:110%; height:110%;  opacity:0.6;filter:alpha(opacity=60)">
</div>

Resmin gözü fazla almaması ve büyütüldüğünde oluşacak kırıklıkları, pixelleşmeyi çözmek amacıyla görünürlüğünü azaltıyorum. (opacity kodlarıyla)
Son olarak sitede kullandığım resimlerin çevresinde bir çerçeve oluyor. Bu büyütünce görünmesin diye resmi %110 büyüttüm ve bir miktar yukarı bir miktar sola çekmek için margin değerlerine -3% değerleri girdim.
Eğer bu tabana resim getirme işinin anasayfanızda ve diğer sayfalarınızda değil sadece konu sayfalarınızda olmasını isterseniz Wordpress temanızda kodu şöyle kullanmalısınız.



<body>

<?php
if (is_single()) {
 ?>
<div style="background:#283045;position:absolute; position: fixed; z-index:-1;width:100%; height:100%; top:0px;left:0px;">

<img src="<?php if ( get_post_meta($post->ID, 'yaziresmi', true) ) { ?>/resim/<?php echo get_post_meta($post->ID, "yaziresmi", $single = true); ?>.jpg<?php } ?>" style="margin:-3% 0 0 -3%; width:110%; height:110%;  opacity:0.6;filter:alpha(opacity=60)">
</div>

<?php
}
?>

Kaynak