워드프레스에 SVG 이미지 파일을 추가하는 방법

당신의 워드프레스 사이트에 그래픽 업그레이드를 제공할 준비가 되셨나요? 무한히 확장 가능한 로고와 아이콘을 상상해 보세요. 어떤 장치에서도 선명하게 보이고 픽셀화나 왜곡이 없습니다. 이 가이드에서는 WP Media Folder를 사용하여 워드프레스에서 SVG 파일을 업로드하고 관리하는 방법을 정확하게 보여주며, 개발자가 아니더라도 누구나 쉽게 사용할 수 있습니다.

이 단계별 자습서에서는 SVG 파일의 이점, 디자이너가 SVG 파일을 좋아하는 이유, 그리고 SEO 및 페이지 성능에 뛰어난 이유를 설명합니다. 신뢰할 수 있는 플러그인을 사용하거나 간단한 코드 수정을 통해 SVG 업로드를 활성화하는 여러 가지 쉬운 방법을 배우고 사이트를 안전하게 유지하기 위한 스마트한 전략을 배울 수 있습니다.

우리는 JoomUnited의 강력한 미디어 관리 플러그인인 WP Media Folder를 사용할 것입니다. 

SVG가 확장 가능한 그래픽에 적합한 이유

확장성 – SVG는 벡터 파일입니다. 즉, 로고, 아이콘 또는 반응형 디자인에서 품질 저하 없이 확대, 축소할 수 있습니다.

가볍고 SEO 친화적입니다 . SVG 파일은 일반적으로 래스터 이미지보다 크기가 작으며 텍스트 기반 XML이므로 검색 엔진이 주요 요소(대체 텍스트, 제목 등)를 직접 읽을 수 있습니다.

스타일링 및 애니메이션 – CSS 또는 JavaScript를 통해 SVG를 조작할 수 있습니다. 마우스 오버 효과나 애니메이션을 원하시나요? 간단합니다.

접근성 – 제대로 설정된 SVG에는 화면 낭독기가 해석할 수 있는 접근성 있는 텍스트 태그와 역할이 포함되어 있으므로, SVG를 사용해야 하는 또 다른 확실한 이유입니다.

워드프레스에서 SVG 추가하기 솔루션

WordPress는 보안 위험(SVG는 악성 코드를 포함할 수 있는 XML임)으로 인해 기본적으로 SVG를 차단합니다. 그러나 SVG 지원을 활성화하는 세 가지 신뢰할 수 있는 방법이 있습니다:

1. 플러그인 사용

 a) WPCode + SVG 스니펫

• 무료 WPCode 플러그인을 설치합니다.
• 라이브러리에서 'SVG 파일 업로드 허용' 스니펫을 추가하고 활성화하세요.
• 기본적으로 관리자인 경우에만 SVG를 업로드할 수 있습니다.

 b) SVG 지원 플러그인

• "SVG 지원"을 플러그인 > 새로 추가에서 설치하고 활성화하세요.
• 설정에서 "관리자 제한" 및/또는 "고급 모드 활성화" (인라인 렌더링, CSS 스타일링)를 확인합니다.
• 미디어 > 새로 추가 또는 드래그 앤 드롭을 통해 SVG를 업로드합니다.

c) 다른 옵션:

• SVG 세이프 Darrell Doyle에 의해 개발되었으며, 이전 버전이지만 여전히 사용됩니다.
• SVG 지원은 XSS/XXE 위험을 방지하기 위해 업로드된 파일을 살균합니다.
• 해피파일스/캣폴더스 는 SVG 업로드 시 검증을 수행하고 미리보기를 제공합니다.

2. functions.php에 코드 스니펫 추가

다음 코드를 사용할 수 있습니다: 

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

위치: 테마의 functions.php 파일 (항상 자식 테마를 사용하세요!).

단점: 기본적으로 데이터 검증 기능이 없으므로 별도의 검증 도구와 함께 사용하지 않으면 위험할 수 있습니다. 또한 업로드 권한이 관리자로 제한됩니다(설정은 변경 가능).

3. 보안 고려 사항

 SVG = XML, 다음과 같은 내용을 포함할 수 있습니다:

• XSS 공격 (자바스크립트).
• XXE 공격 (외부 엔티티 호출).

모범 사례:

• 플러그인을 사용하세요 SVG Support, SVG Safe, HappyFiles와 같이 내장된 파일 검증 기능을 갖춘
• 온라인 도구 (예: Darryll Doyle의 SVG Sanitizer Test)를 사용하여 파일을 검사하십시오.
• SVG 업로드 제한 관리자 또는 신뢰할 수 있는 사용자로 제한합니다.

WP Media Folder 와 워드프레스에서 SVG에 중요한 이유

WP Media Folder 은 강력한 미디어 라이브러리 관리자입니다

- 폴더/하위 폴더 구조

-고급 필터, 정렬, 드래그 앤 드롭

 - 이름 변경, 워터마크, 대량 교체, 미리보기, 다운로드

- 페이지 빌더, WooCommerce 및 WPML과 같은 많은 도구와 호환됩니다.

WP Media Folder 자체는 SVG 파일을 사용할 수 없지만 모든 유형의 파일을 포함하여 SVG 파일을 구성, 유지 관리 및 관리할 수 있습니다.

마무리: SVG와 WP Media Folder으로 사이트 향상하기

어수선한 미디어 폴더 및 최적화되지 않은 이미지 파일과의 씨름을 중지하십시오. 대신, WP Media Folder의 직관적인 조직 도구를 사용하여 가볍고 검색 가능하며 적응 가능한 SVG의 잠재력을 최대한 활용하십시오. 

콘텐츠 제작자, 디자이너, 소규모 사업주 등 누구에게나 코딩 없이 강력한 기술을 제공합니다. 웹사이트 로딩 속도는 빨라지고, 검색 순위는 높아지며, 디자인은 더욱 멋져집니다! 지금 바로 여기에서 다운로드하세요.