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

WordPress5.3, リンクのrel属性にUGCの追加

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

WordPress5.3から、アンカーリンク(<a>)のrel属性にugcを追加する機能が加わりました。

WP標準機能のコメントは自動挿入されるので修正は必要ありません。カスタムで付けるときもかんたんです。新しく追加された関数を呼ぶだけ。

また、廃止される関数もあります。これを使わないように注意が必要。

開発者向けの話です。テーマ・プラグインを作っている人は要チェック。

ugcはnofollowの限定版

htmlのaタグには、リンク先の情報を設定する属性があります。rel属性です。

<a href="example.com" rel="noopener noreferrer nofollow" target="_blank">User generated link example</a>
noopenertarget="_blank"を使うとき必ずつける。
(セキュリティ上のルール。)
noreferrerリンク先にリンク元情報を送らない。
nofollow検索エンジンのクローラーにリンク先は回らせない。

細かい説明は省略しますが、ugcはnofollowの中でもっと限定的に使います。

ugcはユーザー生成コンテンツ(User Generated Content)のことで、TwitterなどのSNS、YouTubeなどの動画サービスなど、プラットフォーム上にユーザーが作成するコンテンツをリンクするのに使います。

Googleが対応することを発表してから間もないので、WordPressの対応は迅速です。

ugc属性の自動挿入

WordPressでのUGCは、ユーザーが書き込めるコメントです。

WordPress5.3では、コメント内のリンクやコメントを書き込んだユーザーのリンクにugc属性が自動挿入されます。

何もする必要はありません。

<a href="example.com" rel="nofollow ugc">User generated link example</a>

関数の廃止と追加

rel属性の関数が追加されました。

wp_rel_ugc()rel属性に "nofollow ugc" を追加。
wp_rel_callback()wp_rel_**系の内部で使う。
rel属性追加の基本関数。

変更された既存関数もあります。

wp_rel_nofollow()rel属性に "nofollow" を追加。
内部でwp_rel_callback()を使うように変更。

wp_rel_nofollow_callback()は廃止されました。内部でwp_rel_callback()を使ってレガシーラッパーになったのでまだ使えますが、『廃止』と言っているので使うのはやめましょう。

新しいrel属性の関数の使い方

rel属性の関数のサンプルです。

$link = '<a class="test" data-test="test" href="example.com">User generated link example</a>';
$nofollow_link = wp_rel_nofollow( $link );
$ugc_link = wp_rel_ugc( $link );

'nofollow link: ' . esc_html(wp_kses_post($nofollow_link)) . PHP_EOL;
'ugc link: ' . esc_html(wp_kses_post($ugc_link)) . PHP_EOL;
result
nofollow link: <a class="test" data-test="test" href="example.com" rel="nofollow">User generated link example</a>
ugc link: <a class="test" data-test="test" href="example.com" rel="nofollow ugc">User generated link example</a>

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

wp_rel_ugc(), wp_rel_follow()は追記なので既存のrel属性は残ります。

$link = '<a class="test" data-test="test" href="example.com" rel="noopener noreferrer">User generated link example</a>';
$nofollow_link = wp_rel_nofollow( $link );
$ugc_link = wp_rel_ugc( $link );

'nofollow link: ' . esc_html(wp_kses_post($nofollow_link)) . PHP_EOL;
'ugc link: ' . esc_html(wp_kses_post($ugc_link)) . PHP_EOL;
result
nofollow link: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer nofollow">User generated link example</a>
ugc link: <a class="test" data-test="test" href="example.com" rel="noopener noreferrer nofollow ugc">User generated link example</a>
前の投稿
WordPress5.3, 日付/時刻取得の変更と新しい関数。DateTimeクラスが基準になる。
WordPress5.3, リンクのrel属性のカスタム関数を作る
次の投稿

WordPressの本

post-cta-image

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

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

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

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

コメントを残す

*