워드 프레스에서 SVG 렌더링을 처리하는 방법은 무엇입니까?

인터넷 브라우저가 발전함에 따라 웹 사이트를 코딩 할 때 SVGS를 사용하는 것이 더욱 편리해졌습니다. 특히 아이콘과 PNG로 대체 할 수있는 간단한 그래픽 및 아이콘에 적합합니다.

워드 프레스는 거의 SVGS를 지원하는 것 같습니다. 나는 거의 이유 때문에 :

1. 기본적으로 워드 프레스에서 허용되는 파일 형식이 아닙니다. SVG를 업로드하기 전에 추가해야합니다

2. 미디어 갤러리에서 SVG 썸네일을 볼 수 없습니다. (아래 이미지 참조)

3. 때로는 미디어 추가 버튼을 통해 편집기에 추가 할 때 편집기에서 svg 크기를 알 수 없으므로 svg를 이미지로 추가하더라도 너비와 높이가 0입니다.

4. 미디어 업로드 팝업 내에서 "이미지 편집"을 클릭하면 "이미지가 없습니다"라는 메시지가 나타납니다. 아래 이미지를 참조하십시오.

이 목록의 항목 1에는 문제가 없지만 수정 항목 2 3 및 4를 어떻게 알아낼 수 있습니까?

항목 1에 대한 업데이트 :

SVG와 같은 새로운 MIME 유형을 허용하려면 functions.php에 후크를 추가하면됩니다.

function allow_new_mime_type($mimes) {

    $mimes['svg'] = 'image/svg+xml';

    return $mimes;
}
add_filter( 'mime_types', 'allow_new_mime_type' );

이제 SVG를 업로드 할 수 있어야합니다. 이 튜토리얼 에서 추가 정보를 찾을 수 있습니다 . 이것은 이전에 언급했듯이 나에게 문제가되지 않는 항목 1 만 해결합니다 (기본적으로 허용되어야한다고 생각하지만).

항목 2에 대한 업데이트 :

첨부 파일이 이미지인지 여부를 결정하는 기능을 파고 추적했습니다. 그것은 모두 wp-includes / post.php 에서이 기능에 해당되는 것으로 보입니다.

/**
 * Check if the attachment is an image.
 *
 * @since 2.1.0
 *
 * @param int $post_id Attachment ID
 * @return bool
 */
function wp_attachment_is_image( $post_id = 0 ) {
    $post_id = (int) $post_id;
    if ( !$post = get_post( $post_id ) )
        return false;

    if ( !$file = get_attached_file( $post->ID ) )
        return false;

    $ext = preg_match('/\.([^.]+)$/', $file, $matches) ? strtolower($matches[1]) : false;

    $image_exts = array( 'jpg', 'jpeg', 'jpe', 'gif', 'png' );

    if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )
        return true;
    return false;
}

보시다시피이 함수에는 유효한 이미지 확장 배열이 정의되어 있습니다. 해당 배열을 수정하는 데 사용할 수있는 필터가 없습니다. 그러나 그것은 시작입니다 ...

왜 마지막 if 문이 svgs에 대해 false를 반환하는지 잘 모르겠습니다. svg 확장자를 $ image_exts 배열에 추가하지 않더라도 첫 번째 조건은 true를 반환해야합니까?

