「ページを別タブで実装する方法ないかな?」
実はa
タグの指定方法を少し変更するだけで別タブでページを開く実装が可能になります。
目次
別タブで開く方法
<a href="https://~~">リンク</a>
通常a
タグはこのように実装してhref
属性でリンク先を指定するのみですが、
<a href="https://~~" target="_blank">リンク</a>
このようにtarget="_blank"
を指定することで別タブでページを開けるようになります。
セキュリティ上の問題
実はtarget="_blank"
で指定しただけだと、親ページのURLを書き換えれてしまいます。
元ページのURLを変えられてしまうとフィッシング詐欺にかかるリスクがあるため対策する必要があります。
それを防ぐために以下のような記述を行います。
<a href="https://~~" target="_blank" target="_blank" rel="noopener noreferrer">リンク</a>
追加したのは、target="_blank" rel="noopener noreferrer"
です。
こうすることで、前述したようなリスクを回避できます。
ちなみに、WordPressのブロックエディタでリンクを別タブで開く場合は自動で付与されるので問題ないです。