ブログ投稿の外部リンクを新しいブラウザーウィンドウやタブで開きたいですか？
外部リンクを新しいウィンドウで開くことで、ユーザーはあなたのサイトを離れることなくリンクを訪れることができます。サイト訪問者の滞在時間が長くなるため、ユーザーのエンゲージメント向上につながります。
この初心者ガイドでは、WordPressサイトで外部リンクを簡単に新しいウィンドウまたはタブで開く方法を紹介します。
なぜ外部リンクを新しいウィンドウやタブで開くのか？
外部リンクとは、あなたが所有またはコントロールしていないサイトへのリンクのことです。通常、外部サイトへのリンクを追加した場合、訪問者はリンクをクリックするだけで、あなたのサイトを離れることになります。
ユーザー・エクスペリエンスの専門家の中には、外部リンクを新しいウィンドウやタブで開くべきではないと言う人もいますが、私たちはそうは思いません。
ほとんどのユーザーは、最後に訪れたサイトをすぐに忘れてしまいます。リンクをクリックすると、WordPressサイトから新しいサイトに移動してしまい、二度と戻ってこないかもしれません。
より良いユーザー体験のために、外部リンクを新しいウィンドウ（古いブラウザー）または新しいタブ（最新のブラウザー）で開くことをお勧めします。こうすることで、元のページが失われることはなく、ユーザーは切り替えてサイトの閲覧を再開することができます。
外部リンクを新しいタブで開くことのもう一つの利点は、あなたのサイトでのページ表示とユーザーエンゲージメントの増加です。サイト滞在時間が長いユーザーは、メールマガジンに登録したり、ソーシャルメディアでフォローしたり、コメントを残したり、商品を購入したりする可能性が高くなります。
ということで、WordPressで外部リンクを簡単に新しいウィンドウやタブで開く方法を見てみましょう。様々な方法を紹介しますので、自分に合った方法を選んでください：
- Opening External Links in a New Tab Using the Block Editor
- Opening External Links in a New Tab Using the Classic Editor
- Opening External Links in a New Tab Using HTML Code
- Opening Navigational Menu Links in a New Tab
- Automatically Opening All External Links in New Tab Using a Plugin
- Expert Guides on Adding Links to WordPress
動画チュートリアル
もし、文章での説明がお望みなら、このまま読み進めてほしい。
1.ブロックエディターを使って外部リンクを新規タブで開く
WordPressのブロックエディターには、外部リンクを新しいタブで開く機能がビルトインされています。WordPressの最近のバージョンでは、リンクを追加する際にこのオプションが表示されます。
外部リンクを追加したいブログ投稿またはページを編集するだけです。次に、リンクしたいテキストを選択し、「リンク」ボタンをクリックします。WindowsではCTRL+K、MacではCommand+Kのショートカットキーを押すこともできます。
リンクの挿入ポップアップが表示されます。リンクを入力して「Enter」を押してください。
その後、「新しいタブで開く」オプションをオンに設定する必要があります。
リンクは新しいタブで開きます。
ヒント： All In One SEOプラグインをインストールすることで、リンク挿入ポップアップにtitle属性とnofollow属性を追加することもできます。
2.クラシックエディターを使って外部リンクを新規タブで開く
もしまだクラシックエディターを使っているのであれば、新しいエディターを使い始めることをお勧めします。現代的で、より速く、そしてあなたが見逃している多くの新機能が含まれています。
それでもクラシックエディターを使いたい場合は、この方法で新しいタブで開くリンクを追加してください。
まず、リンクを追加したい投稿やページを編集する必要があります。次に、アンカーテキストと呼ばれるリンクしたいテキストを選択します。そして、「リンクをインサーター/編集」ボタンをクリックします。
外部リンクを追加するポップアップが外観表示されます。
その後、その横にある歯車のアイコンをクリックする。高度なリンク挿入ポップアップが表示されます。
ここから、「リンクを新しいタブで開く」オプションをチェックする必要があります。その後、下部にある「更新」ボタンをクリックしてリンクを追加してください。
3.HTMLコードを使って外部リンクを新規タブで開く
WordPressでリンクを追加するためにHTMLを記述する必要がある場合があります。例えば、新しいブロックエディターでHTMLモードを使用する場合や、WordPressテーマのテンプレートファイルにリンクを追加する場合などです。
このようにHTMLコードを使ってリンクを追加することができます：
<a href="http://example.com" target="_blank" rel="noopener">Link Text</a>
このコードのtarget="_blank "パラメータは、新しいウィンドウまたはタブでリンクを開くようにブラウザーに指示します。「example.com」を外部リンクのURLに、「リンクテキスト」を使用したいアンカーテキストに置き換えるだけです。
4.ナビゲーションメニューのリンクを新しいタブで開く
WordPressサイトでは、サイトのナビゲーションメニューに外部リンクを追加することができます。この方法は、従来のテーマを使用しているか、ブロックテーマを使用しているかによって異なります。
クラシックテーマでナビメニューのリンクを新しいタブで開く
新しいタブで送信メニューリンクを開くには、WordPressの管理エリアから外観 ” メニューにアクセスしてください。
次に、画面の右上にある「表示オプション」ボタンをクリックします。
ボタンをクリックすると、さらに多くのオプションが表示されます。
Show advanced menu properties’の下にある’Link Target’のオプションをチェックしてください。
その後、URLとリンクテキストを入力し、「メニューに追加」ボタンをクリックすることで、ナビゲーションメニューにカスタマイザーを追加することができます。
カスタムリンクがメニュー構造の列に表示されます。リンクを新しいタブで開く」オプションを選択すると、外部リンクを別のタブで開くことができます。
完了したら、一番下にある「メニューを保存」ボタンをクリックします。
ブロックテーマでナビメニューのリンクを新しいタブで開く
ブロックテーマを使用している場合は、外観 ” テーマに移動し、フルサイトエディターを使って新しいタブでアウトバウンドメニューリンクを開く必要があります。
ページ上部のヘッダーエリアをクリックすると、ヘッダーが選択されます。次に、メニューのすぐ左にあるナビゲーションエリアをクリックしてください。メニューが選択され、メニューの最後に新しいリンクを追加できる「+」記号が表示されるはずです。
ヒント:フルサイトエディターでブロックを選択するのは難しいので、多くのユーザーはリスト表示の方が簡単だと感じています。画面上部のアイコンをクリックし、ナビゲーションブロックを見つけて選択するだけです。ヘッダーやグループなど、他のブロックの中に入れ子になっている場合もあります。
ここで、「+」アイコンをクリックして、リンクを追加できるポップアップを開く必要があります。上部のフィールドにURLを入力し、「新しいタブで開く」をオンに切り替えてください。
次に、URLの横にある「送信」アイコンをクリックして、設定を保存します。
それが済んだら、画面上部の「保存」ボタンをクリックするのをお忘れなく。
5.プラグインを使って外部リンクをすべて新しいタブで自動的に開く
外部リンクを追加するたびに手動で設定をチェックするのは、余分な作業のように聞こえるかもしれません。しかし、時間が経てば慣れるでしょう。
複数投稿者のブログを運営している場合や、外部リンクを新しいタブで開くことをよく忘れる場合は、そのためのプラグインを使うことができる。
まず、Open External Links in a New Windowプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
このプラグインはすぐに機能し、外部リンクを自動的に新しいウィンドウで開きます。
実際にブログ投稿の外部リンクを変更するわけではありません。その代わり、JavaScriptを使って外部リンクを新しいウィンドウで開きます。
新規:プラグインを無効化すると、外部リンクが新しいウィンドウで開かれなくなります。
WordPressにリンクを追加するエキスパートガイド
外部リンクを新しいウィンドウまたはタブで開く方法はお分かりいただけたと思いますが、WordPressでリンクを追加する方法に関する他の投稿もご覧ください。
- 初心者向けWordPressリンクの貼り方ガイド
- SEOのための内部リンク：ベストプラクティスの究極ガイド
- WordPressでアンカーリンクを “簡単に “追加する方法（ステップバイステップ）
- WordPressでリンクの色を変更する方法（初心者ガイド）
- WordPressのリンク挿入ポップアップにタイトルとNoFollowを追加する方法
- WordPressでNofollowリンクを追加する方法（初心者向け簡単ガイド）
- WordPressでアウトバウンドリンクをトラッキングする方法
- WordPressでリンクのプリロードを高速化する方法
- WordPressでリンク切れを見つけ、修正する方法（ステップバイステップ）
WordPressで外部リンクを簡単に新しいウィンドウで開く方法について、この投稿がお役に立てれば幸いです。また、無料のビジネスアドレスの作り方や、WordPressのエキスパートが選ぶあなたのサイトで使える便利なTips、トリック、ハックもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ahmed Omar says
good explanation about all the options
personally I am using plugin, as it is more easy and at the same time I check on the links
thank you
WPBeginner Support says
You’re welcome, glad you found a method you prefer
管理者
Jiří Vaněk says
Alternatively, I would also add that for SEO purposes, it’s good to have links on the website with the ‘nofollow’ attribute.
Jordi says
Hi,
Unfortunately, after the latest WordPress updates, the option “Open in a new Tab” is not available at the time of inserting the link. You must then edit the link to include that option. Is there a possibility to revert it? Thanks.
WPBeginner Support says
You should still be able to add the open in new tab when first adding the link, we would recommend checking to ensure that you don’t have any plugins that may conflict with adding links.
管理者
Esteban says
Hello, in gutenberg once the option is checked it does not work, it is independent of plugins, could it be the theme?
WPBeginner Support says
If you’ve disabled all plugins you can try changing themes to see if the issue is from your theme. The other possibility would be if you have a browser addon that is preventing the link from opening in a new window or tab.
管理者
Jennifer Robin Gallery says
I’ve tried both this version, and WP External Links, and neither will open my links in a new tab. I’ve tried to disconnect my wp no right click plugin, and that still didn’t work. Suggestion?
WPBeginner Support says
If none of the methods in this article are allowing you to open the link in a new tab, we would recommend checking if you have any browser extensions that may be preventing the links from opening.
管理者
Jeroen van Rensen says
Nice article! I love it!
WPBeginner Support says
Thank you
管理者
Emily Harvey says
I am using the new editor and despite your excellent article when I click on the ‘open link in new tab’ button I am not sure which symbol indicates whether the link is in a new tab or not. Is it grey or is it green?
Am I right that if you do nothing the link will not open in a new tab?
WPBeginner Support says
It sounds like you may be using a plugin that is modifying the display, normally it would be when the box is filled for it to open in a new tab. If you preview the post you should be able to test which option is working for your site.
管理者
Ikenna John Udeobi says
Thank you for sharing this tip, I would start following these methods from now on
WPBeginner Support says
Glad our guide could be helpful
管理者
Terry G says
Thank you Scott Swanson for your note. It wasn’t working for me, but when I disabled that plugin, it does. I guess I have to find another protection plugin to see if it’s only that plugin.
Johnbosco gomez says
Greetings. please do you have the one with the feature if someone clicks external link it will take him to new page with click here to continue link? please can you suggest any plugin for this?
may says
I downloaded this but the links still don’t open in a new window or tab.
Scott Swanson says
Will not work with the WP Content Copy Protection & No Right Click plugin
Ben says
How do you open external links (eg advertising) when the person on your blog plays any of the videos?
João Leitão says
greetings! what I was looking for was a code to insert in functions.php that would do the trick without another plugin. so:
function wp_change_target($content){
return preg_replace_callback(‘/]+/’, ‘wp_target_callback’, $content);
}
function wp_target_callback($matches){
$link = $matches[0];
$mu_url = get_bloginfo(‘url’);
if (strpos($link, ‘target’) === false){
$link = preg_replace(“%(href=S(?!$mu_url))%i”, ‘target=”_blank” $1’, $link);
}elseif (preg_match(“%href=S(?!$mu_url)%i”, $link)){
$link = preg_replace(‘/target=S(?!_blank)S*/i’, ‘target=”_blank”‘, $link);
}
return $link;
}
add_filter(‘the_content’, ‘wp_change_target’);
Clare says
Can anyone tell me how to open a MENU item in a new window? I don’t see an option in the Edit Menus page. I have an external link in a footer menu , that I’d like to open in a new window.
Mike Cavanaugh says
I downloaded the plugin but all my links still open up in my wordpress page.
On my side bar ads, I want them to open up in a separate page and leave my page open?
Same for all the links in the “find a professional menu” I want people to go to their links/sites but keep my site open so they will have it in front of them.
Help please?
mike
demeyere says
I think it is much easier to just handle this in the jQuery for the whole site… and never worry about it again. (Substitute your own domain name for mine, of course.)
// open all external links in a new window
$(“a[href^=’http’]”).not(“[href*=’demeyere.com’]”).attr(‘target’,’_blank’);
wpbeginner says
@demeyere Again, the plugin above is not using target _blank to make sure that the site validates with XHTML strict. But yes, your code will do the job as well.FYI for others reading: Now anyone can simply make a plugin and call this snippet in the header. It wouldn’t make any difference in the load time between you manually putting in your header or calling it via a plugin into wp_head() hook.
easyP says
Hi
In earlier versions of wordpress, you selected the text you wanted to link to and then hit the link icon on the dashboard.
This opened a field in which you added the link.
Worked fine.
In latest wordpress versions, when I select the text and hit the link icon and paste in the link, the link appears at the top of the post – not surrounding the selected text.
Am I doing something wrong?
Plugin looks good but I’m trying to cut down on the number that I use.
wpbeginner says
@easyP It doesn’t work like that on our site. We are using 3.2.1. We select the text and hit the link icon, and it adds the link where it should. Are you using the Visual Editor or the HTML Editor?Also, any particular reason why you are trying to cut down on the number of plugins that you use?
easyP says
@wpbeginner
Hi boys.
Number of plugins – trying to cut down because of page load time.
I love my theme, but it runs like a donkey.
I use the html editor when writing posts and I’m using wordpress 3.2.1 but when I select the text and hit the link icon – the link forgets the highlighted text and appears at the top of the post / page!
Any thoughts?
wpbeginner says
@easyP If you try to this trick without a plugin, you will end up doing the same thing. The impact of this plugin on your load time is barely noticeable.
easyP says
@wpbeginner
Worth knowing that – thanks boys.
AstroGremlin says
I just installed this plug-in. Kind of a funny name, Open External Links in a New Window, but certainly a great idea. Thanks!