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

目次に行く･戻る

+本日の人気記事TOP10+

• エクストレイルリアワイパー交換方法と純正部品番号9
• カーメイトのエンジンスターターでエラー15表示と対処方法6
• シガーライターがない車にシガーライターソケットの付け方と増設方法3
• MG3530が壊れたのでMG3630と比較した評価レ PV2
• エクストレイルT32おすすめエアコンフィルター交換方法2
• エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ2
• ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法2
• セレナとエクストレイルのエコモーター（オルタネーター）のリコールと車検2
• 歯医者でクリーニング（歯石除去）とSRPというのをやってみた1
• マウスの左クリックや右クリックが効かないのでマウス分解して直す方法1

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

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

 

WordPressブログカード作成方法

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

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

 

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

 

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

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

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

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

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

車バイク用オイル

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

Amazon ガレージサービス

カー用品取付/交換サービス

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

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

WAKO'S

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

人気記事一覧

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

150,274件の PV

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

106,322件の PV

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

75,732件の PV

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

67,232件の PV

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

43,486件の PV

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

40,555件の PV

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

38,206件の PV

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

37,251件の PV

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

36,496件の PV

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

33,068件の 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>';

1. WordPressブログカード作成方法 | WordPressデビュー津々浦々 より:

   2016年6月28日 7:12 AM

   […] プラグインなしでブログカードを新規タブで開く方法とコード 先日、 WordPressにおいてブログカード（内部リンク用）を作成するショートコードのphp関数コードを紹介しました。 https://infovarious.com/2016-02-18 02:35 // […]

   返信

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。