homehome

Video Shortcodeの編集

WordPress
Published

TocMenu目次

WordPressで「メディアプレイヤーを埋め込む」を使うと、エディタ上では以下のようなショートコードが挿入される。

[video width="1920" height="1080" webm="http://xxx/cast.webm"][/video]

実際の投稿では以下のような感じで出力される。

<div style="width: 1920px;" class="wp-video">
<!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
<video class="wp-video-shortcode" id="zzz" preload="metadata" controls="controls" height="1080" width="1920">
<source type="video/webm" src="xxx/cast.webm?_=1"></source>
<a href="xxx/cast.webm">http://xxx/cast.webm</a>
</video>
</div>

内部の属性は編集可能で、mp4="file.mp4"のように追加すれば対応する<source>が挿入される。

出力内容を編集

出力タグ上のclassをリネームしたかったのでフィルタを通してみた。

function responsive_wp_video_shortcode($output, $atts, $video, $post_id, $library) {
    $replace_ptn = array(
            '/class="wp-video"/i',
    );
    $replace_val = array(
            'class="myClass"',
    );
}
add_filter( 'wp_video_shortcode', 'responsive_wp_video_shortcode', 10, 5 );

今回利用していないが$attsにはショートコードで記述した属性値などが入っている。 例えば$atts['width']のような形で取得でき、正規表現でvideoコード内を編集するとき便利。