WordPress’te SVG Görüntü Dosyaları Nasıl Eklenir (3 Basit Çözüm)

WordPress sitenize SVG dosyaları eklemek mi istiyorsunuz?

WordPress varsayılan olarak neredeyse tüm popüler resim, ses ve video dosyası formatlarını yüklemenize izin verir. Ancak SVG bunlar arasında değildir. Bunun nedeni, görüntü formatıyla ilgili potansiyel güvenlik endişeleri olmasıdır, ancak bunları kullanmanın güvenli yolları vardır.

Bu makalede, WordPress’te SVG’yi nasıl kolayca ve güvenli bir şekilde ekleyeceğinizi göstereceğiz.

SVG nedir?

SVG veya Ölçeklenebilir Vektör Grafikleri, XML işaretleme dilini kullanarak vektör grafiklerini tanımlayan bir dosya formatıdır. SVG’nin ana faydası, kaliteyi kaybetmeden veya herhangi bir pikselleşme olmadan görüntüleri büyütmenize izin vermesidir.

SVG nasıl çalışır?

Ölçeklenebilir Vektör Grafikleri (SVG), XML kullanarak iki boyutlu çizimleri görüntüleyen bir teknolojidir. PNG, GIF veya JPG gibi yaygın olarak kullanılan görüntü formatlarından farklıdır.

Bir PNG veya JPG görüntü dosyası alıp yakınlaştırırsanız, görüntünün bulanıklaşmaya ve pikselleşmeye başladığını fark edeceksiniz.

Vektör grafikleri piksel kullanmaz.

Bunun yerine, görüntülediğiniz grafiği koordinatlar olarak tanımlayan iki boyutlu bir harita kullanırlar. Siz yakınlaştırdıkça görüntü pikselleşmez çünkü pikselleşemez.

Bu sayede vektör grafiklerini kalite kaybı olmadan büyütebilirsiniz. En önemlisi, SVG görüntülerinin dosya boyutu PNG veya JPG dosyalarından çok daha küçük olabilir, bu da onları görüntü biçimlendirme için mükemmel bir seçim haline getirir.

WordPress hızınızı ve performansınızı artırmak amacıyla dosya boyutlarını sıkıştırmak için görüntü düzenleme araçlarını da kullanabileceğinizi unutmayın.

Vektör grafikleri genellikle simgeler, simge yazı tipleri, web sitesi logoları ve marka görselleri için kullanılır. Şirket logonuz, simgeleriniz veya diğer grafikleriniz için WordPress’e SVG dosyaları eklemek isteyebilirsiniz.

Her ne kadar kulağa hoş gelse de SVG dosyaları biraz güvensiz olabilir. Bu yüzden WordPress varsayılan olarak SVG dosya yüklemelerini desteklemez.

WordPress’te bir SVG resmi yüklerseniz, aşağıdaki hata mesajını görürsünüz:

Üzgünüz, bu dosya türüne güvenlik nedeniyle izin verilmemektedir.

WordPress’te SVG ile İlgili Güvenlik Sorunları

SVG dosyaları HTML’ye benzeyen XML biçimlendirme dilinde kod içerir. Tarayıcınız veya SVG düzenleme yazılımınız, çıktıyı ekranda görüntülemek için XML işaretleme dilini ayrıştırır.

Ancak bu, web sitenizi olası XML güvenlik açıklarına açar. Kullanıcı verilerine yetkisiz erişim sağlamak, kaba kuvvet saldırılarını veya siteler arası komut dosyası saldırılarını tetiklemek için kullanılabilir.

Bu makalede paylaşacağımız yöntemler SVG dosyalarını sanitize ederek güvenliklerini artırmaya çalışacaktır. Ancak bu eklentiler kötü amaçlı kodların yüklenmesini veya enjekte edilmesini tamamen engelleyemez.

En iyi çözüm, yalnızca güvenilir kaynaklar tarafından oluşturulan SVG dosyalarını kullanmak ve SVG yüklemelerini yalnızca güvenilir kullanıcılarla kısıtlamaktır.

Güvenlik hakkında daha fazla bilgi edinmek için yeni başlayanlar için eksiksiz WordPress güvenlik kılavuzumuza göz atın.

Bununla birlikte, SVG dosyalarını WordPress’te 3 yöntemden birini kullanarak nasıl kolayca ve güvenli bir şekilde kullanabileceğimize bir göz atalım.

Video Eğitimi

Yazılı talimatları tercih ediyorsanız, okumaya devam edin.

Yöntem 1. WPCode Kullanarak WordPress’te SVG Dosyalarına İzin Verin (Önerilen)

WordPress’e SVG yüklemelerine güvenli bir şekilde izin vermenin en basit ve en kolay yolu, mevcut en güçlü kod parçacıkları eklentisi olan WPCode‘u kullanmaktır.

