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

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

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

 

WordPressブログカード作成方法

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

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

 

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

 

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

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

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

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

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

車バイク用オイル

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

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

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

WAKO'S

+これまでによく読まれている記事一覧クリックでOPEN+

人気記事一覧

車のキーナンバー確認方法。キーレス紛失や壊れた時

151,305件の PV

ECUをリセットする方法。アイドリング不安定だったのでしょうがなく

107,009件の PV

Windows10,Windows8.1プロダクトキー確認方法

75,768件の PV

Windows10でエラーコード0x800705b4の対処方法

67,244件の PV

ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法

47,305件の PV

スロットルポジションセンサー調整で不安定なアイドリング調整

40,925件の PV

車から異音の原因。カラカラ、カタカタ、コトコトなど…。

38,228件の PV

Office2010・2013でプラダクトキー紛失して確認・再発行してもった方法

37,261件の PV

ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法

36,834件の PV

カーメイトのエンジンスターターでエラー15表示と対処方法

36,396件の PV

• 廃バッテリー処分方法
• シガーライターソケット増設方法
• ナビテレビが見れなくなった時
• 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>';

Stinger6トップページ記事間にアドセンス広告を表示・入れる方法



WordPressプラグインなしでコンタクトフォームを作成方法



スマホやモバイル端末でサイドバー非表示・削除にする方法



Stinger7にテーマ変更してみたが…。



カエレバ・ヨメレバをCSSでカスタマイズする方法



WordPressブログカード作成方法

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