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

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

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

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

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

확장성 – SVG는 벡터 파일입니다. 즉, 로고, 아이콘 또는 반응형 디자인에 대해 품질 손실 없이 확대, 축소 또는 크기 조정을 할 수 있습니다.

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

스타일링 및 애니메이션 – CSS 또는 JavaScript를 통해 SVG를 조작할 수 있습니다. 호버 효과 또는 애니메이션을 원하십니까? 쉽습니다.

접근성 – 올바르게 설정하면 SVGs는 화면 판독기가 해석할 수 있는 접근 가능한 텍스트 태그와 역할을 포함하므로 사용하기에 충분한 이유가 됩니다.

워드프레스에서 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와 같은 내장된 sanitization이 있는 플러그인을 사용합니다.
• 온라인 도구를 통한 위생 처리 (예: 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의 잠재력을 최대한 활용하십시오. 

콘텐츠 제작자, 디자이너 또는 소규모 사업자이든 관계없이 코드를 사용하지 않고도 강력한 기술을 손에 넣을 수 있습니다. 사이트 로딩 속도가 빨라지고 순위가 높아지며 멋지게 보일 것입니다! 무엇을 기다리고 있습니까? 여기를 클릭하여 자신만의 복사본을 얻으십시오.여기로 이동하여 자신의 복사본을 가져옵니다.