WordPress'te SVG Desteğini Etkinleştirin

WordPress, kullanıcıların epeyce farklı türde görüntü dosyası yüklemesine olanak tanır. PNG ve JPG gibi olağan şüphelileri muhtemelen tanıyacaksınız. Vektör grafikleri gibi diğer dosya türlerini görüntülemek daha sorunlu olabilir.

Neyse ki, vektör dosyalarını web sitenize dahil etmenin birkaç yolu vardır. Yerel bir özellik olmasa da Ölçeklenebilir Vektör Grafikleri (SVG) dosyaları, WordPress sitelerinde iki boyutlu görüntüleri görüntülemek için kullanılabilir. Küçük bir yeniden yapılandırmayla, bu dosya türünü kullanarak bazı logolarınızı ve diğer grafiklerinizi optimize edebileceksiniz.

Not: WP Engine ile barındırıyorsanız, SVG dosyalarında yerel olarak GZIP sıkıştırmasını destekliyoruz.

Bu makalede, SVG dosyalarının ne olduğu ve bunları neden kullanmak isteyebileceğiniz hakkında daha fazla bilgi edineceğiz. Ardından, web sitenizde kullanımlarını etkinleştirmenin iki yolunu inceleyeceğiz. Ayrıca, almak isteyebileceğiniz bazı önemli güvenlik önlemlerini de ele alacağız. Başlayalım!

SVG Nedir?

Bir SVG dosyası, bir tür vektör görüntüsüdür. Vektör dosyaları, daha yaygın görüntü dosyası türlerinden farklı bir şekilde oluşturulur. Örneğin, bir JPG binlerce pikselden oluşur. Öte yandan, bir SVG dosyasında durum böyle değildir.

Vektör görüntüleri daha çok bir dizi yazılı talimat gibidir. Daha büyük bir görüntü oluşturan pikseller içermezler. Bunun yerine, iki boyutlu bir görüntü oluşturan şema benzeri bir veri kümesi içerirler. Bu, SVG dosyalarını kullanmanın bazı benzersiz avantajları olduğu anlamına gelir.

Neden SVG'yi Kullanmalı?

SVG'lerin çeşitli avantajları vardır. Oldukça ölçeklenebilir olduklarından, görüntünün kalitesini etkilemeden boyutu gerektiği gibi değiştirebilirsiniz. Sizin de çok iyi bildiğiniz gibi, bir JPG'yi boyut olarak büyütmeye çalışırsanız, kalite çok hızlı bir şekilde kullanılamaz bir düzeye düşer.

SVG'lerin kullanışlı olabileceği yer burasıdır. Geleneksel fotoğrafları sergilemek için tasarlanmasalar da, web sitenizdeki iş logoları, simgeler ve diğer basit grafikler için mükemmel bir seçimdir.

Ek olarak, SVG dosyaları diğer görüntü türlerinden önemli ölçüde daha küçük olma eğilimindedir. Bu, sitenizin grafiklerle tıkanmayacağı anlamına gelir. Dahası, SVG dosyaları Google tarafından dizine eklenir ve oldukça uzun bir süredir böyledir. Bu, sitenizin Arama Motoru Optimizasyonu (SEO) için gerçek bir nimet olabilir.

WordPress'e SVG Nasıl Yüklenir?

WordPress, kutudan çıkar çıkmaz SVG desteği içermediğinden, bunları web sitenize dahil etmek için biraz daha fazla çalışmanız gerekecek. Sonraki birkaç bölümde, SVG dosyalarını bir eklentiyle ve manuel bir işlemle web sitenize nasıl ekleyeceğinizi ele alacağız.

Yöntem 1: Bir Eklenti Kullanın

Birçok WordPress görevinde olduğu gibi, eklentiler SVG desteğini etkinleştirmeyi basitleştirebilir. Tek yapmanız gereken doğru aracı seçmek ve birkaç ayarı yapılandırmak.

1. Adım: Eklentiyi İndirin

Öncelikle, bir SVG eklentisi indirip yüklemeniz gerekir. SVG Desteğini öneririz:

Eklentiyi kurup etkinleştirdikten sonra, WordPress kontrol panelinizde Settings > SVG Support altında yeni bir menü seçeneğiniz olacak. Burada, web siteniz için SVG dosyalarına nasıl stil uygulayacağınıza ilişkin talimatlar alacaksınız:

Ek olarak, birkaç önemli yönetim ayarını yapılandırabileceksiniz. Bu, SVG yükleme ayrıcalıklarının yalnızca yöneticilerle sınırlandırılmasını içerir:

Bundan sonra, SVG dosyalarını doğrudan Medya Kitaplığınıza yükleyebileceksiniz. Ancak, önce ilgilenmeniz gereken birkaç önemli öğe daha var.

2. Adım: Sunucunuzdaki SVG Dosyaları için GZip desteğini etkinleştirin

Bu adıma nasıl yaklaşacağınız, web barındırıcınıza ve sunucu kurulumunuza bağlı olacaktır. Örneğin, burada, WP Engine'de, belirli bir dosya türleri listesi için GZip zaten etkindir. Bununla birlikte, “image/svg+xml” bunlardan biri değil.

