Home mail me! RSS

WP – URLリンク&外部リンク関連まとめ

Wordpressのリンク挿入周りのまとめ。


やりたいこと:

1)URLにはaタグをくっつけて表示させる。
2)長いURLは省略して表示させる。
3)外部リンクは別ウィンドウで開く。
4)fuzzmaster.jpドメインでも、fuzzmaster.jp/wp/以外は外部リンク扱いに。


インストールしたプラグイン:

a)Advanced-Make-Clickable (for 1, 2, 4)
b)Link Indication (for 3)


以下プラグインの詳細。


まずは(1, 2, 4)の対応。

Advanced-Make-Clickable

http://dowonders.net/pz/wordpr……p-plugins/
開発自体は終了しているみたいなのですが、↓再配布して下さってる方がいます。

Advanced make Clickable [ハイパーリンク用] – WordPress Firefox オープンソース って(・∀・)イイ!!
http://www.naviwave.com/blog_w……clickable/

お二方ともthanksです。

このプラグインは、
・記事内のURLをハイパーリンクにする。
・その際、長いURLは省略して表示する。
・Wordpressタグ「wpurl」でブログのURLをひっぱってきて、それ以外は外部リンク扱いに。
というものです。2バイト文字は運が悪いと文字化けしますがご愛嬌。


で、開発終了ってことなので、ちょこっと改変してみました。


修正箇所(3つありますよ):

●外部リンクの場合、rel=”external”を付加(target=”_blank”は削除)。
●ついでにclass”advmk”になっちゃってるので、class=”advmk”に。

83行目付近:

function shr_urls($str) {
   $url = $str[2] . '.' . $str[3] . '.' . $str[4];
   return $str[1] . '<a href="http://' . $str[2] . '.' . $str[3] . '.' . $str[4] . '" target="_blank" class"advmk">' .  shorten_str($url) . '</a>';   
}
function shr_urls2($str) {
   $url = $str[2] . $str[3] . "://" . $str[4] . '.' . $str[5];
   return $str[1] . '<a href="' . $str[2] . $str[3] . '://' . $str[4] . '.' . $str[5] . '" target="_blank" class="advmk">' . shorten_str($url) . '</a>';
}
↑を、↓に書き換え。
function shr_urls($str) {
    $homeurl = get_bloginfo('wpurl');
    $url = $str[2] . '.' . $str[3] . '.' . $str[4];
    if(!stristr($url, $homeurl)){
        $rel = ' rel="external"';
    }
    else {
        $rel = '';
    }
    return $str[1] . '<a href="http://' . $str[2] . '.' . $str[3] . '.' . $str[4] . '"' . $rel . ' class="advmk">' .  shorten_str($url) . '</a>';   
}
function shr_urls2($str) {
    $homeurl = get_bloginfo('wpurl');
    $url = $str[2] . $str[3] . "://" . $str[4] . '.' . $str[5];
    if(!stristr($url, $homeurl)){
        $rel = ' rel="external"';
    }
    else {
        $rel = '';
    }
    return $str[1] . '<a href="' . $str[2] . $str[3] . '://' . $str[4] . '.' . $str[5] . '"' . $rel . ' class="advmk">' . shorten_str($url) . '</a>';
}

さらに
4)fuzzmaster.jpドメインでも、fuzzmaster.jp/wp/以外は外部リンク扱いに。
を実現するため、
●external.jsをhead内に読み込む。

13行目付近:
if (!is_admin()) { // if we are *not* viewing an admin page, like writing a post or making a page:
    wp_enqueue_script('extlink', (get_bloginfo('wpurl')."/wp-content/plugins/adv_make_clickable/external.js"), array('scriptaculous-effects'), '1.0');
}

external.jsの中身は何かというと、
・relが「external」「external nofollow」のいずれかであればtarget=”_blank”を付加
というJavascriptになってます。
後述の「Link Indication」との違いは、このtarget=”_blank”を「HTMLとしては出力しない」ところで、まあ構文的にも多少クリーンというところです(targetの代わりにwindow.openで開いたりするとさらに美しいんでしょう・・・)。

external.js元ネタは↓このあたりから。これまたthanksです。

target=”_blank”を使わずに、rel=”external”、rel=”external nofollow”で新しいウィンドウを開く方法 | 清音のSEOブログ
http://seofromusa.com/wordpres……-nofollow/



ダウンロード
一応このセットをダウンロードできるようにしました。
下記よりダウンロード&プラグイン・ディレクトリにインストール後、有効化して下さい。
adv_make_clickable.zip
※head内で記述される順番によるかも知れないので、動作保証はしません・・・。
※配布に問題があるようでしたらすみやかに削除いたしますので、ご指摘戴けますと幸いですm(_ _)m





続いて(3)の対応。

Link Indication

http://sw-guide.de/wordpress/p……ndication/

このプラグインで可能なのは、
aタグ内のURLで判別して、
・外部リンクにCSSのclassを付加
・外部リンクにtarget=”_blank”を付加
ということで、「内部」にあたるドメインを複数指定することも可能。
※ドメイン以下のディレクトリは指定できない仕様になってます。
 ○ http://fuzzmaster.jp
 × http://fuzzmaster.jp/wp/

設定としては、

Plugin’s Application
 ●「Apply plugin to the entire blog incl. header, sidebar, footer, etc. 」を選択
Apply indicators and attributes to links
 ●「Add target=”_blank” to all external hyperlinks」をチェック
 ●「Apply CSS Class Attributes [default: yes]」のチェックを外す
  (Advanced-Make-Clickableと競合する可能性もあるので念のため)

あとはデフォルトの設定のまま。

願わくば、rel=”external”を足してくれると美しいんだけど。そうすればterget=”_blank”が不要だし。
それから、
●Expert options
 「Blog URLs (your internal URLs)」
の設定で、ドメイン以下の階層も設定できるとステキだなあ。





以上で完了です。

結果


記事をこのように記述します。
記事をこのように記述します。

記事をこのように記述します。



すると、HTMLではこのように出力されます。
HTMLではこのように出力されます。

HTMLではこのように出力されます。



上の2つはfuzzmaster.jpドメインだけど/wp/以下ではないので、外部リンク。
3つめはブログ内だから内部リンク。
4つ目はgoogle.co.jpなので外部リンク。
一番下はFlickrのブログ貼付け用コードで、Flickrにリンクしてるので外部リンク。



extra bit

4)fuzzmaster.jpドメインでも、fuzzmaster.jp/wp/以外は外部リンク扱いに。
という点や、HTMLをすっきりさせたい、なんてなことを考えずに
とにかく動けばいいのであれば、

Advanced-Make-Clickable
Link Indication

の2つをカスタマイズをせずにインストールしておけば問題ないんじゃないでしょうか?(external.jsは不要なので)


記事を書く際に以下に手を抜くか、ってことを考えたら、まあしちめんどくさいことになってしまいました。「Link Indication」に手を加えればもっとすっきりさせられるんだと思うんですが・・・まあ、こちらは開発中のプラグインなのでノータッチで。

そもそもたくさん入っているプラグインのおかげで、HTMLなんてはなからぐちゃぐちゃだし、SEOもこのブログに関しては重要じゃないし・・・。
というかそもそもこれ「XHTML 1.0 Transitional」で書いてるじゃん!ってことはtargetでも問題ないんじゃん!はい終わり終わり!

Share
  • メルマガバックナンバーブログの作り方 | 無印発信 said

    2014-01-27 (月) 0:12:34 +0000

    [...] Advanced-Make-Clickable [...]

  • コメントする