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

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

関連記事

レスポンシブ確認

レスポンシブの確認

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

ワードプレス

WordPress テーマTwenty Sixteenでメンバー紹介や選手一覧などを作ってみた③

9.メンバー登録 上図のような画面になって、投稿ができるようになります。 では、さっそく1人目を登録します。 ①「ここにタイトルを入力」のところに「日本 太郎」としてみます。 ②アイキャッチ画像のとこ …

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

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

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

記事一覧表示

固定ページにカスタム投稿記事一覧表示

    固定ページにアイキャッチ画像付きの記事一覧を表示させたい   そこで、やりたかった主なことは以下の部分です。   ・いろいろプラグインなどもあるが、プラ …