web-dev-qa-db-ja.com

ショートコードに 'class'属性を追加する方法[audio]？

同じページ上で2人のMediaElementプレーヤーを異なるスタイルにしたいのですが、これを簡単に行う方法を考え出しました（まったく新しいショートコードを追加して新しいスタイルシートをエンキューするのに比べて 。どちらか ）動くようになるのは、プレーヤーAのオーディオショートコードに別のクラスを割り当てることです。

WordPressのコードリファレンス では、ショートコードにclass属性を追加することについて言及していますが、うまくいきません。例えば、

[audio class="miniplayer" mp3="http://localhost/working_url.mp3"][/audio]

正常に動作しているプレーヤーは表示されますが、Firefoxコンソールのどこにも「ミニプレーヤー」が割り当てられていません。では、ショートコードにクラスを正しく割り当てるにはどうすればよいでしょうか。

shortcodecssaudioattribute
4
Samuel LOL Hackson

WordPressはあなたのニーズに合わせてコードを操作するために少なくとも3つのオプションを許可します。

  1. @Jevuskaの答えで増分するグローバル変数を使用してください。

    global $my_audio_player_count;
$my_audio_player_count = 0;

add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class ) {
    global $my_audio_player_count;
    $class .= ' my-audio-player-'.$my_audio_player_count++;
    return $class;
}

  2. 内蔵のショートコードを削除して自分のショートコードを追加する

    remove_shortcode('audio');
add_shortcode('audio', 'my_audio_shortcode');

function my_audio_shortcode($args) {
    //TODO: Insert your own version of the shortcode
}

  3. 上書きするにはwp_audio_shortcode_overrideフィルタフックを使用してください

    add_filter('wp_audio_shortcode_override', 'my_audio_shortcode');

function my_audio_shortcode($args) {
    //TODO: Insert your own version of the shortcode
}
0
iantsch

Shortcodeのパラメータとしてclassを追加するオプションはありません [audio] 。デフォルトのクラスwp_audio_shortcode_classを変更したり、クラスを追加したりするには、filter wp-audio-shortcode を使用する必要があります。これをフィルタリングするためのコード例（functions.phpテーマファイルに追加）。

add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    $class .= ' my-class'; /* additional class */
    return $class;
}

複数のショートコード[audio]の場合、static $instanceを使用してループできます（グローバル変数を使用する必要がある場合は、 @iantsch answer を参照してください）。

add_filter( 'wp_audio_shortcode_class', 'wpse221201_audio_shortcode_class', 1, 1 );
function wpse221201_audio_shortcode_class( $class )
{
    static $instance = 0;
    $instance++;

    /* class name with increament number, change my-audio-class */
    $class = sprintf( '%s my-audio-class-%d', $class, $instance );
    return $class;
}

次のWordPress v4.5の別のオプションは、 shortcode_atts_{$shortcode} をフックし、特定のショートコードをターゲットにすることです。

add_filter( 'shortcode_atts_audio', 'wpse221201_shortcode_atts_audio', 1, 4 );
function wpse221201_shortcode_atts_audio( $out, $pairs, $atts, $shortcode )
{
    //static $instance = 0;
    //$instance++;

    /* target parameter 'mp3' with its file
       or add your own parameter ( $atts[whatever] ) and use it in  conditional statement
    */
    if ( isset( $out['mp3'] ) && isset( $out['class'] ) && 'source.mp3' == $out['mp3'] )
        $out['class'] = sprintf( '%s my-class', $out['class'] );//additional class

    return $out;
}
2
Jevuska

私はすべての提案をいじって、最もエレガントな解決策を私に提示したいと思います（ただし、「回答済み」バッジはそのままにしておきます）。今後の読者もそれから利益を得ることができます。これはフィルタの使用（@Jevuskaのおかげで）とショートコード（s/o @iantsch）の追加の提案を組み合わせたものです。

私はthumbaudioショートコードを追加しました。それは修正されたクラスフィルタでaudioショートコードを実行します。このように、ユーザーがオーディオのショートコードを入力すると、デフォルトのプレーヤーが表示されますが、thumbaudioを入力すると、クラスにminiplayerが追加されます。ユーザーは、HTMLファイルのどこにいつ適用されるかを完全に制御できます。

add_shortcode('thumbaudio', 'my_thumbaudio_shortcode');

function wp_audio_shortcode_thumbclass( $class ) {
    $class .= ' miniplayer';
    return $class;
}

function my_thumbaudio_shortcode( $attr ) {
    add_filter( 'wp_audio_shortcode_class', 'wp_audio_shortcode_thumbclass', 1, 1 );
    echo wp_audio_shortcode( $attr );
    remove_filter( 'wp_audio_shortcode_class', 'wp_audio_shortcode_thumbclass', 1 );
}
1
Samuel LOL Hackson