【コピペOK】WordPress（ワードプレス）にサムネイル付きリンクを入れる方法

2018 10/06

2016.06.05 2018.10.06

WordPress（ワードプレス）にサムネイル付きリンクを入れる方法【コピペOK】

記事中に他のページや、異なるサイトへのリンクを入れることが多々あると思います。
有名なところでイメージできるのは「はてなのブログカード」です。とても使いやすく、見やすいのですが多様するにはブログ運営としては大きなリスクが考えられます。

これらのリスクを考えたら、簡単にコピペで設置できたら独自に持っていたほうがとっても便利で楽ですｗ

Googleで検索すれば、やり方や紹介はたくさんあると思いますが、コピペで簡単にできて、リンクしやすい様に少し調整した汎用的に使える方法を記載します。

WordPress（ワードプレス）にサムネイル付きリンクを入れる方法【コピペOK】

初めに、なぜ？　はてなのブログカードがあるのに使わないのか？？
リスクを確認しておくことを薦めます。
せっかくある無料サービスはどんどん利用すれば良いと思いますが、必ずリスクもあると言う考えを持つように癖つける事が大切です。他のどんなサービスを使うときにもでてくるポイントです。

はてなブログカードを使うリスク

はてなでサービスが終了すると使えなくなる。（もしかしたら、いままで設置したものも見栄えが崩れてしまって、改修も大変になる可能性があります）
リンクの参照が、はてなブログ（hatenablog.com）になる。
仕様の変更があった際に、使えなくなったり、自分のサイトと体裁が合わなくなる可能性がある。

実装内容と手順のご紹介【コピペOK】

早速、実装についてです。

functions.php にJsと必要なコードを記載
CSSにデザイン要素を入れる
「AddQuicktag」のプラグインでショートコードを設定する（必須では無いです）

functions.php にJsと必要なコードを記載

「外観」メニューから、テーマの編集で以下のコードをコピペで入れます。
functions.phpは半角1文字でもエラーになり、慣れていないと修復が大変です。
必ずバックアップをしてから作業します。

このコードは、下記のブログの記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

詳しいの実装方法は、【WordPress】内部リンクをはてなのブログカード風のサムネイル付きリンクにデザインするショートコード｜ふく丼を参照してください。（参照）

//本文抜粋を取得する関数（綺麗な抜粋文を作成するため）
//使用方法：http://nelog.jp/get_the_custom_excerpt
function get_the_custom_excerpt($content, $length) {
  $length = ($length ? $length : 65);//デフォルトの長さを指定する
  $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.jpg';//アイキャッチ画像がない場合の画像を指定
 
  //抜粋を取得
  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" id="linkArea">
<a href="'. $url .'"></a>
<div class="blog-card-thumbnail">'. $img_tag .'</div>
<div class="blog-card-content">
<div class="blog-card-title">'. $title .'</div>
<div class="blog-card-excerpt">' . $excerpt . '</div>
<div class="blog-card-date">'.$date.'</div>
</div>
</div>
<div class="clear"></div>';
        return $nlink;
      }  
 
add_shortcode("nlink", "nlink_scode");

CSSにデザイン要素を入れる

以下のコードをCSSにコピペしてください。
テーマ更新があるとCSSも上書きされてしまうので、必ず子テーマにカスタマイズしたCSSを入れるようにします。

.blog-card{
  padding: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:15px;
}
 
.blog-card-title{
	margin-bottom:5px;
	margin-top:15px;
	font-weight:700;
}
 
.blog-card-title a{
    font-weight:700;
    color:#111;
    text-decoration: none;  
}
 
.blog-card-title a:hover{
    text-decoration: underline; 
}
 
.blog-card-excerpt{
  color:#333;
  font-size:90%;
}

.blog-card-date{
    color:#f12b24;
    font-size:75%;
    float:left;
    margin-right:10px;
    margin-top:5px;
}
 
.clear{
  clear:both;
}

.blog-card img {
    margin: 1em 0 1em 0;
    max-width: 100%;
    height: auto;
    box-shadow: 6px 6px rgba(1, 0, 0, 0.27);
    border: 1px solid #000;
}

#linkArea{
position: relative;
width: 100%;
height:50px;
background-repeat:repeat-x;
display:table;
margin-bottom:0px;
}

#linkArea a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}