パスワード保護している記事の「保護中：」を鍵アイコンに変更

/**
 * パスワード保護記事のタイトルに鍵アイコンを表示
 * 
 * このコードをfunctions.phpまたはCode Snippetsプラグインに追加してください。
 * Appleのデザイン思想に基づいた、シンプルで明瞭な鍵アイコンを実装しています。
 */

// パスワード保護記事のタイトルフォーマットを変更
add_filter('protected_title_format', 'custom_protected_title_with_icon', 10, 2);

function custom_protected_title_with_icon($format, $post) {
    // SVGアイコン（SF Symbols風のミニマルデザイン）
    $lock_icon = '<svg class="protected-lock-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="保護されたコンテンツ" role="img">
        <path d="M17 10V8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8V10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <rect x="5" y="10" width="14" height="11" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <circle cx="12" cy="16" r="1" fill="currentColor"/>
    </svg>';
    
    // アイコンとタイトルを組み合わせる（タイトル部分にはクラスを付けない）
    return '<span class="protected-title-wrapper">' . $lock_icon . ' %s</span>';
}

// スタイルを追加
add_action('wp_head', 'custom_protected_title_styles');

function custom_protected_title_styles() {
    ?>
    <style>
        /* アイコンの配置用ラッパー（テキストスタイルは継承） */
        .protected-title-wrapper {
            display: inline-flex;
            align-items: center;
            gap: 8px; /* HIGの意味的スペーシング：同グループ内要素間 */
        }
        
        /* アイコンのみのスタイリング */
        .protected-lock-icon {
            display: inline-block;
            width: 1.1em;
            height: 1.1em;
            flex-shrink: 0;
            opacity: 0.6; /* セカンダリ要素の透明度（Apple風） */
            transition: opacity 0.2s ease; /* スムーズなトランジション */
            vertical-align: text-bottom;
        }
        
        /* ダークモード対応 */
        @media (prefers-color-scheme: dark) {
            .protected-lock-icon {
                opacity: 0.7; /* ダークモードでは少し明るく */
            }
        }
        
        /* ホバー時の微細なフィードバック */
        a:hover .protected-lock-icon,
        .protected-title-wrapper:hover .protected-lock-icon {
            opacity: 0.9;
        }
        
        /* アクセシビリティ：高コントラストモード対応 */
        @media (prefers-contrast: high) {
            .protected-lock-icon {
                opacity: 1;
            }
        }
        
        /* レスポンシブ：モバイルでのタッチターゲット確保 */
        @media (max-width: 768px) {
            .protected-title-wrapper {
                gap: 6px; /* モバイルでは少しコンパクトに */
            }
        }
    </style>
    <?php
}

// オプション：管理画面でも同じアイコンを表示する場合
add_action('admin_head', 'custom_protected_title_admin_styles');

function custom_protected_title_admin_styles() {
    // 管理画面でも同じスタイルを適用
    custom_protected_title_styles();
}

/**
 * オプション：より軽量な実装（CSSのみ）を希望する場合
 * 以下のコードは、Unicode文字を使用したさらにシンプルな実装です
 */

/*
// 超軽量版（コメントアウトを外して使用）
add_filter('protected_title_format', 'custom_protected_title_minimal', 10, 2);

function custom_protected_title_minimal($format, $post) {
    // Unicode鍵文字を使用（🔒）
    return '🔒 %s';
}
*/