【簡単】WordPressで『進捗ゲージ(プログレスバー)』を使う方法

WordPressで進捗ゲージ(プログレスバー)を使うための簡単な方法を解説します。HTMLコード書いて実装する方法やWordPressプラグインを使って実装する方法の2種類があります。

0% （0%）

30% （30%）

100% （100%）

待機中 （未確定）

WordPressの固定ページや投稿記事で下記のHTMLコードをコピペすれば、進捗ゲージが表示されます。
ビジュアルモードではHTMLタグが反映されませんので、必ずテキストモードで入力して下さい。

HTMLでプログレスバーを実装するコード

<p><progress value="0" max="100">0%</progress> （0%）</p>
<p><progress value="30" max="100">30%</progress> （30%）</p>
<p><progress value="100" max="100">100%</progress> （100%）</p>
<p><progress>待機中</progress> （未確定）</p>

WordPressで作られたサイトの固定ページや投稿記事内で進捗ゲージを使いたいときは、WP Progress Bar プラグインを使うのが簡単で便利です。

• 【参考】 WP Progress Bar — WordPress プラグイン
• 【参考】 Progress Bar Plugin For WordPress(デモ)

管理画面から、WP Progress Bar をインストールすれば、ショートコードで簡単に進捗ゲージを実装できます。

上記以外にも、進捗ゲージを作るためには様々な方法があります。参考となるリンクも掲載しますので、あなたにあったプログレスバーの実装方法を選んで下さい。

• 【参考】 Progress Bar・・・jQueryのプラグイン。良さそうです。
• 【参考】 jQuery Plugin - 進捗の割合（％）をプログレスバーで表示 - ProgressBar
• 【参考】 jQuery UI： Progressbarウィジェットでプログレスバーを作成するには？ - Build Insider
• 【参考】 ほんっとにはじめてのHTML5とCSS3：[57] プログレスバー（進捗状況）を出そう <progress>
• 【参考】 HTML5 進捗状況を表示するプログレスバーを使ってみる | ScrapEngineer
• 【参考】 【JavaScript】ライブラリを使わずにプログレスバーを実装する | Black Everyday Company
• 【参考】 CSSとhtmlと画像1枚で簡単なプログレスバーを作る - Webのプルタブ
• 【参考】 ProgressBar.js - Progress bars with JavaScript
• 【参考】 jQuery-svg-progress | Javascript Jade SASS jQuery Modx AJAX html
• 【参考】 PACE — Automatic page load progress bars