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

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

関連記事

google アナリティクス

GoogleアナリティクスをWordPressに導入設置

  自分のブログやサイトを持っている方にとって必須ともいえるアクセス解析ツールです。このツールを利用することによって、ブログやサイトの細かなアクセス状況によって分析することができるようになり …

画像のトリミング

object-fitで画像のトリミング

  PCとスマホで画像の見え方を変えるのに役立つのが、 cssの「object-fit」プロパティです。 背景画像として扱うcssの「background-size」というのもありますが、 …

ヘッダー画像変える

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

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

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …

オンマウス

マウスオーバーでリンク画像に変化をつける

  自分がしたことを忘れないように記事にしました。 やりたかったのは、マウスオーバー・オンマウスでリンク画像がだんだん大きくなり、上にのせていたマスクがなくなって画像がクリアになること。 い …