Włącz obsługę SVG w WordPress

WordPress umożliwia użytkownikom przesyłanie kilku różnych rodzajów plików graficznych. Prawdopodobnie rozpoznasz typowych podejrzanych, takich jak PNG i JPG. Wyświetlanie innych typów plików, takich jak grafika wektorowa, może być bardziej problematyczne.

Na szczęście istnieje kilka sposobów na włączenie plików wektorowych do Twojej witryny. Chociaż nie jest to funkcja natywna, pliki Scalable Vector Graphics (SVG) mogą być używane do wyświetlania dwuwymiarowych obrazów w witrynach WordPress. Po niewielkiej rekonfiguracji będziesz w stanie zoptymalizować niektóre logo i inne grafiki przy użyciu tego typu pliku.

Uwaga: jeśli hostujesz za pomocą WP Engine, natywnie obsługujemy kompresję GZIP w plikach SVG.

W tym artykule dowiemy się więcej o tym, czym są pliki SVG i dlaczego warto ich używać. Następnie omówimy dwa sposoby umożliwienia ich użycia w Twojej witrynie. Omówimy również kilka ważnych środków ostrożności, które możesz chcieć podjąć. Zacznijmy!

Co to jest plik SVG?

Plik SVG to rodzaj obrazu wektorowego. Pliki wektorowe mają inną kompozycję niż bardziej popularne typy plików graficznych. Na przykład plik JPG składa się z tysięcy pikseli. Z drugiej strony w przypadku pliku SVG tak nie jest.

Obrazy wektorowe są bardziej jak zestaw pisemnych instrukcji. Nie zawierają pikseli tworzących większy obraz. Zamiast tego zawierają zestaw danych przypominający schemat, który tworzy dwuwymiarowy obraz. Oznacza to, że korzystanie z plików SVG ma pewne wyjątkowe zalety.

Dlaczego warto używać SVG?

Pliki SVG mają wiele zalet. Ponieważ są one wysoce skalowalne, możesz manipulować rozmiarem w razie potrzeby bez wpływu na jakość obrazu. Jak zapewne wiesz aż za dobrze, jeśli spróbujesz zwiększyć rozmiar JPG, jakość bardzo szybko spadnie do poziomu bezużytecznego.

Tutaj mogą się przydać pliki SVG. Chociaż nie są one przeznaczone do wyświetlania tradycyjnych fotografii, są doskonałym wyborem dla firmowych logo, ikon i innych prostych grafik w Twojej witrynie.

Ponadto pliki SVG są zwykle znacznie mniejsze niż inne typy obrazów. Oznacza to, że Twoja witryna nie ugrzęźnie w grafice. Co więcej, pliki SVG są indeksowane przez Google i to od dłuższego czasu. Może to być prawdziwym dobrodziejstwem dla optymalizacji Twojej witryny pod kątem wyszukiwarek (SEO).

Jak przesłać plik SVG do WordPress

Ponieważ WordPress nie obsługuje gotowych plików SVG, będziesz musiał trochę popracować, aby umieścić je w swojej witrynie. W kilku następnych sekcjach omówimy, jak dodać pliki SVG do swojej witryny za pomocą wtyczki i ręcznie.

Metoda 1: Użyj wtyczki

Podobnie jak w przypadku wielu zadań WordPress, wtyczki mogą ułatwić włączenie obsługi SVG. Wszystko, co musisz zrobić, to wybrać odpowiednie narzędzie i skonfigurować kilka ustawień.

Krok 1: Pobierz wtyczkę

Najpierw musisz pobrać i zainstalować wtyczkę SVG. Zalecamy obsługę SVG:

Po zainstalowaniu i aktywowaniu wtyczki będziesz mieć nową opcję menu na pulpicie nawigacyjnym WordPress w obszarze Ustawienia > Obsługa SVG . Otrzymasz tam instrukcje, jak stylizować pliki SVG na swoją stronę internetową:

Dodatkowo będziesz mógł skonfigurować kilka ważnych ustawień administracyjnych. Obejmuje to ograniczenie uprawnień do przesyłania plików SVG tylko do administratorów:

Następnie będziesz mógł przesyłać pliki SVG bezpośrednio do biblioteki multimediów. Jest jednak kilka innych ważnych elementów, o które należy zadbać w pierwszej kolejności.

Krok 2: Włącz obsługę GZip plików SVG na swoim serwerze

Sposób, w jaki podejdziesz do tego kroku, będzie zależał od dostawcy usług hostingowych i konfiguracji serwera. Na przykład tutaj, w WP Engine, GZip jest już włączony dla określonej listy typów plików. Mając to na uwadze, „image/svg+xml” nie jest jednym z nich.

