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プラグイン

WordPressプラグインおすすめ10選【2017年度】

  1.セキュリティー Akismet Anti-Spam 自動的にすべてのコメントをチェックし、スパムのように見えるものをフィルターします。   2.バックアップと復元 Updr …

div

divを重ねて上下中央

divとdivを重ねてしかも上下中央にしたい!     例えば、指定したサイズに背景画像を配置して、その上にメニューやタイトル、キャッチコピーなどを表示したい。 もちろん、画像ファ …

Delete kasutamufi-rudo

カスタムフィールドを削除できるプラグインはこれでOK!

サイトを作り始めの頃、作ってしまったカスタムフィールドだけど、いらなくなったものを消したいのにどうやれば消すことができるんだろうって思っていました。 カスタムフィールドが多くなって訳がわからなくなった …

cmsとは

CMSとは

  CMSとは、コンテンツマネジメントシステム(content management system)の略で、簡単にいうと、ソフトの管理画面からテキストや画像などをHTMLが詳しくない方でも、 …

レスポンシブ確認

レスポンシブの確認

  レスポンシブに対応したサイトを作って、 PC・ノート・タブレット・スマホなどの確認をしたい時におススメなのが、 『Responsively』   【Download now】か …