Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで外部リンクを新しいウィンドウまたはタブで開く方法

訪問者が他のサイトへのリンクをクリックし、二度と戻ってこないことは最も避けたいことです。そのため、外部リンクを新しいウィンドウまたはタブで開くことが、スムーズなユーザー体験の鍵となります。

WPBeginnerでは、読者を惹きつけておくことに真剣に取り組んでいます。そのため、サイト上の外部リンクはすべて新しいタブで開くようにしています。こうすることで、私たちのサイトでの場所を失うことなくリンクを探索することができ、簡単に私たちのコンテンツを探索し続けることができます。

この初心者向けガイドでは、WordPressサイトの外部リンクを簡単に新しいタブで開き、ユーザーエンゲージメントを高め、読者を満足させる方法を紹介します。

How to Open External Links in a New Window or Tab With WordPress

なぜ外部リンクを新しいウィンドウやタブで開くのか?

外部リンクとは、あなたが所有またはコントロールしていないサイトへのリンクのことです。通常、外部サイトへのリンクを追加した場合、訪問者はリンクをクリックするだけで、あなたのサイトを離れることになります。

ユーザー・エクスペリエンスの専門家の中には、外部リンクを新しいウィンドウやタブで開くべきではないと言う人もいますが、私たちはそうは思いません。

ほとんどのユーザーは、最後に訪れたサイトをすぐに忘れてしまいます。リンクをクリックすると、WordPressサイトから新しいサイトに移動してしまい、二度と戻ってこないかもしれません。

より良いユーザー体験のために、外部リンクを新しいウィンドウ(古いブラウザー)または新しいタブ(最新のブラウザー)で開くことをお勧めします。こうすることで、元のページが失われることはなく、ユーザーは切り替えてサイトの閲覧を再開することができます。

外部リンクを新しいタブで開くことのもう一つの利点は、あなたのサイトでのページ表示とユーザーエンゲージメントの増加です。サイト滞在時間が長いユーザーは、メールマガジンに登録したり、ソーシャルメディアでフォローしたり、コメントを残したり、商品を購入したりする可能性が高くなります。

ということで、WordPressで外部リンクを簡単に新しいウィンドウやタブで開く方法を見てみましょう。様々な方法を紹介しますので、自分に合った方法を選んでください:

動画チュートリアル

Subscribe to WPBeginner

もし、文章での説明がお望みなら、このまま読み進めてほしい。

WordPressのブロックエディターには、外部リンクを新しいタブで開く機能がビルトインされています。WordPressの最近のバージョンでは、リンクを追加する際にこのオプションが表示されます。

外部リンクを追加したいブログ投稿またはページを編集するだけです。次に、リンクしたいテキストを選択し、「リンク」ボタンをクリックします。WindowsではCTRL+K、MacではCommand+Kのショートカットキーを押すこともできます。

Adding a Link in the Block Editor

リンクの挿入ポップアップが表示されます。リンクを入力して「Enter」を押してください。

その後、「新しいタブで開く」オプションをオンに設定する必要があります。

The Open in New Tab Option in the Block Editor

リンクは新しいタブで開きます。

ヒント: All In One SEOプラグインをインストールすることで、リンク挿入ポップアップにtitle属性とnofollow属性を追加することもできます。

もしまだクラシックエディターを使っているのであれば、新しいエディターを使い始めることをお勧めします。現代的で、より速く、そしてあなたが見逃している多くの新機能が含まれています。

それでもクラシックエディターを使いたい場合は、この方法で新しいタブで開くリンクを追加してください。

まず、リンクを追加したい投稿やページを編集する必要があります。次に、アンカーテキストと呼ばれるリンクしたいテキストを選択します。そして、「リンクをインサーター/編集」ボタンをクリックします。

Add new link in classic editor

外部リンクを追加するポップアップが外観表示されます。

その後、その横にある歯車のアイコンをクリックする。高度なリンク挿入ポップアップが表示されます。

Open link in new tab using the classic editor

ここから、「リンクを新しいタブで開く」オプションをチェックする必要があります。その後、下部にある「更新」ボタンをクリックしてリンクを追加してください。

WordPressでリンクを追加するためにHTMLを記述する必要がある場合があります。例えば、新しいブロックエディターでHTMLモードを使用する場合や、WordPressテーマのテンプレートファイルにリンクを追加する場合などです。

このようにHTMLコードを使ってリンクを追加することができます:

 <a href="http://example.com" target="_blank" rel="noopener">Link Text</a>

このコードのtarget="_blank "パラメータは、新しいウィンドウまたはタブでリンクを開くようにブラウザーに指示します。「example.com」を外部リンクのURLに、「リンクテキスト」を使用したいアンカーテキストに置き換えるだけです。

WordPressサイトでは、サイトのナビゲーションメニューに外部リンクを追加することができます。この方法は、従来のテーマを使用しているか、ブロックテーマを使用しているかによって異なります。

クラシックテーマでナビメニューのリンクを新しいタブで開く

新しいタブで送信メニューリンクを開くには、WordPressの管理エリアから外観 ” メニューにアクセスしてください。

次に、画面の右上にある「表示オプション」ボタンをクリックします。

Open screen options

ボタンをクリックすると、さらに多くのオプションが表示されます。

Show advanced menu properties’の下にある’Link Target’のオプションをチェックしてください。

Select Link Target option

その後、URLとリンクテキストを入力し、「メニューに追加」ボタンをクリックすることで、ナビゲーションメニューにカスタマイザーを追加することができます。

