워드프레스 댓글에 포함된 이미지 URL을 이미지로 변환하여 표시하기

워드프레스 댓글에 이미지 URL이 입력되면 이미지 URL이 이미지로 임베드되어 표시되도록 할 수 있습니다. 보통은 워드프레스 사이트에 댓글이 많이 달리지 않기 때문에 이 글에서 소개하는 코드를 사용해도 사이트 성능에 영향을 미치지는 않을 것입니다. 하지만 댓글이 많고 이미지 댓글에 URL이 많이 포함되는 사이트의 경우 사이트 성능에 약간의 영향을 미칠 수 있습니다.

워드프레스 댓글에 포함된 이미지 URL을 이미지로 변환하여 표시하는 방법

댓글에 이미지 URL만 남기면 이미지로 표시되도록 하고 싶은 경우가 있을 수 있습니다. 이 상황에서 아래에 제시된 코드를 사용할 수 있습니다.

이미지 URL을 이미지로 표시할 경우 장단점

장점

사용자 경험(User Experience) 향상: 댓글에 포함된 이미지 URL을 자동으로 이미지로 변환하여 시각적으로 더욱 풍부한 댓글 섹션을 제공합니다.
간편한 사용: 사용자가 별도의 HTML 지식 없이도 이미지를 댓글에 포함시킬 수 있습니다.
유연성: 다양한 이미지 URL 형식을 처리할 수 있습니다.
보안: esc_url() 함수를 사용하여 URL을 안전하게 처리합니다.

단점

사이트 속도에 대한 영향: 댓글이 많은 페이지에서는 처리 시간이 약간 증가할 수 있습니다. 하지만 일반적으로 그 영향은 미미할 것입니다.
제한된 제어: 모든 이미지 URL이 자동으로 변환되므로, 사용자가 링크로 남기고 싶은 이미지 URL도 변환될 수 있습니다.
이미지 크기 제어 부족: 이미지 크기를 제어하지 않아 큰 이미지가 임베드되는 경우 레이아웃이 깨질 수 있습니다. 하지만 CSS로 임베드되는 이미지의 크기를 제어할 수 있습니다.
오용 가능성: 악의적인 사용자가 부적절한 이미지를 쉽게 게시할 수 있습니다. (저는 허용 호스트 도메인 목록을 추가하여 허용 도메인 이외의 다른 도메인의 사이트에 업로드된 이미지는 자동으로 변환되지 않도록 했습니다.)

아래의 코드를 사용하여 댓글에 포함된 이미지 URL을 이미지로 변환하는 경우 다음과 같은 코드를 디자인 » 사용자 정의하기 » 추가 CSS에 추가하여 댓글 영역에 표시되는 이미지의 크기와 스타일을 어느 정도 제어할 수 있습니다.

/* 댓글 내 이미지의 최대 너비를 설정하고 비율을 유지합니다 */
.comment-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px 0;
}

/* 중간 크기 이상의 화면에서 이미지 최대 너비를 제한합니다 */
@media (min-width: 768px) {
    .comment-content img {
        max-width: 500px;
    }
}

