雑が喰おう

リンクタグに自動で属性を付加するよにしました

WordPressでリンクタグに自動で属性をつける
WordPressでの本文は基本的にMarkDown記法で書いています。

MarkDown記法にないものはhtmlタグを使用するのですが、MarkDown記法にあるリンクもhtmlタグで書いています。

それは、リンク属性にtarget="_blank"を付けたいからです。

スポンサード リンク

target=”_blank”

target="_blank"といえば、リンクを開くときに新しいウインドウやタブで開くためのオプション属性です。

現在、雑が喰おうでは、外部リンクだけでなく、内部リンクにもtarget="_blank"を使用していることがほとんどです。

これは元の記事を開いたままリンク先をチェックしたいという個人的趣向のものです。

とはいえ、リンクをどう開くかは訪問者に決めさせるべきだというインターネット倫理の基本原則があるらしいです。

そんなこと知ったこっちゃない。
リンク先をどう開くかその方法すら知らない人も考慮し、元のページに戻れる手段を残しておいて何が悪いか。
そもそもそのまま帰ってこない可能性のほうが高いのではないか。

それに、Google検索の設定であったような気もしますが、Googleの検索結果ページからtarget="_blank"がなくなったらそのときに考えるようにします。

と心のなかで反論しつつ数年たっています。
数年たったその間にHTML5の規格では、target="_blank"は非推奨から外れたようです。

MarkDown記法でのリンク属性

とはいえ、MarkDown記法でリンクを挿入したさいには属性をつけることができません。

[リンクテキスト](URL "タイトル")

このように、MarkDown記法ではたんにテキストや画像にリンク先のURLを指定するだけだからです。

タイトルすら入れない時のほうが多いくらいです。
だが、target="_blank"は付加したい。

ついでに外部リンク用にrel=”external nofollow”も付加したい。

そう考えるようになりました。

rel=”external”

rel=”external”とは、externalで外部ページであることを表します。

自分で管理しているサイトではないので保険のためにも付けたいと思います。

ちなみに、nofollowは自分でリンクしておきながら拒否るのはいかがなものかという考えのもとつけません。 nofollwoで検索botにリンク先をクロールしないように指示するものです。

MarkDown記法リンクで属性を付加させる

そこで、MarkDown記法で書いたリンクでもtarget="_blank"rel=”external”を自動的に付加させるために、WordPressのfunction.phpをいじることにしました。

これらのことをしてくれるプラグインがすでに存在しますが、プラグインの多様は避けたいわけです。

やりたいこと

  • リンクにはtarget="_blank"属性を付けたい
  • 外部リンクにはrel=”external”属性も付けたい

リンクに target=”_blank” を付ける

ただ単に、リンクにtarget="_blank"を付けたいのであれば、

// target="_blank" を追加
function autoblank($text) {
$return = str_replace('<a', '<a target="_blank"', $text);
return $return;
}
add_filter('the_content', 'autoblank');

これをfunction.php追加することで記事内のリンクすべてにtarget="_blank"が付きます。
これがいいのは、記事内だけであり、サイドバーなどの内部リンクには付いていないのでいいですね。

コードはWordPressで記事内のリンクをすべて新しいタブで開く | TechMemoより拝借しております。

target=”_blank”の重複問題

ただ上記コードには一つ問題があります。
それは、すでに手動でtarget="_blank"をつけてきたものたちにも適用されてしまうかもしれないということ。

そう、target="_blank"が重複してついてしまう可能性があります。

そこで、上記コードの前に、下記のコードを適用させればいいでしょう。

// target="_blank"の削除
function removeblank($text) {
    return str_replace(' target ="_blank">', '', $text);
}
add_filter('the_content', 'removeblank');

これは、記事内のリンクにtarget="_blank"を付けるのとは逆で、記事内のリンクにすでにtarget="_blank"が付いている場合に削除するコードです。

