2026年9月15日

WordPressのテーマに独自のウォーターマークを追加する

テーマ・デザイン

はじめに

この記事では、WordPressサイトのアイキャッチ画像や投稿画像に独自のウォーターマークを追加する方法について説明します。ウォーターマークは著作権保護だけでなく、ブランド認知度の向上にも効果的な手段です。

症状・背景

このテーマが必要になる主な場面:

サイト内で掲載する画像に独自のウォーターマークを追加したい場合
著作権保護のためにオリジナルコンテンツにウォーターマークを追加したい場合
ブランド認知度向上のために一貫性のあるブランドマークを適用したい場合
アイキャッチ画像や投稿画像の再利用防止を検討している場合

手順・設定方法

ステップ1: WordPressテーマにウォーターマーク機能を追加する

# functions.phpファイルを開くか、関数プラグインを作成します。
wp-content/themes/your-theme/functions.php

# ウォーターマーク画像のパスを指定します。
add_theme_support('custom-watermark', array(
    'image' => get_template_directory_uri() . '/images/watermark.png',
));

# フィルターを使用してウォーターマークを追加する関数を作成します。
function add_watermark($attachment_id) {
    // ウォーターマーク画像のパス
    $watermark_path = get_template_directory() . '/images/watermark.png';
    
    // 画像情報取得
    $image_data = wp_get_attachment_metadata( $attachment_id );
    $width = isset($image_data['width']) ? $image_data['width'] : null;
    $height = isset($image_data['height']) ? $image_data['height'] : null;

    // ウォーターマーク画像を読み込む
    $watermark_image = imagecreatefrompng( $watermark_path );

    // 原画像の読み込みとリサイズ
    $original_image = wp_get_attachment_image_src($attachment_id, 'full');
    $upload_dir = wp_upload_dir();
    $image_size  = getimagesize($upload_dir['basedir'] . '/' . $original_image[0]);
    
    // リサイズ後の画像を作成
    $resized_image_path = imagecreatetruecolor( $width, $height );
    $resized_image      = imagecreatefromjpeg($upload_dir['basedir'] . '/' . $original_image[0]);

    // ウォーターマークを元画像に重ねる
    imagecopymerge($resized_image_path, $watermark_image, 0, 0, 0, 0, imagesx($watermark_image), imagesy($watermark_image), 100);

    // リサイズ後の画像を保存
    imagejpeg($resized_image_path, $upload_dir['basedir'] . '/' . $original_image[0], 90);
    
    // ウォーターマーク画像のメタデータ更新
    update_post_meta( $attachment_id, '_watermark_applied', true );
}
add_filter('wp_generate_attachment_metadata', 'add_watermark');

ステップ2: ウォーターマーク位置と透明度を調整する

# ウォーターマークの位置と透明度を指定します。
function customize_watermark_position($watermark_path, $attachment_id) {
    // 画像情報取得
    $image_data = wp_get_attachment_metadata( $attachment_id );
    
    // ウォーターマークの位置設定（左下）
    $watermark_x = (int)$image_data['width'] - imageSX($watermark_path);
    $watermark_y = (int)$image_data['height'] - imageSY($watermark_path);

    // 透明度設定
    imagecopymerge($resized_image_path, $watermark_image, $watermark_x, $watermark_y, 0, 0, imagesx($watermark_image), imagesy($watermark_image), 50);
}
add_filter('customize_watermark_position', 'customize_watermark_position');

ステップ3: ウォーターマークを投稿画像にも適用する

# ポストのメディアアイテムにウォーターマークを追加します。
function apply_watermark_to_post_images($post_id) {
    $attachments = get_posts(array(
        'post_type'      => 'attachment',
        'numberposts'    => -1,
        'post_parent'    => $post_id,
        'post_status'    => null,
        'post_mime_type' => 'image'
    ));

    foreach ($attachments as $attach) {
        add_watermark($attach->ID);
    }
}
add_action('save_post', 'apply_watermark_to_post_images');

ステップ4: ウォーターマークの適用状況を監視する

# ウォーターマークがすでに適用されているかどうかを確認します。
function check_if_watermark_applied($attachment_id) {
    if (get_post_meta( $attachment_id, '_watermark_applied', true ) === 'true') {
        return true;
    }
    return false;
}
add_filter('check_if_watermark_applied', 'check_if_watermark_applied');

注意事項

ウォーターマーク画像の保存場所やサイズを適切に設定してください。
透明度を高くしすぎると、元の画像が見えにくくなる可能性があります。
設定を変更する際は、サイト全体への影響を確認すること。
パフォーマンス上の考慮事項として、大量の画像に対してウォーターマークを適用すると処理時間が長くなることがあります。

まとめ

1. ウォーターマーク設定: テーマのfunctions.phpファイルにウォーターマーク機能を追加します。

2. 位置と透明度調整: ウォーターマークの表示位置や透過率をカスタマイズできます。

3. 投稿画像への適用: 新しい投稿画像にも自動的にウォーターマークが適用されるよう設定可能です。

4. 監視機能: 既にウォーターマークが追加されているかどうかを確認するフィルターを使用して管理可能。

Post Views: 14