【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード

はてなブログで使われているブログカードみたいなデザインで、WordPressで内部リンクを貼ることができるショートコードを作りました。
投稿画面に下記のようなショートコードを入力するだけで、アイキャッチ画像付きできれいにデザインされたはてなのブログカード風リンクを表示することができます。

使用例

［nlink url=”http://fukudon.com/how-to-affiliate/”］
※［］は全角なので、コピペする場合は半角の[]にしてください。
※このショートコードは内部リンク限定です。外部リンク用もまた近いうちに作ります。
2015/2/13追記。作りました。→　iframeを使わずにはてなのブログカード風サムネイル付き外部リンクをデザインするショートコード

こんな感じに表示されます。

アフィリエイトで長期安定して稼ぐための超！具体的手法論

資産サイトを構築する重要性 アフィリエイト広告が世の中に広がり始めてから10年以上が経過しました。 アフィリエイトの市場規模は年10%の伸びで拡大し続け、2013年度のアフィリエイト業界の市場規模は1400億円程度にもなっています。 その間

fukudon.com

また、引数に「title」を指定すれば任意のタイトルでリンクすることができます。（指定しない場合は記事のタイトルをそのまま表示します。）

［nlink url=”http://fukudon.com/how-to-affiliate/” title=”アフィリエイトで稼ぐための手法について”］

↓↓↓

 [nlink url=”http://fukudon.com/how-to-affiliate/” title=”アフィリエイトで稼ぐための手法について”]

さらに、引数に「excerpt」を指定すれば、任意の説明文を付加することができます。（指定しない場合は記事の抜粋から、抜粋が未入力の場合は本文冒頭から取得します。）

［nlink url=”http://fukudon.com/how-to-affiliate/” title=”アフィリエイトで稼ぐための手法について” excerpt=”アフィリエイトで稼ぐ手法について書いてるよん♪”］

↓↓↓

[nlink url=”http://fukudon.com/how-to-affiliate/” title=”アフィリエイトで稼ぐための手法について” excerpt=”アフィリエイトで稼ぐ手法について書いてるよん♪”]

コード

functions.php

 //本文抜粋を取得する関数（綺麗な抜粋文を作成するため） 
//使用方法：http://nelog.jp/get_the_custom_excerpt 
function get_the_custom_excerpt($content, $length) { $length = ($length ? $length : 70);//デフォルトの長さを指定する $content = preg_replace('/<!--more-->.+/is',"",$content); //moreタグ以降削除 $content = strip_shortcodes($content);//ショートコード削除 $content = strip_tags($content);//タグの除去 $content = str_replace("&nbsp;","",$content);//特殊文字の削除（今回はスペースのみ） $content = mb_substr($content,0,$length);//文字列を指定した長さで切り取る return $content; } //内部リンクをはてなカード風にするショートコード function nlink_scode($atts) { extract(shortcode_atts(array( 'url'=>"", 'title'=>"", 'excerpt'=>"" ),$atts)); $id = url_to_postid($url);//URLから投稿IDを取得 $post = get_post($id);//IDから投稿情報の取得 $date = mysql2date('Y-m-d H:i', $post->post_date);//投稿日の取得 $img_width ="90";//画像サイズの幅指定 $img_height = "90";//画像サイズの高さ指定 $no_image = get_template_directory_uri().'/images/no-img.png';//アイキャッチ画像がない場合の画像を指定 //抜粋を取得 if(empty($excerpt)){ if($post->post_excerpt){ $excerpt = get_the_custom_excerpt($post->post_excerpt , 90); }else{ $excerpt = get_the_custom_excerpt($post->post_content , 90); } } //タイトルを取得 if(empty($title)){ $title = esc_html(get_the_title($id)); } //アイキャッチ画像を取得 if(has_post_thumbnail($id)) { $img = wp_get_attachment_image_src(get_post_thumbnail_id($id),array($img_width,$img_height)); $img_tag = "<img src='" . $img[0] . "' alt='{$title}' width=" . $img[1] . " height=" . $img[2] . " />"; } else { $img_tag ='<img src="'.$no_image.'" alt="" width="'.$img_width.'" height="'.$img_height.'" />'; } $nlink .='<div class="blog-card"><a href="'. $url .'"><div class="blog-card-thumbnail">'. $img_tag .'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="'. $url .'">'. $title .' </a></div><div class="blog-card-excerpt">' . $excerpt . '</div></div><div class="blog-card-footer clear"><div class="blog-card-date">'.$date.'</div><div class="blog-card-hatebu"><img src="http://b.hatena.ne.jp/entry/image/'. $url .'" alt="はてブ"></div></div></div>'; return $nlink; } add_shortcode("nlink", "nlink_scode"); [/pre]

CSS

 /*内部リンクショートコード*/ .blog-card{ padding:12px 12px 0 12px; margin:10px 0; border:1px solid #ddd; word-wrap:break-word; max-width:100%; border-radius:5px; } .blog-card-thumbnail{ float:left; margin-right:10px; } .blog-card-content{ line-height:120%; } .blog-card-title{ margin-bottom:5px; } .blog-card-title a{ font-weight:bold; color:#111; text-decoration: none; } .blog-card-title a:hover{ text-decoration: underline; } .blog-card-excerpt{ color:#333; font-size:90%; } .blog-card-footer{ padding-top:5px; border-top:1px solid #ddd; border-top-width: 90%; } .blog-card-hatebu{ } .blog-card-date{ color:#333; font-size:75%; float:left; margin-right:10px; } .clear{ clear:both; } 

ちょっと解説

本文抜粋を取得する関数（綺麗な抜粋文を作成するため）は寝ログさんのget_the_custom_excerpt関数をそのまま利用させていただいてます。
WordPressで綺麗な本文抜粋を取得する方法（moreタグ対応、ショートコード、タグ、特殊文字削除）｜寝ログ

アイキャッチ画像のサイズを変えたい場合は、
$img_width =”90″;//画像サイズの幅指定
$img_height = “90”;//画像サイズの高さ指定
に任意の大きさを入力すればOKです。

アイキャッチ画像がない場合に表示するデフォルト画像のパスは、
$no_image = get_template_directory_uri().’/images/no-img.png’;//アイキャッチ画像がない場合の画像を指定
に入力します。

スペシャルサンクス

今回のショートコードを作成するにあたり、下記のブログの記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。
ありがとうございます！

WordPressショートコード共有！過去記事リンクをデザインしてSEO対策とPVアップ – ゆめぴょんの知恵

URLを記入するだけ！はてなブログカード風にWordpress記事も表示させるカスタマイズ方法