内部リンクにサムネイル表示させるカスタマイズが捗りそうだったので導入してみた
これは便利そうだいいなぁってことで、「でーじてとこん」で紹介されていた、サムネイル付き内部リンクをWordPressのアイキャッチ画像で取得するカスタマイズを早速導入してみました。
ただし、うちでは「ShareHtml」は使わず、Chromeの拡張機能「Create Link」を使っています。
「でーじてとこん」のてとこんくん(tetokon)が、サムネイル付きリンクを生成するブックマークレット「ShareHtml」を、自サイトの過去記事に限ってアイキャッチ画像をサムネイルに自動的に置き換えるカスタマイズの方法を紹介していました。
詳しいやり方については、上の記事を参照していただくとして、かんたんに説明しておくと、functions.phpに記事URLから記事IDを取得して、その記事に設定されているアイキャッチ画像のURLを取得するショートコードを作るという方法。
てとこんくんの記事だと、これで作られたショートコード
[[my_thumbnail][/my_thumbnail]]
で「ShareHtml」が吐き出す<img src="~">に、設定語である${posturl}を挟み込んで指定するという方法が取られていますが、僕はこれをGoogle Chromeの拡張「Create Link」で使うことにしてみました。
「ShareHtml」というブックマークレットは大変便利で、僕も一時期使っていたんですが、Chromeで使ってるとちょっと難点があるんですよね。
例えばURLがSSL( https:// )の場合、ブックマークレットが動いてくれません。サイトによっては強制的にブックマークレットを起動できることもあるんですがね。
また、うちのブログではリンクに対して「和洋風KAI」のするぷくん(isloop)が作った、はてブ数のテキスト化スクリプトではてブ数を表示させています。
「ShareHtml」は<script>タグを含ませることが想定された仕様ではないので、あとでテキストリンクだけ置き換えるという二度手間が発生してしまうのも使わなくなった理由です。
基本的な構造としては、サイトのキャプチャを取得する「Heartrails Capture」を使っているだけなので、「Create Link」でも十分同じことができます。
さらに、「Create Link」であればURLがSSLであろうと関係なく一発取得できるので、個人的にはこっちのほうが効率的なんですよね。
ちなみに、僕が「Create Link」に設定しているサムネイル付きリンクのフォーマットは以下のとおり。
外部リンクの場合
<p class="clrfix"><img class="alignleft shareleft" style="float:left" src="http://capture.heartrails.com/200x130?%url%" alt="%title%" width="200" height="130" />%title% <script type="text/javascript">var url = "%url%";</script><script src="https://b.hatena.ne.jp/entry.count?url=%url%&callback=hatebTxt&"></script></p>
内部リンクの場合
<p class="clrfix"><img class="alignleft shareleft" style="float:left;" src="[my_thumbnail]%url%[/my_thumbnail]" alt="%title%" width="200" height="130" />%title%<script type="text/javascript">var url = "%url%";</script><script src="https://b.hatena.ne.jp/entry.count?url=%url%&callback=hatebTxt"></script></p>
「Create Link」あるいはFirefoxの「Make Link」を使っていて、かつうち同様にはてブ数のテキスト化スクリプトを導入している人の参考になれば幸いです。
いずれにしても、今回のてとこんくんのカスタマイズ記事はナイスでした。
よくよく考えたらその方法があったやんっていうね。
この記事の場合、特になのですが、アイキャッチ画像がドでかい肉の画像なので、デフォルトのShareHtmlより目を引くと思います。まさにアイキャッチ。
ShareHtmlのサムネイル画像が自動でアイキャッチ画像になる様に改造しました。簡単! ほぼコピペでできます! [WordPress]
てとこんくんが書いているように、内部リンクをサムネイル付きで紹介する場合、「Heartrails Capture」のキャプチャーよりも、記事内で使っている画像で見せたほうが、読者の目線を引くものになります。
当ブログでもツキイチでやってるアクセス数ランキングをはじめとして、ブログ内の記事については、記事の画像を使うようにしていますが、これまでは「Create Link」でサムネイル付きリンクを取得して貼り付けたあと、サムネイルを記事の画像URLに置き換えるという流れで作業していました。
今回のカスタマイズで、ここの手間をひとつ減らすことができるので、執筆の時間短縮に繋げることができそうです。