AFFINGER6 WordPress サイト&ブログの作り方 絵描き生活

AFFINGER6:ヘッダーカードの外部リンクを別窓で開く方法

2021年9月2日

  1. HOME >
  2. 絵描き生活 >
  3. AFFINGER6 >

AFFINGER6:ヘッダーカードの外部リンクを別窓で開く方法

2021年9月2日

株式会社オンスピードから販売されている、WordPressの有料テーマ『AFFINGER6』。

このテーマでは、サイト上部に「ヘッダーカード」と呼ばれる画像リンクを最大4枚付けることができます。

AFFINGER6のヘッダーカード
『AFFINGER6』のヘッダーカード。

このヘッダーカード、自分の見せたいモノをアピールできるのでとても便利なのですが、デフォルトでは同窓でしかリンクを開けないんですよね~。
TwitterやNOTE、ほかのSNSのアドレスを貼り付けたときに同窓で開いてしまうというのは、ユーザビリティ的にちょっと不親切だよな~と、わたしは思ったのでした。

たとえば、うちのサイトではヘッダーカードにオンラインショップ(BOOTH)へのリンクがあります。

AFFINGER6のヘッダーカードを外部リンクのときは別窓で開きたい
『AFFINGER6』のヘッダーカードを外部リンクのときは別窓で開きたい。

これが同窓で開いてしまうことによって、pixivまたはBOOTHに閲覧者が流れてしまうことは何としても避けたいところ!
いや、流れてしまってもいいんですけど(よくないけど!)、古いタブとして『あとりえ極星堂』も残しておいてもらって、「あ、極星堂の続きも見たいんだった~☆」って戻ってきてほしいじゃないですかー。
せめてそういう希望を残しておきたいじゃないですかー。

そんなわけで、その方法をご紹介いたします。
ヘッダーカードが外部リンクだったら別窓(別タブ)で、内部リンクだったら同窓というふうに開かせる方法です。

【AFFINGER管理】からコードを入力する

設定場所

【AFFINGER管理】>>【その他】>>【上級者向け】>>『コードの出力』

『headに出力するコード』の欄に、以下のコードを入力してください。

入力するコード

<script>
 jQuery(function($){
	$('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');
});
</script>

以上です。

これでヘッダーカードのリンク先が外部リンクの場合のみ、別窓で開きます。

仕組み

『jQuery(ジェイクエリー)』という、JavaScriptライブラリを使っています。

『jQuery』とは、JavaScriptを普通に書くと長文すぎてややこしくなってしまうのを、短文でOKになるようにしてくれる超便利な仕組みです。
ある程度書きあがっている状態のJavaScriptを外部に置いておくことで、自分のサイトでは短いコードを書くだけでOKになります。
下描きをしてくれているスクリプトを、自分のサイトでペン入れするイメージ!

ですから、『jQuery』 を使用するためには、本来「この『jQuery』 を使います」とheadで読み込む必要があります。

が、『AFFINGER6』はデフォルトで『jQuery』を読み込んでくれています。
そのため、あらためて『jQuery』を読み込んだりしなくても、管理画面で上記コードを入力するだけで『jQuery』を使ったスクリプトがちゃんと動いてくれます。

参考にさせていただいたサイトさま

わたし 鍋弓わた が描いた漫画(同人誌)

わたし 鍋弓わた が表紙を描いた本

  • この記事を書いた人
  • 最新記事

鍋弓わた

美と歴史と物語を愛するイラストレーター。
同人サークル『極星堂きょくせいどう』で歴史漫画も描いています。
大阪生まれの奈良在住。
一児(男の子)を抱えながら、絵描き生活と歴史生活を楽しんでいます。

趣味は2003年からおこなっているウェブ制作。
気がつけば今年で19年目。

このブログの近代史や軍事のページでは、艦船模型雑誌で作例や考証記事を書かれている艦船模型プロモデラー 渡辺真郎(HIGH-GEARed)氏をアドバイザーとしてお招きしています。
※戦争賛美はしていません※

⇒もっと自己紹介
⇒渡辺真郎氏公式ブログ

Instagram pixiv みてみん

⇒お問い合わせ

-AFFINGER6, WordPress, サイト&ブログの作り方, 絵描き生活