Affinger6のブログカードをクリックした時、リンク先を新しいタブで表示させる方法（jQuery利用）

Affinger6のブログカード仕様は、リンクのtarget属性を_blank で指定するオプションがありません。　このため、ブログカードをクリックした時にリンク先が「ブラウザの新しいタブ」で表示させることができません。

この点を補うため、jQueryを使って、リンク先が「新しいウィンドウ(タブ)」で表示させたいブログカードにリンクタグ属(target=”_blank“)を付加させる方法を紹介します。

 

Affinger6のブログカード（仕様）

Affinger6のブログカード（パーツ）は、ビジュアルエディタで 「カード」ボタンを押すと編集画面に以下のショートコードが挿入されます。

[st-card myclass="" id="" label="" pc_height="" name="" bgcolor="" color="" webicon="" readmore="on" thumbnail="on" type=""]

 

ブログカードのリンク先を新しタブで開く方法（対策）

Affinger6のテーマファイルをいじる訳に行かないので、対処療法的対策になりますが、ブログカードを新しいタブで開かせるために、jQueryを使って、ブログカードのリンクタグ属性に(target=”_blank“)を付加することにしました。

Affinger管理の「その他」＞ 上級者向けセクションの「</body>直前に出力するコード」欄に、下のjQueryコードを配置（コピペ）します。

 jQuery script
<script>
jQuery(function($){
$("div.card_blank a.st-cardlink[href^='https://pianoforte32.com/']").attr("target","_blank");
});
</script>

コードの説明
対象要素に対して、リンクタグ属性(target=”_blank“)を付加するScriptコードです。　
ーーーーー
対象要素は、div.card_blank要素の中のa.st-cardlink要素と[href^='ドメイン']です。　href属性にキャレット（^）をつけることで前方一致する要素が対象になります。

リンク先を新しタブで開かせたい対象のブログカードを決めたら、下に示す様に、テキストモードにして、対象のブログカードを<div>でサンドイッチします。　対象ブログカードをjQueryで識別できる様にdiv要素にクラス指定(class="card_blank")しています。

 HTML
<div class="card_blank">[st-card ブログカードのショートコード]</div>

 

ブログカードに対策した事例（デモ）

 

従　来

π多桁計算のBasicプログラムをPHP言語に移殖してみました。

WordPressを始めてから1年以上たちますが、WordPressを構成しているPHP言語の理解を深めるために、「N88-BASICによるはじめてのアルゴリズム入門」を引用して、以前Visual B ...

 

以上、ブログカードをクリックした時、リンク先を新しいタブで表示させる方法でした。