if ( 'image/' == substr($post->post_mime_type, 0, 6)

이는 'image /'가 MIME 유형의 첫 6 자 (예 : svg의 경우 image / svg + xml)인지 확인합니다 (처음 6 개는 "image /"임).

최신 정보

추가 조사 결과 문제는 wp_attachment_is_image에 전혀 문제가 없지만 SVG가 업로드 될 때 이미지 크기 (너비 및 높이)가 첨부 파일 메타 데이터에 추가되지 않기 때문입니다. 사용 된 이미지를 계산하는 함수는 PHP의 getimagesize () 함수이기 때문에 SVG의 이미지 크기를 반환하지 않습니다. getimagesize 함수와 svgs의 동작에 대한 stackoverflow에 대한 답변을 찾았습니다. 여기를 참조하십시오.

wp_prepare_attachment_for_js()미디어 페이지에서 사용할 첨부 파일 메타 데이터를 수집 하는을 살펴보십시오 . 시조 필터를 통해 메타 데이터를 추가하거나 변경할 수 있습니다.

다음 예제는 functions.php에 놓을 수 있습니다. 참고 : PHP에서 SimpleXML 지원이 필요합니다.

function common_svg_media_thumbnails($response, $attachment, $meta){
    if($response['type'] === 'image' && $response['subtype'] === 'svg+xml' && class_exists('SimpleXMLElement'))
    {
        try {
            $path = get_attached_file($attachment->ID);
            if(@file_exists($path))
            {
                $svg = new SimpleXMLElement(@file_get_contents($path));
                $src = $response['url'];
                $width = (int) $svg['width'];
                $height = (int) $svg['height'];

                //media gallery
                $response['image'] = compact( 'src', 'width', 'height' );
                $response['thumb'] = compact( 'src', 'width', 'height' );

                //media single
                $response['sizes']['full'] = array(
                    'height'        => $height,
                    'width'         => $width,
                    'url'           => $src,
                    'orientation'   => $height > $width ? 'portrait' : 'landscape',
                );
            }
        }
        catch(Exception $e){}
    }

    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'common_svg_media_thumbnails', 10, 3);

플러그인이나 작은 코드 세트로 쉽게 "해킹"할 수있는 것은 아닙니다.

짧은 점은 SVG가 그 이전에 온 모든 이미지의 의미에서 "이미지"가 아니라는 것입니다. SVG는 벡터 기반 이미지이며, 웹에서 실제 견인력을 얻는 첫 번째 이미지입니다.

그 이전의 모든 이미지는 비트 맵 기반이었습니다. WordPress의 이미지 처리 시스템은이를 처리하기 위해 특별히 작성되었으며이 고유 한 디자인은 시스템의 모든 지점에 있습니다.

예를 들어 이미지에 너비와 높이가 있다고 가정합니다. SVG는 어느 크기도 가질 수 없습니다. WordPress에 내장 된 이미지에 대한 전체 기본 "편집기"가 있으며, 그 기능 중 어느 것도 SVG에 실제로 적용 할 수 없습니다.

"느리게"에 중점을두고 멀티미디어 시스템이 천천히 재개발되고 있습니다. 유지 관리 할 수있는 많은 하위 호환성과 새로운 디자인이 구현되어 있습니다. 또한 대부분의 사람들은 비디오, 오디오 및 재생 목록 지원에 훨씬 더 관심이 있습니다. 이 재 설계 작업이 완료되고 라이브러리의 섹션이 더 추상화되면 이러한 종류의 작업은 시간이 지남에 따라 지원하기가 더 쉬워 질 것입니다. 그러나 아직 거기에 없으며 한동안은 없을 것입니다. SVG 기반 MIME 유형이 지원되지 않는 이유는 모든 기본 조각이 작동 할 때까지 해당 MIME 유형을 추가하는 것이 파손되기 때문입니다.

SVG의 경우 편집기 버튼을 표시할지 여부와 이미지를 축소판 등으로 크기를 조정 할지 여부를 결정하는 데 사용 wp_attachment_is_image되므로 false를 반환해야합니다 . 어쨌든 SVG에서는 작동하지 않습니다. SVG를 올바르게 지원하려면 해당 이미지에 대한 메타 데이터를 완전히 추가 할 수있는 새로운 시스템을 작성한 다음 메타 데이터가 사용될 수있는 모든 위치에서 지원해야합니다. 당신이 상상할 수 있듯이, 그것은 작은 일이 아닙니다.wp_attachment_is_imageimage_downsize

테스트하지 않은 소스를 읽는 것만으로 확장 프로그램이 다음과 일치해야 함을 알 수 있습니다.

if ( 'image/' == substr($post->post_mime_type, 0, 6) || $ext && 'import' == $post->post_mime_type && in_array($ext, $image_exts) )

(의사 코드)

경우 image/는 $ 포스트 오브젝트 post_mime_type 속성의 제 6 개 문자이거나 확장자가 OR import인 $ 포스트 post_mime_type 속성과 현재의 파일 확장자 중 하나 (배열)된다 개체

그리고 그것은 마지막 진술이 항상 if사실인지 아닌지를 결정할 것임을 의미합니다 .

에서 읽을 수있는 것에서 확장을 위조get_attached_file() 할 수있는 필터가 있습니다.

return apply_filters( 'get_attached_file', $file, $attachment_id );

즉, 동일한 파일을 반환하지만 확장자가 다른 파일을 반환하려고 시도 할 수 있습니다. wp_attachment_is_image()그냥 리턴하기 때문에 다른 부분과 충돌하지 않습니다 bool.