让你的WordPress支持实况图 | 大于二三

什么是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;
}

推荐订阅源

大于二三