WordPress SVG Görsel Ekleme Rehberi

Görseller, bir web sitesinin görsel kalitesini ve kullanıcı deneyimini doğrudan etkileyen öğelerdir. Özellikle vektörel görsellerin esnekliği sayesinde, tasarımsal bütünlük korunurken performans da artırılabilir. Bu nedenle birçok web geliştirici ve tasarımcı, WordPress sitelerinde SVG görseller kullanmayı tercih eder. Ancak WordPress, varsayılan olarak SVG dosyalarının yüklenmesine izin vermez. Bu yazıda, WordPress SVG görsel ekleme sürecini adım adım inceleyecek ve güvenli kullanım için ipuçları paylaşacağız.

SVG Nedir?

SVG (Scalable Vector Graphics), XML tabanlı bir vektörel görüntü formatıdır. Diğer görsel formatlardan farklı olarak piksel değil, şekil ve çizgi temelli çalışır. Bu sayede herhangi bir çözünürlükte kalite kaybı olmadan ölçeklenebilir.

SVG Formatının Avantajları:

• Her çözünürlükte net görüntü

• Dosya boyutu açısından oldukça küçük

• Kodlanabilir ve düzenlenebilir

• Animasyon destekler

• Arama motorları tarafından taranabilir

WordPress Neden SVG’yi Desteklemiyor?

WordPress, güvenlik nedenlerinden dolayı SVG dosyalarının doğrudan yüklenmesini engeller. Çünkü SVG’ler XML yapıda olduğundan kötü amaçlı kodlar içerebilir. Bu nedenle SVG kullanımı sırasında güvenlik önlemleri almak çok önemlidir.

WordPress SVG Görsel Ekleme Yöntemleri

1. Kod İle SVG Desteği Ekleme

functions.php dosyasına aşağıdaki kodu ekleyerek SVG yüklemeyi etkinleştirebilirsiniz:

Ancak bu yöntem güvenlik önlemleri olmadan SVG yüklemeye izin verir. Sadece güvenilir kaynaklardan aldığınız SVG dosyalarını yüklediğinizden emin olun.

2. Eklenti Kullanarak SVG Ekleme

Eklenti kullanmak, hem daha güvenli hem de kullanıcı dostu bir yöntemdir. Aşağıda popüler SVG eklentileri listelenmiştir:

Safe SVG

Bu eklenti, yüklenen SVG dosyalarını sanitize ederek güvenli hale getirir. Ayrıca medya kitaplığına önizleme desteği sunar.

SVG Support

Gelişmiş bir eklenti olan SVG Support, inline SVG entegrasyonu da sağlar. Gutenberg editörleriyle uyumludur.

WP SVG Icons

Hazır ikon kütüphanesi ve SVG yönetimi sağlayan bu eklenti, projelerinizde hızlı çözüm sunar.

SVG Dosyaları Güvenli Hale Nasıl Getirilir?

SVG dosyaları içeriği XML olduğu için kolayca düzenlenebilir ve içine zararlı scriptler eklenebilir. Bu nedenle aşağıdaki adımları izlemelisiniz:

• Yalnızca güvenilir kaynaklardan SVG alın.

• SVG’leri bir XML editör ya da kod editöründe açarak kontrol edin.

• SVG Sanitizer gibi araçlarla dosyaları temizleyin.

• WordPress’te kullanmadan önce eklentiyle koruma sağlayın (örneğin: Safe SVG).

WordPress’te SVG Nasıl Gösterilir?

SVG dosyasını medya kitaplığına ekledikten sonra, Gutenberg veya Klasik Editör’de kolayca yerleştirebilirsiniz. Aşağıdaki yöntemler kullanılabilir:

Gutenberg ile:

• Blok ekleyerek “Görsel” seçin.

• SVG dosyasını medya kitaplığından seçin.

Klasik Editör ile:

• “Medya Ekle” butonuyla SVG dosyasını seçin.

• Görsel yerleşimi otomatik olarak sağlanır.

Performans Açısından SVG Kullanımı

SVG dosyaları küçük boyutlu olduğu için, sitenizin yüklenme süresini olumlu etkiler. Özellikle ikonlar, logolar ve basit şekiller için PNG yerine SVG kullanmak, hem kalite hem de hız açısından avantaj sağlar.

SVG ile yapılabilecekler:

• Logo ve ikon kullanımı

• Yüksek çözünürlüklü illüstrasyonlar

• CSS animasyonlu grafikler

• Harita ve etkileşimli görseller

SEO Açısından SVG Kullanımı

SVG, içeriği XML formatında olduğundan arama motorları tarafından taranabilir. Ancak dikkat edilmesi gereken birkaç nokta vardır:

• SVG’ye “title” ve “desc” etiketleri ekleyin.

• Dosya adını anlamlı yapın (örnek: site-logo.svg).

• Alternatif metin (alt text) mutlaka girin.

• SVG’leri inline yerleştiriyorsanız, HTML tarafında SEO etiketlemeyi unutmayın.

Karşılaşabileceğiniz Sorunlar ve Çözümleri

SVG yüklenmiyor

• Hosting sağlayıcınız SVG MIME türüne izin vermiyor olabilir.

• upload_mimes filtresini kontrol edin.

SVG görünmüyor

• CSS ile boyutlandırılmamış olabilir.

• “width” ve “height” değerlerini kontrol edin.

SVG bozuk veya hata veriyor

• Dosya içinde zararlı komut olabilir.

• SVG dosyasını SVGOMG ile optimize edin.

Hangi Durumlarda SVG Kullanılmamalı?

• Karmaşık görseller (fotoğraflar) için uygun değildir.

• Eski tarayıcı desteği gerekliyse dikkatli olunmalı.

• İçeriğe özel özel script’ler varsa, güvenlik riski doğurabilir.

Alternatif: WebP ve PNG ile Karşılaştırma

WordPress SVG görsel ekleme işlemi doğru yapıldığında, hem site hızı hem de görsel kalite açısından büyük avantaj sağlar. Ancak güvenlik en önemli konudur. Dosyaları temizleyerek, güvenli kaynaklardan edinerek ve iyi eklentilerle destekleyerek bu işlemi risksiz hale getirebilirsiniz.

Diğer Bloglarımızdan: WooCommerce Sosyal Medya Giriş Eklentisi