web-dev-qa-db-ja.com

キャプションをデータ属性に設定し、画像の配置をそれまでにしてキャプションショートコードを作成することはできますか？

このような形式で画像のキャプションを出力したいです。

<img class="alignleft size-medium wp-image-316" alt="Image Title" data-caption="Here lies the image caption" src="http://example.com/wp-content/uploads/image-400x266.jpg" width="400" height="266">

WP Core から基本的なキャプションコードを取得し、それをadd_filter( 'img_caption_shortcode', 'my_magic_caption');フィルタを介して実行しました。

私の問題は、私が実際に（$content）IMGタグ自体に影響を与えることができないようで、それを他のhtmlで囲むだけでいいことです。

どんなガイダンスもいただければ幸いです。

imagescustomizationfiltersshortcode
1
Jodi Warren

基本的にimg_caption_shortcodeフィルタはデフォルトの画像キャプションを完全に置き換えることを可能にします。それをしたい場合は、WPにフィルタのすべての引数をコールバック関数に渡すように依頼する必要があります。

<?php
add_filter('img_caption_shortcode', 'wpse81532_caption', 10, 3 /* three args */);

それからあなたのコールバックはすべてのレンダリングの世話をする必要があるでしょう。あなたはWPのコードをコピーして、あなたのニーズに合うようにそれを変更することができます。 WordPressはすでにImage HTMLからキャプション自体を抽出するので、心配する必要はありません。

<?php
function wpse81532_caption($na, $atts, $content)
{
    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $atts));

    if (1 > (int) $width || empty($caption)) {
        return $content;
    }

    // add the data attribute
    $res = str_replace('<img', '<img data-caption="' . esc_attr($caption) . '"', $content);

    // the next bit is more tricky: we need to append our align class to the 
    // already exists classes on the image.
    $class = 'class=';
    $cls_pos = stripos($res, $class);

    if ($cls_pos === false) {
        $res = str_replace('<img', '<img class="' . esc_attr($align) . '"', $res);
    } else {
        $res = substr_replace($res, esc_attr($align) . ' ', $cls_pos + strlen($class) + 1, 0);
    }

    return $res;
}

これがプラグインとしての上記 です 。

3
chrisguitarguy

Data-caption属性を追加するために文字列置換関数を使うことができます。

function my_custom_img_caption_shortcode( $a , $attr, $content = null) {
    // New-style shortcode with the caption inside the shortcode with the link and image tags.
    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    }

    extract(shortcode_atts(array(
        'id'    => '',
        'align' => 'alignnone',
        'width' => '',
        'caption' => ''
    ), $attr));

    if ( 1 > (int) $width || empty($caption) )
        return $content;

       $image = do_shortcode( $content );
       return str_replace('<img', '<img data-caption="'.$caption.'" style="width: ' . (10 + (int) $width) . 'px"', $image);
}
add_filter('img_caption_shortcode', 'my_custom_img_caption_shortcode',10,3);
1
M-R