フロントパージのヘッダー画像に音声ボタン

フロントパージのヘッダーは画像と動画（mp4）だけだったので、今まで当たり前のように気に入った画像を載せていた。動画については1～2度試したけど思い通りにいかないので音声だけを入れたいと思っていたところで、「Google AI」に聞くと簡単明瞭な回答を得られたので早速試した。

1）ファイルパス: wp-content/themes/twentyseventeen/template-parts/header/header-image.php修正の手順header-image.php を開き、ファイル内にある以下の記述を探す：
　<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
</div>

2）div の中に音声用のタグを挿入する：
　<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
    <!-- 音声タグの追加例 -->
    <audio src="音声タグ.mp3" controls autoplay loop style="position: absolute; bottom: 10px; right: 10px; z-index: 99;"></audio>
　</div>

3）「外観 > カスタマイズ > 追加CSS」で微調整PHP側のコードが正しくても、テーマ全体のスタイルに干渉されている場合があります。管理画面の「追加CSS」に以下を貼り付けてみてください。
/* ヘッダー内のオーディオプレイヤーを強制表示 */
.custom-header-media audio {
    display: block !important;
    width: 100px; /* 見やすいサイズに固定 */
    opacity: 1 !important;
}

4）現在の <audio> タグをボタン表示にするには、プレイヤー本体を display: none; で隠す。
<div class="custom-header-media">
    <?php the_custom_header_markup(); ?>
    <!-- 音声本体（画面には出さない） -->
    <audio id="header-audio" src="音声タグ.mp3" loop></audio>
    <!-- 操作用ボタン -->
    <button id="audio-toggle-btn" class="audio-button">
        <span id="audio-icon">♪ ON</span>
    </button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var audio = document.getElementById('header-audio');
    var btn = document.getElementById('audio-toggle-btn');
    var icon = document.getElementById('audio-icon');
    btn.addEventListener('click', function() {
        if (audio.paused) {
            audio.play();
            icon.innerText = '♪ OFF'; // 再生中の表示
            btn.classList.add('playing');
        } else {
            audio.pause();
            icon.innerText = '♪ ON'; // 停止中の表示
            btn.classList.remove('playing');
        }
    });
});
</script>
 見た目を整える（追加CSS）「外観」＞「カスタマイズ」＞「追加CSS」に以下を貼り付けて、ボタンのデザインを調整します。
.audio-button {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.6); /* 半透明の黒 */
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.audio-button:hover {
    background: #fff;
    color: #000;
}
.audio-button.playing {
    background: #ff0000; /* 再生中に色を変える場合 */
    border-color: #ff0000;
}

気に入いるように微調整したけど、Google AI の回答が完璧でビックリ！
※ 音声は「音声読み上げソフト 音読くん」の Google AI 機能でホームページ紹介文を作成した。