2

Wordpress サイトでブログ投稿を書くとき、アンカー タグと同じ値を持つ data-attribute を使用して、すべてのアンカー タグ内に span-tag を動的に追加したいと考えています。

例

私がWordpressで書いていること：

<p>Some text with <a href="#">a link in it</a></p>

生成するもの:

<p>Some text with <a href="#"><span data-title="a link in it">a link in it</span></a>

jQuery や PHP でこれを行うにはどうすればよいでしょうか。

4

2 に答える 2

7

PHP を使用すると、次のように実行できるはずです。

function wrap_anchor_text_with_span( $content ) {
    if ( ! is_admin() && preg_match( '~<a(.*?)>(.*?)</a>~', $content ) ) {
        $content = preg_replace_callback( '~<a(.*?)>(.*?)</a>~', '_add_span', $content );
    }
    return $content;
}
add_filter('the_content', 'wrap_anchor_text_with_span', 10);

function _add_span( $matches ) {
    if ( ! ( $title = strip_tags( $matches[2] ) ) ) { // If we only have an image inside the anchor
        return '<a' . $matches[1] . '>' . $matches[2] . '</a>';
    } else {
        return '<a' . $matches[1] . '><span data-title="' . esc_attr( $title ) . '">' . $matches[2] . '</span></a>';
    }
}

この関数が行うことは、the_contentフィルタリングにフックし、すべてのアンカー タグ内にスパンを配置することです。

アンカーに画像が含まれている場合、スパンは追加されないことに注意_add_spanしてください。必要に応じて、関数を次のように変更することで、この動作を変更できます。

function _add_span( $matches ) {
    return '<a' . $matches[1] . '><span data-title="' . esc_attr( strip_tags( $matches[2] ) ) . '">' . $matches[2] . '</span></a>';
}

jQueryでの解決もさほど難しくありませんが、PHPだけで十分だと思います。

于 2012-12-04T12:22:52.960 に答える
1

jQuery と wrapInner() も機能します。

<p>Some text with <a class="generate_span" href="#">a link in it</a></p>

<script>
$('.generate_span').each(function(){
    $(this).wrapInner('<span data-title="'+($(this).attr('href'))+'"></span>');
});
</script>

http://jsfiddle.net/242b8/

于 2012-12-04T13:07:31.207 に答える