TCD「RIKYU」の関連記事カードリンクを新しいタブで開く

WordPress用TCDテーマ「RIKYU」のクイックタグに登録されている「関連記事カードリンク」は、テーマの雰囲気に合ったカードリンクを自動で作成してくれる便利な機能です。

WordPressテーマ「RIKYU (tcd104)」 – ワードプレステーマTCD

小規模ネットショップから大規模ECサイトまでつくれるWordPressテーマ「RIKYU （リキュウ）」。

しかし、このカードリンクは同じタブ内でページが遷移するようになっており、そのままでは「新しいタブ（別タブ）で開く」ことはできません。TCD LABOでは、別のテーマ用にPHPファイルを編集する方法（例1：GLAMOUR用）がいくつか（例2：QUADRA用）紹介されていますが、先々のアップデート管理などに少し不安が残ります。

もし、「RIKYU」の関連記事カードリンクを別タブで開かせたいだけなら、以下のコードをTCD設定の「ヘッダー用カスタムスクリプト」に追記しておくことでも実現可能です。

<!-- 関連記事カードリンクを新しいタブで開く -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.cardlink-thumbnail, a.cardlink-title').forEach(function(link) {
    link.target = '_blank';
    link.relList.add('noopener');
  });
});
</script>

<!-- 関連記事カードリンクを新しいタブで開く -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.cardlink-thumbnail, a.cardlink-title').forEach(function(link) {
    link.target = '_blank';
    link.relList.add('noopener');
  });
});
</script>

適用先WordPressダッシュボード＞TCDテーマ＞基本設定＞カスタムCSS・スクリプト＞ヘッダー用カスタムスクリプト

「noreferrer」が必要な場合は、該当箇所を「link.relList.add(‘noopener’, ‘noreferrer’);」としてください。

少し内容を書き加えれば、「外部サイトのみ新しいタブで開く」といった動作に調整もできます。以下は、サブドメインも別サイトとして考えた場合のコード例です。

<!-- 関連記事カードリンクを新しいタブで開く（外部サイトへのリンクのみ適用） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.cardlink-thumbnail, a.cardlink-title').forEach(function(link) {

    const url = new URL(link.href, window.location.href);

    if (url.origin !== window.location.origin) {
      link.target = '_blank';
      link.relList.add('noopener');
    }

  });
});
</script>

<!-- 関連記事カードリンクを新しいタブで開く（外部サイトへのリンクのみ適用） -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.cardlink-thumbnail, a.cardlink-title').forEach(function(link) {

    const url = new URL(link.href, window.location.href);

    if (url.origin !== window.location.origin) {
      link.target = '_blank';
      link.relList.add('noopener');
    }

  });
});
</script>