<< 一覧へ戻る

投稿記事のタイトルクリックで、別窓でリダイレクトさせる考察

WordPress の投稿で、実は外部のページにリンクさせたい「だけ」ってとき、ありますよね。
新着とかにタイトルが出てて、クリックしたら直接外部リンクへ新規ウインドウ開いて跳ぶって風にね。

よく使われてる【What’s NEW】というプラグイン、投稿記事のタイトルを動的にトップページ等へ表示してくれるやつです。
このタイトルは投稿記事へのリンクなので、タイトルクリックでは外部ページへは直接行けず、一度記事を表示して、そこのテキストリンクから跳ばします。

リンクのためだけに記事ページ開くのってひと手間多いでしょ?
そこで【What’s NEW】が出してるタイトルクリックで即ジャンプさせたい、& 新規ウインドウで!というわけです。

いくつか試したんだけど、結論から言う Plug-in に頼るしかなさげ。
もっと簡単にサクっとできると思ってたんだけど、甘かった。
ではやり方を見てみよう。


その1:meta タグを使う

meta http-equiv=”refresh” content=”0; URL=http://〇〇〇.com”

※ ↑ 発動しちゃうんので < > を省略しています。

このタグ、WordPress の投稿記事に直接書いても実行されます。
(本来は /head の前に書くんだけどね。)
記述した URL に 0秒 でリフレッシュします。ってスクリプトです。
これだと同じサイト内に遷移する分には有効だけど、target=”_blank” ができないので、他サイトに跳ばすと自分のサイトから離脱しちゃうのが欠点。よって、他サイトへのリダイレクトは meta タグは向いてない。


その2:Javascript を使う

location.href = ‘http://〇〇〇.com’;

※ ↑ 発動しちゃうんので script で挟むのを省略しています。

まどろっこしいタイマーも無し!即、跳びます!跳びます!w
これも meta タグ同様、location.href には _blank 属性は付きません。従って同一サイト内では有効だけど、外部へは離脱扱いとなります。


その3:Javascript を使う 2

window.open(‘http://〇〇〇.com’);

※ ↑ 発動しちゃうんので script で挟むのを省略しています。

これだと target=”_blank” 扱いで外部へ跳ばせます!やったー!!これでいいじゃんねっ!
と思ったら、ブラウザー側でポップアップブロックがかかりやがる!つまり、ブラウザー側でポップアップを許可しない限り、見た目では何も起こらない。つまりダメだよね、悔しい~!


その4:Javascript を使う 3

setTimeout(() => window.open(‘http://〇〇〇.com’), 0);

※ ↑ 発動しちゃうんので script で挟むのを省略しています。

これでどうよ?!ダミーで タイマー=0 を付けてみたが、やはりポップアップブロックがかかります。
まぁ、これの回避策が簡単にできちゃうと、スパムの嵐になっちゃうのでね、無限エロサイトポップアップとかできちゃうわけで。← 昔あったなーw

ユーザーがポップアップを許可しない限り、最近のモダンブラウザではリダイレクトで新規ウインドウは厳しいです。
window.open は、ボタンクリックでは正常に動作します。つまり、アクションがあればポップアップ可能で、リダイレクトみたいに裏で js がやろうとするのは NG ってことらしい。


その5:プラグインと js で 別窓で外部ページを開く。完成!

というわけでですね、とてもに悔しいのだけど、【External Links】っていう定番なプラグインと、記事ページにリダイレクトの js を仕込んで完成させます。
function php でごにょごにょしてもいいんだけど、target=”_blank” に nofollow や noreferrer 属性を一括追加できたり、例外 URL を簡単に追加できたりする優れものなので、諦めてインストール。設定も簡単なので初心者にもおすすめです。

◆やり方:

1.【External Links】設定で外部リンクは一括新規ウインドウで立ち上げるようにしておき、例外で、指定したい内部記事ブログのURLを外部扱いにしておく。

2. 投稿記事には上記「その2:」 location.href = ‘http://〇〇〇.com’; (※発動しちゃうんので script で挟むのを省略しています。) を仕込んでおく。※window.open ではないのでポップアップブロックはかからない!

つまり、What’s New のタイトル (お知らせ記事のURL) → これを例外扱いで外部リンクに → 外部リンクなので新規ウインドウで立ち上がる → 記事に仕込んだ js でリンク先が表示される!

これでやっと What’s New が出してるタイトルをクリックすると、見かけ上は別窓でリンク先が開きます♪ わーい!

はぁ、またしてもこんなことに数時間費やしてしまった。
ま、こうやってスキル付けてくしかないのだけれど、最初からプラグインに走るのがどうしても悔しいので仕方ないね。
やれやれだぜ、疲れましたー

«