Bu türü web siteniz için listeye eklemek, SVG dosyalarınızın uygun ve hızlı bir şekilde optimize edilmesini sağlayacaktır. Her şeyin sorunsuz çalışması için bu dosya türünü .htaccess dosyanıza eklemeniz gerekir.

3. Adım: Eklentinin Dosyaları Doğru Şekilde Koruduğundan Emin Olun

SVG dosyalarını kullanmanın dezavantajlarından biri ve bu dosya türünün henüz WordPress çekirdeğine dahil edilmemesinin birincil nedeni, güvenlik sorunlarından kaynaklanmaktadır. SVG dosyaları XML tabanlı olduğundan, diğer risklerin yanı sıra Harici Varlık saldırılarına karşı savunmasızdır.

SVG eklentinizi yapılandırdığınızda, SVG yükleme erişimini yalnızca yöneticilerle sınırlamanız önerilir. Ancak daha da güvenli bir yaklaşım, SVG dosyalarınızı yüklemeden önce 'temizlemek'tir. Bu, sitenizi saldırılara açık bırakabilecek gereksiz XML kodlarını ortadan kaldırır.

SVG Support eklentisi, otomatik temizleme içermez, ancak bunu yapan başka eklentiler de vardır. Güvenli SVG bunlardan biridir:

Alternatif olarak, kendi dezenfektanınızı da kurabilir ve bağımsız olarak kullanabilirsiniz. Safe SVG'nin yaratıcısı, eklentinin temizleyici kodunu herkesin kullanması için GitHub'da sağladı.

WordPress web sitenizde SVG'leri etkinleştirmek için bir sonraki yöntemi kullanmayı planlıyorsanız, kendi dezenfektanınızın yerinde olması da iyi bir seçenektir.

Yöntem 2: SVG Dosya Yüklemelerini Manuel Olarak Etkinleştirin

Bir eklenti kullanmak yerine ellerinizi kirletmeyi tercih ediyorsanız, WordPress sitenizin SVG dosyalarını kabul etmesini manuel olarak etkinleştirebilirsiniz. Ardından, bu sürecin nasıl çalıştığına bir göz atacağız.

1. Adım: Sitenizin Functions.php Dosyasını Düzenleyin

Başlamak için web sitenizin functions.php dosyasını düzenlemeniz gerekir. Bunu yapmak için kontrol panelinizde Görünüm > Temaları Düzenle'ye gidebilir ve functions.php dosyasını seçebilirsiniz:

Alternatif olarak, sitenizin dosyalarına FileZilla gibi bir Dosya Aktarım Protokolü (FTP) uygulaması kullanarak erişebilirsiniz.

Her iki durumda da, web sitenizde herhangi bir büyük çalışma yapmadan önce bir alt tema oluşturmak veya bir geliştirme ortamına geçmek en iyisidir. Bu, siz değişiklik yaparken canlı sitenizi zarar görmekten koruyacaktır.

2. Adım: Bir Kod Parçacığı Ekleyin

Ardından, functions.php dosyanıza aşağıdaki kod parçacığını eklemeniz gerekir:

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Bundan sonra, SVG resimlerini Medya Kitaplığınıza yükleyebileceksiniz. Orada, diğer resim dosyası türlerinde olduğu gibi onları görüntüleyebilir ve onlarla etkileşimde bulunabilirsiniz.

3. Adım: Güvenli Erişim ve SVG Yükleme İzinlerini Sınırlayın

Daha önce de belirttiğimiz gibi, SVG dosyalarının etkinleştirilmesi belirli riskler içerir. Sitenizi güvende tutmak için, özel kullanıcı rolleri oluşturarak SVG'ler için yükleme izinleri ayarlayabilirsiniz. Bunu gerçekleştirmek için User Role Editor veya WPFront User Role Editor gibi bir eklenti kullanabilirsiniz.

Bu eklentiler, mevcut kullanıcı rolleriniz için erişim ve izin düzeylerini özelleştirmenizi sağlar. Başka bir deyişle, hangi kullanıcıların SVG'leri yükleme iznine sahip olacağını belirlemenize izin verirler. Bu, bu dosyaların güvenliğini takip etmenize yardımcı olacaktır.

WP Motoru ile Güvende Kalın

Yerel olarak WordPress, SVG dosyalarının kullanımına izin vermez. Bu dosyalar logoları ve diğer grafikleri görüntülemek için en iyi seçenek olma eğiliminde olduğundan, bu talihsiz bir durumdur. İyi haber şu ki, favori geliştirici kaynaklarımızdan bazılarının yardımıyla, sitenizde SVG dosyalarının kullanımını etkinleştirebilecek ve güvenliğini sağlayabileceksiniz.

Ayrıca, WordPress barındırma planlarımızda profesyonel desteğe ve iyi geliştirilmiş web sitesi güvenlik çözümlerine erişeceğinizi unutmayın. Sitenizi bugün bizimle güvence altına alın!