WordPress’te Ölçeklenebilir Vektör Grafikleri (SVG) nasıl oluşturulur ve kullanılır
Boşaltılabilen ve WordPress’in boşaltılabilen vektör grafikleri biraz karmaşık bir hikaye. Hepimiz web sitenizde görsel kullanmanın önemli olduğunu biliyoruz. Görüntüler her yerde. İster içeriğinizi daha ilginç hale getirmek ve bir portföy görüntüsü olarak paylaşılabilir veya belki de sadece site logonuz. Neyse ki, WordPress, JPG, PNG ve GIF dahil olmak üzere bu amaç için birçok görüntü formatını destekler. Bununla birlikte, baskı olmadan desteklenmeyen şey ölçeklenebilir vektör grafikleridir (SVG). Ancak, giderek daha popüler olan görüntü formatlarıdır. Bu makalede, WordPress’teki ölçeklenebilir vektör grafikleri hakkında konuşmak istiyoruz. SVG’nin ne olduğunu, neden kullanılmalı ve WordPress’in neden en başından beri desteklemediğini söyleyeceğiz. Bundan sonra, bu tür bir dosyanın bir platformla nasıl işleyeceğini tartışacağız.
Kulağa hoş geliyor mu? O zaman gidelim. SVG nedir ve neden kullanın? Boşaltılabilecek vektör grafikleri aslında görüntü formatları değildir. Bunun yerine, iki boyutlu vektör görüntüleri yapmak için işaretleme dilini temsil ederler. Bu, 1999’dan beri var olan ve son yıllarda hücresel tasarımların ortaya çıkmasıyla daha popüler hale gelen açık bir standarttır.
Ölçeklenebilir – Adından da anlaşılacağı gibi, SVG görüntüleri artırılabilir. Boyutu azaltın veya ekleyin ve kalite aynı kalır (retina ekranına dahil). Bundan farklı olarak, raster görüntü, gerçek görüntü boyutundan daha büyük görüntülenir görünmez bulanık görünüyor. Tabii ki, ölçeklenebilirlik SVG’yi duyarlı tasarım için çok uygun hale getirir. Dosya boyutu daha küçüktür – çünkü dosyalar, piksel değil, genellikle çok daha küçük, daha küçük bilgilerin depolanması gerektiğinden boşaltılabilen vektörlerden oluşur. Bu da web sitenizi daha hızlı hale getirecektir.
Tüm tarayıcılar tarafından desteklenir – tüm ana tarayıcılar ve hücresel tarayıcılar SVG’nin nasıl işleneceğini bilir. Bu, ziyaretçilerin çoğunluğunun onu görüntülemekte sorun yaşamayacağı anlamına gelir. Hala Edge Case’i desteklemek istiyorsanız, geriye dönük bir görüntü vererek yapabilirsiniz.
Google tarafından tanınan-SVG kullanmanın SEO’nuza zarar vereceğinden endişe ediyorsanız (ancak görüntüleri kullanmanın sayfa içi optimizasyonun bir parçasıdır), yapma. Google, diğer görüntülerle aynı şekilde deşarj edilebilen ve görüntü aramaya ekleyecek vektör grafiklerini dizine ekler.
Animpative edilebilir – CSS kullanarak vektör grafiğine animasyon ekleyebilirsiniz. Bu bazı ilginç uygulamalar yapabilir. Bunu burada tartışmayacağız, ancak bu makaleyi daha fazla okuyabilirsiniz.
Gördüğünüz gibi, WordPress sitenizde tartışılabilecek vektör grafiklerini kullanmak için iyi noktalar vardır. Ancak, buna karşı bir argüman da var mı?
SVG eksiklikleri, elbette, hepsi bu görüntü formatı hakkında iyi değildir ve aynı zamanda çeşitli zorluklara yol açmaz:
Yapılması zor – aşağıda göreceğimiz gibi, grafik tasarımın arka planı olmadan, kendi SVG dosyanızı oluşturmakta zorluk çekebilirsiniz. Karmaşık görüntüler için uygun değil – SVG formatı logolar ve simgeler için çok uygundur, ancak fotoğraflar gibi karmaşık görüntüler için değil . SVG çok karmaşık hale geldiğinde, piksel meslektaşlarından daha büyük olma eğilimindedirler.
Güvenlik Sorunları – Bu, keşfedilebilecek vektör grafiklerinin WordPress tarafından kutunun dışında desteklenmemesinin ana nedeni budur. Aslında WordPress kanalında eski bir tartışma var. SVG XML’ye dayandığından, kötü amaçlı yazılım enjeksiyonuna açıktır, bu yüzden SVG desteğinin güvenli bir şekilde etkinleştirilmesi gerekir. Aşağıda daha fazla bilgi.
Sosyal ağlar tarafından desteklenmez – Twitter, Facebook ve diğer sosyal ağlar SVG’yi desteklemediğinden, üstün görüntüler ve benzerleri için yeterince uygun değildir. Böyle kullanmak istiyorsanız, Yoast SEO veya benzeri eklentiler aracılığıyla özel bir piksel sürümü yüklemeniz gerekir. Karmaşıklık ile orantılı olup olmadığına karar vermek size kalmış.
Tartışılabilecek vektör grafikleri faydalar ve zorluklar sunduğundan, birçok web sitesi hibrit bir yaklaşım kullanır. Bu, logolar için SVG, arka plan desenleri, simgeler ve diğer basit şeyler ve blog yayınlarının küçük resimleri gibi daha karmaşık şeyler için piksel tabanlı görüntüleri kullandıkları anlamına gelir.
Son bölümde belirtildiği gibi WordPress siteniz için itibarsızlaştırılabilecek bir vektör grafiği nasıl yapılır SVG ile ilgili sorunlardan biri üretimdir. Diğer görüntülerden farklı olarak, üretilmesi daha karmaşıktır. Örneğin, herkes kendi siteleri için resim oluşturmak için kamera kullanabilir. Ayrıca, Instagram ve görüntü düzenleme uygulamasında her yerde, temel dokunuş yapmak çoğu insan tarafından da yapılabilir. Bununla birlikte, itibarsızlaştırılabilen bir vektör grafiği yapmak için Adobe Illustrator veya Inkscape (ücretsiz ve açık kaynak, BTW) gibi daha karmaşık yazılımları bilmek gerekir. Vectr ve SVG-edit (son google tarafından yapılan) gibi web tabanlı çözümler de vardır. Tabii ki, bu alanda deneyime sahip bir grafik tasarımcı değilseniz, kendi SVG logonuzu ve Simge dik öğrenme eğrisini içerecektir. Bu nedenle, bir profesyonelle çalışmak kötü bir fikir olmayabilir. Ancak, orada birkaç alternatif de var. Örneğin, Pixel sürümünde zaten bir logonuz varsa, bir vektöre dönüştürmek için Vector Magic gibi araçları kullanabilirsiniz. Kolayca indirilebilen SVG arka plan kalıpları yapmanıza izin veren Patterno da vardır. Ayrıca, web siteniz için kullanabileceğiniz geniş ücretsiz vektör simgeleri koleksiyonunu unutmayın:
Kuru simge
Kötü simge
Düz simge
Genel
Bu şekilde, kendi SVG’nizi yapmanıza gerek yoktur, ancak yine de sitenizdeki görüntü formatını kullanabilir. Tam olarak nasıl yaptın? Sonra bunun hakkında konuşalım. SVG’yi WordPress’te kullanmanın güvenli yolu belirtildiği gibi WordPress, SVG’yi kutunun dışında desteklemez. Ancak umutsuzluğa kapılmayın, onu değiştirmenin birkaç yolu var – manuel ve eklentiler aracılığıyla. Ancak, bu bölümün başlığı tarafından önerildiği gibi, SVG’yi WordPress’te kullanmanın en güvenli yolunu arıyoruz. Tehlikeli kodlar içerebileceklerini hatırlıyor musunuz? Web sitemizi hacklemeye yardımcı olmak istemediğimiz için yüklenen SVG’yi temizlemek için bir yola ihtiyacımız var. Bu, enjeksiyon, kod çatışması ve hatayı ortadan kaldırmak için dosya kodunun temizlenmesi anlamına gelir. Şimdi nasıl yapılacağını tartışalım, eklenti rotasıyla başlayacağız. Yöntem 1: SVG desteğinde SVG desteğini eklenti ile etkinleştirin SVG desteğini etkinleştirmenin en basit yollarından biri eklentileri kullanmaktır. SVG desteği, en popüler ve ölçeklenebilir vektör grafikleri (SVG) dahil olmak üzere seçebileceğimiz bazılarımız var. Ancak, güvenli SVG kullanacağız. Bu, yüklemeler sırasında SVG dosyalarını açıkça temizleyen tek listedir. Bu aynı zamanda WordPress için görüntü formatına izin verir ve medya kütüphanesine destek ekler.
Ayarlar kolaydır. Diğer eklentilerle aynı şekilde yükleyip etkinleştirmeniz yeterlidir. Bittiğinde hepsi bu. Ek düzenlemelere gerek yoktur. Bu eklenti ayrıca bir Pro sürümü ile donatılmıştır. SVG yüklemelerini yönetici hesaplarıyla sınırlama yeteneği gibi önemli seçenekler içerir. Bu, özellikle farklı teknik bilgiye sahip büyük editoryal ekiplere sahip siteler için çok makul. Ancak, bence, premium sürüm oldukça pahalı. SVG desteği ayrıca yükleri kutunun dışındaki kullanıcıların gruplarına göre sınırlamanıza olanak tanır. Bu nedenle, bu sizin için önemli bir ayar ise, eklentiyi kullanmak daha iyi olabilir. Yöntem 2: SVG desteğini manuel olarak etkinleştirin, tartışılabilecek vektör grafiklerine destek hazırlamanın ikinci yolu Function.php. Ne yazık ki, bunu bu şekilde yapmak, yukarıda belirtilen eklentiyi kullanmaktan daha az güvenlidir, çünkü dosyaları temizleme içermez ve SVG’nin ayrım gözetmeden yüklenmesine izin verir. Hala bu rotayı kullanmak istiyorsanız, etkin tema klasörünüzdeki functions.php dosyalarını arayın. Aşağıdaki kodu indirin, düzenleyin ve ekleyin: 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); Şimdi değişikliklerinizi kaydedin ve dosyayı tekrar yükleyin. Tamamlandı. Belirtildiği gibi, en güvenli seçenek değil ama tamamlama için buraya koymak istiyorum.
SVG Destek Testi Son olarak, her şeyin düzgün çalışıp çalışmadığını kontrol etmenin zamanı geldi. İster eklentiler ister manuel yöntemler kullanın, artık SVG dosyalarını yükleyebilirsiniz. Bunu test etmek için, yukarıda belirtilen kaynaklardan birinden ücretsiz bir SVG simgesi veya benzeri alın. Ardından, sitenizi girin ve medyayı açın. Burada, yeni SVG dosyanızı yüklemeyi deneyin. Her şey yolunda giderse, burada böyle görünmelidir: Tebrikler! İyi yapıldı. WordPress – SVG Özeti, Ölçeklenebilir Vektör Grafikleri birçok avantajı olan çekici bir web tasarım kaynağıdır. Küçük, ölçülebilir, tarayıcılar ve arama motorları tarafından iyi desteklenir ve animasyona hazırdırlar. Ancak, bu tür bir dosya eksikliksiz değildir, en belirgin olanı güvenlik riskleri potansiyelidir. Bu makalede, kendi SVG dosyanızı nasıl oluşturacağınızı öğrendik. Ayrıca WordPress’te nasıl güvenli bir şekilde kullanılacağını ve yüklemeyi etkinleştirmeyi de tartıştık. Sonuç olarak, WordPress orijinali desteklemese de, bu tür dosyayı web sitenizde zaten kullanabilirsiniz. Soruyu bırakıyor, SVG desteği başarılı olacak mı? Güvenlik sorunlarıyla başa çıkmanın bir yolu olana kadar imkansız görünüyor. Bununla birlikte, Web tasarımında ölçeklenebilir vektör grafiklerinin artan popülaritesi ile topluluk er ya da geç bir çözüm bulmalıdır. O zamana kadar, işlevini sağlamak için böyle bir öğreticiniz var. WordPress sitenizdeki SVG dosyalarını nasıl işlersiniz? Ek ipuçları var mı? Aşağıdaki yorum bölümünde bize bildirin!
