文章参考于iami233的 Hexo 中实现 Live Photos 支持
什么是Live Photo？
它可以在你按下快门前后记录大约1.5秒的视频和音频，从而让照片“活”起来。
本质上是由张 JPG 图片以及一个MOV 视频文件所组成
原来一直就想给自己的博客做一个实况图的，之前也有过询问GPT4.0，但是给出的答案还是无法让wordpress支持实况图，直到前几天兔子(HELLO)给我发了这篇文章“ Hexo 中实现 Live Photos 支持”后，引用了这位大佬的代码，让Chatgpt写出了让WordPress支持Live photo的方法
在你的 functions.php 文件里添加以下代码
/** LivePhotosKit JS **/
function enqueue_livephotoskit() {
?>
<script>
document.addEventListener('DOMContentLoaded', function () {
const livePhotoElements = document.querySelectorAll('[data-live-photo]');
if (livePhotoElements.length > 0) {
const script = document.createElement('script');
script.src = 'https://cdn.apple-livephotoskit.com/lpk/1/livephotoskit.js';
document.head.appendChild(script);
}
});
</script>
<?php
}
add_action('wp_footer', 'enqueue_livephotoskit');
/** 插入文章的短代码 **/
function live_photo_shortcode($atts) {
$atts = shortcode_atts(array(
'image' => '',
'video' => '',
'caption' => '',
'width' => '320px',
'height' => '320px'
), $atts, 'livephoto');
if (empty($atts['image']) || empty($atts['video'])) {
return '<p>错误：必须提供图片和视频链接。</p>';
}
ob_start(); ?>
<figure style="text-align: center; color: #000;">
<div
data-live-photo
data-photo-src="<?php echo esc_url($atts['image']); ?>"
data-video-src="<?php echo esc_url($atts['video']); ?>"
style="width: <?php echo esc_attr($atts['width']); ?>;
height: <?php echo esc_attr($atts['height']); ?>;
margin: 0 auto; overflow: hidden;">
</div>
<?php if (!empty($atts['caption'])) : ?>
<figcaption style="margin-top: 4px;"><?php echo esc_html($atts['caption']); ?></figcaption>
<?php endif; ?>
</figure>
<?php
return ob_get_clean();
}
add_shortcode('livephoto', 'live_photo_shortcode');
?>当你在 WordPress 文章中添加 Live Photo，可以使用以下代码：
[livephoto image="你的jpg图片" video="你的mov视频" caption="图片文案"]然后它会被解析为：
<figure style="text-align: center; color: #000;">
<div
data-live-photo
data-photo-src="你的jpg图片"
data-video-src="你的mov视频"
style="width: 320px; height: 320px; margin: 0 auto; overflow: hidden;">
</div>
<figcaption style="margin-top: 4px;">图片文案</figcaption>
</figure>
图片演示：
当苹果的Live Photo图被拆解的时候，会有一个Heic图片和一个Mov视频。
注意！Heic图片需要转为Jpg后才可以正常使用
如果你想用CSS改变实况图的的样式的时候，可以用以下代码自行修改（这里只加了圆角效果）
[data-live-photo] canvas,
[data-live-photo] video,
[data-live-photo] div {
border-radius: 10px !important;
overflow: hidden;
}
