WordPress に CSS プログレスバーを追加する方法

ウェブマスターの中には、サイトにシンプルなアニメーションの進行状況バーを追加したいが、サイトのパフォーマンスに影響を与えたくない、別の WodPess プラグインをインストールしたくないという人もいます。そこで、JScipt jQuey を必要としない CSS ソリューションを選択できます。実はとても簡単です。次に、具体的な操作方法を紹介します。

完成後の外観のプレビューを以下に示します。サイズ、色、パディング幅などをお好みに合わせて調整できます。非常に高速で、サイドバーでうまく機能し、モバイルにも対応しています。

HTML:

必要な HTML コードは次のとおりです。これらは、WodPess ブロック エディターの HTML コード ブロックに入力できます。

CS: ...

必要な CSS は次のとおりです。 HTML コード ブロック、WodPess カスタマイザー、または GeneratePess などのテーマの要素/フックに入力できます。