WordPress’te Bir Görselin Etrafına Kenarlık Ekleme

WordPress’te görsellerinizin etrafına kenarlık eklemek ister misiniz? Yakın zamanda kullanıcılarımızdan biri WordPress’te bir görselin etrafına kenarlık eklemenin kolay bir yolunu sordu. CSS kullanabilseniz de, yeni başlayanlar için kafa karıştırıcıdır. Bu makalede, herhangi bir HTML veya CSS kodunu düzenlemeden WordPress’te resim kenarlığı eklemenin kolay bir yolunu göstereceğiz.

Video Eğitimi

Videoyu beğenmediyseniz veya daha fazla talimata ihtiyacınız varsa, okumaya devam edin.

Yöntem 1: WordPress’te Görüntü Kenarlığı Eklemek için Bir Eklenti Kullanma

Bu yöntem, herhangi bir HTML veya CSS düzenlemek istemeyen yeni başlayanlar içindir. Yapmanız gereken ilk şey WP Image Borders eklentisini yüklemek ve etkinleştirmektir. Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Ayarlar ” WP Image Borders ‘ı ziyaret etmeniz gerekir.

Eklenti ayarlarındaki ilk bölüm görselleri hedeflemenizi sağlar. ‘Blog yazılarındaki tüm görsellere kenarlık ekle’ seçeneğinin yanındaki kutuyu işaretleyerek WordPress yazılarınızdaki tüm görsellere kenarlık ekleyebilirsiniz.

Alternatif olarak, kenarlıklara sahip olması için belirli CSS sınıflarını hedefleyebilirsiniz. Bu makalenin ilerleyen bölümlerinde belirli bir görüntüye nasıl CSS sınıfı ekleyeceğinizi göstereceğiz. Şu anda CSS sınıfına .border-image gibi herhangi bir şey koyabilirsiniz.

Eklenti ayarlarındaki ikinci bölüm, kenarlık ayarlarını özelleştirmenize olanak tanır. Bir kenarlık stili, genişlik, yarıçap ve renk seçebilirsiniz.

Ayarlar sayfasındaki son bölüm resimlerinize alt gölgeler eklemenizi sağlar. Yatay ve dikey mesafe, bulanıklık ve yayılma yarıçapının yanı sıra kutu gölge rengini de girebilirsiniz. Resimlerinize alt gölge eklemek istemiyorsanız, bu alanları boş bırakabilirsiniz.

Eklenti ayarlarınızı saklamak için Değişiklikleri Kaydet düğmesine tıklamayı unutmayın.

İlk seçenek olan ‘Blog gönderilerindeki tüm görsellere kenarlık ekle‘yi seçtiyseniz başka bir şey yapmanıza gerek yoktur.

Tüm blog yazısı resimlerinizde resim kenarlıkları görmelisiniz.

Ancak, yalnızca belirli resimler için kenarlık göstermek üzere ikinci seçeneği seçtiyseniz, bir sonraki adımı izlemeniz gerekir.

WordPress’te Bir Görsele CSS Sınıfı Ekleme

Yalnızca seçilen görüntülerin etrafına kenarlık eklemek istiyorsanız, WordPress’e hangi görüntülerin kenarlıklara sahip olması gerektiğini söylemeniz gerekir. Bunu, kenarlık eklenmesi gereken görsellere bir CSS sınıfı ekleyerek yapabilirsiniz.

Basitçe görselinizi yükleyin ve gönderinize ekleyin. Görseli ekledikten sonra görsel düzenleyicide üzerine tıklayın ve ardından araç çubuğundaki düzenle düğmesine tıklayın.

Bu, resim ayrıntılarınızı gösteren resim düzenleme açılır penceresini getirecektir. Genişletmek için Gelişmiş Seçenekler’e tıklamanız ve ardından resminizin css sınıfını girmeniz gerekir.

İpucu: Bu .border-image çünkü eklenti ayarlarımızda bunu seçtik.

Ardından, görüntü ayarlarını kaydetmek ve güncellemek için güncelle düğmesine tıklayın. Hepsi bu, resminiz artık ek bir sınıfa sahip olacak. WP Image Borders eklentisini kullandığınız için, bu resimde bir kenarlık görünecektir.

Yöntem 2: WordPress’te Görüntü Kenarlıkları eklemek için HTML ve CSS kullanma

CSS/HTML kullanarak resim kenarlıkları eklemek, WordPress’te resimlerinizin etrafına kenarlık eklemenin daha hızlı ve daha çabuk bir yoludur. Bunu yapmanın birçok yolu vardır ve biz size hepsini göstereceğiz. Sizin için en uygun olanı seçebilirsiniz.

WordPress’te Satır İçi Stilleri Kullanarak Kenarlık Ekleme

Resminizi yükledikten ve bir WordPress gönderisine ekledikten sonra, metin düzenleyicisine geçin. Resminiz için HTML kodunu göreceksiniz. Şuna benzer bir şey görünecektir:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />

CSS stilini HTML koduna şu şekilde kolayca ekleyebilirsiniz:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;" />

Kenarlık genişliğini, rengini, dolgusunu ve kenar boşluğunu kendi ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

WordPress Temanıza veya Alt Temanıza Görüntü Kenarlığı Ekleme

WordPress blog yazılarınızdaki ve sayfalarınızdaki tüm görsellere kalıcı olarak kenarlık eklemek istiyorsanız, CSS’yi doğrudan WordPress temanıza veya alt temanıza ekleyebilirsiniz.

Çoğu WordPress teması, genellikle style.css dosyası olan temanın stil sayfasında tanımlanmış bu stil kurallarına zaten sahiptir. Mevcut CSS’yi değiştirebilir veya bir alt temaya kendi CSS’nizi ekleyebilirsiniz.

WordPress tüm görsellere varsayılan görsel sınıfları ekler. Yazılarınızdaki/sayfalarınızdaki resimlerin bir resim kenarlığına sahip olduğundan emin olmak için tüm bu sınıfları hedeflemeniz gerekir. İşte başlamanız için basit bir CSS parçacığı:

img.alignright {
float:right; 
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left; 
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block; 
margin-left: auto; 
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone { 
border:3px solid #EEE; 
}

Resim kenarlıklarını yalnızca ihtiyaç duyduğunuzda kullanmak istiyorsanız resimlerinize CSS sınıfı ekleyebilirsiniz (yukarıya bakın). Temanıza veya alt temanıza bu CSS sınıfı için stil kuralları ekleyin.

img.border-image { 
border: 3px solid #eee;
padding:3px; 
margin:3px;
}

Umarız bu makale WordPress blog resimlerinizin etrafına resim kenarlığı eklemenize yardımcı olmuştur. WordPress sitenizi hızlandırmak için web için optimize edilmiş görsellerin nasıl kaydedileceğine ilişkin kılavuzumuzu da görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook‘ta da bulabilirsiniz.