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

公開日: : 最終更新日:2015/02/16 wordpress

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

使用例

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

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

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

また、引数に「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");

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

ピックアップ記事と広告

こちらの記事もおすすめ

【WordPress】Stinger3にFacebookのOGP設定をしたよ。

当ブログもたまにツイッターでシェアしてくれたり、フェイスブックでいいね!してくれたりする記事があ

記事を読む

【WordPressプラグイン】画像アップロード時に自動で透かしを入れられる『Easy Watermark』で画像の不正利用を防ごう!

サイトやブログに画像をアップする際に、著作権フリーの無料素材画像などならともかく、自分で撮影した

記事を読む

Advanced Custom Fieldsでカテゴリにカスタムフィールドを追加し表示する方法

カテゴリーやタグ、カスタムタクソノミーのアーカイブで、カテゴリ毎に独自のテキストや画像などを表示

記事を読む

TablePressにも対応!横長テーブルのスマホ対応はFooTableで決まり。【WordPressプラグイン】

グーグルが「スマホ対応ができているかどうかを4/21からランキング決定要因に加えるよ~。」と異例の事

記事を読む

投稿記事内でスマホ用とPC用で出力するコンテンツを条件分岐させる方法

前回は、テーブル表示をPC・スマホ両方に対応させるレスポンシブ化する方法をご紹介しましたが、今回も引

記事を読む

複数のカテゴリ(ターム)に属する投稿を抽出してアーカイブに表示する方法

たとえば、全国の飲食店を紹介するサイトをWordPressで構築するとします。 そのときに、カ

記事を読む

自分のWordPressブログにはてブが付いたらChromeにお知らせしてもらう方法

いまさらですが、はてなブックマークを使い始めました。(はてなブックマークを使い始めたので、登録~

記事を読む

サーバー移転時にDNSの浸透を待たずに新旧サーバーに自在にアクセスする方法

今回は、独自ドメインでwebサイトを運用している方向けのTIPSです。 サーバーの引越時などに、新サ

記事を読む

【WordPress】「下書きを保存しています…」と表示されたまま投稿画面で記事の保存ができなくなる。

先日、いつも通りこのブログを更新しようと記事を書いていたところ、WordPressの投稿画面で、

記事を読む

【WordPress】iframeを使わずにはてなのブログカード風に外部リンクをデザインするショートコード

先日、WordPressで自分のブログ内のほかの記事に内部リンクを貼る場合に、はてなブログなんかでよ

記事を読む

Comment

  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」テーマでも不具合なく動作するとのご報告もありがとうございます!

      感謝です!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


登別温泉の第一滝本館にて日帰り入浴 ※1,500坪の敷地に35の湯船の大浴場!

北海道旅行5日目に札幌駅前のトヨタレンタカーでプリウスをレンタルして日

小樽の洋菓子店「LeTAO(ルタオ)」で極上スイーツ「ドゥーブルプレート」をいただきました。

札幌から少し足を延ばして小樽まで。 小樽のレトロでかわいい町をぶ

「すすきの」で北海道料理をリーズナブルに味わえる海鮮居酒屋『海さくら』

登別温泉に日帰りで行った次の日はお昼までゆっくり寝て、ランチにラマイの

スープカレー(ポーク)
RAMAI(ラマイ)札幌中央店で食べた初スープカレーが美味すぎた!

札幌発祥の道産子のソウルフード『スープカレー』を食べてきましたよ。

すすきの「禅」で海鮮しゃぶしゃぶと北海道の地酒を堪能

札幌・すすきのの狸小路あたりにあるしゃぶしゃぶ・すき焼き専門店「禅」で

→もっと見る

PAGE TOP ↑