77 lines
2.6 KiB
PHP
77 lines
2.6 KiB
PHP
<?php
|
|
/**
|
|
* Template Name: 聆韵列表
|
|
*/
|
|
get_header();
|
|
|
|
$query = new WP_Query(array(
|
|
'post_type' => 'music',
|
|
'posts_per_page' => -1,
|
|
));
|
|
?>
|
|
|
|
<div class="section-header">
|
|
<span class="section-title">🎵 聆韵</span>
|
|
<span class="section-filter" style="font-size:13px;color:var(--ink-lighter);"><?php echo esc_html(get_theme_mod('kjweji_music_subtitle', '音符落下，余韵未散')); ?></span>
|
|
</div>
|
|
|
|
<?php if ($query->have_posts()) : ?>
|
|
<div class="music-list">
|
|
<?php while ($query->have_posts()) : $query->the_post(); ?>
|
|
<div class="music-item">
|
|
<div class="music-item__cover" onclick="togglePlay(this)">
|
|
<span class="music-item__play-icon">▶</span>
|
|
</div>
|
|
<div class="music-item__body">
|
|
<span class="music-item__title"><?php the_title(); ?></span>
|
|
<span class="music-item__desc"><?php echo esc_html(wp_strip_all_tags(get_the_content())); ?></span>
|
|
<span class="music-item__author"><?php the_author_meta('display_name'); ?> · <?php echo get_the_date('Y-m-d'); ?></span>
|
|
</div>
|
|
<?php
|
|
// 从正文中提取 audio src
|
|
$content = get_the_content();
|
|
$audio_src = '';
|
|
if (preg_match('/<audio[^>]+src="([^"]+)"/', $content, $m)) {
|
|
$audio_src = $m[1];
|
|
}
|
|
?>
|
|
<audio class="music-item__audio" preload="none" src="<?php echo esc_url($audio_src); ?>" style="display:none"></audio>
|
|
</div>
|
|
<?php endwhile; ?>
|
|
</div>
|
|
<?php wp_reset_postdata(); ?>
|
|
<?php else : ?>
|
|
<div class="music-empty">
|
|
<span class="music-empty__icon">🎵</span>
|
|
<p>尚无韵律，静待佳音</p>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<script>
|
|
(function() {
|
|
var current = null;
|
|
window.togglePlay = function(el) {
|
|
var item = el.closest('.music-item');
|
|
var audio = item.querySelector('.music-item__audio');
|
|
var icon = el.querySelector('.music-item__play-icon');
|
|
if (!audio) return;
|
|
|
|
if (current && current !== audio) {
|
|
current.pause();
|
|
current.closest('.music-item').querySelector('.music-item__play-icon').textContent = '▶';
|
|
}
|
|
|
|
if (audio.paused) {
|
|
audio.play();
|
|
icon.textContent = '⏸';
|
|
} else {
|
|
audio.pause();
|
|
icon.textContent = '▶';
|
|
}
|
|
current = audio;
|
|
};
|
|
})();
|
|
</script>
|
|
|
|
<?php get_footer(); ?>
|