雑が喰おう

WordPressで内部リンク時に記事のアイキャッチ画像を取得して表示させる設定方法

WordPressで内部リンク時に記事のアイキャッチ画像を取得して表示させる設定方法

内部リンクを貼るのに基本的にはテキストリンクを使用しています。
どうせならば、記事本文で別の記事へリンクを貼る場合はアイキャッチ画像を使用したら、見た目的に華やかになるのではないでしょうか。

まず思い浮かんだのが『ShareHtml』。
ShareHtmlを使用すれば、リンク先のサムネイル画像を表示させることができます。

しかし、サイトロゴが特徴的など、よほどのものではないとサムネイルを表示するだけでは、イマイチぴんとこないことが多く、あまり使用していませんでした。
また、内部リンク時に使用すると同じようなサムネイル画像ばかりになりそうです。

とはいえ、手動でサイトのアイキャッチ画像を貼り付けるのもめんどうですし、ShareHtmlのタグを修正してアイキャッチ画像を取得できないでしょうか。

きっとなにか良い方法があるはず。探しているとやはりありました。
ShareHtmlを利用して、サイトのアイキャッチ画像を表示させる方法が。

今回下記サイトを参考に実際に設定しました。
ありがとうございます。

fuctions.phpにショートコードを登録

ShareHtmlへアイキャッチ画像のURLを取得し挿入するために、長いPHPを毎回挿入するのはめんどうなので、ショートコードを登録してタグを簡略化します。

使用しているテーマフォルダにある、fuctions.phpに以下のコードを追記します。


/* アイキャッチ画像clip200を渡す*/
function get_clip200_thumbnail( $atts, $post_url = null )
{
    $src_info = wp_get_attachment_image_src(get_post_thumbnail_id(url_to_postid($post_url)),'clip200');
    return $src_info[0];
} 
add_shortcode('clip200_thumbnail', 'get_clip200_thumbnail');

参考サイトとコードが違うのは、私がアイキャッチ画像の設定で、サイズを複数用意し、それぞれに名前を付けているからです。
今回はその中の一つを呼び出すために、コードが少し違います。

ShareHtmlのブックマークレットを修正

前述のサイトを参考にShareHtmlのブックマークレットを修正すれば、ばかんたんにアイキャッチ画像を利用した内部リンクタグを取得できブックマークレットがの完成です。

私の場合は最終的に以下のように作成しました。

javascript:(function(){var d=document,e=d.createElement('script'),url='http://dl.dropbox.com/u/2271551/javascript/sharehtml.js';if(!url.match(/?/))url+='?t='+(new Date()).getTime();url+='&out='+'preview'+'&cnt='+'100'+'&sts='+'
'+'&ste='+''+'&cts='+'
'+'&cte='+''+'&fmt='+'%24%7Bposttitle%7D
';e.charset='utf-8';e.src=url;e.id='bmlt';d.body.appendChild(e);})();

参考サイトと微妙に違うのは、ショートコード名。
ショートコードも、アイキャッチ画像を数種類作成しているので、そのうちの一つの名前を指定して呼び出しています。
あとはRetinaディスプレイ用に大きな画像をわざと小さくして表示するためにスタイルシート用にクラス名を付けいています。
本当は切り替えるのがいいのでしょうが、ショートコードがうまくいかなかったので、保留です。

まぁ、ここまではいいんですが、このままでは面白く無いですし、どうでタグが決まっているのですから、Chromeの拡張機能であるCreate LinkKeyconfigでも同じことができないかと考えました。

そう、ブックマークレットをクリックして実行するのがめんどうなのでショートカットキーでできるようにします

ショートカットキーでリンクタグを取得する

CreateLink

CreateLinkの場合同じようにするなら、

<a href="%url%" target="_blank" title="%title%" ><img class="img-left-Eyecatch" src="/wp-content/uploads/2014/02/4919659112_70f8836dfa_m-200x171.jpg" alt="%title%" width="100" />%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" alt="" /></a><br style="clear:both;" />

ただし、コメントを付けるようにはしていません。

Keyconfig

Keyconfigの場合は、

<a href="%URL%" target="_blank" title="%TITLE%" ><img class="img-left-Eyecatch" src="/wp-content/uploads/2014/02/4919659112_70f8836dfa_m-200x171.jpg" alt="%TITLE%" width="100" />%TITLE%</a> <a href="http://b.hatena.ne.jp/entry/%URL%" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/%URL%" alt="" /></a><br style="clear:both;" />

予約言語が大文字か小文字の違いだけでいけます。

スタイルシート

ついでに、作成時点でのスタイルシートも載せておきます。
ShareHtmlの仕上がりタグと合わせて、ご自身に合ったものに修正してください。


/*サイト内アイキャッチ画像付リンク*/
.img-left-Eyecatch{
    float:left;
    margin:0 1em 1em 0}
@media screen and (max-width:750px){.img-left-Eyecatch{width:100px}}

スマホ等々で表示した時に、


@media screen and (max-width: 750px) {img {
    max-width: 100%;
    height: auto;
    width /***/:auto;}}

としているが故に画像が100%で表示されてしまうので、それをわざわざ無視打ち消さねばならなくなっているという状態ですw

総括

今回、URLをショートコードで囲むことでアイキャッチ画像を呼び出していますが、この方法だからなのか、どうなのか定かではないですが、Retinaディスプレイ用にsrcsetを書こうと思ったのですが、なぜかショートコードが展開されずに機能しませんでした。

なので、ほかのアイキャッチ画像を呼び出すショートコードを利用して、srcsetが書けるように修正する余地がありそうです。

そうなると、今回使用したかしょの修正が必要になるし、今回のは今回ので置いておくかどうするかという新たな悩み(?)も出てきます。

参考サイト等

スポンサード リンク

スポンサード リンク

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