WordPressのためのより良いフォント素晴らしいフォントを使用する方法

人は自然と視覚的な外観に惹かれます。サイトのWeb WordPress の、あなたが共有する書かれたコンテンツに惹きつけられるのと同じくらい。実際、によると、 ジェフブーリャス 」、画像付きの記事は、画像なしの記事よりも94％多くのビューを持っています。

私に言わせれば、それはページビューの大幅な増加です。

そして、まさにその理由は何ですか？

コンテンツ全体に、記事に関連する高品質の画像をいくつか追加するだけです。

しかし、あなたの写真はどうですかサイトのWeb スクリーンショットや写真を超えるもの？注目を集めるだけでなく、役に立つ機能を提供する画像についてはどうでしょうか?

はい、私はアイコンについて話している。ソーシャルメディアでの共有を促進したり、事業主の連絡先ページを説明したり、いくつかの事例を挙げたりするためにWebサイトにある小さな画像を知っています。使用の。

このサイトから着想を得たので、訪問者ウェブサイトの画像に惹かれるだけでなく、それらとやり取りする傾向があるため、人々はそれらをウェブサイトに追加し始めました.

しかし、テクノロジーが進歩するにつれて、いつものように、従来の画像アイコンはWebサイトの画像ソリューションとして衰退し始めています。これは、ページが非常に重くなり、したがって遅くなるためですが、とりわけ、このソリューションは必ずしもモバイルに適しているとは限りませんでした。

しかし、解決策があります。アイコンフォントです。

今日は、アイコンフォントとは何か、そしてWordPressサイトでそれらを使用する利点について説明します。さらに、人気のあるプラグインを使用して、WordPressサイトにアイコンフォントを追加する方法を紹介します。 より良いフォント恐ろしいです '。

それでは、始めましょう。

アイコンフォントとは何ですか？なぜそれらを使用する必要がありますか？

アイコンフォントはまさに彼らが言うことです：フォントは完全にアイコンに組み込まれています。実際には、アイコンのフォントまたは「 メイクアイコン 「従来のフォントやテキストが関連付けられている文字や数字ではなく、文字や記号のみを表示するフォントとして説明できます。

アイコンフォントは、サイトで一般的に使用されるシンボルを表示するために使用されます。たとえば、ソーシャルメディアボタン、カート、ダウンロードボタン、ナビゲーションボタンは、サイトに小さなインタラクティブな画像を表示するアイコンの例です。

なぜアイコンフォントを使用するのですか？

画像アイコンはこれまで多くのサイト所有者にとってうまく機能してきました。しかし、ナビゲーションルール、使いやすさ、デザインが進化するにつれて、アイコンフォントはインタラクティブな画像を表示するための最適なソリューションになりました。ウェブサイト.

アイコンフォントが最良の選択であるいくつかの説得力のある理由を見てみましょう。

品質を損なうことなく簡単に拡張可能
色と色合いの点でカスタマイズ可能
100％応答
CSSイメージスプライトのように機能しますが、テキストのように動作します
使いやすい
推奨ブラウザ
不透明度、回転などをカスタマイズします
サイズより小さいファイル
あなたのウェブサイトの速度やパフォーマンスを犠牲にしないでください

ご覧のとおり、画像アイコンではなくアイコンフォントをウェブサイトで使用する理由はいくつかあります。

プラグインを使用してサイトにフォントアイコンをインストールする

Better Font Awesome は、 WordPressのプラグイン Font Awesome の最新バージョンを WordPress プロジェクトに自動的に統合できるフリーウェア。さらに、CSS、ショートコード、TinyMCE ショートコードジェネレーターが付属しています。

このプラグインには、サイト所有者にとってさまざまな便利な機能があります。

最新バージョンの定期的な更新
ショートコードを変更せずにFont Awesomeのバージョンを切り替える機能
ショートコードを含む他の人気のあるフォントプラグインのサポート
jsDelivr CDNが発行

1ステップ：より良いフォントのインストールとアクティブ化

開始するには、他のプラグインと同じように、WordPressダッシュボードから「BetterFontAwesome」プラグインをインストールしてアクティブ化します。

まず、「 プラグイン>新規追加 そして、「 より良いフォント恐ろしいです '。

次に、「 今すぐインストール »そしてクリック« 活性化します '。

有効化されると、プラグインはリンクを追加しますより良いフォント恐ろしいですWordPressダッシュボードの[設定]メニューの下。

ステップ2：プラグイン設定の構成

プラグインを設定するには« より良いフォント恐ろしいです "、メニュー項目をクリックして開始" より良いフォント恐ろしいです [設定]の下。これを行うと、次のような画面が表示されます。

ここでは、次の操作を行うことができます。

：使用したい「BetterFontAwesome」のバージョンを選択してください。
縮小されたCSSを使用する：CSSの縮小バージョンを使用する場合は、このボックスをオンにします。
既存の印刷フォントを削除します：このボックスを選択して、他のプラグインやテーマによって追加されたコード化されたスニペットとショートコードを削除してみてください。
管理者レビューを非表示：APIおよびCDNエラーが発生したときに表示されるデフォルトの管理者警告を非表示にします。

Better Font Awesomeオプションの最小量に加えて、サイトにアイコンを追加する方法を説明する小さな「使用法」セクションがあります。

ステップ3：ウェブサイトにアイコンを追加する

「BetterFontAwesome」を使用して、ショートコード、HTML、またはTinyMCEを使用して、Webサイトにアイコンを追加する簡単な方法はXNUMXつあります。

＃1。ショートコードを使用してアイコンを追加する

ショートコードを使用してウェブサイトにアイコンを追加するには、まず「 恐ろしいフォント 使用可能なアイコンの完全なリストを表示するには。

ここで、必要なアイコンを検索できます。たとえば、「メール」アイコンが必要な場合は、そのキーワードを検索し、使用するアイコンをクリックして選択します。

追加するアイコンをクリックすると、さまざまなサイズのアイコンの画像と小さなコードブロックを示す画面が表示されます。

コードのブロックをコピーして、[テキストエディター]タブを使用してWebサイトの任意の場所に貼り付けるだけです。これは、エディターがWebサイトでどのように表示されるかを示しています。

結局のところ、ここにあるのは訪問者彼らがいつあなたのサイトにアクセスしたかがわかります:

＃2。HTMLコードを使用してアイコンを追加する

セクションで見たように「使用 HTMLコードを使用してWebサイトにアイコンを挿入するオプションがあります。ただし、プラグイン開発者は、HTMLを使用するにはバージョン固有のプレフィックスが必要であることを考慮に入れています。

そのため、代わりにショートコードを使用することをお勧めします。ただし、HTMLコードを使用する場合、FontAwesomeには ここで有用な情報.

＃3。TinyMCEを使用してアイコンを追加する

これはおそらく、サイトにアイコンを追加する最も簡単な方法です。「ビジュアルエディタ」モードでは、挿入アイコンをクリックするだけです。そこから、利用可能なアイコンオプションをスクロールするか、検索機能を使用して結果を絞り込みます。

必要なアイコンが見つかったら、それをクリックするだけです。ショートコードジェネレーターは、必要な情報を投稿またはページに自動的に入力します。

サイトのアイコンをカスタマイズする方法を知りたい場合は、「 恐ろしいフォント '。