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

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

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

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

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

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

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

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

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

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

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

設置の準備

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

よって

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

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

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

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

function.php

使い方

ファビコンを使いたいAタグの外にclass="fav"で挟むだけです。

こちらの記事も参考に追加してみましたが
自分の使いやすいパターンを見つけておいたほうが良さそうです。
WordPress記事内の外部リンクのみ、別窓で開くjQuery

特に僕の場合は、メンドクサがりなので外部リンクを探したらそのままファビコン装備でもいい気もする。
でもそれはそれで、不便な気もする・・

これから記事を増やしながら模索していきます。

前の記事ですが完成スクリーンショット
web制作者は必ず入れておきましょう。Firefox・GoogleChrome両対応プラグイン「Wappalyzer」へっぽこ開発室

参考サイト

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

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

  1. […] >>wordpress記事の外部リンクにファビコンを表示 | へっぽこ開発室 Author: […]

トラックバック URL