Jak dodać pliki obrazów SVG w WordPress

Gotowy na gruntowną modernizację grafiki swojej witryny WordPress? Wyobraź sobie nieskończenie skalowalne logo i ikony, które wyglądają ostro na każdym urządzeniu, bez pikselizacji i zniekształceń. Ten poradnik pokazuje dokładnie, jak przesyłać i zarządzać plikami SVG w WordPressie za pomocą WP Media Folder. Jest on przeznaczony dla każdego, nawet jeśli nie jesteś programistą.

W tym samouczku krok po kroku rozpakujemy korzyści płynące z plików SVG, dlaczego projektanci je uwielbiają i dlaczego są fantastyczni dla SEO i Page Performance. Nauczysz się wielu łatwych do naśladowania metod, aby włączyć przesyłanie SVG: od korzystania z zaufanych wtyczek po proste poprawki kodu oraz inteligentne strategie, aby zapewnić bezpieczeństwo witryny.

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

Dlaczego SVG są niesamowite dla skalowalnej grafiki

Skalowalność - SVG to pliki wektorowe. Oznacza to, że możesz powiększać, powiększać lub zmniejszać bez utraty jakości logo, ikon lub responsywnych projektów.

Lekki i przyjazny dla seo - pliki SVG są często mniejsze niż obrazy rastrowe i są XML oparte na tekstie, dzięki czemu wyszukiwarki mogły bezpośrednio odczytać elementy kluczowe (tekst, tytuły itp.).

Stylowanie i animacja - możesz manipulować SVGS za pośrednictwem CSS lub JavaScript. Chcesz efekt lub animacji? Łatwy.

Dostępność - właściwie skonfigurowane, SVG zawierają dostępne tagi tekstowe i role, które czytniki ekranu mogą interpretować, tylko kolejny solidny powód, aby ich używać.

Rozwiązania do dodania SVG w WordPress

WordPress blokuje SVG domyślnie z powodu zagrożeń bezpieczeństwa (SVG to XML, który może zawierać złośliwy kod), jednak istnieją trzy niezawodne sposoby włączenia obsługi SVG:

1. Użyj wtyczki

a) fragment WPCode + SVG

• Zainstaluj bezpłatną wtyczkę WPCode.
• Dodaj fragment „Zezwalaj na przesyłanie plików SVG” z jego biblioteki i aktywuj go.
• Domyślnie tylko administratorzy mogą przesyłać SVG.

b) Wtyczka obsługi SVG

• Zainstaluj „obsługę SVG” za pomocą wtyczek> Dodaj nowe, aktywuj je.
• W swoich ustawieniach sprawdź „ograniczenie do administratora” i/lub „włączonego trybu zaawansowanego” (rendering inline, stylizacja CSS).
• Prześlij SVG przez Media> Dodaj nowe lub przeciągnij i upuść.

c) Inne opcje :

• SVG bezpieczny przez Darrella Doyle'a, starszy, ale nadal używany.
• Wsparcie SVG odkaża przesyłanie, aby zapobiec ryzykom XSS/XXE.
• HappyFiles/Catfolders Dodaj przesłania SVG z dezynfektem i podglądami.

2. Dodaj fragment kodu do funkcji

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

funkcja enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'image/svg+xml'; zwrócić $ mimes; } add_filter („upload_mimes”, „enable_svg_upload”); 

Gdzie: Funkcje motywu.php (zawsze motyw dzieci!).

Wady: Domyślnie bez dezynfekcji - oszałamiające, chyba że połączone z środkiem dezynfekującym. I przesyłaj ograniczony do administratora (możesz to dostosować).

3. Rozważania dotyczące bezpieczeństwa

 Svg = xml, który może zawierać:

• Ataki XSS (JavaScript).
• Ataki XXE (wywołania jednostki zewnętrznej).

Najlepsze praktyki:

• Używaj wtyczek takich jak SVG Support, SVG Safe, Happyfiles z wbudowanym odkażaniem.
• przesłaniem odkażanie za pomocą narzędzi online (np. Test SVG Darryll Doyle) przed przesłaniem.
• Ogranicz przesyłanie SVG tylko do administratora lub zaufanych użytkowników.

WP Media Folder i dlaczego ma to znaczenie dla SVGS na WordPress

WP Media Folder to potężny menedżer biblioteki multimediów

- Struktura folderu/podfolderu

-Zatrudnione filtry, sortowanie, przeciągnięcie i upuszczenie

 - Zmień nazwę, znak wodny, wymiana luzem, podgląd, pobieranie

- Kompatybilny z wieloma narzędziami, takimi jak budownicze stron, WooCommerce i WPML.

Podczas gdy sam WP Media Folder nie pozwala na używanie plików SVG, pozwoli nam organizować, utrzymywać, a także zarządzać dowolnym typem plików, w tym plików SVG.

Podsumowanie: podnieś swoją witrynę za pomocą SVGS i WP Media Folder

Przestań zapasy w niechlujnych folderach multimedialnych i nieoptymalizowanych plikach obrazów. Zamiast tego odblokuj pełny potencjał SVG, lekki, możliwy do przeszukiwania i elastyczność, z intuicyjnymi narzędziami organizacyjnymi WP Media Folder. 

Niezależnie od tego, czy jesteś twórcą treści, projektantem czy właścicielem małej firmy, wkłada potężną technologię w ręce bez żadnego kodu. Twoja witryna będzie ładować szybciej, zaliczyć się wyżej i będzie wyglądać oszałamiająco! Na co czekasz? Przejdź tutaj i zdobądź własną kopię.