ページから、ユーザーのクリックアクションなしで別ページに自動的に遷移させます。
今回はブラウザ側で実行される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のリダイレクト方法は、上記と違いブラウザ側で設定するもので、ページが読み込まれた後、一定の時間が経過した後に別のページにリダイレクトさせたい場合などに使用されます。
投稿者プロフィール
-
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。
最新の投稿
お問合せフォームはこちら
(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。