ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

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

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

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

コピー元ファイル

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

wp-includes/formatting.php
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引数だけなので。

WordPress.orgリファレンス

wp_rel_ugc

wp_rel_nofollow

wp_rel_callback

作成したカスタム関数

作成したコードです。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 ) );
result
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;
result
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' をつけるのが当たり前なので用意された関数です。

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

前の投稿
WordPress5.3, リンクのrel属性にUGCの追加
WordPress5.3, wp_die(), HTML出力の変更
次の投稿

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。

コメントを残す

*