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

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

使用例

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

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

アフィリエイトで長期安定して稼ぐための超!具体的手法論
資産サイトを構築する重要性 アフィリエイト広告が世の中に広がり始めてから10年以上が経過しました。 アフィリエイトの市場規模は年1...

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

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

↓↓↓

アフィリエイトで稼ぐための手法について
資産サイトを構築する重要性 アフィリエイト広告が世の中に広がり始めてから10年以上が経過しました。 アフィリエイトの市場規模は年10%の伸びで拡大し続け、2013年度のア...

さらに、引数に「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記事も表示させるカスタマイズ方法

スポンサーリンク

シェアする

フォローする

コメント

  1. 山賀 より:

    よしたけさんへ

    山賀と申します。こちらから失礼します。
    とても便利で素敵なショートコードありがとうございます。

    早速下記2つのページで設置してみました。
    http://looseleaf.jp/happiness_our_lives
    http://looseleaf.jp/work_-select

    少し疑問に思ったことがありました。
    内部リンクショートコードを設置して更新をすると、コメントが投稿されるのです。(作成者:記事名、コメント内容:内部リンク先タイトル)
    何か意図していたものなのでしょうか。

    何卒よろしくお願い申し上げます。

  2. よしたけ より:

    山賀さん

    こんにちは、はじめまして。
    よしたけです。

    ショートコードご利用いただきありがとうございます^^

    内部リンクショートコードを設置するとコメントが投稿されるのは、このショートコードの機能ではなく、WordPressのセルフピンバックというデフォルト機能です。

    「セルフピンバック」で検索していただくと、無効にする方法などもありますので、一度見てみてください♪

    ではでは今後ともよろしくお願いします^^

  3. アキ より:

    よしたけ様

    はじめまして、アキと申します。

    大変参考になるショートコード記載例、ありがとうございます。
    是非利用させて頂きたいと考えています。

    1点質問がございまして、このショートコードで表示されるタイトル部分の上に、

    「あわせて読みたい関連記事」

    というような文言を入れようとした場合、どのようにカスタマイズすればよろしいでしょうか?

    色々調べてみたのですが、独力ではわからなかったもので・・・。

    お手すきの際にご教示頂けるのであれば大変嬉しいです。
    厚かましい申し出かと思いますが、もしよろしければご回答頂けましたら幸いです。

    • よしたけ より:

      アキさん

      こんにちは!
      よしたけです。
      コメントありがとうございます。

      >1点質問がございまして、このショートコードで表示されるタイトル部分の上に、
      >「あわせて読みたい関連記事」
      >というような文言を入れようとした場合、どのようにカスタマイズすればよろしいでしょうか?

      関連記事の表示をこのブログカードでされたいということであれば、
      ショートコードのカスタマイズではなく、記事投稿画面で普通に見出しを付ける方法ではダメですか?

      たとえばこんな感じ↓

      <h3>あわせて読みたい関連記事</h3>
      [nlink url=”http://hogehoge/”]
      [nlink url=”http://hogehoge2/”]
      [nlink url=”http://hogehoge3/”]

      これで回答になっていますでしょうか?
      もし、「そういうことじゃないんだよぅ!」という場合はまたコメントください^^

  4. よしたけ様

    初めまして!おしん@ボサ子と申します。

    先日WordPressをはじめたばかりのなのですが、こちらの内部リンク用のショートコードを使わせていただきました。「Xeory Base」テーマに設置しましたが、不具合なく動作しております。
    非常に便利な機能を使わせていただき、ありがとうございます!!
    外部リンクのほうも、少しややこしそうなのですが挑戦してみたいと思います。

    • よしたけ より:

      おしん@ボサ子さん

      ショートコードお使いいただきありがとうございます。
      「Xeory Base」テーマでも不具合なく動作するとのご報告もありがとうございます!

      感謝です!