SVG'leri WordPress'e nasıl yükleyeceğinizi öğrenmek ister misiniz? Bu eğitimde bunu başarmanın yöntemlerini sunacağız..
Web yöneticileri ve web tasarımcıları, çalışmalarında farklı medya dosyası biçimleri kullanmak zorundadır. Günümüzde en popüler biçimlerden biri, XML tabanlı bir vektör biçimi olan SVG'dir. Ne yazık ki, tüm tarayıcılar ve platformlar SVG'yi desteklemez, bu nedenle önce SVG desteğini manuel olarak etkinleştirmeniz gerekir.
Bu makale, SVG Destek eklentisini kullanarak bir WordPress web sitesine SVG dosyalarını yükleme adımlarını kapsayacaktır. Bu belirli medya dosyası biçimini çevreleyen güvenlik sorunları ve SVG'nin neden kullanılmaya değer olduğuyla ilgili birkaç soruyu da yanıtlayacağız.
Başlamak için SVG'yi ve nasıl çalıştığını öğrenelim.
Ancak başlamadan önce, WordPress'i hiç kurmadıysanız öğrenin Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için
O zaman neden burada olduğumuza dönelim.
SVG nedir?
Ölçeklenebilir Vektör Grafikleri (SVG), XML metin tabanlı bir vektör grafik görüntü formatıdır. JPG ve PNG gibi yaygın görüntü biçimleri, piksel adı verilen tonlarca küçük kareden oluşsa da, bu biçim, görüntü özelliklerini tanımlamak için XML biçimlendirme diline dayanır.
Ocak ayında 2022 Dünya çapındaki tüm web sitelerinin %42'si SVG'yi kullanın. Bu yüzde, Ocak 2021'den bu yana, yalnızca web sitelerinin %29,4'ü kullanmış. PNG ve JPG biçimlerine benzer şekilde SVG, Google, Wikipedia ve YouTube gibi yüksek trafikli web siteleri arasında popülerdir.
SVG ile ilgili bir başka harika şey de, tüm büyük tarayıcılar tarafından geniş çapta desteklenmesidir.
işte tarayıcı listesi SVG dosya biçimini destekleyenler:
| denizci | Kısmi destek | Tam destek |
| Bord | - | Sürüm 12-18, 79-96, 97 |
| Firefox | Sürüm 2 | Sürümler 3-94, 95, 96-97 |
| Android için Firefox | - | Sürüm 95 |
| krom | - | Sürümler 4-96, 97, 98-100 |
| Android için Chrome | - | Sürüm 96 |
| Safari | Sürüm 3.1 | Sürüm 3.2-15.1, 15.2, TP |
| Opera | - | Sürümler 10-81, 82 |
| Mini Opera | - | Tüm Sürümler |
| Opera Mobile | - | Sürüm 12-12.1, 64 |
| iOS'ta Safari | - | Sürüm 3.2-15.1, 15.2 |
| Android tarayıcı | Sürüm 3-4.3 | Sürüm 4.4-4.4.4, 96 |
| Android için UC Tarayıcı | - | Sürüm 12.12 |
| Samsung İnternet | - | Sürüm 4-14.0, 15.0 |
| QQ Tarayıcı | - | Sürüm 10.4 |
| Baidu Tarayıcı | - | Sürüm 7.12 |
| KaiOS Tarayıcı | - | Sürüm 2.5 |
SVG nasıl çalışır?
SVG'ler, iki boyutlu vektör görüntüleri üretmek için XML kullanır. JPG ve PNG'den farklı olarak vektör grafiklerinde piksel yoktur. Bunun yerine davranışları XML metin dosyalarında açıklanır.
Bu nedenle, SVG'ler kod gibi aranabilir, dizine eklenebilir, komut dosyası oluşturulabilir, değiştirilebilir ve sıkıştırılabilir. Sonuç olarak, herkes bunları bir metin düzenleyici veya vektör grafik yazılımı kullanarak oluşturabilir.
WordPress SVG'yi destekliyor mu?
Getirdiği güvenlik riskleri nedeniyle WordPress'te varsayılan olarak SVG desteği yoktur - SVG'yi çevreleyen güvenlik sorunlarını daha sonra daha ayrıntılı olarak ele alacağız.
Bir WordPress web sitesine bir SVG grafiği yüklerken görünen bir hata mesajı:
Var mevcut tartışma SVG'yi temel WordPress işlevselliğinin bir parçası yapma konusunda. O zamana kadar, SVG görüntülerini WordPress'e yüklemek için yaratıcı olmamız ve başka çözümler kullanmamız gerekiyor.
WordPress SVG'yi neden kullanmalısınız?
Güvenlik sorunlarına rağmen, birçok kullanıcı, çeşitli avantajları olduğu için bu görüntü biçimini kullanmaya devam ediyor. SVG dosyalarını kullanmanın bazı avantajları şunlardır:
- Ölçeklenebilirlik: SVG bir vektör görüntü formatı olduğundan, SVG dosyaları tüm ekran çözünürlüklerinde aynı kaliteyi korur. Bu avantaj, onları büyüttükten sonra da mevcuttur, bu nedenle birçok kişi simgeler ve logolar için bu ölçeklenebilir görüntü biçimini kullanır.
- Daha küçük dosya boyutu : SVG dosyaları, daha az web depolama alanı kapladığından ve diğer resimlerden çok daha hızlı yüklendiğinden, web sitesi performansını iyileştirmeyi kolaylaştırır.
- SEO dostu : Google, SVG dosyalarını dizine ekleyerek bunların Google Görsel Arama'da görünmesini sağlar ve arama çabalarınızı geliştirir. SEO. Diğer görsel türlerinde alt niteliklerini optimize etmekle sınırlısınız.
- Kod tabanlı SVG'ler bir metin düzenleyici veya vektör grafik düzenleme yazılımı kullanılarak düzenlenebilir. SVG dosyalarını web siteleri için optimize edebilir, hatta grafikleri etkileşimli hale getirmek için animasyonlar ekleyebilirsiniz.
WordPress ve güvenlik üzerine SVG
SVG esasen bir XML metin dosyası olduğundan, diğer görüntü biçimlerini etkilemeyen, kötüye kullanılabilir güvenlik açıklarına sahiptir. Bu nedenle, insanlar sisteminizde Siteler Arası Komut Dosyası Çalıştırma (XSS) ve XML Dış Varlık (XXE) saldırıları başlatmak için kötü amaçlı kodla kolayca ele geçirebilir.
Bu nedenle SVG dosyalarını işlerken ve WordPress'e eklerken dikkatli olmalısınız.
Güvenlik risklerini en aza indirmek için SVG dosyalarını WordPress medya kitaplığına yüklemeden önce sterilize ettiğinizden emin olun. Bu işlem, şüpheli kodu ve hataları ortadan kaldırarak görüntüleri web siteniz için güvenli hale getirir.
Yüklenen SVG dosyalarını bir SVG eklentisi kullanarak temizleyebilirsiniz - adımlarını daha sonra ele alacağız. Bununla birlikte, iki kez dezenfekte etmenizi öneririz. SVG Temizleyici Testi -
WordPress web sitenizi güvence altına almanın başka bir yolu da SVG yüklemelerini yalnızca güvenilir kullanıcılarla sınırlamaktır. Seçilen kullanıcılar, SVG biçimini çevreleyen güvenlik sorunlarının farkında olmalıdır - bu, onları şüpheli kaynaklardan SVG dosyaları almaktan caydıracaktır.
SVG Dosyalarını 2 Güvenli Yöntemle WordPress'e Yükleme
Teknik olarak, WordPress'e SVG desteği eklemenin iki yolu vardır: WordPress Plugin veya manuel olarak etkinleştirerek. Hangisini seçerseniz seçin, yalnızca kötü amaçlı indirmeleri en aza indirmek için indirme ayrıcalıklarını yöneticiler ve güvenilir kullanıcılarla sınırlamanızı şiddetle öneririz.
Bir WordPress eklentisi kullanın
Bu eğitimde kullanacağımız SVG Desteği. bu WordPress Plugin SVG dosyalarını medya kitaplığına yüklerken otomatik olarak etkinleştirilecek bir SVG temizleyici kitaplığı kullanır. Ayrıca kurulumu kolaydır ve kullanımı ücretsizdir.
SVG desteğini yapılandırma adımları şunlardır:
- IEklentiyi yükleyin ve etkinleştirin.
- Erişim ayarlar -> destek SVG WordPress kontrol panelinizden.
- Seçeneğin yanındaki kutuyu işaretleyin Yöneticilerle kısıtla yükleme ayrıcalıklarını sınırlamak için. Seçenek için de aynısını yapın Gelişmiş modu etkinleştir satır içi SVG oluşturma ve CSS stili oluşturma gibi gelişmiş özelliklere erişmek istiyorsanız.
- Değişiklikleri kaydettikten sonra, SVG dosyalarını medya kitaplığına güvenle yüklemeye başlayabilirsiniz.
WordPress SVG desteğini manuel olarak ekleyin
Bu yöntem, dosya düzenlemeyi içerir functions.php WordPress web sitenizin. Bu nedenle, PHP'ye aşinaysanız ve SVG güvenlik sorununu tam olarak anlıyorsanız, bu adımları izlemenizi şiddetle tavsiye ederiz.
Assurez-vous de WordPress web sitenizi yedekleyin Yanlış yapılandırma durumunda veri kaybını önlemek için değişiklik yapmadan önce.
Aşağıdaki adımlar, aşağıdaki gibi bir FTP istemcisi yardımıyla WordPress'te SVG'nin manuel olarak nasıl etkinleştirileceğini açıklayacaktır. FileZilla.
- Ana makinenizde web sitenizin dosya dizinine gidin
- Erişim public_html -> wp-içerir. kadar aşağı kaydırın function.php'yi bul.
- Bu dosyaya sağ tıklayın ve açmak için Görüntüle/Düzenle'yi seçin ve aşağıdaki kod parçacığını içine yapıştırın:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');- Değişiklikleri kaydedin ve yeni bir SVG dosyası yüklemeyi deneyin. İşlem başarılı olursa, medya kitaplığınız dosya yüklemesini kabul etmelidir.
SVG dosyalarının birçok avantajı, bu dosya türünün artan popülaritesine katkıda bulunur. Ne yazık ki, XML metin dosyaları, WordPress'in varsayılan olarak SVG desteği içermemesinin ana nedeni olan kod yerleştirmeye eğilimlidir.
Bununla birlikte, WordPress web sitenizin SVG dosyalarını kabul etmesini sağlamanın iki yolu vardır: WordPress Plugin veya dosyayı düzenleyin functions.php. Yükleme ayrıcalıklarını sınırlamanın yanı sıra, SVG dosyalarını web sitesinin medya kitaplığına güvenli bir şekilde yükleyebileceksiniz.
Diğer önerilen kaynaklar
Ayrıca sizi danışmaya davet ediyoruz. kaynakların bulunduğu Web sitenizin ve blogunuzun daha fazla sahipliğini ve kontrolünü almak için aşağıdaki
- Basit Bir WordPress Eklentisi Nasıl Oluşturulur
- Basit Bir Gutenberg Bloğu WordPress Eklentisi Nasıl Oluşturulur
- WordPress'te ana sayfanızı nasıl ayarlayabilirsiniz?
- WordPress Kontrol Paneli Nasıl Anlaşılır?
- Basit Bir WordPress Eklentisi Nasıl Oluşturulur
Sonuç
SVG'leri WordPress'e nasıl yükleyeceğinizi gösteren bu kılavuz bu kadar. Bu makalenin, SVG dosyalarını bir WordPress web sitesine yüklemenin yararları ve riskleri hakkında size biraz fikir verdiğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, lütfen bize bildirin. Yorumlar.
Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
