web-dev-qa-db-ja.com

WordPressの埋め込みプレーヤーのサイズを変更したり、再生ボタンだけを表示する方法

内蔵プレーヤのサイズ[embed]の幅を変えようとしたとしても、これは player [embed width="50" height="50"]を使用していますが、どの値を使用してもサイズは変わりません。 WordPressは ここ と言っています。

サイズを変更するために他に何ができますか？私はただ再生ボタンを見せたいだけです。

そして、私はそれがこのウェブサイト上の他の記事で示唆されているように内容の幅を変えたくありません。この変更が埋め込みプレーヤーにのみ影響するようにします。

embed
2
whitelord

audio ファイルを埋め込むことについて話しているとします。

[embed]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

audio embedハンドラはwp_maybe_load_embeds()内に登録され、wp_embed_handler_audioフィルタを通してフィルタリングされます。

そのためWP_Embed::shortcode()内でこれは生成されます：

[audio src="http://s.w.org/images/core/3.9/AintMisbehavin.mp3" /]

それで、ここで言及された メソッドのいくつか[audio]ショートコードのために - はうまくいくはずです。

[embed]というショートコードを使っているので、widthパラメータをサポートするために独自のラッパーを追加することができます。

add_filter( 'wp_embed_handler_audio', function( $html, $attr, $url, $rawattr )
{
    if( isset( $rawattr['width'] ) )
    {
        $html = sprintf( 
            '<div class="wpse_audio_embed_wrapper%s" style="width:%dpx">%s</div>', 
            $class = 1 * $rawattr['width'] < 120 ? ' audio-button-only' : '',
            $rawattr['width'], 
            $html
        );
    }
    return $html;
}, 10, 4 );

ここでは$rawattrを使用しています。ユーザー入力のみを確認したいからです。

幅が120未満の場合は、クラス{audio-button-only}をラッパーに追加します。

次に、mediaelementスタイルシートの後にインラインスタイルを挿入して、durationやvolumeなどの関連部分を非表示にします。

add_action( 'wp_enqueue_scripts', function()
{
    wp_add_inline_style( 
        'mediaelement', 
        ' .audio-button-only .mejs-volume-button, 
          .audio-button-only .mejs-duration, 
          .audio-button-only .mejs-currenttime, 
          .audio-button-only .mejs-horizontal-volume-slider 
          { display: none !important; };'
    );
} );

もちろんこれは関連するスタイルシートに追加することもできます。

このアプローチを拡張して、対応するクラスを持つ他の小型サイズのバージョンをサポートすることもできます。

これで[embed]内のwidthパラメータをオーディオファイルに使うことができます。

[embed width="28"]http://s.w.org/images/core/3.9/AintMisbehavin.mp3[/embed]

出力：

再生ボタン：

play button 

一時停止ボタン：

pause button 

26のテーマでテスト済み

5
birgire