WPCode, ek sayfalarını devre dışı bırakmaktan Klasik Yazı Düzenleyicisini kullanmaya veya SVG dosya yüklemelerine izin vermeye kadar sitenizdeki birçok tek kullanımlık eklentinin yerini alabilecek önceden yapılandırılmış kod parçacıklarından oluşan geniş bir kitaplıkla birlikte gelir.

Öncelikle, ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekecektir. Ayrıntılı talimatlar için WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, WordPress yönetici panelinizde Kod Parçacıkları ” Parçacık Ekle bölümüne gitmelisiniz. Sadece ‘svg’ kelimesini arayın ve farenizi ‘SVG Dosyalarının Yüklenmesine İzin Ver’ seçeneğinin üzerine getirin.

Ardından, ‘Snippet kullan’ seçeneğine tıklayabilirsiniz.

Ardından, WPCode’un kodun çalışması için gereken tüm ayarları zaten yapılandırmış olduğu ‘Snippet’i Düzenle’ sayfasına yönlendirileceksiniz.

Tek yapmanız gereken ‘Aktif’ anahtarına tıklamak ve ardından ‘Güncelle’ düğmesine basmaktır.

Artık SVG dosyalarını WordPress tarafından bir hata veya uyarı mesajı verilmeden yükleyebileceksiniz.

Daha sonra WordPress web sitenizdeki diğer görsellere davrandığınız gibi davranabilirsiniz.

Varsayılan olarak, WPCode kod parçacığı yalnızca Yönetici rolüne sahip kullanıcıların WordPress’e SVG eklemesine izin verir.

Aşağıdaki resimde gördüğünüz kod parçacığının 14-16. satırlarını silerek diğer tüm kullanıcı rollerine de izin verebilirsiniz.

Ayrıca, bu satırların her birinin başına iki eğik çizgi ‘//’ ekleyerek onları açık ten rengine dönüştürerek ‘yorumlayabilirsiniz’. WPCode, kod yerine yorum olarak gördüğü parçacığın hiçbir bölümünü çalıştırmayacaktır.

Bunun bir örneğini aşağıdaki resimde 11-13. satırlarda görebilirsiniz.

Her iki durumda da, kod kaldırıldığında, tüm kullanıcılar WordPress sitenize SVG dosyaları yükleyebilecektir. Yaptığınız değişiklikleri kaydetmek için ‘Güncelle’ düğmesine tıkladığınızdan emin olun.

Yöntem 2. SVG Desteğini Kullanarak WordPress’te SVG Dosyalarını Yükleme

Bu yöntem SVG Destek eklentisini kullanır ve WordPress yazılarında ve sayfalarında satır içi SVG’leri görüntülemenize ve bunları yükleme iznine sahip olanları kontrol etmenize olanak tanır.

Öncelikle SVG Support eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için Ayarlar ” SVG Desteği sayfasını ziyaret etmeniz gerekir.

Ayarlar sayfasında, “Yöneticilerle Kısıtla?” seçeneğinin yanındaki kutuyu işaretlemeniz gerekir. Bu, yalnızca bir site yöneticisinin WordPress’te SVG dosyalarını yüklemesine izin verecektir.

Bir sonraki seçenek gelişmiş modu açmaktır. Bu seçeneği yalnızca CSS animasyonları ve satır içi SVG oluşturma gibi gelişmiş özellikleri kullanmak istiyorsanız işaretlemeniz gerekir.

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Artık yeni bir gönderi oluşturabilir veya mevcut bir gönderiyi düzenleyebilirsiniz. Gönderi düzenleyicide, SVG dosyanızı diğer resim dosyalarını yüklediğiniz gibi yükleyeceksiniz. Düzenleyiciye bir resim bloğu ekleyin ve ardından SVG dosyasını yükleyin.

Artık SVG dosyalarını WordPress’e yükleyebilecek ve yerleştirebileceksiniz.

Yöntem 3. WordPress’te Güvenli SVG Kullanarak SVG Dosyalarını Yükleme

Bu yöntem de bir eklenti kullanır ve WordPress’e yüklenen SVG dosyalarının sterilizasyonunu yapmanıza olanak tanır.

Yapmanız gereken ilk şey Safe SVG eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Eklenti kutudan çıktığı gibi çalışır ve yapılandırmanız gereken herhangi bir ayar yoktur. Sadece devam edebilir ve SVG dosyalarını yüklemeye başlayabilirsiniz.

Dezavantajı ise bu eklentinin WordPress sitenizde yazı yazabilen tüm kullanıcıların SVG yüklemesine izin vermesidir. Kimlerin dosya yükleyebileceğini kontrol etmek için eklentinin premium sürümünü satın almanız gerekecektir.

Umarız bu makale WordPress’te SVG dosyalarını nasıl güvenli bir şekilde ekleyeceğinizi öğrenmenize yardımcı olmuştur. WordPress’teki en yaygın görsel sorunlarının nasıl çözüleceği ve en iyi SEO eklentileri ve araçları hakkındaki makalemizi de görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.