Loading…

記事内にプロモーションが含まれています。

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

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

ブログカード

所要時間目安: 4

This session is using  IPv4  is established in

この記事は2016年2月18日のものです。現在は状況が異なる可能性がありますのでご注意ください。

Stinger6 Stinger7 WordPress カスタマイズ 備忘録

目次に行く・戻る

メルカリ招待コード:

ブログカード

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

 


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

 

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

 

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

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


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


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

 

/*部リンク本文抜粋を取得する関数(綺麗な抜粋文を作成するため*/
 /*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");

 

<target="_blank">を付けて2箇所変更しています。

 

変更箇所は以下になります。
(変更箇所のみ抜粋)

 

$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, Stinger7, WordPress, カスタマイズ, 備忘録」同じカテゴリーの記事一覧

あなたにおすすめ

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

CSS圧縮後(minify)にCSS整形方法カスタマイズの為

サイト運営しているうちにCSSがものすごい大きくなってしまうことがありますよね。昔使用していたCSSがそのままだったり、もしくはコメントアウトしたものが残っていたりなどです。そういった不要なCSSをサ…

もっと読む

インフィード広告アドセンス

かたおとやわこで筋膜リリース

伝えたいこと 備忘録 時事ネタ 治療

首肩腰のこりにかたおとやわこ。保阪尚希監修ディープアタッカーが欲しい…。

テレワークが多くなっている中で、パソコンの使用頻度が多くなっているのではないでしょうか。テレワークができない職種の方々には感謝しか言いようがありません。暑い中や寒い中に外で仕事をされていらっしゃる方や…

もっと読む

インフィード広告アドセンス

東京オリンピックパラリンピック

伝えたいこと 備忘録 時事ネタ

リオ五輪金メダル銀メダル銅メダル毎動画集(NHK)

リオオリンピック(リオ五輪)も閉会式を終えて、 次期開催都市である東京の都知事小池百合子さんにセレモニーが行われました。また、安倍晋三内閣総理大臣もマリオにふんしてトンネルから現れるというサプライズ?…

もっと読む

インフィード広告アドセンス

年末年始渋滞予想

メンテナンス 伝えたいこと 備忘録 旅行 時事ネタ

年末年始の渋滞予測・渋滞予想は、名神・東名は1月2日、3日がピークで55km…。

さてさてもうそろそろ、年末年始の帰省ラッシュ時期に近づいてきました。年に幾度となくこの帰省ラッシュという言葉が踊るのでしょうか。 まずは今回のように年末年始、そして夏のお盆時期の会社が夏休みの時期が大…

もっと読む

インフィード広告アドセンス

no image

備忘録

プラーバシーポリシー

プライバシーポリシー 当サイトに掲載されている広告について当サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net、Amazonアソシエイト、バリューコマース、)を利用し…

もっと読む

インフィード広告アドセンス

テキストにリンクがある場合にくるっと回るアニメーション

WordPress カスタマイズ 伝えたいこと 備忘録

テキストにリンクがある場合にアニメーション効果をつけるCSS方法11選

先日画像にリンクがある場合に画像を透過させるCSSでの方法を記載しました。 画像にリンクがある場合にCSSだけでゆっくりと透過させる方法 こちらの続編で忘れないうちに記事にして備忘録として残しておこう…

もっと読む

おすすめの記事一部広告

お小遣い稼ぎにアンケート。

Multiplex 広告

おすすめ!!

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう!!ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ!!

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に!!楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

Googleニュース

2024-04-28

~Weeklyメンテナンス~:211 Pt. 今回はちょっとハードルが高く思えるが、やってみれば意外と簡単な樹脂補修について紹介しよう。クルマの各部をDIY ...

2024-04-28

2024年04月28日 11:26『高く』(佐原)【尾道市 福山市 三原市でおの整備・車検・メンテナンス・修理/ 板金・塗装 全部マルっと カープランニング広島 へまかせ ...

Total195


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

目次に戻る

よろしかったらシェアよろしくお願いします。

-Stinger6, Stinger7, WordPress, カスタマイズ, 備忘録
-, , ,

目次に戻る

目次に戻る


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

comment

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

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