Wordpress tabanlı sitelerinizdeki makalelere eklediğiniz resimler makalenini görselliği açısından önemlidir. Resimlerin yerleşimleride buna etki etmektedir.Bu makalemizde wordpress bloğundaki makale yazılarında yer alan resimleri sola yada sağa nasıl hizalayarak daha güzel bir içeriğe sahip olabileceğinizi anlatacağız.

Öncelikle css tanımlaması yapalım.

Resmin sola Hizalanması

.solresim {
width:120px;//genişlik
height:120px;//yükseklik
padding:3px;//iç boşluk
border:2px solid #ededed;//2pxlik bir çerçeve verdik
background:#fff;//iç boşluk arkaplanı beyaz olsun
float:left;//sola hizaladık
margin:0 3px 3px 0;//yazı ile resmin bitişmemesi için margin değeri verdik

Üst kodları kullanırken single.php dosyasındaki içerik kodumuzu buluyoruz yani

<?php the_content(); ?>

hemen üzerine resim kodumuzu ekliyoruz.Resim kodumuza cssde tanımladığımız sınıfıda (solresim) ekliyoruz.Alttaki gibi bir görünüm oluşuyor.

<img border="0" src="resimadresi.gif" class="solresim" />
<?php the_content(); ?>

Resmin Sağa Hizalanması

Resmi sağa hizalama işlemide sola hizalamanın aynısıdır.Tek fark css sınıfındaki left kısımını right yapıyoruz ,sagresim sınıf adını kullanıyoruz ve margin değerini soldan veriyoruz yani

.sagresim {
width:120px;//genişlik
height:120px;//yükseklik
padding:3px;//iç boşluk
border:2px solid #ededed;//2pxlik bir çerçeve verdik
background:#fff;//iç boşluk arkaplanı beyaz olsun
float:right;//sağa hizaladık
margin:0 0 3px 3px;//yazı ile resmin bitişmemesi için margin değeri verdik