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ść – pliki SVG to pliki wektorowe. Oznacza to, że można je powiększać, zmniejszać lub przybliżać bez utraty jakości w przypadku logo, ikon czy projektów responsywnych.

Lekkie i przyjazne dla SEO – pliki SVG są często mniejsze niż obrazy rastrowe i zawierają tekst w formacie XML, dzięki czemu wyszukiwarki mogą bezpośrednio odczytywać najważniejsze elementy (tekst alternatywny, tytuły itp.).

Stylizacja i animacja – Możesz manipulować plikami SVG za pomocą CSS lub JavaScript. Potrzebujesz efektu najechania kursorem myszy lub animacji? To proste.

Dostępność – odpowiednio skonfigurowane pliki SVG zawierają dostępne znaczniki tekstowe i role, które mogą interpretować czytniki ekranu, co stanowi kolejny ważny powód, dla którego warto z nich korzystać.

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: plik functions.php motywu (zawsze używaj motywu potomnego!).

Wady: Domyślny brak dezynfekcji – ryzykowne, chyba że użyjesz dezynfektora. Możliwość przesyłania danych jest ograniczona do administratora (można to dostosować).

3. Rozważania dotyczące bezpieczeństwa

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

• Ataki XSS (JavaScript).
• ataki XXE (wywołania encji zewnętrznych)

Najlepsze praktyki:

• Użyj wtyczek takich jak SVG Support, SVG Safe, HappyFiles z wbudowaną funkcją oczyszczania.
• przeprowadzić dezynfekcję za pomocą narzędzi online (np. SVG Sanitizer Test Darryll Doyle'a).
• 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 właścicielem małej firmy, otrzymujesz dostęp do potężnej technologii bez konieczności kodowania. Twoja strona będzie ładować się szybciej, zajmować wyższe pozycje w wynikach wyszukiwania i wyglądać olśniewająco! Na co czekasz? Wejdź tutaj i pobierz swój własny materiał.