Вопрос или проблема
Я использую Divi (дочерняя тема Divi) и плагин WP Recipe Maker. Я добавил код в файл functions.php, чтобы разрешить svg. Я обратился к разработчику WP Recipe Maker по этому поводу, но его предложения не помогли решить проблему.
Инструкции по добавлению собственных иконок, которые могут быть выбраны в WP Recipe Maker, заключались в создании папки в дочерней теме и загрузке svg для иконок в эту папку. Как только они загружены в эту папку, svg отображаются в редакторе шаблонов рецептов. Я сделал все это, и svg отображается там, где должно. Однако происходит одно из двух:
- ИЗМЕНЯЕТСЯ цвет ФОНА, а не иконка, ИЛИ
- Иконка просто пустое место, и когда я ее выбираю, “блок” присутствует, но ничего не отображается.
Я уверен, что это связано с тем, как я сохраняю SVG или с чем-то другим, но не могу понять, что я делаю не так. У кого-нибудь есть предложения по этому поводу? Я могу использовать Adobe Express, Canva, Inkscape, Google Slides или Gimp для редактирования/создания графики. У меня больше нет Illustrator или Photoshop.
Ответ или решение
Проблема, с которой вы столкнулись при работе с SVG-иконками в WP Recipe Maker, требует внимательного рассмотрения нескольких аспектов. Давайте разберем шаги по выявлению и устранению проблемы.
Формат и структура SVG:
- Проверьте структуру SVG: Убедитесь, что сам файл SVG правильно структурирован. Откройте SVG в текстовом редакторе и проверьте, что он содержит правильные теги
<svg>, а основные элементы и их атрибуты заданы верно. - Цвет и заливка: Цветные элементы и заливки должны быть явно определены в SVG. Если фон изменяет цвет вместо иконки, это может указывать на проблему с атрибутами
fillиstrokeв SVG.
Совместимость с WordPress и Divi:
-
Совместимость с WordPress: Убедитесь, что код, который вы добавили в
functions.php, действительно разрешает загрузку SVG в WordPress. Код, как правило, выглядит следующим образом:function cc_mime_types($mimes) { $mimes['svg'] = 'image/svg+xml'; return $mimes; } add_filter('upload_mimes', 'cc_mime_types'); -
Темы и плагины: Проверьте, нет ли конфликтов среди плагинов или в теме Divi, которые могут влиять на отображение SVG. Иногда другие стили могут перекрывать настройки для SVG-изображений.
Редактирование и создание SVG:
- Используйте надежные инструменты: Хотя у вас нет доступа к Adobe Illustrator или Photoshop, такие инструменты, как Inkscape, предлагают мощные возможности для создания и редактирования SVG. Экспортируйте SVG, проверяя, чтобы он не содержал посторонних слоев или элементов.
Диагностика и тесты:
-
Просмотр кода страницы: Используя браузерный инструмент для разработчиков, исследуйте элемент страницы, где находится SVG. Убедитесь, что правильные стили применяются к самому SVG.
-
Проверка на других сайтах: Попробуйте использовать тот же SVG на другом сайте или в чистой версии WordPress без каких-либо изменений. Это поможет исключить проблемы локальной конфигурации.
В заключение, важно отладить каждый аспект, начиная от создания и хранения SVG до его интеграции в вашу тему и использование в WP Recipe Maker. Анализ этих шагов поможет выявить, где возникает проблема и как ее можно устранить с помощью доступных вам инструментов.