STORK（ストーク）の関連記事を新しいタブで開く方法

こんにちは、パラレルブロガーのゆーすけ(@yusuke_plmrstn)です。

ワードプレステーマであるOPENCAGE（オープンケージ） のSTORK（ストーク）はカスタマイズが簡単で非常に使い勝手のいいテーマです。

便利な機能の1つに関連記事をこんな風にキレイに表示できる機能があります。

サムネイルとタイトルが一緒に表示され見た目がオシャレなのでよくお世話になってます。

これはSTORK（ストーク）に元から備わっているショートコードを利用しているのですが、なんとこの方法で関連記事を表示すると新しいタブでページを開くように設定することができません。

今回はSTORK（ストーク）にカスタマイズを加えて関連記事を新しいタブで開けるようにする方法を紹介します。

問題点

関連記事を新しいタブで開けないと何が問題なのか。

そもそも関連記事を紹介するのはあくまでも読者さんのためにこういう別の情報もあるんですよと案内するためです。

ブロガーとしては1つでも多くの記事に目を通してもらいたいので積極的に関連記事を紹介するわけですが、別のページに移動してもらうということはつまり今まで読んでいた記事から離れてしまうことを意味します。

関連記事を読み終わって元の記事を忘れてしまわれては、読者さんとしても本来欲しかった情報を逃してしまうことに繋がりますし、書いた本人としても残念なことでしかありません。

そのため関連記事を新しいタブで開くことはお互いにとってメリットのあることなんです。

カスタマイズ方法

ではさっそくSTORK（ストーク）をカスタマイズしていきましょう。

今回カスタマイズするのは shortcode.php です。

phpやCSSにカスタマイズする時は基本的に子テーマを作成するものなんですが、shortcode.php の子テーマを作ってもうまく機能しなかったので今回に限り親テーマ内の shortcode.php に手を加えることにします。

shortcode.phpにコードを追記

まず shortcode.phpを開き、ページ内検索で “related”という単語を検索してみましょう。

するとこんな感じで「関連記事を呼び出す」というショートコードが書かれた部分が見つかるはず。

該当場所が見つかったらそのすぐ後ろにこんな風にコードを追記しましょう。

（変更前）<a href=“ ‘ .get_permalink….

（変更後）<a target=“_blank” href=“ ‘ .get_permalink….

スペースや記号が抜けないように注意しましょう。

たったこれだけ。これでショートコードを使って関連記事を表示させていたリンク先を踏むと新しいページで表示されるようになりました。

レイアウトの崩れを修正する

ところがまだ問題があります。

今のコードを追加しただけではこんな風に関連記事のレイアウトが崩れてしまいます。

ね？サムネイル画像が枠線をはみ出てしまってます。

せっかく新しいページで開けるようになったのにこれじゃあダメです。

ということでさらにカスタマイズを加えることにします。

レイアウトを調整するのでclassを指定してやりCSSをいじりましょう。

さっきコードを追記した少し後ろの箇所にこんな風にさらに追記しましょう。

（変更前）… class=“cf”>

（変更後）… class=“cf kanren_storkblank”>

赤字で書く内容は自分がわかりやすい内容でOKです。

なんだかよくわからない人はこのままコピペして使ってください。

CSSのカスタマイズ

あとはCSSに次のようにコードを加えてやりましょう。

/*————————————————————-
関連記事ショートコード_blankのレイアウト崩れ防止
————————————————————-*/

.kanren_storkblank{

overflow:hidden;

}

これでお終いです。

さっき崩れていたレイアウトもばっちり元通りになりました。

まとめ

STORK（ストーク）はものすごく便利なテーマですが、今回のようにちょっとした所に満足できないこともあります。

知識が無くてもブログをオシャレにカスタマイズできるのがウリではあるものの、知識があればもっとオシャレに便利に使うこともできるんですね。

以上、関連記事を新しいタブで開く方法でした！