この記事の原題は「WordPress でリンクを新しいウィンドウに開くには？」で、2014 年に公開されました。旧版は「すべてのリンクを新しいウィンドウで開く」ことを目標にし、WordPress コアファイルの編集を勧めていました。この方法は予期しないコンテキスト変更を生み、更新時に失われたり新しいコードと衝突したりするため、現在は実行すべきではありません。
現在の原則は、ほとんどのリンクをブラウザー既定の同一タブ遷移にし、新しいタブが必要な利用者には中クリック、ショートカット、メニューで選んでもらうことです。現在の作業コンテキストを保つ実質的な価値がある場合だけ、特定リンクに新しい閲覧コンテキストを要求し、作動前に視覚的かつ支援技術で読める予告を出します。最終的にタブとウィンドウのどちらになるかはブラウザーが決め、サイト側では保証できません。
末尾に
source_exportの歴史的本文を完全保存しています。アーカイブ内のグローバルな<base>とコアファイル編集は歴史的証拠にすぎず、絶対に実行してはいけません。
Table of Contents
まず同一タブか新しいタブかを決める
| 場面 | 推奨 | 理由と境界 |
|---|---|---|
| サイト内の記事、カテゴリー、ナビゲーション、パンくず、ページ送り | 同一タブ | 通常の履歴と「戻る」動作を保つ |
| 通常の外部参考資料 | 原則として同一タブ | 「外部」だけでは新しいタブの理由にならず、利用者は自分で選べる |
| 未保存フォーム入力中に参照するヘルプや規約 | 新しいタブを検討可能 | 先に下書き保存や状態保護を行い、リンク文言で予告する |
| 並べて確認する必要がある報告書、証拠、手順 | 新しいタブを検討可能 | トラフィックを引き留めるためではなく、作業設計上の必要性に基づける |
| サインイン、決済、ダウンロード、プロトコルハンドラー、別アプリ操作 | 個別設計 | 宛先、ファイル形式/サイズ、アプリ起動を説明し、新しいタブを安全制御にしない |
直帰率、いわゆる「SEO 評価」、または「外部リンクはすべて別タブ」という慣習をユーザー調査の代わりにしてはいけません。判断基準はリンクの目的、作業の連続性、アクセシビリティです。
WordPress エディターで単一リンクを設定する
現在の WordPress リンクコントロールでは、リンク単位で「新しいタブで開く」を有効または無効にできます。画面は WordPress の版、ブロック、サイトのプラグインによって多少異なるため、先にステージングで確認します。
- 文字、画像、またはボタンを選び、リンクコントロールを開きます。
- 完全な宛先を入力または選択します。外部サイトには明示的な
https://アドレスを使います。 - 詳細設定を開き、承認済みリンクだけ「新しいタブで開く」を有効にします。
- 表示されるリンク文言に「（新しいタブで開きます）」など、ローカライズした予告を加えます。
- 保存後にフロントエンドの最終 HTML を確認します。エディターのスイッチだけでは公開結果の証拠になりません。
WordPress が確認するのはアドレスの形式であり、ページの存在や宛先の信頼性は保証しません。公開担当者が最終ドメイン、リダイレクト、コンテンツ所有者、アクセス条件を確認する必要があります。ナビゲーション、ボタン、画像、第三者ブロックでは設定場所が異なることがあります。コントロールに機能がなくても、サイト全体の JavaScript で強制してはいけません。
手書き HTML では意図を明示する
通常のリンクに target は不要です。
<a href="/help/account">Account help</a>新しいタブが本当に必要な場合は、固定 HTTPS 宛先、明確な文言、明示的な noopener を使います。
<a href="https://example.org/report"
target="_blank"
rel="noopener">Annual report (opens in a new tab)</a>現代のブラウザーは、target="_blank" を持つ <a> を暗黙の noopener として扱います。それでも明記すれば安全上の意図を記録でき、古い環境にも配慮できます。通常の <a href> を window.open()、クリックハンドラー、疑似リンクで置き換えてはいけません。アドレスのコピー、キーボード操作、スクリプトなしのフォールバックが壊れます。
| 値 | 実際の意味 | 使用境界 |
|---|---|---|
target="_blank" | 新しい閲覧コンテキストを要求する | タブかウィンドウかは保証しない。事前に利用者へ知らせる |
rel="noopener" | 新しいコンテキストから window.opener 経由で元ページを操作できなくする | 新しいタブのリンクに明記可能。通常の Referer は維持する |
rel="noreferrer" | Referer を送らず、noopener も暗黙に含む | プライバシーポリシー上必要な場合だけ使い、サインイン、分析、流入元への影響を評価する |
rel="external" | 宛先が現在のサイト外であることを示す | 関係の意味だけで、安全制御でも自動的な別タブ指定でもない |
rel="nofollow" | 宛先を支持しないなど検索上の関係を表す | 新しいタブや noopener とは無関係。「外部」だけを理由に一括追加しない |
noreferrer を固定テンプレートにせず、計測目的で URL にユーザー識別子や追跡パラメーターを加えないでください。リンク利用の計測が必要なら、適法な目的、最小データ、保持期間、オプトアウトを先に定義します。
キーボードとスクリーンリーダー利用者へ事前に知らせる
W3C の G201 と H83 は、リンクが新しいウィンドウやタブを開く前に予告することを重視しています。これらは唯一の適合方法ではなく実装技術ですが、実際の危険を説明しています。新しいコンテキストでは「戻る」ボタンが機能せず、弱視者、スクリーンリーダー利用者、認知障害のある人が迷うことがあります。
- 単独でも目的が分かるリンク文言を使い、繰り返す「ここをクリック」や裸の URL を避けます。
- 「新しいタブで開きます」をアクセシブルネームに含めるか、確実に関連付けた説明を提供します。代替文のないアイコンだけに頼りません。
- ファイルは形式と合理的に分かるサイズも示し、メール、電話、別アプリを起動する前にも知らせます。
- 通常の Tab 順序と見えるフォーカスを保ち、リンクに正の
tabindexを設定しません。 - キーボードの Enter、ブラウザーの戻る、中クリック/ショートカット、少なくとも一つのスクリーンリーダーで試験します。
- フォーカス取得、選択肢変更、ページ読み込みだけで新しいウィンドウを開きません。
アイコンは視覚的な補助にできますが、すべてのスクリーンリーダーが target から「新しいタブ」と自動読み上げするとは限りません。サイト本文が各言語版で一貫した予告を明示する必要があります。
外部リンクの安全境界
新しいタブにしても危険な宛先は安全になりません。公開する宛先ごとに次を確認します。
- 業務上明確に必要なプロトコルだけ許可します。通常の Web ページは確認済み HTTPS とし、
javascript:、data:、利用者が自由指定できる宛先を受け入れません。 - リダイレクトをたどり、最終ドメイン、TLS、サインイン要件、内容を確認します。短縮リンクの表示や外観だけを信用しません。
- メールアドレス、アカウント情報、セッショントークン、内部記録番号をクエリパラメーターに入れません。
- HTML を生成するテーマやプラグインは URL を検証し、出力時にコンテキストに合うエスケープを行います。未信頼の属性を連結しません。
- ダウンロードはファイル形式、サイズ、配布元を説明し、実行ファイルを普通の文書に見せかけません。
- 宛先の乗っ取り、用途変更、安全でない通信への降格、不審な権限要求があれば直ちにリンクを外します。
定期リンク検査はリクエストを最小限にし、実ユーザーデータを宛先へ漏らしてはいけません。ヘルスチェック成功はその時点で到達できたことだけを示し、内容が今後も信頼できる保証ではありません。
リンクを生成するコンポーネントが変更を所有する
| リンクの出所 | 正しい所有者 | 安全な変更場所 | してはいけないこと |
|---|---|---|---|
| 単一の記事またはページ本文 | コンテンツ編集者 | 特定リンクにエディターコントロールを使う | 全本文リンクをグローバルに書き換える |
| ナビゲーション、テンプレート、テンプレートパーツ、同期パターン | サイト設計所有者 | サイトエディターまたは版管理された子テーマ | 親テーマ編集や <base target> 追加 |
| プラグイン生成の表、一覧、コメント、ボタン | プラグイン所有者 | 公式設定、文書化されたフック、自作プラグイン | 最終 HTML の正規表現置換やベンダーファイル編集 |
| WordPress 管理画面またはコア出力 | WordPress コア | 上流の動作を受け入れ、必要なら課題報告または対応済み拡張点を使う | wp-admin、wp-includes、コア PHP の編集 |
| 第三者ホストまたは埋め込みコンテンツ | サービス所有者とサイト所有者 | 設定、サンドボックス、契約境界を確認 | テーマコードで内部リンクを安全に制御できると仮定する |
WordPress 公式はコアファイル変更を推奨せず、コア更新で変更は上書きされます。親テーマへの直接編集も更新で失われるため、必要なテーマ単位の変更は子テーマと版管理に置きます。管理設定には適切な権限とリクエスト検証が必要で、未承認の利用者に任意の宛先や関係属性を送信させてはいけません。
一括移行は先に棚卸しし、データベースを直接置換しない
歴史あるサイトのリンクは、ブロックマークアップ、クラシックエディター HTML、ナビゲーション、テンプレート、パターン、ウィジェット、コメント、オプション、ショートコード、プラグイン専用テーブルに存在し得ます。一つの正規表現置換では意図を判断できず、シリアライズデータ、ブロック検証、ローカライズ版を壊す可能性があります。
- WordPress、テーマ、プラグイン、PHP の版を記録し、復元確認済みのファイルとデータベースのバックアップを作成します。
- 隔離したステージング複製で、出所オブジェクト、言語、表示文言、宛先、現在の
target/rel、最終ドメイン、所有者を含むリンク一覧を出力します。 - 各変更に明示的な許可リストと理由を作ります。「外部」から自動判断せず、既定では現状を保ちます。
- 出力を所有するエディター、テーマ、プラグインのインターフェースで小分けに変更し、オブジェクト ID と変更前後の値を残します。
- ブロックを再解析し、キャッシュを消去して、各バッチでキーボード、支援技術、安全性、リダイレクトを試験します。
- 差分が許可リストを超える、ブロックが無効になる、宛先不明、復元不能のいずれかなら停止し、そのバッチを戻します。
本番データへ直接検索置換を実行せず、コメント投稿者リンクの開き方を操作する変更もせず、移行スクリプトに任意の url パラメーターを受け入れさせません。多言語サイトでは原文だけでなく、各ロケールの予告と宛先を個別確認します。
試験マトリクスと受け入れ証拠
| 試験面 | 操作 | 合格条件 |
|---|---|---|
| エディター保存 | 単一リンクを切り替え、保存し、再度開く | コントロール状態とフロント HTML が一致し、ブロック検証エラーがない |
| 同一タブ | サイト内と通常外部リンクを普通に作動し、戻るを使う | 期待したコンテキストに留まり、履歴が機能する |
| 新しいタブ | 承認済み特例リンクを作動する | 視覚的・音声的な予告が先にあり、新規コンテキストは一つだけ |
| キーボード | Tab、Shift+Tab、Enter だけを使う | 順序が論理的でフォーカスが見え、キーボードトラップがない |
| スクリーンリーダー | リンク一覧を確認し、サンプルを作動する | 目的と新規コンテキスト予告を理解でき、過剰反復がない |
| 安全性 | 最終 HTML、リダイレクト、新ページの opener を確認 | 宛先が固定 HTTPS、noopener の意図が維持され、機密クエリがない |
| レスポンシブとローカライズ | モバイルと全言語で試験 | 文言が切れず、予告が自然で、宛先が言語に対応する |
| 所有権と更新 | テーマ/プラグインを更新し CDN/ページキャッシュを消去 | 正しいコンポーネントが変更を出力し、コアや親テーマの差分がない |
オブジェクト ID、ページ URL、試験日、ブラウザー/支援技術の版、秘匿化したスクリーンショットを保存します。サインイントークン、個人の閲覧履歴、コメント投稿者の身元は記録しません。
ロールバックと停止条件
単一リンクは、エディターのスイッチを無効化するか、そのリンクの target と不要になった関係値だけを削除し、確認済みの href と文言を維持して戻します。コンポーネント単位では、前版の自作プラグイン/子テーマとデータベースバックアップを復元し、キャッシュを消して再試験します。旧コアパッチ復元をロールバックにしてはいけません。
次のいずれかで停止します。復元可能なバックアップがない、リンク所有者不明、一括差分が許可リスト外オブジェクトを含む、更新後にブロック無効、目的や権利不明、別ドメインへのリダイレクト、機密データを含むリンク、キーボード/スクリーンリーダー利用者が予告を理解できない。安全な暫定状態は同一タブまたはリンクの一時撤去であり、全サイトパッチではありません。
公開前チェックリスト
- 宛先、最終ドメイン、所有者、公開理由を確認した。
- 同一タブか新しいタブかの判断理由を記録した。
- 新しいタブのリンクに視覚的かつ支援技術向けの予告がある。
- HTML は実際のリンク意味論を使い、スクリプト疑似リンクではない。
noopener、noreferrer、external、nofollowを別々の意味で選んだ。<base target>、コア/親テーマ直編集、グローバル DOM 書き換えがない。- 追跡パラメーター、資格情報、アカウント情報、内部識別子の漏洩がない。
- キーボード、スクリーンリーダー、モバイル、多言語、キャッシュ場面を試験した。
- バックアップを検証し、変更の所有者、許可リスト、バッチ単位の復元記録がある。
- リンク障害、乗っ取り、挙動変化時の撤去手順がある。
参考資料
- WordPress：リンクコントロールと「新しいタブで開く」設定
- WordPress：ファイル編集とコア変更の回避
- WordPress：子テーマと更新に強いカスタマイズ
- MDN：リンク作成と新しいタブの設計上の判断
- MDN：`rel="noopener"`
- MDN：`rel="noreferrer"`
- W3C WAI：G201、新しいウィンドウを開く前の予告
- W3C WAI：H83、利用者の要求で開きリンク文言に説明する方法
歴史的原文アーカイブ
以下は source_export にある 2014 年の可視本文を完全保存した不活性アーカイブです。原文には行末空白も、秘匿化が必要な個人情報、資格情報、紹介、追跡値もないため、置換はありません。囲み内のグローバルな <base>、コアファイル編集、旧 Links Manager の既定値変更は危険で保守不能な歴史的証拠にすぎず、絶対に実行してはいけません。
如何让wordpress 在新窗口打开链接?
这个问题开始也一直困扰着我，后来在网上找了找发现有很多的方法，大体上有这么几种：
第一种：wordpress在新窗口打开链接
只要在header.php文件中，标签之间加入以下代码即可：
<base target=”_blank”>
这种方法简单有效，暂时还没有发现什么问题，本博客也是采用的这种方法。
第二种：wordpress在新窗口打开链接
打开wp-admin文件夹，找到admin-header.php文件打开。找到以下代码：
<a href=“<?php echo trailingslashit( get_bloginfo( ‘url’ ) ); ?>” title=“<?php esc_attr_e(‘Visit Site’) ?>” >
在最后一个尖括号”>”前插入target="_blank"。然后保存该文件。这样，在后台打开前台首页的链接就会在新窗口打开了。
添加之后的代码是：
<a href=“<?php echo trailingslashit( get_bloginfo( ‘url’ ) ); ?>” title=“<?php esc_attr_e(‘Visit Site’) ?>” target="_blank" >
第三种：留言评论在新窗口打开链接
首页打开wp-includes文件夹，找到comment-template.php文件打开。找到以下代码：
$return = “<a href=’$url’ rel=’external nofollow’ class=’url’>$author</a>”;
在标签中插入一句[target="_blank"]尖括号中的内容，然后保存。这样，访客昵称所指向的链接就会在新窗口打开了。
添加之后的代码为：
$return = “<a href=’$url’ target="_blank" rel=’external nofollow’ class=’url’>$author</a>”;
第四种：友情链接在新窗口打开链接
打开wp-admin目录下的includes文件夹，找到meta-boxes.php文件打开。找到以下代码：
<input id=“link_target_blank” type=“radio” name=“link_target” value=“_blank” <?php echo
( isset( $link->link_target ) && ($link->link_target == ‘_blank’) ? ‘checked=“checked”‘ : ”); ?> />
将以上代码修改为：
<input id=“link_target_blank” type=“radio” name=“link_target” value=“_blank” checked=“checked” />
这样就可以了。或者是你在添加友情链接时，在最下面有一些选项，可以直接选在新窗口打开链接的。