この記事では、次の概要を使用して WordPress にプログレスバーを追加する手順を説明します。
- WP のプログレスバーとは何ですか?
- コードを使用して WordPress Web サイトにプログレスバーを追加する方法?
- プラグインを使用して WordPress Web サイトにプログレスバーを追加する方法?
WordPress のプログレスバーとは何ですか?
進行状況バーは、水平バーを使用して何かの進行状況をパーセンテージで示します。これは、一目見ただけでユーザーに情報を提供できるデータのグラフィック表現です。 WordPress 投稿でプログレスバーを使用してデータや統計を表すと、Web サイトの魅力とユーザーのエンゲージメントを向上させることができます。
コードを使用して WordPress Web サイトにプログレスバーを追加する方法?
プラグインを使用せずに WordPress に進行状況バーを追加するには、ユーザーは投稿内でカスタム HTML と CSS を使用する必要があります。これを行うには、以下の手順に従います。
ステップ 1: ダッシュボードにログインする
ブラウザを開いて「 http://localhost/<Website-Name>/wp-login.php ' リンク。管理者の資格情報を入力し、「」をクリックします。 ログイン ' ボタン：
ステップ 2: 新しい投稿を作成する
「」に進みます 投稿 > 新規追加 管理者ダッシュボードのサイドメニューから「」をクリックします。
ステップ 3: カスタム HTML コードを追加する
投稿では、タイトルと追加のコンテンツを入力します。次に、「」をクリックします。 + 」アイコンをクリックし、「」を検索します。 カスタムHTML ' ブロック：
追加した HTML ブロックに、以下のコードを貼り付けます。変更 ' 幅 ”の中” <スパン> 」タグを使用して、進行状況バーの希望の割合を指定します。同様に「」も変更します。 進行テキスト ' それに応じて：
< ディビジョン クラス = 「カスタムプログレスバー」 >< スパン スタイル = 「幅：80％」 >< / スパン >
< ディビジョン クラス = 「進行テキスト」 > 80% < / ディビジョン >
< / ディビジョン >
その後、「」を押します。 公開 」ボタンをクリックして投稿を Web サイトにアップロードします。
ステップ 4: カスタム CSS を追加する
投稿が公開されたら、「」をクリックします。 投稿を見る ' ボタン：
プレビューで「」をクリックします。 カスタマイズ 」ボタンをクリックして、進行状況バーのスタイルを追加します。
画面左側にエディタメニューが表示されます。ここで、下にスクロールして「」をクリックします。 追加のCSS ' セクション：
次の CSS コードをボックスに貼り付けて、進行状況バーのスタイルを設定します。
.custom-progress-bar {背景- 色 : #1a1a1a;
身長 : 30ピクセル;
パディング: 5px;
幅 : 500ピクセル;
余白: 5px 0 ;
境界半径: 5px;
ボックスシャドウ: 0 1px 5px #000 インセット、 0 1ピクセル 0 # 444 ;
}
.custom-progress-bar スパン {
背景- 色 : #0000FF;
表示: インラインブロック;
フロート: 左;
身長 : 100 %;
境界半径: 3px;
ボックスシャドウ: 0 1ピクセル 0 rgba ( 255 、 255 、 255 、.5 ） 挿入図。
遷移： 幅 .4秒のイーズインアウト。
}
.進行- 文章 {
文章- 整列する ： 右;
色 ： 白;
マージン: 0px;
}
ステップ 5: 投稿を公開する
最後に「」をクリックします 公開 」を投稿して変更を保存します。
ページをリロードすると、投稿に進行状況バーが表示されることがわかります。
プラグインを使用して WordPress Web サイトにプログレスバーを追加する方法?
このデモでは、「Ultimate Blocks」プラグインを使用して、WordPress Web サイトに進行状況バーを追加します。同じことを行うには、以下の手順に従います。
ステップ 1: 新しいプラグインを追加する
ユーザーがダッシュボードにログインしたら、「 プラグイン > 新規追加 サイドメニューバーの「」オプション:
ステップ 2: Ultimate Blocks プラグインをインストールする
究極のブロックを検索し、「」を押します。 入力 ' 鍵。次に、下にある「」をクリックします。 今すぐインストール ' ボタン：
ステップ 3: Ultimate Blocks をアクティブ化する
プラグインがインストールされたら、「」をクリックします。 活性化 」ボタンをクリックして、WordPress でプログレスバーを使用します。
ステップ 4: 新しい投稿を作成する
WordPress 投稿に進行状況バーを追加するには、「 投稿 > 新規追加 サイドメニューの「」オプション:
ステップ 5: プログレスバーブロックを追加する
投稿にタイトルと内容を入力します。次に「」を押します。 + 」アイコンをクリックして新しいブロックを追加します。メニューで「」を検索します。 プログレスバー 」をクリックしてブロックを選択します。
ステップ 6: バーのパーセンテージを設定する
プログレスバーのパーセンテージを設定するには、青色のスライダーを使用するか、下のハイライトボックスにパーセンテージを入力します。
ステップ 7: 投稿を公開する
投稿が完了したら、「」をクリックします。 公開 」ボタンをクリックして投稿を Web サイトにアップロードします。
ステップ 8: 投稿を表示する
投稿を公開した後、「投稿を表示」ボタンをクリックして、Web サイト上で投稿のプレビューを表示します。
以下の出力では、進行状況バーが投稿に追加されていることがわかります。
WordPress にプログレスバーを追加する方法は以上です。
結論
WordPress Web サイトに進行状況バーを追加するには、「 プラグイン > 新規追加 サイドメニューから「」オプションを選択します。 「」を検索してインストールします。 究極のブロック 」プラグイン。インストール後、アクティベートしてください。次に、「」に進みます。 投稿 > 新規追加 」と投稿のタイトルと内容を入力します。次に、「」をクリックします。 + 」アイコンをクリックして「」を検索します プログレスバー ' ブロック。スライダーを使用するか数値を入力して、進行状況のパーセンテージを設定します。この記事では、プラグインを使用した場合と使用しない場合の WordPress にプログレスバーを追加する手順を説明しました。