WordPress 指定したページにジャンプさせる方法しかもフェードインで滑らかに表示

投稿日：2017年9月21日

秒後に切り替わる

【自動で切り替わる】【何秒後に切り替わる】【指定したページにジャンプさせたい】

たぶんこれを使う理由としては、

・新しくWebサイトを作り直した時に、古い方のURLにアクセスした人に自動で新しいURLへジャンプさせたい。

（旧）http://furui□□□.com　→　（新）http://atarashii○○○.jp

・トップページは現在作成中なので、別のコンテンツを表示させたい。

http://new-website◇◇◇.net　→　http://new-website◇◇◇.net/company/

などの理由かな？

簡単なので、知っているとちょっと役立つ手法です。

<meta http-equiv="refresh" content="秒後;URL=URL">

WordPressでの使い方

自動で切り替わる

WordPressの場合だと、【固定ページ】か【投稿ページ】の新規追加画面で入力するだけです。（テキストモードの方で）

「秒後」のところに半角で数字を記述すると、指定した秒数後で他のページへジャンプします。

「URL」のところは、ジャンプ先のURL（ホームページのアドレスを記述します。

ただ、自動的にジャンプしない環境も考えて、念のためジャンプさせたいURLへのリンクも貼っておいた方がいいです。

何もしなければ、ジャンプ先へ切り替わるときは「パッと」切り替わります。 😀

そこで、ちょっと手を加えることにします。

jQuery の fadeIn() を使うだけの簡単な方法ですのでぜひ試してみてください。

WordPressテーマにあらかじめjQueryが読み込まれているものとします。

以下のコードを使用したいページで使うようにします。

<script>
jQuery(document).ready(function() {
jQuery('対象となる要素').fadeIn(2000);
});
</script>

今回の例だと、

フェードイン

WordPressでは、特別カスタマイズしていなければ、

Chromeだと【F12】キーを押すと、htmlのソースが表示されますので、ソースの上部あたりに<body class=”○○○”>を見つけてください。

そこに書かれているたくさんのクラス名のうち、【.page-id-番号】を見つけて、上部の（’対象となる要素’）に記述すると、そのページ自体を指定できるようになります。

cssで、.page-id-番号{display:none;}にして全体を非表示にしておきます。

以上で完成です。

あとは、fadeIn(2000);のところの数字を変えてやることでスピードが変わってきます。

執筆者：web