プラグインなしでブログカードを新規タブで開く方法とコード

先日、
WordPressにおいてブログカード（内部リンク用）を作成するショートコードのphp関数コードを紹介しました。

 

WordPressブログカード作成方法

昨今、ShereHTMLでのリンク作成がここ数年メジャーでしたが、 WordPressやはてなブログにおいてはブログカードなるものが出てきました。サイト内リンクや外部サ

📅 2016.02.17 | 📂 Stinger6, Stinger7, WordPress, カスタマイズ

https://infovarious.com/post-852/

 

上記ですが、
上記の記事のコードですとリンク先（内部リンク）の記事が同じタブで表示されてしまうので、
せっかく訪れてくれた方々がブログカードをクリックするとその記事が見れなくてってしまいます。

 

それではその記事が見たくてアクセスしてくれたのに、
クリックした瞬間に違う記事（URL）になってしまうので新規タブで開くようにコードを若干改変しました。

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ

カーメンテナンス
ワコーズ

カーパーツ
WAKO'S

+人気カー用品を見てみるクリックでOPEN+

→人気のカーナビランキングカーメンテナンスWAKO'S車バイク用オイル

カーメンテナンス
ワコーズ

車バイク用オイル

ワコーズカーメンテナンス

メルカリ招待コード： 招待コードをコピー

• 廃バッテリー処分方法
• シガーライターソケット増設方法
• ナビテレビが見れなくなった時
• Windows10・Windows8.1プロダクトキー
• アルミテープチューン貼る場所
• 車から異音の原因
• スロットルポジションセンサー調整方法
• バッテリー交換後アイドリング不調
• ハンドルセンターズレ調整方法
• 車のキーンナンバー確認方法
• ECUリセット方法

ブログカード（内部リンク）を新規タブで開くようにコードは以下です。

/*部リンク本文抜粋を取得する関数（綺麗な抜粋文を作成するため*/
 /*https://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 . '" target="_blank"><div class="blog-card-thumbnail">'. $img_tag .'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="' . $url . '" target="_blank">'. $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="https://b.hatena.ne.jp/entry/image/'. $url .'" alt="はてブ"></div></div></div>';

 return $nlink;
 } 

 add_shortcode("nlink", "nlink_scode");

$nlink .='<div class="blog-card"><a href="' . $url . '" target="_blank"><div class="blog-card-thumbnail">'. $img_tag .'</a></div><div class="blog-card-content"><div class="blog-card-title"><a href="' . $url . '" target="_blank">'. $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="https://b.hatena.ne.jp/entry/image/'. $url .'" alt="はてブ"></div></div></div>';

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？