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

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

進捗ゲージの表示イメージ

0% (0%)

30% (30%)

100% (100%)

待機中 (未確定)

HTMLコード

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 をインストールすれば、ショートコードで簡単に進捗ゲージを実装できます。

コメントを入力:
X P A W A