ただし、こちらにも問題がありまして、リンク属性のtarget="_blank"だけでなく、今回のように本文にtarget="_blank"という記述があっても削除してしまいますから、target="_blank"を検索するのではなく、私の癖で最後に記述していることが多いですから、target="_blank">と記号も含めて検索をしたほうがいいかもしれません。
そうすれば、すべてのtarget="_blank"が削除されないと思います。

もしくは、リンクアドレスにtarget="_blank"が含まれている場合は処理をせず、target="_blank"がない場合には付加するというコードのほうが便利かもしれません。

上記のコードをまとめたい

うえで2つのコードを紹介しましたが、これをまとめる手段を考えていましたところ、外部リンクにrel=”external”を付けたいということを忘れていました。

そこで先ほどのtarget="_blank"を付けるコードと同じように作成しようと思いましたが、そうしますと内部リンクにも付いてしまいますから、内部リンクを除外する必要があります。

そこで、条件をもうちょっと詳しく考えなおしました。

  • コンテンツ本文からリンクタグを抽出
  • 抽出したリンクタグにtarget="_blank"がついている場合、取り除くもしくは無視する。
  • 抽出したリンクタグに自分のドメインが含まれるか否か
  • 自分のドメインが含まれている場合、target="_blank"だけつける。
  • 自分のドメインが含まれていない場合は、target="_blank"rel=”external”を付ける。

こんな感じでしょうか。

それを踏まえていいコードはないかと探していますと、WordPress でプラグイン使わず外部リンクにアイコンつける | Thought is freeで紹介されているコードが近いということで流用させていただきました。

できたコード

紹介されているコードから不要だったアイコンをつけたり、クラス名を付けるところを削除したり、rel属性に変えたり、target="_blank"の扱いをすべてのリンクタグに対して処理するよう変更しました。

//---------------------------------------------------------------------------
// 外部リンクに  target="_blank" と rel=”external” をつける
//---------------------------------------------------------------------------

// オプションその1(つけたい部分はコメントアウトする)
add_filter( 'the_content', 'add_external_content', 12 );   // 本文
//add_filter( 'the_excerpt', 'add_external_content', 12 );   // 抜粋
//add_filter( 'widget_text', 'add_external_content', 12 );   // ウィジェット

function add_external_content( $content ) {
  // オプションその2
  $add_blank  = 1;  // target="_blank" 付ける場合は 1 付けない場合は 0
  $add_nofollow = 1;  // rel="external"  付ける場合は 1 付けない場合は 0

  preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

  $my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

  foreach( array_unique( $link_array[0] ) as $link ) {
    $replaced = $link;

    // target="_blank" がない場合に付ける
    if( $add_blank && !preg_match( "/.+?targets*?=['|"]?s*?_?blank.+?/i", $link ) ) {
      $replaced = str_replace( ">", " target="_blank">", $replaced );

        // 脚注リンクの場合は target="_blank"をのける
        if( preg_match( "/.+?rel|revs*?=['|"]?s*?footnotes*?/i", $link ) ) {
          $replaced = str_replace( " target="_blank">", ">", $replaced );
        }
    }

    if( !preg_match( "/href=['|"]?s*?${my_url}[^>]+?"/i", $link ) ) {

      // 外部リンクに rel="external" を付ける
      if( $add_nofollow && !preg_match( "/.+?rels*?=['|"]?s*?externals*?/i", $link ) ) {
        $replaced = str_replace( ">", " rel="external">", $replaced );
      }

      $content = str_replace( $link, $replaced, $content );

    }
  }
  return $content;
}

まとめ

これで、属性のついていないリンクタグに自動的にtarget="_blank"がつき、外部リンクにはrel=”external”がつきます。 また、説明は省略しましたが、WordPressで脚注を使用している場合にページ内リンクを使用しているのですが、それにもtarget="_blank"がついてしまう不具合がありましたので、rel="footnote"またはrev="footnote"という属性がある場合にはtarget="_blank"を取り除くようにしました。1


  1. まだ他にもバグがありました。 

スポンサード リンク

スポンサード リンク

»関連してそうな記事
タグ: ,