WordPress コメントに含まれる画像URLを画像に変換して表示する

WordPress コメントに画像URLを入力すると、画像URLを画像として埋め込んで表示することができます。通常は WordPress サイトにコメントがあまり走らないため、この記事で紹介するコードを使用してもサイトのパフォーマンスに影響を与えません。ただし、コメントが多く、画像のコメントに URL が多いサイトでは、サイトのパフォーマンスに多少の影響を与える可能性があります。

WordPress コメントに含まれる画像URLを画像に変換して表示する方法

コメントに画像URLだけを残すと、画像として表示されるようにしたい場合があります。この状況では、以下に示すコードを使用できます。

画像URLを画像として表示する場合の長所と短所

利点

1. ユーザーエクスペリエンスの向上： コメントに含まれる画像のURLを自動的に画像に変換し、視覚的に豊富なコメントセクションを提供します。
2. 使いやすい： ユーザーは、別の HTML の知識がなくても、画像をコメントに含めることができます。
3. 柔軟性： さまざまな画像URL形式を処理できます。
4. 意味: esc_url() 関数を使用してURLを安全に処理します。

欠点

1. サイト速度に与える影響： コメントの多いページでは処理時間が若干増加することがあります。しかし、通常、その影響はわずかです。
2. 制限された制御： すべての画像URLが自動的に変換されるため、ユーザーがリンクに残したい画像URLも変換できます。
3. 画像サイズ制御不足: 画像のサイズを制御しないため、大きな画像が埋め込まれると、レイアウトが壊れる可能性があります。ただし、CSSに埋め込まれる画像のサイズを制御できます。
4. 誤用の可能性： 悪意のあるユーザーは不適切な画像を簡単に公開できます。 （私は許可されたホストドメインのリストを追加し、許可されたドメイン以外のドメインのサイトにアップロードされた画像は自動的に変換されないようにしました。）

以下のコードを使用してコメントに含まれる画像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を画像に変換するコード

このブログのコメントを通して WordPress コメントに画像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');

許可ドメインのリストは自由に追加または削除できます。

コードを追加してサイトのパフォーマンスに影響を与えないか、予期しない問題が発生していないかを監視して、引き続き使用するかどうかを決定します。

上記のコードをテーマ関数ファイルに追加する代わりに、別のプラグインで作成して使用することもできます。

サーバーの負荷を軽減する方法：JavaScriptを使用する

PHPの代わりにJavaScriptを使用すると、サーバーの負荷を軽減できます。 JavaScriptで実装する方法について後で共有しましょう。

イメージURLをコピーする

Chromeブラウザまたはエッジブラウザから画像アドレスをコピーできます。ティーストーリーなどに画像をアップロードした後、画像アドレスをコピーしてコメント入力時に貼り付けて共有できます。

Chromeの場合は、画像の上にマウスを置き、右マウスボタンをクリックして、 画像アドレスのコピー(MSエッジブラウザの場合 イメージリンクのコピー）をクリックして画像URLをコピーできます。クル

参照

• WordPress コメント単語数（コメント長）を制限する
• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• Diviスターターサイト：事前に作成されたサイトテンプレートを読み込む
• 個人情報などの機密情報を収集しないように WordPress コメントフォームを変更する方法（feat。 GeneratePress テーマ）