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

JIN - ブログカード機能アップ

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

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

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

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。

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

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

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

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

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

function.phpにphpコードを追加

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

特にこだわりが無ければfuncion.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になっていない
  • function.phpが正しく保存できていない

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

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

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

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

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

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

コメント

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