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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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

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

Kanren1

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

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

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

スポンサーリンク

問題点

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

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

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

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

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

カスタマイズ方法

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

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

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

shortcode.phpにコードを追記

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

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

Kanren2

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

(変更前)<a href=“ ‘ .get_permalink….

(変更後)<a target=“_blank” href=“ ‘ .get_permalink….

Kanren3

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

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

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

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

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

Kanren4

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

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

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

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

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

(変更前)… class=“cf”>

(変更後)… class=“cf kanren_storkblank”>

Kanren5

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

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

CSSのカスタマイズ

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

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

.kanren_storkblank{

overflow:hidden;

}

Kanren6

これでお終いです。

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

スポンサーリンク

まとめ

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

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

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!