JINのブログカードを別タブで開きたい!同タブ別タブ選択式のブログカードカスタマイズ

記事内に広告が含まれていることがあります。
JIN - ブログカード機能アップ

WordPressテーマのJINには標準でブログカード機能が搭載されています。

今回僕の元で働いてくれている従業員から「ある特定のブログカードだけ別タブで開くようにしたいんだけど・・・」という要望を受け実装してみました。

現在JINをお使いの方も簡単に導入ができるのでやりたい!と思った方は是非チャレンジして見て下さい。

WordPressカテゴリーCTA
\ココナラでWordPressエラー修正サービス始めました!/

ココナラでWordPressのエラー解決サービスを始めました!

追加オプション無しで3,000円から受け付けておりますが、新規会員登録で300円、僕の紹介コードを入力すると1,000円分のポイントが貰えるので実質1,700円から利用することができます!

  • 突然画面が真っ白になった
  • 英語のエラーが表示されてどうしたらいいかわからない
  • とにかく困っている

どんなことでもぜひお気軽にご相談ください!

紹介コード:K0GR23
スポンサーリンク
スポンサーリンク

JINのブログカード仕様

まずそもそもJINのブログカードの仕様ですが、記事本文中にURLに記載があった場合そのURLから記事のIDを特定し、IDを元にしてタイトル等の情報を取得。

その後アンカータグを吐き出してブログカードとすると言った方法です。

今回のカスタマイズの内容はURLに特定の識別符号を付与してあげる事で特定のブログカードのみアンカータグにtarget属性を付与し実現ができます。

今回のカスタマイズの仕様

色々悩んだんですが、シンプルにURL末尾に「_atab」という文字列をつける事でこれを識別符号とする事にしました。

  • https://exapmle.com/dog/_atab
  • https://example.com/cat_atab

このようにURLの最後に_atabをつける事で、そのブログカードのみ別タブで開く事ができます。

_atabという文字列がある場合にのみ、アンカータグの中にtarget=”_blank”が入った物が吐き出される仕組みです。

もちろん_atabという識別符号が無いURLは通常通り同じタブで開くので、例えば説明用のTips記事とか「この記事から離脱してほしく無いけど、どうしても説明の為に別記事も見て欲しい・・・」みたいな時に使えるかなと思います笑。

メンテナンスも楽

今回のこのURL末尾に_atabを付与するという方式ですが、後のメンテナンスも楽だと思ったのでこのようにしました。

「やっぱり全部同タブで良いや」ってなった時に、WordPressプラグインのSearch Regexで_atabを検索し、Replace pattern欄を空白にする事で一括削除ができます。

メンテナンス性の高さもあり、この方式にしました。

あくまで別タブで開いて欲しい物にのみ識別符号を付与すれば良いのでとっても簡単だと思います。

余談ですがatabはanother tab(別タブ)の略称で、最初はhtmlで別タブを指定する_blankにしようと思ったんですがそれだとSearch Regexで一括削除なんてした日には無関係の_blankも削除してしまう事になるので辞めました笑。

実行環境

今回このカスタマイズを以下の環境で動作する事を確認しております(と言っても別に難しい事をやっている訳じゃないのでどの環境でも大丈夫だと思います)。

JIN用ブログカードカスタマイズ実装

それでは実際にカスタマイズをして行きたいと思います。

が、基本的にはコピペでOK。

ただしfunctions.phpというファイルを編集する必要がある為、万が一に備えてfunctions.phpのバックアップを取っておいて下さい。

基本的には子テーマを導入されていると思うので、/wp-contents/themes/jin-child/functions.phpになると思います。

子テーマで設定を行わないと、JIN本体のアップデートの度にこの作業をやり直す事になってしまいます。

子テーマについてはJIN公式の以下のページをご覧下さい。

以下の手順はテーマのPHPファイルを編集する事になります。
当作業においていかなる場合も当サイトでは責任を負いかねますのでご承知おき下さい。

functions.phpにphpコードを追加

とりあえず以下のコードをfunctions.phpへまるっと追加して下さい。

特にこだわりが無ければfuncions.phpの最下部に追加する形がわかりやすくて良いと思います。

