워드프레스 댓글에 이미지 URL이 입력되면 자동으로 이미지로 변환되어 표시되도록 할 수 있습니다. PHP 코드를 사용하는 방법과 JavaScript를 이용하는 방법이 있습니다. 이 글에서는 PHP 코드를 테마 함수 파일에 추가하여 댓글에 이미지 URL이 있을 경우 자동으로 이미지로 임베드되도록 하는 방법에 대하여 살펴보겠습니다.
워드프레스 댓글에 포함된 이미지 URL을 자동으로 이미지로 변환하기
댓글에 이미지 주소가 포함될 경우 자동으로 이미지로 변환되어 표시되면 사용자 경험(UX)을 향상시키고 SEO에도 도움이 될 수 있습니다.
이 경우 다음과 같은 코드를 차일드 테마의 함수 파일(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의 호스트 도메인을 제한하고 싶은 경우 다음과 같은 코드를 사용할 수 있습니다. 이를 통해 보안을 강화할 수 있습니다.
/*
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 = [
'example.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');허용 도메인 목록은 적절히 추가/삭제하시기 바랍니다.
그리고 다음과 같은 CSS 코드를 디자인 » 사용자 정의하기 » 추가 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이 포함되면 자동으로 이미지로 변환되도록 하는 코드를 추가하여 테스트하고 있습니다.
이 글에 제시된 코드는 GeneratePress 테마에서 테스트했으며, 다른 테마에서는 충분히 테스트하지 않았지만, 일반적으로 잘 작동할 것이라 생각됩니다.
댓글 개수가 많은 경우에는 사이트 속도에 영향이 있을 수 있지만, 보통은 영향이 거의 없을 것입니다. 서버 부하가 염려되는 경우에는 PHP 코드 대신 자바스크립트로 시도해볼 수 있습니다. 자바스크립트 방식은 시간이 날 때 코드를 만들어 테스트한 후에 공유할 수 있는 경우 공유해보겠습니다.