Affinger のブログカード(埋め込みリンク)を新しいタブで表示する方法

2024年9月23日 2024年9月25日

課題

Affinger の埋め込みリンク（ブログカード）は、リンクを新しいタブで開くオプション設定(target="_blank")がありません。

簡単な JavaScript コードの実装と、埋め込みリンクへのクラス付与で解決できます！解決方法を紹介します。

JavaScript を利用し、埋め込みリンクに対して、target="_blank" を追加します。

必要なページに、次の JavaScript を埋め込みます。

<script>
document.querySelectorAll('.target_blank a').forEach(function(anchor) {
    anchor.setAttribute('target', '_blank');
});
</script>

コードの解説

上記の JavaScript は、ページ上で

という処理を行っています。

WordPress ダッシュボードの Affinger 管理 > カスタム投稿一覧の設定 > コードの出力 > </body>直前に出力するコード（その他のアクセス解析など） に、次の JavaScript コードを記述します。

<script>
document.querySelectorAll('.target_blank a').forEach(function(anchor) {
    anchor.setAttribute('target', '_blank');
});
</script>

埋め込みリンクの target プロパティに "_blank" が付与され、カードリンクは新しいタブで開きます。

ポイント

上記の Affinger 管理での JavaScript 追加では、サイトの全てのページに JavaScript コードが組み込まれます。

ページごとに JavaScript の有効化を選択する場合、パターンなど、ページ個別にコードを埋め込む機能を利用し、該当ページに JavaScript を組み込んでください。

上記の JavaScript は、target_blank というクラスが付与されている埋め込みリンクにのみ有効に動作します。

記事編集画面の埋め込みリンク編集画面で、追加 CSS クラスに target_blank を加えます。※ target_blank の前に . (ピリオド)は不要です。

追加 CSS クラスに target_blank クラスを加えた埋め込みリンク（ブログカード）が、リンクを新しいタブで開く状態になっていることが分かります。