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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

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

WordPress5.3では、HTMLのaタグ、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' をつけるのが当たり前なので用意された関数です。

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

WordPressの本
post-cta-image

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

  • WordPressの基本
  • Webサイト作成から運用まで全体的に学ぶ
  • ブログサイトの運営からサイトの収益化を学ぶ
  • サイト作成・運営 + 集客の方法を学ぶ
  • WordPressからPHPプログラミングを学ぶ
  • 最新のWordPress(バージョン5)に対応した本

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

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


WordPressの本7選

SNSでも記事を配信しています。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!