wordpress記事の外部リンクにファビコンを表示

このブログの性質上、外部サイトへリンクを張ることが多いので
ちょっと見栄えよくリンク先のファビコンを表示しようと思ったメモです。

以前のブログでもやったことあるような、気はするのですが
そのブログはすっかり飛んでしまったので改めて調べました。

とりあえず手っ取り早くwordpress用プラグインでもないかなとgithubから探したりしましたが、どうも簡単そうなのがなかったので、
こちらのサイトを参考に作ってみました。

リンク先のファビコンを取得してリストマーク代わりに表示する方法

おーこれこれ。
これいい。これやりたい。

まーその前にサイトのデザインなんとかしろよとかって突っ込みは置いといて・・

jQuery+スタイルシートでやってしまうのが主流のようですね。
で肝心のファビコンの取得方法は色々あるようですが参考にしたサイト。

jQueryでリンク先のファビコンをリンク脇にアイコンとして表示する方法

セオリーはないようですね。
ケースバイケースで自分にあった方法を選択するようです。

設置の準備

まず、僕の場合は、サイトデザインは今後変更する予定なのでなるべく外部ファイルやテンプレート入れ替えでも影響の少ないように済ませる。

よって

gatfavicon.css
getfavicon.js
外部リンク用画像

をテーマフォルダ/inc/getfavicon/を作って入れておきました。

それぞれのファイルの中身は・・
ほぼ上記の*youさんの内容と同じなので省略させてもらいます。

それぞれのファイルを読み込むようにwordpressの流儀に従いました。
wordpress関数の使い方やルールは正直よくわかってないのですが、見よう見まねです。

function.php

//ファビコン用追加
if(!function_exists('getfaviconr_styles')) :
  add_action('wp_enqueue_scripts', 'getfavicon_styles');
  function getfavicon_styles() {
    wp_register_style( 
      'getfavicon-skin', 
      get_bloginfo('template_url').'/inc/getfavicon/getfavicon.css', 
      array(), 
      '0.01', 
      $media = 'all' 
      );
    wp_enqueue_style( 'getfavicon-skin');
}
endif;

if(!function_exists('getfavicon_scripts')) :
  add_action('wp_enqueue_scripts', 'getfavicon_scripts');
  function getfavicon_scripts() {
      wp_enqueue_script('getfavicon',get_bloginfo('template_url').'/inc/getfavicon/getfavicon.js', array('jquery'));
   }
endif;