ページから、ユーザーのクリックアクションなしで別ページに自動的に遷移させます。
今回はブラウザ側で実行されるjavascriptを使用して、簡易的にリダイレクトを設定する方法をお伝えします。
別ページへ自動的に遷移する動きは、下のボタンをクリックして試してみてください。
指定した時間経過後に自動遷移させる
やり方はとても簡単！固定ページ（または投稿ページ）に、WordPress基本ブロックの「カスタムHTML」でたった1行記述するだけです。
【カスタムHTML】
<body onLoad=setTimeout("location.href='#'",3000)></body>
あとは、＃のURLと3000の数字を変更します。
- # → 遷移先のURLを入力してください。（例：https://example.co.jp/）
- 3000 → 3秒設定です。必要に応じて変更してください。（例：5000→5秒）
Point
案内文を追加したい場合は「段落」ブロックで記載してください。
例：ここから先は〇〇のHPへ遷移します。約3秒後に自動的にジャンプします。
使用例
- ユーザーが会員登録ボタンを押す
- 別サイトに切り替わるという案内ページ
（ここにカスタムHTMLを記述）
- 自動で会員登録ページが表示される
その他の遷移方法について
サイトURLの変更時などは、サーバー側で「302リダイレクト」や「301リダイレクト」を設定します。
どちらも新しいURLに自動的に移動し、新しいコンテンツを表示しますが、違いは以下の通りです。
| 302リダイレクト | コンテンツを一時的に別の場所に移したい時などに使用します。 例えば、ウェブサイトのメンテナンス中に一時的に別のページにユーザーをリダイレクトさせたい場合などです。 一時的なリダイレクトを意味するため、検索エンジンは元のURLを保持します。 |
| 301リダイレクト | 恒久的にウェブサイトを別のURLに移したい時などに使用します。 以前のドメインから新しいドメインにリダイレクトします。 既存のリンクやブックマークが失われずに新しいドメインにアクセスできるようになります。 |
今回ご紹介したjavascriptのリダイレクト方法は、上記と違いブラウザ側で設定するもので、ページが読み込まれた後、一定の時間が経過した後に別のページにリダイレクトさせたい場合などに使用されます。
投稿者プロフィール
-
元銀行員。退行後手に職をつけたい気持ちから元々興味があったWeb制作の道へ。
訓練校でHTMLやCSS、デザインについて半年間学び、その後デザイン会社で2年程度の実務経験を積む。
日々の業務を通して、お客様自身で更新・運用できる生きたサイトを作成できるWordPressの需要を感じ、2024年7月より株式会社ウェブロードに入社。
技術やデザイン、知識を磨きながらお客様視点での制作・運用を行っている。
最新の投稿
WordPress講座2024年7月3日レスポンシブデザインを意識したカラムブロックの使い方- WordPress講座2024年6月18日カスタムフィールドにプラグイン【WP Imp Exp】を使ってインポートする方法
- WordPress講座2024年4月5日カスタムフィールドの簡単な作り方をご紹介！
- WordPressのプラグイン2024年3月18日カスタム投稿でウェブサイトを簡単カスタマイズ
お問合せフォームはこちら
弊社サービスをご検討いただきありがとうございます。
相見積もりや社内検討用など、概算お見積りのPDFが必要な場合はこちらでご入力・出力できます。
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。
