機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

WordPressの読み込み時にロード中エフェクトを実装する

プログラミング

WordPressの読み込み時にロード中なのがわかるように、グルグル回転するようなエフェクトを実装したいなーと思いました。
プラグインで実装するのが簡単そうです。

Page Loading Effects

プログラミング

Page Loading Effectsというプラグインを使うと簡単に実装できます。
Preloaderのほうが人気でこっちにしようと思ってたのですが、これは動作しなかったです。

他の方法

プログラミング

本当はhttp://freefrontend.com/css-loaders/を設置したかったのですが、できなかったので諦めました。


<!-- 読み込みスピナー --> <script type="text/javascript"> $("#showspin").on("click", function(){ $("somediv .spinner").show(); }); </script> <style media="screen"> .spinner { background: url('/wp-admin/images/wpspin_light.gif') no-repeat; background-size: 16px 16px; display: none; float: right; opacity: .7; filter: alpha(opacity=70); width: 16px; height: 16px; margin: 5px 5px 0; } </style> <div class="spinner"></div>

とか

<!-- 読み込みスピナー -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script type="text/javascript">

//paste this code under the head tag or in a separate js file.
    // Wait for window load
    $(window).load(function() {
        // Animate loader off screen
        $(".se-pre-con").fadeOut("slow");;
    });
</script>

<style media="screen">
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}
</style>

<div class="se-pre-con"></div>

で実装できると思ってたんですが、できませんでした。

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu