WordPress サイトをよりダイナミックにする: トップローディングのプログレスバー効果を追加する方法

さまざまな Web サイトが異なる効果を持っているのを見るたびに、それを削除して自分の Web サイトに追加したくなります。今日皆さんと共有したいのは、WordPress Web ページの上部にある読み込み進行状況バーの効果です。特定の Web サイトにアクセスすると、Web サイトの下部または上部に読み込みの進行状況のエフェクトが表示されることがありますが、この記事では、Web ページを開いたときにこのような進行状況バーのエフェクトを実現します。

WordPress でウェブページの読み込みプログレスバーの効果を実現するのは難しくありません. HTML5、CSS3、JS コードを使用することで効果を実現できます. 以下は誰にとっても具体的な変更方法です.

ステップ 1: CSS スタイルを変更する

次のスタイルコードをコピーして、Web サイトのテーマの style.css スタイルシートに貼り付けて保存します。

1
2
3
4
5
6
7
8
9

/*加载进度条*/
#progress {position:fixed;height: 2px;background:#2954fd;transition:opacity 500ms linear; z-index:1000000; top:0;}
#progress.done {opacity:0 }
#progress span { position:absolute; height:2px;-webkit-box-shadow:#2954fd 1px 0 6px 1px; -webkit-border-radius:100%;opacity:1;width:150px; rightright:-10px;-webkit-animation:pulse 2s ease-out 0s infinite; }
@-webkit-keyframes pulse {
30% { opacity:.6}
60% {opacity:0;}
100% { opacity:.6 }}
/*加载进度条*/

ステップ 2: PHP ファイルを変更してスタイルシートをロードする

次のコードをコピーして footer.php ファイルに保存し、スタイルの読み込みを有効にします。

1
2
3
4
5
6
7
8
9
10

<div id="progress"><span></span></div><script language="javascript"> $({property: 0}).animate({property: 100}, {duration: 3000, step: function() { varpercent = Math.round(this.property); $("#progress").css("width",percentage+"%"); if(percentage == 100) { $( "#progress").addClass("done " ) ; } } } ) ; </script>

ここで説明する必要があるのは、インターネット上には多くのプログレスバースタイルがあり、自分の好みに応じてプログレスバースタイルを選択したり、DIY したりできるということです。

上記のコードを WordPress ウェブサイトに統合して、ウェブページを開いたときに上部に進行状況バーの読み込みの効果を実現します。更新を追加しただけで効果が表示されない場合は、キャッシュがあるか、Ctrl+F5 キーを押して強制的に更新すると推定されます。