ほにゃららでお馴染みでお馴染みの次男さんのところの記事（Feedlyがイマイチ見づらいと思って拡張を探してみたらええの見つけた、Feedly Reader）からリンク頂いた時に、リンクの表示の仕方が良い感じで悔しかったのでパクリついでにショートコードにしてみたよ。
こんな感じです
プラグインでもあるのかなぁと実装方法を探してみたところ、よく見かけたのは WP-AddQuicktag を使ってHTMLタグを出力する方法。
それでもいいけども、サムネイル画像を生成する部分は外部のサービスを利用するため、もしもそのサービスが終了した時は全ての記事を書き換えるというとてつもなく面倒なことになります。
ショートコードで実装すれば、もしもの時も最低限の変更で済みますのでね。
記事内で外部サービスを呼び出すのはちょっとリスクが高いですハイ。
コード
こんな感じで実装しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function shortcode_custom_bookmark($opt, $content = null) { /* デフォルトの設定 */ $width = 150; // サムネイルの横幅 $class = 'bookmark cf'; // 全体を覆うclass $text = 'リンク'; // アンカーテキストがなかった時のテキスト /* デフォルトの設定ここまで */ if(!empty($opt['url']) && preg_match('/^(https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)$/', $opt['url'])) { if(!empty($opt['width']) && preg_match('/^[0-9]+$/', $opt['width'])) $width = $opt['width']; $height = round($width * 0.75); if(!empty($content)) $text = esc_attr($content); if(!empty($opt['class']) && preg_match('/^[a-zA-Z0-9 -_]+$/', $opt['class'])) $class .= ' '.$opt['class']; $str = '<article class="'.$class.'"><figure><a href="'.$opt['url'].'" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/'.rawurlencode($opt['url']).'?w='.$width.'" alt="'.$text.'" width="'.$width.'" height="'.$height.'" /></a></figure><div class="bookmark_container"><header><h3><a href="'.$opt['url'].'" target="_blank">'.$text.'</a></h3> <a href="http://b.hatena.ne.jp/entry/'.$opt['url'].'" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/'.$opt['url'].'" alt="はてブ数" /></a></header>'; if(!empty($opt['description'])) $str .= '<p>'.esc_attr($opt['description']).'</p>'; $str .= '</div></article>'; return $str; } } add_shortcode('bm', 'shortcode_custom_bookmark'); |
※2014/4/20 ソース修正
PHPの関数(htmlspecialchar)を使用していたところを、より便利なWordPressの関数(esc_attr)に修正しました。
↑のコードをfunctions.phpに追記すれば、記事内で [bm][/bm] のショートコードが使えるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
# ショートコードを書くと [bm url="{URL}"]{アンカーテキスト}[/bm] # こうなる <article class="bookmark cf"> <figure> <a href="{URL}" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/{URL}?w=150" alt="{アンカーテキスト}" width="150" height="113"></a> </figure> <div class="bookmark_container"> <header> <h3><a href="{URL}" target="_blank">{アンカーテキスト}</a></h3> <a href="http://b.hatena.ne.jp/entry/{URL}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/{URL}" alt="はてブ数" style="width: auto; height: auto; opacity: 1;"></a> </header> <p>{TEXT}</p> </div> </article> |
サンプルコードでサムネイル画像生成に使っているサービスは画像の縦横比が3:4の固定で高さの指定ができなかったので、横幅の指定にあわせて自動で算出するようにしています。
articleやfigureなどHTML5のタグを使っているので、そのあたりは適切変更してくださいな。
他にもいくつかのオプションにも対応しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
# オプションは ・url ・・・ サイトのURL ・width ・・・ サムネイルの横幅 ・description ・・・ サイトの概要文（指定されていないとアンカーテキストと同じ） ・class ・・・ 全体を包むclassに追加 # オプションを指定すると [bm url="{URL}" width="{300}" description="{サイト概要文}" class="{CLASS}"]{アンカーテキスト}[/bm] # こうなる <article class="bookmark cf {CLASS}"> <figure> <a href="{URL}" target="_blank"><img class="bookmark_thumb" align="left" border="0" src="http://s.wordpress.com/mshots/v1/{URL}?w={300}" alt="{アンカーテキスト}" width="{300}" height="225"></a> </figure> <div class="bookmark_container"> <header> <h3><a href="{URL}" target="_blank">{アンカーテキスト}</a></h3> <a href="http://b.hatena.ne.jp/entry/{URL}" target="_blank"><img border="0" src="http://b.hatena.ne.jp/entry/image/{URL}" alt="はてブ数" style="width: auto; height: auto; opacity: 1;"></a> </header> <p>{TEXT}</p> </div> </article> |
サムネイル画像生成APIはWordPressの非公式APIとやらを使っています。
非公式というのは、プラグインを実装するのに開始したサービスのようで、「まぁいつサービスを停止するかも知れんし、それでもいいなら使ってもいいよ」と回答を得られたとの記事があったので、使わせていただきます。
ブックマークレットができました！
@incrementlogさんがこのショートコードのブックマークレットをつくってくださいました！
このショートコードでリンクしたいページをブラウザで開いて、ブックマークレットをポチっとすると、サイトのタイトルや概要が記述されたショートコードが生成されます。上のリンクもブックマークレットで作りました。これは捗る！！めっちゃ便利！！
おまけ
CSSも置いときます。参考にどうぞ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.bookmark { margin: 1em; padding: 2.1em 1em 2.1em; } .bookmark img { margin: 0; padding: 0; border: none; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .bookmark figure { margin: 0; padding: 0; float: left; display: inline; border: none; background: none; } .bookmark figure img { float: left; display: inline; border: 2px solid #c72439; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; } .bookmark_container { padding-left: 170px; } .bookmark header { margin: 0; padding: 0; border: none; background: none; } .bookmark h3 { margin: 0; padding: 0; border: none; background: none; display: inline; font-weight: normal; } .bookmark p { margin: 0 !important; padding: 5px 0 0 !important; width: auto; clear: none; font-size: 0.8em; color: #565656; } |
ピンバック: 【WordPress】外部リンクをサムネイル付きで表示するショートコード用のブックマークレットを作成したよ | increment Log
ピンバック: WordPressで引用付きのリンクを表示させたい | 何の変哲もない福岡生活(WP)…
ピンバック: 容量無制限、画像を自動で保管整理「Google+ Auto Backup」 | てるず
こんにちは。
こちらのショートコードを使わさせていただいています。
大変便利なショートコードです。ありがとうございます。
できたら自身のサイトの場合はアイキャッチを表示させるような機能をプラスしてもらえたらうれしいです。
改造しようと思ったのです、いまいちうまくいきませんでした。
マサキさま
こんにちは！
自身のサイトでのみアイキャッチ画像を表示させる場合、ショートコードで指定されたリンク先のURLを解析して判断する処理が必要です。
・そのURLが自身のサイトかどうか
・そのURLが自身のサイトであればIDの記事は何か
・そのURLがその記事にアイキャッチ画像が表示されているか
記事のIDだけ指定するにしても、現状とはまったく別の動作で改修が必要となるため、ここでは対応が難しいです。
もし、リンクしたサイトのアイキャッチ画像を表示させるだけであれば、はてなブックマークのブログカードの動作が近く、ユーザーによってブックマークレットもつくられています。ぜひ参考までに。
【はてなブログ ブログカードをブックマークレット化してみたよ】
http://hayashikejinan.com/blog/1166/
ありがとうございました。
このサムネ付リンクの使い勝手がかなりいいので、移行することは考えていないので、このまま使わさせていただきます。
「使い勝手がかなりいい」とはありがとうございます！機能改善の提案や不具合報告などございましたらお気軽にご連絡ください。
ピンバック: 外部リンク用設定の参考 | Hastam Album
はじめまして 最近はOGPを設定してあるサイトが増えているので、それを利用できたら良いな、と思いました。
はじめまして。
コメントありがとうございます！
サイトのサムネイル画像はWordPress公式のものをそのまま使っているので、それがOGPに対応しない限りはなんともできないですね…
ピンバック: サムネいるつきリンクの作成 - Hastam Album