Dodanie tego typu do listy dla Twojej witryny zapewni odpowiednią i szybką optymalizację plików SVG. Musisz dołączyć ten typ pliku do pliku .htaccess , aby wszystko działało płynnie.

Krok 3: Upewnij się, że wtyczka prawidłowo zabezpiecza pliki

Jedną z wad korzystania z plików SVG i głównym powodem, dla którego ten typ pliku nie został jeszcze włączony do rdzenia WordPressa, są problemy z bezpieczeństwem. Ponieważ pliki SVG są oparte na XML, są podatne między innymi na ataki podmiotów zewnętrznych.

Podczas konfigurowania wtyczki SVG zaleca się ograniczenie dostępu do przesyłania SVG tylko do administratorów. Jednak jeszcze bezpieczniejszym podejściem jest „oczyszczenie” plików SVG przed ich przesłaniem. Eliminuje to niepotrzebny kod XML, który mógłby narazić Twoją witrynę na ataki.

Wtyczka SVG Support nie obejmuje automatycznej dezynfekcji, ale istnieją inne wtyczki, które to robią. Bezpieczne SVG jest jednym z nich:

Alternatywnie możesz także zainstalować własny środek dezynfekujący i używać go niezależnie. Twórca Safe SVG udostępnił kod dezynfekujący wtyczki na GitHub, aby każdy mógł z niego korzystać.

Posiadanie własnego środka dezynfekującego jest również dobrą opcją, jeśli planujesz użyć następnej metody włączania SVG w swojej witrynie WordPress.

Metoda 2: Ręcznie włącz przesyłanie plików SVG

Jeśli wolisz ubrudzić sobie ręce niż korzystać z wtyczki, możesz ręcznie włączyć swoją witrynę WordPress, aby akceptowała pliki SVG. Następnie przyjrzymy się, jak działa ten proces.

Krok 1: Edytuj plik Functions.php swojej witryny

Aby rozpocząć, musisz edytować plik functions.php swojej witryny. Aby to zrobić, możesz przejść do Wygląd > Edytuj motywy na pulpicie nawigacyjnym i wybrać plik functions.php :

Alternatywnie możesz uzyskać dostęp do plików swojej witryny za pomocą aplikacji File Transfer Protocol (FTP), takiej jak FileZilla.

Tak czy inaczej, najlepiej jest utworzyć motyw potomny lub przejść do środowiska programistycznego przed przystąpieniem do jakichkolwiek poważnych prac nad witryną. Dzięki temu Twoja działająca witryna będzie chroniona przed szkodami podczas wprowadzania zmian.

Krok 2: Dodaj fragment kodu

Następnie musisz dodać następujący fragment kodu do swojego pliku functions.php :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

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

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Następnie będziesz mógł przesyłać obrazy SVG do swojej biblioteki multimediów. Tam możesz je przeglądać i wchodzić w interakcje z nimi, tak jak z innymi typami plików graficznych.

Krok 3: Zabezpiecz dostęp i ogranicz uprawnienia do przesyłania plików SVG

Jak wspomnieliśmy wcześniej, włączenie plików SVG wiąże się z pewnym ryzykiem. Aby Twoja witryna była bezpieczna, możesz ustawić uprawnienia do przesyłania plików SVG, tworząc niestandardowe role użytkowników. Aby to osiągnąć, możesz użyć wtyczki, takiej jak User Role Editor lub WPFront User Role Editor.

Wtyczki te umożliwiają dostosowanie poziomów dostępu i uprawnień dla istniejących ról użytkowników. Innymi słowy, pozwolą ci wyznaczyć, którzy użytkownicy będą mieli uprawnienia do przesyłania plików SVG. Pomoże Ci to zachować kontrolę nad bezpieczeństwem tych plików.

Zachowaj bezpieczeństwo dzięki silnikowi WP

Natywnie WordPress nie umożliwia korzystania z plików SVG. To niefortunne, ponieważ te pliki są zwykle najlepszą opcją do wyświetlania logo i innych grafik. Dobrą wiadomością jest to, że z pomocą naszych ulubionych zasobów dla programistów będziesz mógł włączyć i zabezpieczyć korzystanie z plików SVG w swojej witrynie.

Ponadto pamiętaj, że w ramach naszych planów hostingowych WordPress uzyskasz dostęp do profesjonalnego wsparcia i dobrze rozwiniętych rozwiązań bezpieczeństwa witryn. Zabezpiecz swoją witrynę z nami już dziś!