arama

WordPress Tema Entegre – Single.php Resim Ayarları

Wordpress
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • paylaş
  • Serkan Erdoğan
  • 1 Star2 Stars3 Stars4 Stars5 Stars (1 Kişi oy verdi, 5 üzerinden ortalama puan: 5,00. Bu yazıya oy vermek ister misiniz?)
    Loading...

WordPress derslerimize kaldığımız yerden devam ediyoruz. Bir önceki dersimizde Single.php’de SEO ayarlarını yapmayı öğrenmiştik. Şimdi ki dersimizde ise yazı içeriğine eklenen resimlerin düzenlenmesini yapacağız çünkü normal standartlarda yazı içerisine resim eklerseniz resimler düzgün durmayacak yazılarınızı kaydıracak ve buda kötü bir görüntü verecektir. Geçmiş dersimizi kaçırdıysanız yada okumadıysanız öncelikle onu okumanızı tavsiye ediyorum, bkz; WordPress Tema Engtegre – Single.php SEO Ayarları

Şimdi ise bu yazımızda yukarıda bahsettiğim gibi yazı içerisine eklenen resimlerin düzenlenmesini yapacağız.  Normal şartlarda resim eklendiğinde yazı içerisine bozuk şekilde gelmektedir hatta resmi sağa, sola ve ortaya hizalama işlemi yaptığınızda da aynı sıkıntı oluşmaktadır. Az önce bahsettiğim şeyi de aşağıya eklediğim resim ile anlatmaya çalışacağım.

WordPress Caption

Yukarıda gördüğünüz Görünüm Ayarları kısmında Hizala seçeneğinden resmi herhangi bir yere hizalama işlemi yaptığınızda kaymalar olacaktır bunları çözmek için Style.css dosyamızda bir takım değişiklikler ve eklemeler yapmamız gerekmektedir.

Bunun için öncelikle bozulan hizalama ayarlarından başlayalım. Bunu gidermek aslında çok kolay ve tema yapımı için artık standart haline gelmiş ve bilmeniz gereken bir şeydir. Aşağıda CSS kodları veriyorum buradan alarak doğrudan Style.css dosyanıza yapışırabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
.alignleft{ //Sola hizalama için yazılan görselleştirme kodudur.
display: inline;
float: left;
}
.alignright{ //Sağa hizalama için yazılan görselleştirme kodudur.
display: inline;
float: right;
}
.aligncenter{ //Ortaya hizalama için yazılan görselleştirme kodudur.
display: block;
margin-right: auto;
margin-left: auto;
}

 Evet yukarıda verdiğim bu kodları kullandığınızda bu kayma problemi düzelecektir fakat Tam Boyutlar ile eklediğimiz bir görsel div’den dışarıya taşacaktır. Şimdi ise tam görsellerde oluşan bu kaymayı ve taşmayı düzeltelim. Bunun için ise yeniden sizlere kod vereceğim fakat burada benim kullandığım ‘.main-content‘ classını sizler içeerik yazınızın olduğu divin class’ı ile değiştirmelisiniz. Yada diğer bir söylem ile tam boyutlu resmin içerisinde bulunduğu divin class’ı ile değiştirmelisiniz.

1
2
3
4
5
6
.main-content img { //Buradaki main-content class'ını sizler kendi div classınız ile değiştirmelisiniz.
display: block;
max-width: 100%;
height: auto;
padding: 5px;
}

 Yukarıda verdiğim bu kodu da kullandığımızda tam boyutlu görselinde divimizin içerisine oturduğunu göreceksiniz.

Görsellerin Alt Yazı(Caption)ların Düzenleme

Evet bunu da sizlere anlatacağım fakat öncelikle Caption(Altyazı) Nedir? buna değinmek gerektiğini düşünüyorum. Altyazılar resimlerimizin anahtar kelimeleridir örneğin bir resmin altyazı kısmına(ki buda yukarıdaki resimde mevcut) ‘teslax’ yazdığımızda Google Görsellere ‘TeslaX’ yazıldığında görselimizin çıkmasını sağlamaktadır. Ayrıca bu altyazılar da resimle birlikte kullanıcılara gösterilmektedir aşağıdaki örnek resimde bunu rahat bir şekilde görebilirsiniz.

Wp-Caption Nedir?

Yukarıdaki resimde ‘Here is….’ diye devam eden cümle resmin Altyazısıdır. Bunları normalde resime eklediğimizde bizim resimlerin altındaki gibi bir yazı halinde gözükecektir. Bunu değiştirmeyi sizlere anlatacağım. Bunu için ise aşağıda verdiğim kodları kullanarak istediğiniz gibi özelleştirebilirsiniz.

1
2
3
4
5
6
7
8
.wp-caption{
display: block;
max-width: 100%;
height: auto;
}
.wp-caption-text{
//Bu kısıma altyazı ile ilgili bütün düzenlemeleri yapabilirsiniz arkaplan reni, yazı rengi, yazı kalınlığı vb...
}

 Bu dersimizde anlatacaklarım bu kadardı bir diğer derste görüşmek üzere eğer sorularınız olursa aşağıdan yorum olarak sormayı unutmayın.