2018年夏時点では、このアリカワブログはWordPressで運営しています。
WordPressのテーマは有料テーマの「affinger5(wing)」を使っています。
このaffingerに概ね満足しているのですが、
いくつか不満点もありました。
その中で一番大きな不満点が「カードリンクとYoutubeリンクが同じタブで開くこと」でした。
今回はそちらの解決法を書いていきます。
affinger5(wing)の不満点
内部リンクのブログカードは本来同じタブで開くのが正しい使い方のようですが、
そのページから離脱されたくないことって多いですよね。
私はこのサイトにおいては別にどうでも良かったりするのですが、
別途運営しているアフィリエイトサイトは内部リンクが多く、
そのページに留まって欲しいことが多かったです。
「affinger 別タブ」や「affinger 新規タブ ブログカード」などで調べるものの、
解決法がどこにも載っていませんでした。
そこで、今回の記事を書くことになりました。
ブログカードは非常に便利なショートコードなのですが、
同じく新規タブで開きたい人はいらっしゃるのではないでしょうか?
テキストリンクではちょっとインパクトが足りない、
ブログカードを使いたい、でも別タブで開きたい、という人も多いはずです。
同様に、ショートコードで管理するYouTubeリンクにおいても、
同じタブで開くことになるので、今回はそちらも触れておきます。
affinger5(wing)でブログカードを別タブ・新規タブで開く方法!
さて、本題です。
ここからはphpに関することを書いているので、くれぐれも
「自己責任で」
行ってください。
バックアップなどはしっかり取ってから行ってください。
まずはブログカードですが、現在は以下のような
<a href="https://○○〜" class="st-cardlink">
という形になっていると思います。
これに、新規タブを開く「target=”_blank”」を与え
<a href="https://○○〜" target="_blank" class="st-cardlink">
という形にするのが目的です。
これをするには、WordPressの管理画面で、
「外観→テーマの編集」のページの右上の、
「編集するテーマの選択」で「WING-AFFINGER5」(親テーマ)を選びます。
そして、WING-AFFINGER5の中の、テーマのための関数(functions.php)を選びます。
そこで「command+F」(winなら「Ctrl+F」)を押してください。
PHPのズラズラ〜っと書いてある文から目的の単語を探します。
検索窓に「st-cardlink」と入れてみてください。
1105行目(2018年8月時点)に、
<a href="<?php the_permalink() ?>" class="st-cardlink">
という文があると思います。
ここをいじって、
重要!
<a href="<?php the_permalink() ?>" target="_blank" class="st-cardlink">
「target=”_blank”」の前後は半角スペースが必要です。
そして上のように変えたら、ページ下部の「ファイルを更新」をクリックです。
これでブログカードが新規タブで開くようになります。
affinger5(wing)でYouTube動画を別タブ(新規タブ)で開くようにする方法
次にYouTube動画です。
デフォルトの状態だと、YouTubeのサムネ画像をクリックすると、
同一タブでYouTubeに飛ぶかと思います。
先のブログカードと同じく、
<div class="st-youtube"><a href="//www.youtube.com/watch?v=○○〜">
に対して「target=”_blank”」を与え、
<div class="st-youtube"><a href="//www.youtube.com/watch?v=○○〜" target="_blank">
にするのが目的です。
先と同じように、「外観→プラグイン」から、WING-AFFINGER5を選び、
テーマのための関数(functions.php)を選びます。
こちらも先と同じく、「command+F(WinはCtrl+F)」でphp内を
「st-youtube」で検索して、
$youtube_link = '<div class="st-youtube"><a href="//www.youtube.com/watch?v='.$id.'><i class=
という部分を探します。
2018年8月時点だと2434行目になっています。
この部分を
重要
$youtube_link = '<div class="st-youtube"><a href="//www.youtube.com/watch?v='.$id.'" target="_blank"><i class="
にします。
target=”_blank”の前には1つ半角のスペースを空けてください。
そして先と同様に「ファイルを更新」すると、
YouTube動画をクリックすると別タブ(新規タブ)で開くようになっています。