カスタムリンクがメニュー構造の列に表示されます。リンクを新しいタブで開く」オプションを選択すると、外部リンクを別のタブで開くことができます。

Open external link in a new tab in menu

完了したら、一番下にある「メニューを保存」ボタンをクリックします。

ブロックテーマでナビメニューのリンクを新しいタブで開く

ブロックテーマを使用している場合は、外観 ” テーマに移動し、フルサイトエディターを使って新しいタブでアウトバウンドメニューリンクを開く必要があります。

ページ上部のヘッダーエリアをクリックすると、ヘッダーが選択されます。次に、メニューのすぐ左にあるナビゲーションエリアをクリックしてください。メニューが選択され、メニューの最後に新しいリンクを追加できる「+」記号が表示されるはずです。

Select the Navigation Block and Click the + Icon

ヒント:フルサイトエディターでブロックを選択するのは難しいので、多くのユーザーはリスト表示の方が簡単だと感じています。画面上部のアイコンをクリックし、ナビゲーションブロックを見つけて選択するだけです。ヘッダーやグループなど、他のブロックの中に入れ子になっている場合もあります。

ここで、「+」アイコンをクリックして、リンクを追加できるポップアップを開く必要があります。上部のフィールドにURLを入力し、「新しいタブで開く」をオンに切り替えてください。

次に、URLの横にある「送信」アイコンをクリックして、設定を保存します。

Toggle the 'Open In New Tab' Option On

それが済んだら、画面上部の「保存」ボタンをクリックするのをお忘れなく。

外部リンクを追加するたびに手動で設定をチェックするのは、余分な作業のように聞こえるかもしれません。しかし、時間が経てば慣れるでしょう。

複数投稿者のブログを運営している場合や、外部リンクを新しいタブで開くことをよく忘れる場合は、そのためのプラグインを使うことができる。

まず、Open External Links in a New Windowプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

このプラグインはすぐに機能し、外部リンクを自動的に新しいウィンドウで開きます。

実際にブログ投稿の外部リンクを変更するわけではありません。その代わり、JavaScriptを使って外部リンクを新しいウィンドウで開きます。

新規:プラグインを無効化すると、外部リンクが新しいウィンドウで開かれなくなります。

ブログ投稿中に外部リンクを新しいタブで開くように設定するのをよく忘れる場合や、ゲスト寄稿者がガイドラインに従うことを確認する簡単な方法が必要な場合は、WPCodeを使用することもできます。

WPCodeは、WordPressに安全かつ簡単にカスタムコードを追加することができ、あなたのサイトをカスタマイズするための便利なコードスニペットのビルトインライブラリが付属しています。

この方法を使えば、数回クリックするだけで、投稿中の外部リンクをすべて自動的に新しいタブで開くことができる。

まず、無料のWPCodeプラグインをインストールし、有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のチュートリアルに従ってください。

プラグインを有効化したら、WordPressの管理ダッシュボードからCode Snippets ” Libraryに移動します。

そこから「外部リンクを新しいタブで開く」スニペットを探します。スニペットが見つかったら、マウスオーバーして「Use snippet」ボタンをクリックします。

Find the snippet for opening external links in a new tab from the library

WPCodeスニペットエディターが開きます。

WPCodeが自動的にコードを追加し、適切なインサーターメソッドを選択することに注目してください。

WPCode automatically adds the code

あとは、ページ上部のスイッチを「有効化しない」から「有効化する」に切り替え、「更新」ボタンを押すだけだ。

最後に、「更新」ボタンをクリックしてコード・スニペットを保存し、有効化する必要があります。

Switch the toggle to 'Active' and click the 'Update' button

これだけです。これでWordPressの投稿に追加された外部リンクはすべて自動的に新しいタブで開かれるようになります。

この投稿が、WordPressで外部リンクを簡単に新しいウィンドウで開く方法を学ぶのにお役に立てば幸いです。WordPressのリンク追加に関連する他の投稿もご覧ください:

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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

31件のコメント返信を残す

  1. Ahmed Omar

    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

      You’re welcome, glad you found a method you prefer :)

      管理者

  2. Jiří Vaněk

    Alternatively, I would also add that for SEO purposes, it’s good to have links on the website with the ‘nofollow’ attribute.

  3. Jordi

    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

      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.

      管理者

  4. Esteban

    Hello, in gutenberg once the option is checked it does not work, it is independent of plugins, could it be the theme?

    • WPBeginner Support

      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.

      管理者

  5. Jennifer Robin Gallery

    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

      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.

      管理者

  6. Jeroen van Rensen

    Nice article! I love it!

    • WPBeginner Support

      Thank you :)

      管理者

  7. Emily Harvey

    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

      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.

      管理者

  8. Ikenna John Udeobi

    Thank you for sharing this tip, I would start following these methods from now on

    • WPBeginner Support

      Glad our guide could be helpful :)

      管理者

  9. Terry G

    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.

  10. Johnbosco gomez

    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?

  11. may

    I downloaded this but the links still don’t open in a new window or tab.

  12. Scott Swanson

    Will not work with the WP Content Copy Protection & No Right Click plugin

  13. Ben

    How do you open external links (eg advertising) when the person on your blog plays any of the videos?

  14. João Leitão

  15. Clare

    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.

  16. Mike Cavanaugh

    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

  17. demeyere

    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

      @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.

  18. easyP

    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

      @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

        @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

          @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

          @wpbeginner

          Worth knowing that – thanks boys.

  19. AstroGremlin

    I just installed this plug-in. Kind of a funny name, Open External Links in a New Window, but certainly a great idea. Thanks!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。