제퍼넷 로고

WordPress에서 SVG 사용하기(2가지 유용한 플러그인 권장 사항)

시간

WordPress에서 SVG를 사용할 계획이라면 약간의 발품 작업이 필요합니다. 정당한 이유로 WordPress에서는 기본적으로 SVG를 허용하지 않습니다. SVG는 다른 리소스를 로드하고 JavaScript를 실행하는 기능을 포함하여 많은 기능을 갖춘 마크업 구문입니다. 따라서 WordPress에서 기본적으로 SVG를 전면적으로 허용한다면 역할이 매우 제한된 사용자라도 SVG를 업로드하고 문제를 일으킨다., XSS 취약점과 같습니다.

하지만 그것이 귀하의 사이트에 문제가 되지 않고 단지 SVG를 사용하고 있다고 가정해 보겠습니다. 먼저 WordPress에서 SVG를 사용한다는 것이 무엇을 의미하는지 명확히 합시다. 미디어 업로더를 통해 SVG를 업로드하고 게시물 콘텐츠 내에서 SVG 이미지를 주요 이미지로 사용합니다.

예를 들어 템플릿에서 SVG를 사용하는 것을 방해하는 것은 없습니다. 인라인 의미 <svg> 또는 CSS 등에서 템플릿의 이미지로 연결하는 SVG 파일. 완전 괜찮고 특별히 할 필요는 없어 WordPress에서 작동하려면.

WordPress에서 SVG를 사용하는 예. 미디어 라이브러리가 열려 있고 다양한 SVG 파일의 타일 미리보기가 표시됩니다.

문제를 직접 해결하세요

WordPress에서 SVG를 사용하지 못하게 하는 이유는 미디어 라이브러리 업로더가 파일의 MIME 유형을 거부하기 때문입니다. WordPress에서 SVG를 허용하려면 이 필터만 있으면 됩니다. 이것은 당신의 functions.php 또는 기능 플러그인:

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

그러나 그 이후의 문제는 SVG 파일이 일반적으로 미디어 라이브러리의 이미지 미리 보기, 추천 이미지 위젯, 심지어 클래식 또는 블록 편집기와 같이 필요한 다양한 위치에 올바르게 표시되지 않는다는 것입니다. 나는 이 문제를 해결하기 위해 삽입할 수 있는 CSS 조각. 하지만 — 이것이 바로 제가 이 새 글을 쓰는 이유입니다 — 그것은 더 이상 저에게 효과가 없는 것 같아서 생각하게 되었습니다.

WordPress에서 SVG를 사용하기 위한 플러그인

나는 어, 왜 귀찮게 하는지 생각하곤 했습니다. 이 기능을 허용하는 것은 코드가 너무 작아서 함수를 사용하여 직접 수행하는 것이 좋습니다. 그러나 WordPress에는 물론 시간이 지남에 따라 변화하는 방법이 있으며 SVG 지원은 WordPress에서 기본적으로 수행할 작업이 아니기 때문에 실제로 플러그인이 처리할 수 있는 좋은 아이디어입니다. 이렇게 하면 WordPress가 발전함에 따라 SVG 플러그인이 이상한 점을 처리하도록 발전할 수 있으며, 이론적으로 충분한 사람들이 SVG 플러그인을 사용하면 유지 관리될 것입니다.

WordPress에서 SVG를 사용하기 위한 몇 가지 플러그인 권장 사항은 다음과 같습니다.

SVG 지원

이것은 하나입니다 최근에 사용하고 있는데 제게는 아주 좋은 것 같습니다.

WordPress 플러그인 디렉토리에 있는 WordPress용 SVG 지원 플러그인의 스크린샷.

설치하고 활성화하기만 하면 됩니다. 설정 화면이 있지만 그런 것들은 필요하지 않습니다. 프론트엔드에 CSS를 추가로 로드해도 괜찮은지 묻는 방식이 정말 마음에 듭니다(저에게는 적합하지 않으므로 그대로 둡니다). 플러그인에서 로드할 내용을 표시하는 것이 훨씬 더 좋을 것입니다. 원한다면 자신의 CSS에 추가할 수 있습니다.

WordPress에서 관리자에게 SVG 업로드를 제한하는 설정은 스마트하지만 SVG 안전에 대해 더 진지하게 생각하고 싶다면 이 다음 플러그인을 대신 사용할 수 있습니다.

안전한 SVG

하나는 몇 년 동안 업데이트되지 않았지만 SVG 파일을 업로드할 때 문자 그대로 삭제하고 WordPress에 SVG를 추가하는 동안 최적화한다는 점에서 SVG 안전을 위해 더욱 노력합니다.

WordPress 플러그인 디렉토리에 있는 안전한 SVG 플러그인의 스크린샷.

우리는 이 사이트의 작성자 등에 대해 상당히 엄격한 편집 통제권을 갖고 있으므로 이 SVG 플러그인의 보안 측면은 나에게 큰 걱정거리가 아닙니다. 게다가 나는 내 자신의 SVG 최적화를 담당하는 것을 좋아하기 때문에 이것은 나에게 완벽하지는 않지만 사이트 소유자 수준에서 기술 전문 지식이 부족한 사이트에 권장할 것입니다.


있는 것 같아요 간편한 SVG 지원 그것도 있지만 Support SVG 플러그인만큼 좋지 않은 것 같고, 최근 업데이트가 되지 않아서 추천할 수가 없습니다.

WordPress에서 SVG를 사용하기 위해 어떤 플러그인을 성공적으로 사용해 보셨나요? 추가하고 싶은 추천사항이 있나요?

출처: https://css-tricks.com/using-svg-in-wordpress/

spot_img

최신 인텔리전스

spot_img

우리와 함께 채팅

안녕하세요! 어떻게 도와 드릴까요?