ベストセラー人気 WordPress テーマTop 30 詳細

[jQuery]新しいウィンドウでリンクを開く

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

リンクを新しいウィンドウまたはタブで実行されるようにするには、htmlタグでtarget = "_ blank"を追加する必要があります。 直接ソースを変更しない場合は、jQueryを使用することができます。

まずはattrメソッドを使用してtarget = "_ blank"を追加する方法を考えてみることができます。

$(document).ready(function(){
$("a[href^='http']").attr('target','_blank');
});

上記のように使用すると、 すべてのリンクが新しいウィンドウで実行になります(参照)。 クラスを具体的に指定してくれることができます。

$(document).ready(function() {
$("class name").attr({"target" : "_blank"})
})

クラスは .class_name、idは #id_nameこのよ(基本的なCSS)。

別の方法として window.openを使用することができます。

$(document).ready(function(){
$('.class_name').click(function(){
window.open(this.href);
return false;
});
});

特定のurlにのみ適用するには、次のように使用します。

$(document).ready(function(){
$('a[href=http://www.google.com]').click(function(){
window.open(this.href);
return false;
});
});
// Source: http://befused.com/

その後、 www.google.comこのリンクのみ新しいウィンドウで開きます。

WordPressのコメント内のリンクをすべて新しいウィンドウで開くようにするには、classの部分に #comments aを追加してくれればされます。

$(window).ready(function(){
//adds target blank to all comment links
$('#comments a').each(function(){
$(this).attr('target','_blank');
});
});
// Source: wordpress.org

コメント内のリンクは、新しいウィンドウで実行されるようにする方法はいくつかあります。 例えばフックを使用したり、プラグインを使用することもできます(ここ を参照)。 jQueryを使用すると、より簡単に、別のプラグインなしで、可能です。 参考までに WordPressでjQueryを使用する方法は、 この記事を確認してください。



コメントを残す

コメント