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.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Reuben says
Trying to get this to work using the Gutenberg editor and instead I get the following error: This block contains unexpected or invalid content.”
I know there’s no mistake. I’m adding a CSS class in the html but Gutenberg doesn’t like it.
Aboud Dandachi says
The plugin you mentioned apparently hasnt been tested with the last 3 major releases of WordPress. Would not be a good idea to use it then.
WPBeginner Support says
We will be sure to look into updating our article when we are able. For not tested with the version of WordPress message you would want to take a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Yönetici
Michael Torres says
Very informative. Thank you for helping us as beginners.
WPBeginner Support says
Thank you, glad you like our content
Yönetici
Joey says
Excellent. Thank you for the concise and informative post.
WPBeginner Support says
You’re welcome
Yönetici
Eduardo says
Hi, nice article!
Do you know any way to put a border with a “wood style”?
I’m making a wordpress site to show landscape photos and i want to use a wood style border so people couldsee how the picture will be as a real photo frame , can you help me with this?
Thanks!
david says
Very very talented article not so many people on the net and in wp word know how to make thing simple and clear !
thanks i got my beautiful nice border set nicely
dav from france
Erin says
This looks beautiful, so clean.
Is there any way to have images and text (with links) within a box on wordpress. Creating a book reviews site so will have to do this many times
Connor Rickett says
Nice little article. There’s a plugin for every basic thing in WordPress, which is what makes it so friendly to beginners. But, you can dive right into the guts of it if you don’t want to run a plugin for something as small as borders (especially since your site is faster without them).
It was good of you to show the child theme option, since this will add the borders to all images, past, present, and future.
You might also mention that, by changing the border width and color, you can create “boxes” and “frames” around the images, using nothing but what you’ve got up here already.