/* 이미지에 테두리와 그림자를 추가합니다 */
.comment-content img {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 이미지에 호버 효과를 추가합니다 */
.comment-content img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

댓글에 포함된 이미지 URL을 이미지로 변환하는 코드

이 블로그의 댓글을 통해 워드프레스 댓글에 이미지 URL이 입력되면 이미지로 표시되도록 하는 방법에 대한 문의가 있어서 방법을 연구해보았습니다.

댓글을 등록할 때 이미지 URL이 있을 경우 이미지 임베드 코드를 변환하여 댓글 콘텐츠에 저장되도록 하는 방법을 생각해보았습니다만, 이 방법을 시도해보니 코드가 잘못되어 서버에 부하가 걸려서 포기하고 댓글에 이미지 URL이 포함되어 있는 경우 댓글이 렌더링될 때 이미지 URL을 임베드 이미지로 변환하는 코드를 만들어 보았습니다.

다음 코드를 차일드 테마의 함수 파일(functions.php)에 추가하여 테스트해보시기 바랍니다.

/*
Plugin Name: Image URL to Img Tag in Comments
Description: Converts image URLs in comments to actual images, handling various URL formats.
*/

// 댓글 텍스트를 필터링하고 이미지 URL을 <img> 태그로 변환하는 함수
function convert_image_url_to_img_tag($comment_text) {
	$pattern = '/(?<!src="|">)(https?:\/\/\S+\.(?:jpg|jpeg|png|gif|webp)(?:\?\S*)?)\s*/i';
	
	$callback = function ($matches) {
		$url = $matches[1];
		// URL에서 리사이징 매개변수 제거
		$clean_url = preg_replace('/\?.*$/', '', $url);
		return sprintf('<img src="%s" alt="Image" loading="lazy" />', esc_url($clean_url));
	};
	
	return preg_replace_callback($pattern, $callback, $comment_text);
}

// 댓글 텍스트 필터에 함수 연결
add_filter('comment_text', 'convert_image_url_to_img_tag', 20);

// 관리자 영역의 댓글에도 적용
add_filter('get_comment_text', 'convert_image_url_to_img_tag', 20);

// 단축코드 추가
function image_url_shortcode($atts) {
	$url = isset($atts['url']) ? $atts['url'] : '';
	if (empty($url)) return '';
	
	// URL에서 리사이징 매개변수 제거
	$clean_url = preg_replace('/\?.*$/', '', $url);
	return sprintf('<img src="%s" alt="Image" loading="lazy" />', esc_url($clean_url));
}
add_shortcode('image_url', 'image_url_shortcode');

이미지 URL에 리사이징 매개변수가 포함되는 경우 매개변수를 제거하도록 코드가 작성되었습니다. 젯팩이나 기타 CDN 서비스를 이용할 때 아래와 같이 리사이징 파라미터가 포함될 수 있습니다.

https://i0.wp.com/wordpress.org/news/files/2024/07/Release-Edition-Inline-Image-1.png?resize=1024%2C683&ssl=1

상기 코드는 댓글에 이미지 URL이 있을 때에만 실행되며 GeneratePress 테마가 설치된 환경에서 테스트했습니다. 충분한 테스트를 그치지 않았지만 대부분 잘 작동할 것입니다.

이미지 확장자가 jpg, jpeg, png, gif,webp 중 하나인 경우 이미지로 변환되어 표시됩니다. 코드를 수정하여 다른 이미지 확장자를 추가할 수 있습니다.

관리자 페이지의 댓글 섹션에서도 이미지가 자동으로 변환되어 표시됩니다. 관리자 페이지의 댓글 관리 섹션에서는 CSS 스타일이 적용되지 않아서 게시글의 댓글 섹션에 표시되는 댓글과는 스타일이 조금 다를 수 있습니다.

상기의 장단점을 이해한 후에 상기 코드를 사용할지 여부를 결정하시기 바랍니다.

보안 강화: 허용 도메인 지정하기

악의적인 사용자가 부적절한 이미지 URL을 올리는 경우 이미지가 변환되지 않도록 이미지가 업로드된 도메인들을 제한하는 것을 고려할 수 있습니다. 만약 관리자가 해당 사이트나 티스토리 등에 이미지를 업로드한 후에 댓글에 이미지 URL을 입력할 때 이미지로 표시되도록 하고 싶은 경우에 호스트 도메인을 제한할 수 있을 것입니다.

저는 다음과 같은 코드를 테마의 함수 파일에 추가했습니다.

/*
Plugin Name: Image URL to Img Tag in Comments
Description: Converts image URLs from specific domains in comments to actual images.
Version: 2.0
*/

// 허용된 도메인 목록
$allowed_domains = [
    'www.thewordcracker.com',
    'img1.daumcdn.net'
];

// 댓글 텍스트를 필터링하고 이미지 URL을 <img> 태그로 변환하는 함수
function convert_image_url_to_img_tag($comment_text) {
    global $allowed_domains;
    
    // 이미지 URL을 찾는 정규 표현식 패턴 (도메인 체크 포함)
    $domain_pattern = implode('|', array_map('preg_quote', $allowed_domains));
    $pattern = sprintf(
        '/(?<!src="|">)(https?:\/\/(?:%s)\/\S+\.(?:jpg|jpeg|png|gif|webp)(?:\?\S*)?)\s*/i',
        $domain_pattern
    );
    
    // 이미지 URL을 <img> 태그로 변환하는 콜백 함수
    $callback = function ($matches) {
        $url = $matches[1];
        return sprintf('<img src="%s" alt="Image" loading="lazy" />', esc_url($url));
    };
    
    // 패턴과 일치하는 URL을 <img> 태그로 변환
    return preg_replace_callback($pattern, $callback, $comment_text);
}

// 댓글 텍스트 필터에 함수 연결
add_filter('comment_text', 'convert_image_url_to_img_tag', 20);

// 관리자 영역의 댓글에도 적용
add_filter('get_comment_text', 'convert_image_url_to_img_tag', 20);

// 단축코드 추가 (특정 도메인 체크 포함)
function image_url_shortcode($atts) {
    global $allowed_domains;
    
    $url = isset($atts['url']) ? $atts['url'] : '';
    if (empty($url)) return '';
    
    $parsed_url = parse_url($url);
    if (!in_array($parsed_url['host'], $allowed_domains)) {
        return esc_html($url); // 허용되지 않은 도메인의 경우 URL을 텍스트로 반환
    }
    
    return sprintf('<img src="%s" alt="Image" loading="lazy" />', esc_url($url));
}
add_shortcode('image_url', 'image_url_shortcode');

허용 도메인 목록은 자유롭게 추가하거나 제거할 수 있습니다.

코드를 추가하여 사이트 성능에 영향을 미치지 않는지, 혹은 예상치 않은 문제가 발생하지 않는지 모니터링하여 계속 사용 여부를 결정할 예정입니다.

상기 코드를 테마 함수 파일에 추가하는 대신, 별도의 플러그인으로 만들어 사용해도 됩니다.

서버 부하를 줄이는 방법: 자바스크립트 사용하기

PHP 대신 자바스크립트를 사용하면 서버 부하를 줄일 수 있습니다. JavaScript로 구현하는 방법에 대하여 추후에 공유해보겠습니다.

이미지 URL 복사하기

크롬 브라우저나 엣지 브라우저에서 이미지 주소를 복사할 수 있습니다. 티스토리 등에 이미지를 업로드한 후에 이미지 주소를 복사하여 댓글 입력 시 붙여넣기하여 공유할 수 있습니다.

크롬의 경우 이미지 위에 마우스를 올리고, 오른쪽 마우스 버튼을 클릭한 다음, 이미지 주소 복사(MS 엣지 브라우저의 경우 이미지 링크 복사)를 클릭하여 이미지 URL을 복사할 수 있습니다. 를 클