Chcesz dowiedzieć się, jak przesyłać pliki SVG do WordPressa? W tym samouczku przedstawimy metody, aby to osiągnąć..
Administratorzy stron internetowych i projektanci stron internetowych muszą w swojej pracy używać różnych formatów plików multimedialnych. Jednym z najpopularniejszych obecnie formatów jest SVG, format wektorowy oparty na XML. Niestety, nie wszystkie przeglądarki i platformy obsługują SVG, więc musisz najpierw ręcznie włączyć obsługę SVG.
W tym artykule omówiono kroki przesyłania plików SVG do witryny WordPress za pomocą wtyczki SVG Support. Odpowiemy również na kilka pytań dotyczących problemów bezpieczeństwa związanych z tym konkretnym formatem plików multimedialnych i dlaczego warto używać SVG.
Na początek zapoznajmy się z SVG i jego działaniem.
Ale zanim zaczniemy, jeśli nigdy nie instalowałeś WordPressa, dowiedz się Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu
Wróćmy do tego, dlaczego tu jesteśmy.
Co to jest SVG?
Skalowalna grafika wektorowa (SVG) to format grafiki wektorowej oparty na tekście XML. Chociaż popularne formaty obrazów, takie jak JPG i PNG, składają się z mnóstwa małych kwadratów zwanych pikselami, ten format do opisywania atrybutów obrazu opiera się na języku znaczników XML.
W styczniu 2022, 42% wszystkich stron internetowych na całym świecie użyj SVG. Odsetek ten wzrósł od stycznia 2021 r., kiedy to tylko 29,4% stron internetowych użyłem go. Podobnie jak formaty PNG i JPG, SVG jest popularny wśród witryn o dużym natężeniu ruchu, takich jak Google, Wikipedia i YouTube.
Kolejną świetną rzeczą w SVG jest to, że jest szeroko obsługiwany przez wszystkie główne przeglądarki.
Oto lista przeglądarek obsługujące format pliku SVG:
| nawigator | Częściowe wsparcie | Pełne wsparcie |
| Bord | - | Wersja 12-18, 79-96, 97 |
| Firefox | Wersja 2 | Wersje 3-94, 95, 96-97 |
| Firefox dla Androida | - | Wersja 95 |
| Chrom | - | Wersje 4-96, 97, 98-100 |
| Chrome na Androida | - | Wersja 96 |
| Safari | Wersja 3.1 | Wersja 3.2-15.1, 15.2, TP |
| Opera | - | Wersje 10-81, 82 |
| Mini Opera | - | Wszystkie wersje |
| Opera Mobile | - | Wydanie 12-12.1, 64 |
| Safari na iOS | - | Wydanie 3.2-15.1, 15.2 |
| Android przeglądarka | Wersja 3-4.3 | Wydanie 4.4-4.4.4, 96 |
| Przeglądarka UC dla Androida | - | Wersja 12.12 |
| Samsung Internet | - | Wydanie 4-14.0, 15.0 |
| Przeglądarka QQ | - | Wersja 10.4 |
| Przeglądarka Baidu | - | Wersja 7.12 |
| Przeglądarka KaiOS | - | Wersja 2.5 |
Jak działa SVG?
Pliki SVG używają XML do tworzenia dwuwymiarowych obrazów wektorowych. W przeciwieństwie do JPG i PNG grafika wektorowa nie zawiera pikseli. Zamiast tego ich zachowanie jest opisane w plikach tekstowych XML.
Z tego powodu pliki SVG mogą być przeszukiwane, indeksowane, skryptowane, modyfikowane i kompresowane jak kod. Dzięki temu każdy może je tworzyć za pomocą edytora tekstu lub oprogramowania do grafiki wektorowej.
Czy WordPress obsługuje SVG?
WordPress domyślnie nie obsługuje SVG ze względu na związane z tym zagrożenia bezpieczeństwa — kwestie bezpieczeństwa związane z SVG zostaną omówione bardziej szczegółowo później.
Oto komunikat o błędzie, który pojawia się podczas przesyłania grafiki SVG do witryny WordPress:
Jest aktualna dyskusja o uczynieniu SVG częścią podstawowej funkcjonalności WordPressa. Do tego czasu musimy wykazać się kreatywnością i korzystać z innych rozwiązań, aby przesyłać obrazy SVG do WordPressa.
Dlaczego warto korzystać z SVG WordPress?
Pomimo problemów z bezpieczeństwem, wielu użytkowników nadal używa tego formatu obrazu, ponieważ ma on różne zalety. Oto niektóre korzyści płynące z używania plików SVG:
- Skalowalność: Ponieważ SVG jest formatem obrazu wektorowego, pliki SVG zachowują tę samą jakość we wszystkich rozdzielczościach ekranu. Ta zaleta jest również widoczna po ich powiększeniu, dlatego wiele osób używa tego skalowalnego formatu obrazu do ikon i logo.
- Mniejszy rozmiar pliku : Pliki SVG ułatwiają poprawę wydajności witryny, ponieważ zajmują mniej miejsca w sieci i ładują się znacznie szybciej niż inne obrazy.
- SEO friendly : Google indeksuje pliki SVG, umożliwiając ich wyświetlanie w wyszukiwarce grafiki Google i usprawniając wyszukiwanie. SEO. W przypadku innych typów obrazów ograniczasz się do optymalizacji ich atrybutów alternatywnych.
- Pliki SVG oparte na kodzie można edytować za pomocą edytora tekstu lub oprogramowania do edycji grafiki wektorowej. Możesz optymalizować pliki SVG dla stron internetowych, a nawet dodawać animacje, aby uczynić grafikę interaktywną.
SVG na WordPressie i zabezpieczeniach
Ponieważ SVG jest zasadniczo plikiem tekstowym XML, ma możliwe do wykorzystania luki, które nie wpływają na inne formaty obrazów. Dlatego ludzie mogą łatwo przejąć go za pomocą złośliwego kodu, aby uruchomić ataki Cross-Site Scripting (XSS) i XML External Entity (XXE) na twój system.
Z tego powodu należy zachować ostrożność podczas obsługi plików SVG i dodawania ich do WordPressa.
Aby zminimalizować zagrożenia bezpieczeństwa, upewnij się, że pliki SVG zostały oczyszczone przed przesłaniem ich do biblioteki multimediów WordPress. Ten proces usuwa podejrzany kod i błędy, dzięki czemu obrazy są bezpieczne dla Twojej witryny.
Możesz wyczyścić przesłane pliki SVG za pomocą wtyczki SVG – jej kroki omówimy później. Zalecamy jednak dwukrotną dezynfekcję za pomocą Test odkażania SVG -
Innym sposobem zabezpieczenia witryny WordPress jest ograniczenie przesyłania SVG tylko do zaufanych użytkowników. Wybrani użytkownicy powinni mieć świadomość problemów bezpieczeństwa związanych z formatem SVG – zniechęci ich to do pozyskiwania plików SVG z wątpliwych źródeł.
Jak przesyłać pliki SVG do WordPressa w 2 bezpiecznych metodach
Technicznie rzecz biorąc, istnieją dwa sposoby dodania obsługi SVG do WordPress: za pomocą a WordPress Plugin lub aktywując go ręcznie. Niezależnie od tego, co wybierzesz, zdecydowanie zalecamy ograniczenie uprawnień do pobierania do administratorów i zaufanych użytkowników tylko w celu zminimalizowania złośliwego pobierania.
Użyj wtyczki WordPress
W tym samouczku użyjemy Wsparcie SVG, to WordPress Plugin używa biblioteki sanitizera SVG, która zostanie automatycznie aktywowana podczas przesyłania plików SVG do biblioteki multimediów. Jest również łatwy w konfiguracji i darmowy.
Oto kroki, aby skonfigurować obsługę SVG:
- IZainstaluj wtyczkę i aktywuj go.
- Dostęp do ustawienia -> wsparcie SVG z pulpitu WordPress.
- Zaznacz pole obok opcji Ogranicz do administratorów aby ograniczyć uprawnienia do przesyłania. Zrób to samo dla opcji Aktywuj tryb zaawansowany jeśli chcesz uzyskać dostęp do zaawansowanych funkcji, takich jak wbudowane renderowanie SVG i stylizacja CSS.
- Po zapisaniu zmian możesz bezpiecznie rozpocząć przesyłanie plików SVG do biblioteki multimediów.
Ręcznie dodaj obsługę WordPress SVG
Ta metoda obejmuje edycję pliku functions.php Twojej witryny WordPress. Dlatego zdecydowanie zalecamy wykonanie tych kroków, jeśli znasz PHP i w pełni rozumiesz problem z zabezpieczeniami SVG.
Upewnij się, że wykonaj kopię zapasową swojej witryny WordPress przed wprowadzeniem zmian, aby uniknąć utraty danych w przypadku błędnej konfiguracji.
Poniższe kroki wyjaśnią, jak ręcznie włączyć SVG w WordPressie za pomocą klienta FTP, takiego jak fileZilla.
- Przejdź do katalogu plików swojej witryny na swoim hoście
- Dostęp do public_html -> wp-includes. Przewiń w dół, aż dostaniesz znajdź funkcje.php.
- Kliknij ten plik prawym przyciskiem myszy i wybierz opcję Wyświetl/edytuj, aby go otworzyć, i wklej do niego następujący fragment kodu:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');- Zapisz zmiany i spróbuj przesłać nowy plik SVG. Jeśli proces się powiedzie, twoja biblioteka multimediów powinna zaakceptować przesyłanie pliku.
Wiele zalet plików SVG przyczynia się do rosnącej popularności tego typu plików. Niestety, pliki tekstowe XML są podatne na wstrzykiwanie kodu, co jest głównym powodem, dla którego WordPress domyślnie nie obsługuje SVG.
To powiedziawszy, istnieją dwa sposoby, aby Twoja witryna WordPress akceptowała pliki SVG: za pomocą pliku WordPress Plugin lub edytuj plik functions.php. Oprócz ograniczenia uprawnień do przesyłania, będziesz mógł bezpiecznie przesyłać pliki SVG do biblioteki multimediów witryny.
Inne zalecane zasoby
Zapraszamy również do zapoznania się z Zasoby poniżej, aby przejąć większą własność i kontrolę nad swoją witryną i blogiem.
- Jak stworzyć prostą wtyczkę WordPress
- Jak stworzyć prostą wtyczkę WordPress z blokiem Gutenberga
- Jak ustawić swoją stronę główną w WordPress
- Jak zrozumieć pulpit nawigacyjny WordPress
- Jak stworzyć prostą wtyczkę WordPress
Wnioski
To tyle, jeśli chodzi o ten przewodnik, który pokazuje, jak przesyłać pliki SVG do WordPressa. Mamy nadzieję, że ten artykuł dał ci wgląd w korzyści i zagrożenia związane z przesyłaniem plików SVG do witryny WordPress. Jeśli masz jakiekolwiek wątpliwości lub sugestie, daj nam znać w ciągu commentaires.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Tymczasem udostępnij ten artykuł w różnych sieciach społecznościowych.
...
