WordPress’te SVG nasıl kullanılır
SVG 2000’li yılların başlarında standartlaştırılmış olmasına rağmen, kötü tarayıcı desteği nedeniyle çok ilginç bir görüntü formatı çok fazla talep edilmedi. Tüm bunlar son yıllarda büyük ölçüde değişti, çünkü SVG hızla web’de fiili bir görüntü formu haline geldi. Ve sadece SVG’ye aşık olan grafik tasarımcılar değil, aynı zamanda genel görüntü boyutunu azaltarak bloglarını hızlandırmak isteyen WordPress kullanıcıları. Bu yazı, SVG’nin WordPress bazlı sitelerde nasıl kullanılacağı konusunu araştıracaktır. SVG nedir? SVG (ölçeklenebilir vektör grafikleri), web’de ve uygulamada grafikleri görüntülemek için XML tabanlı bir görüntü biçimidir. Temel olarak, SVG dosyası yalnızca SVG görüntüsünde kullanılan çeşitli şekilleri ve renkleri belirleyen XML kodlarının bir koleksiyonudur.
SVG dosyalarını metin editörleriyle açabileceğiniz için ayarlamaları CSS3 ve JS temel kodlarını da kullanmayı kolaylaştırır. Sonuç olarak, SVG çok yönlü esnekliği nedeniyle modern web kullanıcıları arasında çok popülerdir. En önemlisi, W3C SVG’yi önde gelen bir endüstriyel standart olarak tanır. Bu nedenle, SVG DOM, HTML ve benzeri diğer web tabanlı teknoloji ile birlikte mükemmel bir şekilde çalışır. SVG neden önemlidir? Vektör tabanlı SVG görüntüleri, sonuç olarak, SVG görüntüleri kalite kaybetmeden ekran boyunca sınırsız olarak boşaltılabilir. Bu durumda çekirdek etkileşim XML tarayıcısıdır; Burada tarayıcı, her bir artış veya azalma ile XML özelliklerini çizdi.
SVG dosyaları PNG veya JPEG gibi geleneksel formatlardan çok daha esnektir. Ve CSS ve JavaScript arasındaki doğrudan etkileşim, seyahat ederken SVG görüntülerini uyarlayabileceğiniz anlamına gelir. Bu, yeni bir tasarım üzerinde çalışırken çok önemlidir veya tam tersi. Neredeyse her şeyi tasarlamak için SVG’yi kullanabilirsiniz! İsterseniz animasyonlu bir davul kiti bile. Eyleme bakın: https://codepen.io/iamjoshellis/pen/kvdqqm Performans açısından, SVG görüntüleri tüm meslektaşlarından önemli ölçüde daha küçük olma eğilimindedir. Sonuç olarak, illüstrasyonlar, logolar ve simgeler genellikle vektör grafikleri olarak yapılır. Bu aynı zamanda daha sonra makalede kısaca bahsedeceğimiz birçok simge yazı tipinin geliştirilmesine neden olur.
Gördüğünüz gibi, bunu karmaşık grafikler için tekrar tekrar yazmak, kendinizi çekmekle aynıdır.
Affinity Designer, iyi bilinen bir profesyonel vektör düzenleme programıdır, ancak Adobe Illustrator, Sketch, Figma ve Inkscape gibi yazılımlar. Hangi yazılımı kullanmaya karar verirseniz verin, gerçekten önemli olan tek şey yapmak istediğiniz grafik türü için planınızdır. İhracat işlevselliği tüm modern programlarda işbirliği yapar. SVG’nin her zaman aynı XML yapısıdır. Böylece, SVG görüntülerini hem belge olarak kullanabilirsiniz hem de satır içi ekleyebilirsiniz. WordPress SVG’yi destekliyor mu? Kulağa garip gelse de, WordPress kapsama alan platform aslında SVG dosya biçimini desteklemez. Ancak sadece korkunç güvenlik sorunları nedeniyle. PNG/JPG/GIF dosya türünün aksine – SVG bir raster görüntüsü değil bir vektör. Sonuç olarak, SVG JavaScript sömürüsü riskine maruz kalır ve WordPress varsayılan olarak WordPress’te SVG’ye izin vermemeyi seçmiştir. Tüm açılardan mantıklı.
// wordpress yükler için svg dosya biçimini etkinleştir add_file_types_to_uploads ($ file_types) {$ new_filetypes = array (); $ new_filetypes [‘svg’] = ‘image/svg+xml’; $ file_types = array_merge ($ file_types, $ new_fileTypes); Dönüş $ file_types; } Add_action (‘upload_mimes’, ‘add_file_types_to_uploads’); Ve diğer seçenekleriniz – daha güvenli – eklentileri kullanıyor. WordPress’te SVG’yi etkinleştirmek için en önemli üç eklenti. SVG Desteği SVG desteğinin mücadelenin yarısı olduğunu ekler, ayrıca özel stiller, animasyonlu efektler eklemek ve kısıtlamaları etkinleştirmek isteyebilirsiniz. Ama tüm bunları yapmak için desteğe ihtiyacınız var.
WordPress Medya Kütüphanesi’ndeki SVG dosyalarının yönetimini etkinleştirin.
Tüm SVG görüntülerine Alt ve Altyazı Etiketleri eklemek için görüntü widget’larını destekler.
Bireysel SVG görüntü stili özel CSS kullanır.
CSS3 ve JavaScript kullanarak animasyon efektleri uygulayın.
Gösterge Tablosu eklentisindeki ayrıntılı ayarlar sayfası.
İzin tabanlı erişim uygulayın. Örneğin, yüklemeyi yalnızca yönetici ayrıcalıklarına sahip hesaplarla sınırlayın.
Eklentinin ne sunduğuna bakılmaksızın, SVG sömürüsü riskinin oldukça gerçek olduğu uyarısı. Güvenmediğiniz kullanıcılar için SVG dosya yönetimini etkinleştirmeyin. İdeal olarak, bu özelliği yalnızca yönetici düzeyinde kullanıcılar için etkinleştireceksiniz. Tekrarlamak gerekirse, yükleme hakkı olan herkes yeni bir SVG dosyası yükleyebilir, ancak SVG dosyası XML’ye dayandığı için – tehlikeli yollardan sömürmeye açıktır. enjeksiyonlar ve diğerleri. SVG güvenlidir
SAFE SVG, güvenlik riskleri potansiyeli konusunda endişelenmek açısından size gönül rahatlığı sağlayacak eklentilerden biridir. Bu eklenti, yeni SVG yüklemelerini temizlemek ve kötü niyetleri önlemek için özel olarak yapılır. Ayrıca, SAFE SVG, kütüphane ortamınız aracılığıyla yüklediğiniz SVG dosya türünü görme olanağı ekler. 50.000 aktif kullanıcı ile güvenli bir performans sicili sağlamak için SAFE SVG’ye güvenebilirsiniz. Bu eklenti için iki farklı sürüm olduğu belirtilmelidir; ücretsiz ve ücretli.
Ücretsiz sürüm, yeni yüklemeleri temizlemek için işlevsellik içerir ve ayrıca medya kitaplığındaki SVG ekranına destek ekler.
Pro sürümünü kullanırsanız, SVGO Optimizasyonu gibi ek özellikler elde edersiniz. Bu optimizasyon tekniği, SVG yükleme dosyanızın boyutunu daha da azaltacaktır. Ayrıca, Pro ile yeni bir SVG dosyasını kimin yükleyebileceğini veya yükleyemeyeceğini seçebilirsiniz. Sonuç olarak, belirli kullanıcılara erişimi sınırlayabilirsiniz. Ve son olarak, bir eklenti satın alarak premium desteğe erişirsiniz – en çok ihtiyacınız olduğunda sorularınıza cevap alın. Tam SVG desteği ekle
Kayıt ettiğimiz ilk iki eklenti ile makul sonuçlar almalısınız. Ancak, bir kısa kod kullanarak sitenize SVG ekleme fikrini seviyorsanız, bu eklentiyi kontrol edin. Bu eklenti, WordPress’inize birkaç SVG işlevi ekler ve Alexey Ten’in fikirlerine dayanan SVG teknikleri kullanır. Bu HTML’ye SVG görüntüleri nasıl eklenir, şu anda performans ve uyumluluk en iyi kombinasyonu ile bir yol gibi görünmektedir. Tam SVG desteği ekleyin, SVG yüklemesine izin verir ve kısa kodlar oluşturur. Ardından, her bir SVG öğesinin stilini özel bir CSS kullanarak ayarlayabilirsiniz. Son olarak, yüklediğiniz bir veya tüm SVG için bir yedek fotoğraf belirleyebilirsiniz. WordPress için diğer yararlı SVG eklentileri nelerdir? WordPress sitesine SVG desteği eklemenin yanı sıra, siteniz için başka neler eklentisi olabilir? Herkes ve büyükanneleri önemli performans faydaları olduğunu biliyorlar. Hem dosya boyutu açısından hem de vektör grafiklerini satırda hale getirme özelliği. WP SVG simgesi
Slate, özel SVG efektleri eklemek için kısa kod desteğinin sağlanmasına izin veren bir eklentidir. Bu eklentiyi güçlü bir marka imajını tanıtmak, CTA widget’ı vurgulamak veya öğeleri kendi yollarında öne çıkarmak için kullanabilirsiniz. Kısa kod desteğinin akıllı kullanımı, efektlerinizi belirli bir zamanda düzenleyebileceğiniz ve ayarlayabileceğiniz anlamına gelir. Örneğin, çeşitli renkleri, yazı tiplerini, filtreleri birleştirebilir ve dikkat çeken bir tasarım etkisi olarak ortaya çıkan çeşitli içerikleri kullanabilirsiniz. Slate, vektör düzenleme yazılımı kadar yaratıcı olma özgürlüğü sunar, ancak yalnızca herhangi bir yazılım kullanmanız gerekmez! Peki, ana özelliklerden bazıları nedir? Metin. Dikkat çeken ancak dost SEO olan metnin etkisini çoğaltabilen kısa bir kod üretin. Tıpkı yukarıdaki anlık görüntüde gördüğünüz gibi.
yazı tipi. Özel bir yazı tipi nereden alacağınızdan emin değil misiniz? Endişelenmeyin, çünkü Slate daha önce büyük bir Google yazı tipi kütüphanesi ile paketlenmiştir.
Vector logo bölgesi, çalıştığınız nişe bağımlı olarak, dünyanın önde gelen markalarından vektör tabanlı bir logo koleksiyonuna sahip olmak için yararlı hissedebilirsiniz. Belirli bir duyuru veya promosyon yaparken bu dosyayı da kullanabilirsiniz. Ve çoğu fotoğraf editörü artık SVG dosyalarını PNG’ye dönüştürebilir ve tersi de geçerlidir.