現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます!

  1. WordPress
  2. 1098 view

【超簡単】WordPressのリンクを新しいタブで開く方法【WP External Links 】

最終更新日:2019/03/07

こんにちは、ZOEです。
最近、訪問者様がリンクをクリックしてそのまま帰って来ない説が浮上したので、WP External Linksプラグインを利用して、外部リンクのみ自動で新規タブで開くようにしたいと思います。

チュートリアル系の記事が多いのに、リンクにそのまま飛んでしまうという失礼な仕様だった事をここでお詫びさせてください。

WordPressのリンクを新しいタブで開けないデメリット

  • 別のサイトを閲覧する際、同タブないでリンクが開かれると、戻るボタンを押さない限りユーザーが戻ってこれない。
  • 自分のサイトと、リンク先とを交互に見ながら理解を深めていくのに同タブは向かない。

WP External Linksプラグイン導入のメリット

WP External Linksを利用することで、記事内で、わざわざリンク毎にtarget=”blank”を入れなくても、自動で外部リンクのみ新しいタブでリンクを開く事が出来るようになります。

WP External Linksは記事内のリンクが内部リンクか外部リンクかという基準で、target=”blank”を挿入するかどうかを判断するからです。

*
HTMLではリンクにtarget=”blank”を入れるとリンクを別のタブで開くようになります。

WP External Linksプラグインのインストール&有効化

WordPress> ダッシュボード > プラグイン > 新規追加 >
右上キーワード検索部分より、WP External Linksを入力し、インストール > 有効化。

WP External Linksの設定

WordPress > Dashboard > WP External Linksと遷移し、Open external links:の部分をeach in a separate new window or tabにして保存ボタンを押してください。

ただ、これだけでは問題点が発生する場合があります。
それは、今までに中途半端にtarget blankをhtmlで付与していると正しく飛ばないなどのエラーが出てしまう事です。
それに対応する為に、今まで付けていたtarget blankを削除していきましょう。

既存のtarget blankに対応

外観> テーマ編集> functions.phpに移動して、以下のコードを貼り付ける。

// target="_blank" の削除
function remove_target_blank($content) {
return str_replace(' target ="_blank"', '', $content);
}
add_filter('the_content', 'remove_target_blank');

現在のtarget blankを削除するコードが書いてあります。
秘伝のたれ提供主
情報科学屋さんを目指す人のメモ

まとめ

WP External Linksを導入することで記事のライティング時間を短縮する事が出来たのではないでしょうか?

他にも、ライティング時間を短縮するのにマークダウン対応は欠かせないので、以下の記事も是非チェックしてください。

WINDIIがWordPressで行なっていることは以下の記事にまとめてあります。
是非ご覧になってください。

The following two tabs change content below.
WINDII

WINDII

WINDII(ウィンディ)は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします! また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

WordPressの最近記事

  1. WordPressをお試しで始める方法【5分できてなんと無料】

  2. WordPressで吹き出しを実装する【10分】

  3. WordPressでカテゴリーの並べ替えをする方法【3分で完了します】

  4. 現役エンジニアの選ぶWordPressの使いやすいテーマ9選【綺麗・使いやすい】

  5. WordPressの運用で行なっている事まとめ【プログラミング知識不要】

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP