WordPress SVG: WordPress’te SVG dosyalarını etkinleştirmek için 4 adım
Çevrimiçi içeriğinizi site kullanıcıları için mümkün olduğunca çekici oluşturmak istiyorsanız, görsel kullanma sanatında ustalaşmanız önemlidir. Ve WordPress SVG, çevrimiçi resim içeriğinizi mükemmelleştirmede büyük rol oynar. Neyse ki, WordPress SVG hakkında bu rehberde öğreneceğiniz bu ikilem için bazı basit çözümler var. Okuduğunuzda, WordPress’te, dosyanın kullanılması gerektiğinde SVG dosyalarını ve WordPress platformunda SVG desteğini etkinleştirmek için çeşitli yollar kullanarak artılarını ve eksilerini inceleyeceksiniz. Haydi bakalım.
Bu makalede
Varsayılan WordPress görüntü biçimi
SVG dosyası nedir?
SVG dosyası güvenlik riski midir?
SVG’yi WordPress sitenizde kullanmalı mısınız?
WordPress SVG eksikliği
SVG dosyalarını WordPress’te güvenli bir şekilde nasıl kullanıyorsunuz?
SVG Dosyası Nasıl Oluşturulur
Eklentilerle WordPress SVG desteğini etkinleştirmenin güvenli bir yolu
Adım 1. Bir dosya hazırlayın
Adım 2. SVG destek eklentisini yükleyin
Adım 3. SVG dosyalarını yükleyin
Adım 4. SVG dosyasını web sitenizdeki kullanın
WordPress SVG’yi manuel olarak etkinleştirebilir misiniz?
Paketlemek
WordPress SVG’yi kullanmaya başlamanın zamanı geldi mi?
WordPress sitenizi şimdi güvence altına alın
Varsayılan WordPress görüntü formatları Kutunun dışındaki WordPress, site sahiplerinin PNG, JPG ve GIF gibi birkaç farklı görüntü formatını kullanmasına izin verir. Kullandığınız format, Superior WordPress görüntülerini, logonuzu veya gömülü blog resimlerini paylaşıp paylaşmadığınıza bağlı olabilir. Ancak paylaştığınız resim ne olursa olsun, WordPress şu anda görüntü için orijinal SVG görüntü desteği yoktur.
Ölçeklenebilir vektör grafik dosyası, JPG ve PNG gibi raster görüntülerine kıyasla birçok fayda sunduğundan, bu birçok WordPress site sahibi için biraz şaşırtıcıdır. Ancak WordPress’in orijinalini desteklememesinin iyi bir nedeni var: güvenlik sorunları. SVG dosyaları her zaman en güvenli dosya türü değildir. SVG dosyası nedir? SVG teknik olarak bir görüntü biçimi değil, bir işaretleme dilidir. SVG, ileriye doğru hareket ettiğimizde bulacağınız gibi, eğriden görüntüler yapar ve animasyonlara izin verir. SVG dosya türü 20 yıldan fazla bir süredir standart haline geldi. Şu anda, SVG kullanılarak yayınlanan web sitesinin neredeyse% 20’si büyümeye devam ediyor. SVG, mükemmel tarayıcı desteğine sahiptir ve aşağıdakiler gibi tüm ana tarayıcılarda çalışır:
Krom
Firefox
Kenar
Safari
Android
Opera
Hatta Internet Explorer’da çalışıyorlar (eğer hala kullanıyorsa!). Yalnızca Internet Explorer sürüm 8 SVG’yi desteklemez. Ancak böyle küçük bir pazar payı ile orada endişelenecek çok şey yok. SVG dosyasının ne olduğunu bildikten sonra, bu tür bir dosyayı web sitenizde ne zaman kullanacağınıza karar vermelisiniz.
SVG dosyası güvenlik riski midir? Şimdiye kadar, SVG kullanmanın en büyük zayıflığı, site güvenliğine geldiklerinde bazı ünlü sorunları olmalarıdır. Varsayılan XML oldukları için, web siteniz için her türlü soruna neden olabilecek kötü amaçlı yazılım enjeksiyonuna karşı çok savunmasızdırlar.
Buraya Tıkla
SVG’yi WordPress sitenizde kullanmalı mısınız? Güvenlik risklerini dikkate alarak, SVG dosyaları bir dizi fayda sunar.
Yeni başlayanlar için SVG dosyası vektör biçiminde oluşturulur. Bu, görüntü kalitesini kaybetmeden herhangi bir boyuta veya boyuta dağılacakları anlamına gelir. Ve bu, PNG veya JPG’nin çalışma şeklinin tam tersidir. Dosya türü raster görüntüsü olarak bilinir ve görüntünün orijinal boyutu ile sınırlıdır. Bu tür görüntü ölçeklenebilirliği, vektör grafiklerinin kullanımını duyarlı web siteleri oluşturmak için çok daha iyi bir çözüm haline getirir. Buna ek olarak, SVG dosyası bugün birçok mobil cihaz tarafından kullanılan Retina ekranında çok daha iyi görünüyor. Buna ek olarak, SVG, arama motorlarının dosya formatlarını tanıması ve dizin oluşturduğu için sitenizin SEO’sunu geliştirmeye yardımcı olur.
Ve bundan daha iyi, bu tür dosya genellikle JPG veya PNG’den daha küçüktür. Piksel kullanmadıkları için daha az bilgi tutarlar. Tersine, SVG vektörler kullanır. WordPress sitenizde daha hızlı yüklenmeye yardımcı olan daha az yer alır. Ve hepimiz hızlı yükleme web sitesine sahip olmanın ne kadar önemli olduğunu biliyoruz. Çoğu durumda, SVG görüntülerinin JPG veya PNG dosyalarından yaklaşık 13 kat daha küçük olduğunu göreceksiniz. Ve genel dosya boyutu azaltma% 90’dan fazla çok yaygındır. Mümkünse tüm resimlerinizi SVG dosyalarına dönüştürmek için, sitenizi çok daha hızlı çalıştıracaksınız. Ama ne yazık ki, o kadar basit değil. Ne yazık ki WordPress SVG eksikliği, SVG dosyaları ülkesindeki tüm güneş ve gökkuşağı değil. Web sitesi resminiz için bu tür dosyayı kullanmak için bazı önemli zayıflıklar vardır. İlk olarak, yapmak ve yapmak her zaman kolay değildir. Bazı özel araçlar kullanmalı ve bunu yapmak için bilgiye sahip olmalısınız (daha sonra tartışacağız). Ve SVG, WordPress sitenizdeki tüm resim dosyaları için uygun değildir. Çok ayrıntılı görüntüleri ele almakta harika değiller. Ve sitenizde çok ayrıntılı görüntüleriniz varsa, belirli bir noktada, SVG dosyası aslında raster görüntü dosyasından daha büyük boyutta olacaktır.
Daha da kötüsü, boyut büyüyor olsa da, JPG veya PNG’den daha düşük görüntü kalitesine sahip olacaklar.Bu nedenle, SVG en iyi yüksek çözünürlüklü fotoğraflara kıyasla daha az ayrıntılı görsellere sahip logolar ve simgeler gibi görüntüler için kullanılır.Blog yayınının üstün resmi gibi birçok ayrıntıya sahip resimleriniz için JPG ve PNG’yi kullanmaya devam etmek daha iyidir.Ayrıca, sosyal medya platformlarının SVG dosya paylaşımını desteklemediğini göreceksiniz, bu da blog içeriğinizin destekleyici görüntüler görüntüleyerek güzel görünmesini sağlayacaktır.SVG dosyalarını WordPress’te güvenli bir şekilde nasıl kullanıyorsunuz?Bazı Google aramaları, WordPress SVG desteğini etkinleştirecek birçok kod parçası üretecektir.Ancak kodu kopyalamaya ve eklemeye başlamadan önce, sitenin güvenliğini tehlikeye atmayacağınızdan emin olmak önemlidir.
Bu, potansiyel güvenlik sorunlarını (kod enjeksiyonları gibi), çatışmaları ve diğer hataları önlemek için dosyaları temizleyen Sanitation adlı bir süreçle yapılır. Ve kodu anlamakta harika değilseniz, bunu kendiniz yapmak istemeyebilirsiniz. Sanitasyon kodu ile ilgili birkaç çevrimiçi öğretici olmasına rağmen, genellikle görünür kadar basit değildir. Yanlış yere girilen bir dönem tüm sitenizin grev yapmasına neden olabilir. Neyse ki, sanitasyon kodu WordPress eklentisi ile yapılabilir. Ayrıca, WordPress sitenizle oluşturduğunuz seçimleri daima dikkatlice düşünün. Yalnızca güvendiğiniz kaynaktan aldığınız SVG dosyasını kullanın. Ve sitenize erişimi olan başkalarının güvenmediğiniz SVG dosyalarını yüklemesini önlemek için yönetici iznini sınırlamayı düşünün. Daha önce tartışıldığı gibi bir SVG dosyası nasıl oluşturulur, SVG dosyalarını fiziksel olarak yapmak SVG WordPress’in en zorlu kısımlarından biridir. Bu, dijital fotoğraf çekmek, birkaç filtreden göndermek, ardından web sitenizde SVG görüntü dosyaları göndermek kadar basit değildir. SVG dosyasının ne olduğundan daha fazlasını bilmelisiniz ve filtreden daha fazlasını yapmanız gerekir. Bir SVG dosyası oluşturmak için Adobe Illustrator gibi yazılımlara ihtiyacınız var. Inkscape gibi açık ve ücretsiz kaynak çözümlerini de kullanabilirsiniz. Diğer seçenekler arasında Google ve Vectr tarafından SVG-Düzenli.
Bu programa aşina değilseniz, öğrenmek ve onu kullanmak rahat hissetmek zaman alabilir.Zaten bir görüntünün piksel sürümüne sahipseniz, Vector Magic’i kullanarak bir vektör görüntüsüne dönüştürebilirsiniz.WordPress sitenizde kullanabileceğiniz ücretsiz vektör simgeleriyle dolu birkaç çevrimiçi kütüphane vardır.Bazı kütüphaneler şunları içerir: kuru simgeler
Kötü simge
Genel
Düz simge
Vektör dosyası indirildikten sonra, görünümü görmek için farklı bir web tarayıcısında açabilirsiniz. Görünüşten memnun olduğunuzda, WordPress sitenizde kullanmaya başlayabilirsiniz. WordPress SVG desteğini eklentinizle etkinleştirmenin güvenli yolu, WordPress eklenti deposunda SVG dosyalarını web sitenizde güvenli bir şekilde kullanmanıza olanak tanıyan birkaç farklı eklenti bulacaktır. Bu seçeneklerden ikisi kolay SVG desteği ve SVG desteğidir. Ancak, bu kılavuz için, SVG destek eklentisinin Benbodhi’den nasıl çalıştığını göreceğiz. SVG Desteği, basit bir IMG etiketi kullanarak tam SVG dosya kodunuzu kolayca gömmenizi sağlar. Sitenize resim yüklemek için bir temizlik kitaplığı kullanma. Bu eklenti, SVG’nin WordPress medya kütüphanenizdeki standart görüntünüz gibi görünmesine neden olur. Eklentinin premium bir sürümü ile, SVG dosyalarını sitenize yüklemesine izin verilen erişimi de sınırlayabilirsiniz. SVG dosyasını WordPress’te nasıl etkinleştireceğiniz aşağıda açıklanmıştır: Adım 1. SVG dosyasını oluşturduktan veya indirdikten sonra dosyayı hazırlayın ve WordPress’te kullanmak isteyin, dosyanın etiketini içermesi gerekir. Hata mesajlarından kaçınmak için, metin düzenleyicinizdeki dosyayı açın ve ilk satıra aşağıdaki kodu ekleyin: SVG zaten bu etiketi ilk satırda varsa, ikinci adıma devam edin. Adım 2. SVG Destek Eklentisi Yükle SVG desteğini, eklentilerde gezinerek diğer eklentilerde yaptığınız gibi yükleyin> WordPress gösterge panelinize yeni ekleyin. SVG desteği adını arama kutusuna girin, sağlanan eklentiler listesinde bulun, yükleyin ve etkinleştirin.
Adım 3. SVG Dosyaları Yükle Eklentiyi etkinleştirdikten sonra, SVG dosyanızı hemen yüklemeye başlayabilirsiniz. Tek yapmanız gereken WordPress Medya Kütüphanenize veya bir sayfaya veya gönderiye girmektir. SVG dosyalarını iş istasyonunuzdan sitenize sürükleyin ve bırakın veya yeni bir dosya olarak yükleyin. Herhangi bir seçenek WordPress Begin’e yükleme yapar. Yüklemeyi bitirdikten sonra, görüntü diğer tüm resimleriniz gibi medya kütüphanenizde görünecektir. Oradan, alt metin, açıklama, başlık ve açıklama ekleyebilirsiniz. Adım 4. SVG dosyasını web sitenizdeki kullanın Dosya WordPress Media Kütüphanesi’ndeydikten sonra, diğer resim dosyaları gibi kullanabilirsiniz. Genellikle yaptığınız gibi gönderiye veya sayfaya koyun. SVG destek eklentisi Gutenberg’de sorunsuz çalışır ve ortaya çıkan görüntü bloğu, görüntünün boyutunu, alt metnin, bağlantının vb. Sadece bu. Bu eklenti çok basit ve ek ayarı yok. Bir iş yaptı ve oldukça iyi yaptı. WordPress SVG’yi manuel olarak etkinleştirebilir misiniz? Bir nedenden dolayı, SVG destek eklentilerini kullanmak istemiyorsanız, kendi çözümünüzü kodlayabilirsiniz. Teorik olarak, WordPress SVG desteğini etkinleştirmek, temanızdan function.php dosyasını açmanızı ve bu kodu eklemenizi gerektirir: enable_svg_upload işlevi ($ upload_mimes) {
$ upload_mimes [‘svg’] = ‘image/svg+xml’;
$ upload_mimes [‘svgz’] = ‘image/svg+xml’;
$ Upload_mimes return;
}
add_filter (‘upload_mimes’, ‘enable_svg_upload’, 10, 1);
