OPENCAGEのWordPressテーマの関連記事ショートコードを別ウィンドウ(target=”_blank”)で開く方法

OPENCAGEのWordPressテーマのショートコードで関連記事を別ウィンドウで開く方法



僕が今使ってるWordPressテーマは「ハミングバード」と言って、「OPENCAGE」で販売されているものなのですが、デザインが洗礼されているのでめちゃくちゃ愛用しています。

他にも「アルバトロス」や「ストーク」など、人気のWordPressテーマが揃っていて、どれも使いやすくデザインされています。

でもひとつだけ修正したいところがあるんです。

宮川 輝
関連記事のショートコードを別ウィンドウで開きたい!

 

このWordPressテーマはデザイン知識がない人でも、簡単にオシャレに表示されるようなショートコードが用意されていて、その中に関連記事を表示するものがあります。

〔kanren postid=""〕

このコードの中に記事のidを入れると、こんな感じでオシャレに表示されるようになります。

テキストだけの場合と比較してみました。

やっぱりショートコード使ったほうが、変顔してる僕のアイキャッチも表示されるのでなんだかクリックしたくなりますよね。

でもこれ、デフォルトだとクリックしても別ウインドウに飛んでくれないんですよ。

今回はこれをクリックして別ウインドウに飛ばしちゃおうというお話です。

関連記事は別ウインドウで開けない?

この関連記事のショートコードは別ウインドウで開けないと、OPENCAGEのよくある質問(全般)で説明されていました。

Q.関連記事ショートコードを別ウインドウ(target=”_blank”)で開くことは可能でしょうか。
A.〔kanren postid=”●●”〕のショートコードリンクを別ウインドで開くことはできません。また、仕様上カスタマイズによる変更もできません。

せっかく綺麗に表示してくれるショートコードなのに、別ウィンドウで開けないなんてもったい無い!!

と思ったので、無理やりできるようにしちゃいました。

OPENCAGEの関連記事ショートコードをtarget=”_blank”で別ウィンドウで開く方法。

まず【外観 > テーマの編集】から、shortcode.phpを開きます。

まずshortcode.phpを開きます。

 

そしたらその中から関連記事を表示してくれるためのコードを見つけます。

見つけにくい場合は【ctrlキーorコマンドキー + F】を押して出てきた検索バーに【related_article】と入れればすぐに見つかると思います。

関連記事のショートコードが表示されるプログラムを見つけます。

 

そしたらこの部分に【targe=”_blank”】を追加してあげます。

target="_blank"を追加してあげます。

 

これで別ウィンドウで開けるようになったのですが、このままだとデザインが崩れてしまうので修正するために、この要素にCSSで【overflow:hidden;】をかけてあげます。

このHTMLにstyle要素でベタ打ちしてもOKですが、僕は変更がきくようにclass名をつけてCSSを適用させました。

class名をつけてcssでoverflow;hidden;を適用させます。
 .kanren_miyaaki{
overflow:hidden;
}

 

これで関連記事をオシャレな表示にしたまま、別ウィンドウで開けるようになります。

簡単にできるので、せっかくなら綺麗なデザインのまま使ってみてはいかがでしょうか。

それでわっ!