WordPress’e SVG yüklemek

WordPress alt yapısını kullanan sitemizin ortam kütüphanesine izin verilen bazı görsel formatları .jpg, .jpeg, .png bunların yanı sıra artık günümüz web sitelerinde popüler olan .svg uzantısı da yerini almış bulunmakta. Fakat WordPress daha bu konuda .svg uzantıları dosyalarımızı ortam kütüphanemize yüklemeye izin vermiyor. Bu format türünü yükleyebilmemiz için WordPress alt yapılı sitemize .svg yüklemek için ya eklenti kullanmamız gerekiyor ya da functions.php dosyamıza bir kod bloğu ekleyerek WordPress sitemize .svg yetisi kazandırmamız gerekmektedir. Ben WordPress alt yapılı sitelerimizde olabildiğince az eklenti kullanma taraftarıyım bu şekilde sistemlerimize çok fazla yük bindirmemiş oluyoruz. Sistemlerimiz ne kadar az yük ile çalışırsalar sitelerimizin hızı o kadar az etkilenecektir. Sitelerimizin hızlı olması Google açısından önemli kriterler arasındadır.

• WordPresse eklenti ile .svg yüklemek
• WordPress functions.php müdahale ederek .svg yüklemek

WordPress eklenti ile .svg yükleme yetisi kazandırmak

WordPress panelimizden “Eklentiler” Yeni ekle diyerek arama kısmına ” Safe SVG ” yazarak karşımıza çıkan bu eklentiyi yükleyip etkinleştirmemiz, sistemimize .svg uzantılı dosya formatlarını yüklememiz için yeterli olan bir eklentidir. SVG dosya formatlarını yüklemek için birçok eklenti mevcut fakat sistemimizi daha az yoracak ve eklenti ayarlarına dokunmadan sadece etkinleştirerek ortam kütüphanemize .svg uzantılı görsellerimizi atmaya izin verecektir. Tek yapmanız gereken Safe SVG eklentisini panelinizden yükleyip etkinleştirmeniz.

WordPress functions.php müdahale ederek .svg yüklemek

WordPress sistemimize eklenti yüklemeyerek birçok eklentinin yaptığı işlemleri gerçekleştirebiliriz. Son kullanıcı olarak bazen sistem dosyalarına müdahale edecek bilgimiz olmuyor. Böyle zamanlarda WordPress eklentileri büyük bir yardımcı olabiliyor bizlere. Fakat biraz teknik bilgi ile sitemize eklenti yükleyip sistemlere yük yüklemektense functions.php veya wp-config.php dosyalarına kod blokları ekleyerek birçok işlemi rahatlıkla yapabiliriz. functions.php dosyası tema klasörümüzün içinde bulunan kullandığımız temaya işlevsellik kazandırmak için yazılmış kod bloklarının bulunduğu dosyadır. wp-config.php dosyamız WordPress kaynak dosyalarından biridir, bu dosya içerisinde veritabanı bilgilerinden ziyade sunucu ile ilgili bazı kod blokları da bulunmaktadır. WordPress sitemizde çoğunlukla functions.php dosyasına müdahalede bulunuruz. WordPress .svg yüklemek için de functions.php dosyamıza kod bloğumuzu ekleyeceğiz.

functions.php dosya yolu wp-content/themes/temaadı/functions.php şeklindir. Buraya ya ftp üzerinden ya da CPanel, Plesk panel üzerinden erişim sağlayabilirsiniz. Functions.php dosyası içerisinde en alt kısa aşağıda bulunan kod bloğunu ekleyerek kaydet demeniz yeterli olacaktır. Kod bloğunu ekledikten sonra siz de sistemlerinizde popüler olan .svg uzantısını WordPress ortam kütüphanenize yükleyebileceksiniz.

Güncel WordPress .SVG yükleme kodu aşağıdaki gibidir; 

// Wp v4.7.1 and higher
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
  $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' );

Yukarıda kod satırları çalışmazsa aşağıdaki kodları deneyebilirsiniz.

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

Web sitenizi yenilemek veya web tasarım fiyatları konusunda güncel bilgi almak isterseniz benimle hızlıca iletişime geçebilirsiniz.