functions.php
//URLに_atabが付与されている時、ブログカードのアンカータグにtarget="_blank"を付与する
function url_to_blog_card_atab($the_content) {
	if ( is_singular() || is_category() || is_front_page() ) {

		$res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/'.preg_quote(get_this_site_domain()).'\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);

		foreach ($m[0] as $match) {
			if ( strpos($match, '_atab') !== false ) {
				$url = strip_tags($match);
				$url = rtrim($url, '_atab');//URLから識別符号(_atab)を削除
				$id = url_to_postid( $url );
				if ( ! $id ) continue;//IDを取得できない場合はループを飛ばす
					$post = get_post($id);
					$title = $post->post_title;
					if( ! get_post_meta($post->ID, 'post_desc',true) == null ){
						$excerpt = get_post_meta($post->ID, 'post_desc',true);
					}else{
						$excerpt = cps_excerpt($post->post_content,68);
					}
					$logo = esc_url( get_site_icon_url( 32 ) ) ;
					$sitetitle = get_bloginfo('name');
					$thumbnail = get_the_post_thumbnail($id, 'cps_thumbnails', array('class' => 'blog-card-thumb-image'));
					if ( !$thumbnail ) {
						$thumbnail = '<img src="'.get_template_directory_uri().'/img/noimg320.png" />';
					}
				
				$tag = '<a href="'.$url.'" class="blog-card" target="_blank" rel="noopener"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail">'.$thumbnail.'</div><div class="blog-card-content"><span class="blog-card-title">'.$title.'</span><span class="blog-card-excerpt">'.$excerpt.'...</span></div></div></a>';

				$the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
			} else {
				$url = strip_tags($match);
				$id = url_to_postid( $url );
				if ( ! $id ) continue;//IDを取得できない場合はループを飛ばす
					$post = get_post($id);
					$title = $post->post_title;
					if( ! get_post_meta($post->ID, 'post_desc',true) == null ){
						$excerpt = get_post_meta($post->ID, 'post_desc',true);
					}else{
						$excerpt = cps_excerpt($post->post_content,68);
					}
					$logo = esc_url( get_site_icon_url( 32 ) ) ;
					$sitetitle = get_bloginfo('name');
					$thumbnail = get_the_post_thumbnail($id, 'cps_thumbnails', array('class' => 'blog-card-thumb-image'));
					if ( !$thumbnail ) {
						$thumbnail = '<img src="'.get_template_directory_uri().'/img/noimg320.png" />';
					}
				
				$tag = '<a href="'.$url.'" class="blog-card"><div class="blog-card-hl-box"><i class="jic jin-ifont-post"></i><span class="blog-card-hl"></span></div><div class="blog-card-box"><div class="blog-card-thumbnail">'.$thumbnail.'</div><div class="blog-card-content"><span class="blog-card-title">'.$title.'</span&gt;<span class="blog-card-excerpt">'.$excerpt.'...</span></div></div></a>';

				$the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
			}
		}
	}
	return $the_content;
}
add_filter('the_content','url_to_blog_card_atab');

コピー&ペーストしたら保存しFTPでのアップロード、WordPressのテーマエディターを使っている場合は保存をして下さい。

この時点で何かしらブログ内の記事を開いてエラーが無く表示されていればOKです。

逆にエラーが出てしまった、画面が真っ白で何も表示されない等の場合はこのコピペしたコード以外に間違ってキーを打っていない等確認して下さい。

URL末尾に_atabを追加

続いて実際に別のタブで開きたいブログカードの元のURL末尾に_atabと追記して下さい。

https://example.com/dog → https://example.com/dog_atab

のような形です。

当然綴りが間違っていたり、アンダーバー(_)が抜けていたりすると反映されないので注意して下さい。

頻繁に別タブ指定したい場合は、WordPressプラグインのAddQuicktagのようなプラグインで即座に_atab付与ができるようにしても良いと思います。

上手く動かない時に確認したい事

もし上手く動かない時は次のような可能性があります。

  • URL末尾に_atab以外の文字列が入っている
  • JIN標準のブログカード機能がONになっていない
  • functions.phpが正しく保存できていない

一つ一つ確認してみて下さい。

内部リンクカードの使い分けでもっと便利に!

内部リンクカードは強制的に同じタブで読み込む為、今のページに留まったまま別のページを見せたいというような時には少し不便でした。

このように同タブと別タブを使い分ける事でユーザビリティの向上が見込め、運営者が思ったようなページの開かせ方が可能になります。

ただし僕は基本的に全ページを別タブで開くようなWebサイトはユーザビリティの観点から言ってどうかと思っています(単純に全部別タブで開くとうざいですよね笑)。

どちらかというと飛び道具のような、ここぞという場面で使うのが良いんじゃないかなー!と思います。

WordPressテーマJINの目次プラグインをEasy Table of Contentsに変更!CSSでTOC+のJIN風レイアウトにも対応
しょっぱなから「あれ、このテーマJINじゃなくね・・・?」って思った皆さん、ごめんなさい。 このブログはテーマにCocoonを採用しているんですが、別サイトでJINを愛用しているので許して下さい・・・笑。 という訳で今日はJINが推奨してい...
ConoHa VPS+KUSANAGIで始めるWordPress講座!初心者でもステップ形式で導入が可能です!KUSANAGI managerの使い方からコマンドまで全部解説
WordPress高速化エンジンKUSANAGIは、ConoHa VPSと組み合わせて使う事で初心者の方でも比較的簡単に導入が可能です。KUSANAGI managerを使った登録方法から設定やWordPressの設定まで全て解説!日本一分かりやすいKUSANAGIの始め方です!
WordPressに2段階認証を導入しよう!プラグインの設定・導入手順を徹底解説!
WordPressのシェア率はざっくり3割強、つまりリリースされるWebサイトの3つに1つはWordPressが採用されている事になります。 WordPressは多機能でテーマを切り替えるだけで簡単にWebサイトを変える事ができる為非常に人...
WordPressをGoogle reCAPTCHAで守ろう!Akismet代替手段でbotスパムコメント対策!
WordPressサイトを運営する上で切っても切り離せないのがスパムコメント。 スパムコメントの多くはbotボットという自動プログラムを介して行われ、単純に宣伝目的のものから悪意のあるアダルトサイトやフィッシングサイトへの誘導等多岐に渡りま...
ブログ運営データはGoogleタグマネージャを導入して測定しよう!設置からGoogleアナリティクス連携まで徹底解説!
これを読まれている多くのサイト運営者さんはGoogleアナリティクスを導入して日々のPV数や直帰率等のデータを確認していると思います。 データは長く運営すればする程取れるので1日でも早く解析を始めるべきですが、Googleアナリティクスを導...
スポンサーリンク
WordPress
スポンサーリンク
\この記事いいね!と思ったらシェアしてね/
スポンサーリンク
L'7 Records

コメント

  1. 匿名 より:

    悩みが解消されました。ありがとうございました。

タイトルとURLをコピーしました