Jak dodawać pliki obrazów SVG w WordPress

Gotowi na poważną aktualizację grafiki na swojej stronie WordPress? Wyobraź sobie nieskończenie skalowalny logo i ikony, które wyglądają ostro na każdym urządzeniu, bez pikselizacji, bez zniekształceń. Ten przewodnik pokazuje dokładnie, jak przesyłać i zarządzać plikami SVG w WordPress przy użyciu WP Media Folder, i jest stworzony dla każdego, nawet jeśli nie jesteś deweloperem.

W tym kroku po kroku tutorialu, rozpakujemy korzyści z plików SVG, dlaczego projektanci je kochają i dlaczego są fantastyczne dla SEO i wydajności strony. Nauczysz się wielu łatwych do naśladowania metod włączania przesyłania SVG: od używania zaufanych wtyczek do prostych poprawek kodu, plus mądre strategie utrzymania Twojej strony bezpiecznej.

Będziemy używać WP Media Folder, potężnej wtyczki do zarządzania mediami od JoomUnited. 

Dlaczego SVG jest niesamowity dla skalowalnej grafiki

Skalowalność – SVG to pliki wektorowe. Oznacza to, że możesz powiększyć, powiększyć lub pomniejszyć je bez utraty jakości dla logo, ikon lub responsywnych projektów.

Lekki i przyjazny SEO – pliki SVG są często mniejsze niż obrazy rastrowe i są oparte na tekście XML, dzięki czemu wyszukiwarki mogą odczytywać kluczowe elementy bezpośrednio (tekst alternatywny, tytuły itp.).

Stylowanie & Animacja – Możesz manipulować SVG za pomocą CSS lub JavaScript. Chcesz efekt najechania lub animację? Łatwo.

Dostępność – Prawidłowo skonfigurowane, SVG zawierają dostępne tekstowo tagi i role, które czytniki ekranu mogą interpretować, co jest kolejnym solidnym powodem do ich używania.

Rozwiązania do dodawania SVG w WordPress

WordPress blokuje SVG domyślnie ze względu na ryzyko bezpieczeństwa (SVG to XML, który może zawierać złośliwy kod), jednak istnieją trzy niezawodne sposoby, aby włączyć obsługę SVG:

1. Użyj wtyczki

a) WPCode + fragment SVG

• Zainstaluj darmowy plugin WPCode.
• Dodaj fragment kodu 'Zezwalaj na przesyłanie plików SVG' z biblioteki i aktywuj go.
• Domyślnie tylko Administratorzy mogą przesyłać SVG.

b) wtyczka SVG Support

• Zainstaluj "SVG Support" za pomocą Wtyczki > Dodaj nową, aktywuj ją.
• W ustawieniach zaznacz "Ogranicz do Administratora" i/lub "Włącz Tryb Zaawansowany" (renderowanie w linii, stylowanie CSS).
• Prześlij swój plik SVG za pomocą Media > Dodaj nowy lub przeciągnij i upuść.

c) Inne opcje:

• SVG Safe autorstwa Darrella Doyle'a, starsze, ale wciąż używane.
• SVG Support dezynfekuje przesyłane pliki, aby zapobiec ryzyku XSS/XXE.
• HappyFiles/CatFolders dodają przesyłanie SVG z sanitacją i podglądem.

2. Dodaj fragment kodu do functions.php

Możesz użyć następującego kodu: 

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

Gdzie: functions.php motywu (zawsze używaj motywu potomnego!).

Wady: Brak dezynfekcji domyślnie — ryzykowne, chyba że połączone z dezynfekcją. Przesyłanie ograniczone do administratora (można dostosować).

3. Rozważania dotyczące bezpieczeństwa

 SVG = XML, który może zawierać:

• Ataki XSS (JavaScript).
• ataki XXE

Najlepsze praktyki:

• Użyj wtyczek takich jak SVG Support, SVG Safe, HappyFiles z wbudowanym sanitizowaniem.
• Oczyść za pomocą narzędzi online (np. test SVG Sanitizer Darryll Doyle'a) przed przesłaniem.
• Ogranicz przesyłanie SVG tylko do administratora lub zaufanych użytkowników.

WP Media Folder i dlaczego ma znaczenie dla SVG na WordPress

WP Media Folder to zaawansowane narzędzie do zarządzania biblioteką multimediów

- Struktura folderów/podfolderów

-Zaawansowane filtry, sortowanie, przeciągnij i upuść

 - Zmień nazwę, znak wodny, masowa zamiana, podgląd, pobieranie

- Kompatybilne z wieloma narzędziami, takimi jak Page Builders, WooCommerce i WPML.

Podczas gdy WP Media Folder sama w sobie nie pozwala na używanie plików SVG, pozwoli nam na organizowanie, utrzymanie i zarządzanie dowolnym typem pliku, w tym plikami SVG.

Podsumowanie: Podnieś swoją stronę z SVG i WP Media Folder

Przestań walczyć z nieuporządkowanymi folderami multimedialnymi i niezoptymalizowanymi plikami graficznymi. Zamiast tego, odblokuj pełny potencjał SVG, lekkich, wyszukiwalnych i elastycznych, z intuicyjnymi narzędziami organizacyjnymi WP Media Folder. 

Niezależnie od tego, czy jesteś twórcą treści, projektantem, czy małym przedsiębiorcą, daje Ci ona potężną technologię bez konieczności kodowania. Twoja strona załaduje się szybciej, zajmie wyższe miejsce w rankingu i będzie wyglądać olśniewająco! Na co czekasz? Idź tu i zdobądź swoją własną kopię.