Искате ли да разберете как да качвате SVG в WordPress? В този урок ще ви представим методите за постигане на това.
Уеб администраторите и уеб дизайнерите са длъжни да използват различни формати на медийни файлове в своята работа. Един от най-популярните формати днес е SVG, XML-базиран векторен формат. За съжаление, не всички браузъри и платформи поддържат SVG, така че първо трябва да активирате поддръжката на SVG ръчно.
Тази статия ще обхване стъпките за качване на SVG файлове в уебсайт на WordPress с помощта на приставката за поддръжка на SVG. Ще отговорим и на няколко въпроса относно проблемите със сигурността около този конкретен формат на медиен файл и защо си струва да използвате SVG.
За да започнете, нека се запознаем със SVG и как работи.
Но преди да започнем, ако никога не сте инсталирали WordPress, разберете Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог
След това обратно към защо сме тук.
Какво е SVG?
Scalable Vector Graphics (SVG) е текстово базиран XML формат на векторни графики. Въпреки че често срещаните формати на изображения като JPG и PNG са съставени от тонове малки квадратчета, наречени пиксели, този формат разчита на езика за маркиране на XML, за да опише атрибутите на изображението.
През януари 2022, 42% от всички уебсайтове по света използвайте SVG. Този процент се е увеличил само от януари 2021 г 29,4% от уебсайтовете са го използвали. Подобно на форматите PNG и JPG, SVG е популярен сред уебсайтове с голям трафик като Google, Wikipedia и YouTube.
Друго страхотно нещо за SVG е, че се поддържа широко от всички основни браузъри.
Тук е най- списък с браузъри които поддържат SVG файлов формат:
| навигатор | Частична подкрепа | Пълна подкрепа |
| Bord | - | Версия 12-18, 79-96, 97 |
| Firefox | Версия 2 | Версии 3-94, 95, 96-97 |
| Firefox за Android | - | Версия 95 |
| Chrome | - | Версии 4-96, 97, 98-100 |
| Chrome за Android | - | Версия 96 |
| сафари | Версия 3.1 | Версия 3.2-15.1, 15.2, TP |
| опера | - | Версии 10-81, 82 |
| Мини опера | - | Всички версии |
| Opera Mobile | - | Издание 12-12.1, 64 |
| Safari на iOS | - | Издание 3.2-15.1, 15.2 |
| Android Browser | Версия 3-4.3 | Издание 4.4-4.4.4, 96 |
| UC браузър за Android | - | Версия 12.12 |
| Samsung интернет | - | Издание 4-14.0, 15.0 |
| QQ браузър | - | Версия 10.4 |
| Браузър Baidu | - | Версия 7.12 |
| Браузър KaiOS | - | Версия 2.5 |
Как работи SVG?
SVG използват XML за създаване на двуизмерни векторни изображения. За разлика от JPG и PNG, векторната графика няма пиксели. Вместо това, тяхното поведение е описано в XML текстови файлове.
Поради тази причина SVG могат да бъдат търсени, индексирани, скриптирани, модифицирани и компресирани като код. В резултат на това всеки може да ги създаде с помощта на текстов редактор или софтуер за векторна графика.
Поддържа ли WordPress SVG?
В WordPress няма поддръжка на SVG по подразбиране поради рисковете за сигурността, които налага – по-късно ще разгледаме по-задълбочено проблемите със сигурността около SVG.
Ето съобщение за грешка, което се появява при качване на SVG графика в уебсайт на WordPress:
Има текуща дискусия за превръщането на SVG в част от основната функционалност на WordPress. Дотогава трябва да проявим креативност и да използваме други решения за качване на SVG изображения в WordPress.
Защо да използвате WordPress SVG?
Въпреки проблемите със сигурността, много потребители все още използват този формат на изображението, тъй като има различни предимства. Ето някои от предимствата на използването на SVG файлове:
- мащабируемост: Тъй като SVG е формат на векторно изображение, SVG файловете поддържат едно и също качество във всички разделителни способности на екрана. Това предимство е налице и след увеличаването им, поради което много хора използват този мащабируем формат на изображения за икони и лога.
- По-малък размер на файла : SVG файловете улесняват подобряването на производителността на уебсайта, тъй като заемат по-малко място за съхранение в мрежата и се зареждат много по-бързо от другите изображения.
- SEO Friendly : Google индексира SVG файлове, което им позволява да се показват в Google Търсене на изображения и подобрява усилията ви при търсене. SEO. С други типове изображения вие сте ограничени до оптимизиране на техните алтернативни атрибути.
- Базирани на код SVG могат да се редактират с помощта на текстов редактор или софтуер за редактиране на векторна графика. Можете да оптимизирате SVG файлове за уебсайтове или дори да добавяте анимации, за да направите графиката интерактивна.
SVG на WordPress и сигурност
Тъй като SVG по същество е XML текстов файл, той има експлоатируеми уязвимости, които не засягат други графични формати. Следователно хората могат лесно да го присвоят със злонамерен код, за да стартират атаки на междусайтови скриптове (XSS) и XML External Entity (XXE) на вашата система.
Поради тази причина трябва да бъдете внимателни, когато боравите с SVG файлове и ги добавяте към WordPress.
За да сведете до минимум рисковете за сигурността, не забравяйте да дезинфекцирате SVG файловете, преди да ги качите в медийната библиотека на WordPress. Този процес премахва подозрителен код и грешки, правейки изображенията безопасни за вашия уебсайт.
Можете да почистите качените SVG файлове с помощта на SVG плъгин – ще разгледаме стъпките му по-късно. Въпреки това препоръчваме да го дезинфекцирате два пъти с SVG дезинфектант тест -
Друг начин да защитите своя уебсайт на WordPress е да ограничите качванията на SVG само до доверени потребители. Избраните потребители трябва да са наясно с проблемите със сигурността около SVG формата – това ще ги обезкуражи да получават SVG файлове от съмнителни източници.
Как да качите SVG файлове в WordPress по 2 сигурни метода
Технически има два начина за добавяне на SVG поддръжка към WordPress: използване на a WordPress плъгин или като го активирате ръчно. Който и да изберете, настоятелно препоръчваме да ограничите привилегиите за изтегляне до администратори и доверени потребители, за да сведете до минимум злонамерените изтегляния.
Използвайте плъгин за WordPress
В този урок ще използваме Поддръжка на SVG. Това WordPress плъгин използва SVG дезинфекционна библиотека, която автоматично ще се активира при качване на SVG файлове в медийната библиотека. Освен това е лесен за настройка и безплатен за използване.
Ето стъпките за конфигуриране на поддръжка на SVG:
- IИнсталирайте плъгина и го активирайте.
- Достъп до настройки -> подкрепа SVG от вашето табло за управление на WordPress.
- Поставете отметка в квадратчето до опцията Ограничаване до администратори за ограничаване на привилегиите за качване. Направете същото за опцията Активирайте разширен режим ако искате достъп до разширени функции, като вградено SVG изобразяване и CSS стил.
- След като запазите промените, можете спокойно да започнете да качвате SVG файлове в медийната библиотека.
Ръчно добавете поддръжка на WordPress SVG
Този метод включва редактиране на файл functions.php на вашия уебсайт WordPress. Затова силно препоръчваме да следвате тези стъпки, ако сте запознати с PHP и напълно разбирате проблема със сигурността на SVG.
Уверете се, че сте архивирайте вашия уебсайт WordPress преди да направите промени, за да избегнете загуба на данни в случай на неправилна конфигурация.
Следващите стъпки ще обяснят как да активирате SVG в WordPress ръчно с помощта на FTP клиент като FileZilla.
- Отидете до файловата директория на вашия уебсайт на вашия хост
- Достъп до public_html -> WP-включва. Превъртете надолу, докато не намерете функции.php.
- Щракнете с десния бутон върху този файл и изберете Преглед/Редактиране, за да го отворите и поставете следния кодов фрагмент в него:
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');- Запазете промените и опитайте да качите нов SVG файл. Ако процесът е успешен, вашата медийна библиотека трябва да приеме качването на файла.
Les nombreux avantages des fichiers SVG contribuent à la популярност croissante de ce type de fichier. Malheureusement, les fichiers texte XML sont sujets à l’injection de code, ce qui est la principale raison pour laquelle WordPress n’inclut pas le support SVG par défaut.
Въпреки това има два начина да накарате уебсайта си на WordPress да приема SVG файлове: с помощта на a WordPress плъгин или редактирайте файла functions.php. В допълнение към ограничаването на привилегиите за качване, вие ще можете да качвате сигурно SVG файлове в медийната библиотека на уебсайта.
Други препоръчани ресурси
Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.
- Как да създадете прост плъгин за WordPress
- Как да създадете прост Gutenberg Block WordPress Plugin
- Как да настроите началната си страница в WordPress
- Как да разберем таблото за управление на WordPress
- Как да създадете прост плъгин за WordPress
Заключение
Това е всичко за това ръководство, което ви показва как да качвате SVG файлове в WordPress. Надяваме се, че тази статия ви е дала известна представа за ползите и рисковете от качването на SVG файлове в уебсайт на WordPress. Ако имате някакви притеснения или предложения, моля, уведомете ни в рамките на това Връзка.
Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Междувременно, споделете тази статия във вашите различни социални мрежи.
...