WordPress5.3, リンクのrel属性のカスタム関数を作る

WordPress5.3では、HTMLのアンカーリンク（<a>）のrel属性をかんたんに追記できます。

すべてのrel属性値を追記する関数が用意されてるわけではないので、自分で作りましょう。

かんたんです。関数をコピペして、ちょこっと変更するだけなので。

WordPress5.3には、nofollow, ugcをリンクのrel属性に追加する関数が用意されていますが、noopener, noreferrer, sponsoredはありません。

これらの属性を追加するカスタム関数を作りましょう。

（将来、追加されることもあるので待つのもありです。）

コピー元ファイル

まずはコピー元のファイルを見てみます。

function wp_rel_ugc( $text ) {
    // This is a pre-save filter, so text is already escaped.
    $text = stripslashes( $text );
    $text = preg_replace_callback(
        '|<a (.+?)>|i',
        function( $matches ) {
            return wp_rel_callback( $matches, 'nofollow ugc' );
        },
        $text
    );
    return wp_slash( $text );
}

7行目の 'nofollow ugc' の部分を変えるだけで新しい関数が作れます。

wp_rel_nofollow()からもってきてもいいです。ちがいはwp_rel_callback()の第2引数だけなので。

作成したカスタム関数

作成したコードです。functions.phpなどに追加してください。

/**
 * add rel attribute
 */
if ( ! function_exists( 'wp_rel_custom' ) ) {
    function wp_rel_custom( $text, $attr ) {
        // This is a pre-save filter, so text is already escaped.
        $text = stripslashes( $text );
        $text = preg_replace_callback(
            '|<a (.+?)>|i',
            function( $matches ) use ( $attr ) {
                return wp_rel_callback( $matches, $attr );
            },
            $text
        );
        return wp_slash( $text );
    }
}

/**
 * add rel attribute - noopener
 */
if ( ! function_exists( 'wp_rel_noopener' ) ) { 
    function wp_rel_noopener( $text ) {
        return wp_rel_custom( $text, 'noopener' );
    }
}

/**
 * add rel attribute - noreferrer
 */
if ( ! function_exists( 'wp_rel_noreferrer' ) ) { 
    function wp_rel_noreferrer( $text ) {
        return wp_rel_custom( $text, 'noreferrer' );
    }
}

/**
 * add rel attribute - sponsored
 */
if ( ! function_exists( 'wp_rel_sponsored' ) ) {
    function wp_rel_sponsored( $text ) {
        return wp_rel_custom( $text, 'nofollow sponsored' );
    }
}

wp_rel_custom()で、無名関数に変数attrを渡したいのでuseを使います。

function( $matches ) use ( $attr ) {
    return wp_rel_callback( $matches, $attr );
}

カスタム関数の実行

カスタム関数を実行してみましょう。

$link = '<a class="test" data-test="test" href="example.com" >User generated link example</a>';
$noopener = wp_rel_noopener( $link );
$noreferrer = wp_rel_noreferrer( $noopener );
$sponsored = wp_rel_sponsored( $noreferrer );

echo 'noopener: ' . esc_html( wp_kses_post( $noopener ) ) . PHP_EOL;
echo 'noreferrer: ' . esc_html( wp_kses_post( $noreferrer ) ) . PHP_EOL;
echo 'sponsored: ' . esc_html( wp_kses_post( $sponsored ) );

noopener: <a class="test" data-test="test" href="example.com" rel="noopener">User generated link example</a>
noreferrer: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer">User generated link example</a>
sponsored: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer nofollow sponsored">User generated link example</a>

rel属性は追加です。既存のrel属性は残します。

HTMLを見るためにesc_html()でエスケープしていますが、HTMLを出力するときはいりません。

この関数ならrel属性に何でも設定できるので、ぜひ参考にしてください。

おまけ - wp_targeted_link_rel()

'noopener noreferrer' をつける関数はすでにあります。（wp_targetd_link_rel()）

ただしこれは、aタグにtarget属性があるときだけ追加します。サンプルコードで確認しましょう。

$link1= '<a class="test" data-test="test" href="example.com" >User generated link example</a>';
$link2 = '<a class="test" data-test="test" href="example.com" target="_blank">User generated link example</a>';
$target1 = wp_targeted_link_rel( $link1 ) ;
$target2 = wp_targeted_link_rel( $link2 ) ;
echo 'target1: ' . esc_html( wp_kses_post( $target1 ) ) . PHP_EOL;
echo 'target2: ' . esc_html( wp_kses_post( $target2 ) ) . PHP_EOL;

target1: <a class="test" data-test="test" href="example.com">User generated link example</a>
target2: <a class="test" data-test="test" href="example.com" target="_blank" rel="noopener noreferrer">User generated link example</a>

別ウィンドウ・別タブで開くリンク（target='_blank'）のときは、'noopener noreferrer' をつけるのが当たり前なので用意された関数です。

個別につける関数はありません。