wordpress

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

投稿日:

秒後に切り替わる

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

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

・新しく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">

<meta>タグを使用することで、自動的に指定した秒数後に特定のページにジャンプさせることができます。

 

WordPressでの使い方

自動で切り替わる

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

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

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

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

 

ジャンプ先を滑らかに表示させる

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

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

jQuery の fadeInを使って実行します。

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

 

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

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

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

 

今回の例だと、

フェードイン

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

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

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

CSSの記述

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

 

以上で完成です。

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

 

 

-wordpress
-,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

真っ白

WordPressで画面が真っ白になってしまった時の対処方法

    突然画面が真っ白になって、何度試してもページが表示されなくて気分がブルーになってしまった時に試した方法   今回は、テーマの中にあるfunction.phpを編集 …

オンマウス以外

オンマウス(マウスオーバー)以外を透かす

オンマウスで透過したり、色が変わったりするのは一般的にも良くあるパターンだと思います。 でも今回は オンマウス以外に変化をつけていきたいと思います。 個人的には、少なめのメニューやカテゴリーリストされ …

カスタムフィールド カテゴリー

Advanced Custom Fieldsをカテゴリに使用したときの画像の取得出力

  いろいろ試してみた結果、やっとできたので覚書として記事にしました。   カスタムフィールドのカテゴリー画像作成   Advanced Custom Fieldsのプラ …

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

ヘッダー画像変える

ヘッダー画像やスライダーをページ毎に変える方法

  WordPressで作成したページで、ヘッダー画像やスライドショーをページごとに変えたい! 今回やってみたことは、条件分岐でヘッダーの画像部分を振り分けるといった方法です。 プラグインな …