WordPressテーマにアイコンフォントを簡単に追加する方法

WordPressサイトにアイコンフォントを追加しますか?最近、読者の1人が、WordPressテーマにアイコンフォントを追加する最も簡単な方法を尋ねました?


アイコンフォントを使用すると、Webサイトの速度を低下させることなく、ベクター(サイズ変更可能)アイコンを追加できます。 Webフォントのように読み込まれ、CSSを使用してスタイルを設定できます.

この記事では、WordPressテーマにアイコンフォントを簡単に追加する方法について、順を追って説明します.

WordPressテーマでアイコンフォントを使用する

アイコンフォントとは何か、なぜ使用する必要があるのか?

アイコンフォントには、文字や数字の代わりに記号や絵文字が含まれています。これらの絵文字は、Webサイトのコンテンツに簡単に追加でき、CSSを使用してサイズ変更できます。画像ベースのアイコンと比較して、フォントアイコンの方がはるかに高速で、WordPress Webサイト全体の速度に役立ちます.

アイコンフォントのプレビュー

アイコンフォントを使用して、一般的に使用されるアイコンを表示できます。たとえば、ショッピングカート、ダウンロードボタン、機能ボックス、プレゼントコンテスト、さらにはWordPressのナビゲーションメニューでも使用できます。.

何百もの美しいアイコンを持つ無料でオープンソースのアイコンフォントがいくつかあります.

実際、WordPressの各インストールには、無料のdashiconsアイコンフォントセットが付属しています。これらのアイコンは、WordPress管理メニューおよびWordPress管理領域内の他の領域で使用されます.

他のいくつかの一般的なアイコンフォントは次のとおりです。

  • 素晴らしいフォント
  • ジェネリコン
  • IcoMoon
  • 線形アイコン
  • Googleのマテリアルアイコン
  • 名詞プロジェクト

このチュートリアルでは、Font Awesomeを使用します。それは利用可能な最も人気のある無料でオープンソースのアイコンフォントです。私たちは、WPBeginnerのWebサイトでFontAwesomeを使用しています。また、OptinMonster、WPForms、RafflePressなどのWordPressプラグインも使用しています。.

このガイドでは、WordPressにアイコンフォントを追加する3つの方法について説明します。あなたに最適なソリューションを選択できます.

プラグインを使用してWordPressにアイコンフォントを追加する

投稿やページにいくつかのアイコンを追加しようとしているだけの初心者レベルのユーザーの場合、この方法が適しています。テーマファイルを変更する必要はなく、ウェブサイトのあらゆる場所でアイコンフォントを使用できます。.

まず、WordPress用のFont Awesomeプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

プラグインを有効にすると、テーマのFont Awesomeサポートが有効になります。 WordPressの投稿やページを編集して、次のようなアイコンショートコードを使用できます。

[アイコン名=”ロケット”]

このショートコードを他のテキストと一緒に、または専用のショートコードブロックで単独で使用できます.

WordPressでアイコンフォントショートコードを追加する

追加したら、投稿またはページをプレビューして、アイコンが実際のサイトでどのように表示されるかを確認できます。これがテストサイトでの様子です.

アイコンプレビュー

段落ブロック内にフォントアイコンショートコードを単独で追加することもできます。ブロック設定を使用して、アイコンのサイズを大きくできます。.

アイコンのサイズを大きくする

テキストサイズを大きくすると、テキストエディタ内でこれが奇妙に見える場合があります。これは、ショートコードがブロックエディター内のアイコンフォントに自動的に変更されないためです。.

実際のアイコンサイズがどのように見えるかを確認するには、投稿またはページのプレビューボタンをクリックする必要があります.

拡大されたアイコンフォント

列内でアイコンショートコードを使用して、次のような機能ボックスを作成することもできます。

機能ボックスでのアイコンフォントの使用

2. WordPressページビルダーでアイコンフォントを使用する

最も人気のあるWordPressページビルダープラグインには、アイコンフォントのサポートが組み込まれています。これにより、ランディングページやWebサイトの他の領域でアイコンフォントを簡単に使用できます.

ビーバービルダー

Beaver Builderは、市場で最高のWordPressページビルダープラグインです。コードを記述せずに、WordPressでカスタムページレイアウトを簡単に作成できます.

Beaver Builderには美しいアイコンが付属しており、投稿やページにドラッグアンドドロップできるモジュールをすぐに使用できます.

Beaver Builderアイコンモジュール

アイコングループを作成し、単一のアイコンを追加して、適切な位置にある行と列に移動できます。 CSSを記述せずに、独自の色、背景、間隔、マージンを選択することもできます.

Beaver Builderでアイコンフォントを編集する

Beaver BuilderのThemer製品を使用して、コードを記述せずに完全にカスタムのWordPressテーマを作成することもできます.

Elementor Pro

Elementorは、人気のある別のWordPressページビルダープラグインです。また、Icon要素を含む、アイコンフォントを使用できるいくつかの要素が付属しています。.

Elementorアイコン

アイコンをどこにでもドラッグアンドドロップして、行、列、テーブルで使用して美しいページを作成できます.

DiviやVisual Composerなどの他の人気のあるページビルダーもアイコンフォントを完全にサポートしています。.

3.コードを使用してWordPressにアイコンフォントを手動で追加する

前述したように、アイコンフォントは単なるフォントであり、カスタムフォントを追加するようにサイトに追加できます。.

Font Awesomeなどの一部のアイコンフォントは、CDNサーバーからWeb全体で利用でき、WordPressテーマから直接リンクできます。.

フォントディレクトリ全体をWordPressテーマのフォルダーにアップロードし、それらのフォントをスタイルシートで使用することもできます.

このチュートリアルではFont Awesomeを使用しているため、両方の方法を使用してフォントを追加する方法を示します。.

方法1:

この手動の方法は非常に簡単です.

まず、Font AwesomeのWebサイトにアクセスし、電子メールアドレスを入力して、埋め込みコードを取得する必要があります.

Font Awesome埋め込みコードを取得する

埋め込みコードを含むFont Awesomeからのメールを受信トレイで確認してください。この埋め込みコードをコピーして、WordPressテーマのheader.phpファイルのタグの直前に貼り付けます.

埋め込みコードは、Font AwesomeライブラリをCDNサーバーから直接フェッチする1行になります。次のようになります。

この方法は最も簡単ですが、他のプラグインとの競合を引き起こす可能性があります.

より良いアプローチは、組み込みのエンキューメカニズムを使用してWordPressにJavaScriptを適切にロードすることです.

テーマのヘッダーテンプレートからスタイルシートにリンクする代わりに、テーマのfunctions.phpファイルまたはサイト固有のプラグインに次のコードを追加できます.

function wpb_load_fa(){

wp_enqueue_script( ‘wpb-fa’、 ‘https://use.fontawesome.com/123456abc.js’、array()、 ‘1.0.0’、true);

}

add_action( ‘wp_enqueue_scripts’、 ‘wpb_load_fa’);

方法2:

2番目の方法は最も簡単ではありませんが、独自のWebサイトでFont Awesomeアイコンフォントをホストできます。.

まず、フォントパッケージをコンピューターにダウンロードするには、Font Awesome Webサイトにアクセスする必要があります。.

コンピューターにアイコンフォントをダウンロードする

アイコンのフォントをダウンロードしてパッケージを解凍するだけです.

次に、FTPクライアントを使用してWordPressホスティングに接続し、WordPressテーマのディレクトリに移動する必要があります.

そこで新しいフォルダを作成し、それにfontsという名前を付ける必要があります。次に、アイコンのfontsフォルダーのコンテンツを、Webホスティングサーバーのfontsディレクトリにアップロードする必要があります。.

WordPressテーマへのアイコンフォントのアップロード

これで、アイコンフォントをWordPressテーマに読み込む準備ができました。このコードをテーマのfunctions.phpファイルまたはサイト固有のプラグインに追加するだけです.

function wpb_load_fa(){

wp_enqueue_style( ‘wpb-fa’、get_stylesheet_directory_uri()。 ‘/fonts/css/font-awesome.min.css’);

}

add_action( ‘wp_enqueue_scripts’、 ‘wpb_load_fa’);

Word AwesomeをWordPressテーマに正常にロードしました.

次に、WordPressのテーマ、投稿、またはページに実際のアイコンを追加します。.

WordPressでアイコンフォントを手動で表示する

Font AwesomeのWebサイトにアクセスして、使用可能なアイコンの完全なリストを確認してください。使用したいアイコンをクリックすると、アイコン名が表示されます.

アイコン名
アイコン名をコピーして、WordPressでこのように使用します.

このアイコンは、テーマのスタイルシートで次のようにスタイル設定できます。

.fa-arrow-alt-circle-up {
font-size:50px;
色:#FF6600;
}

異なるアイコンを組み合わせて、一度にスタイルを設定することもできます。たとえば、横にアイコンが付いたリンクのリストを表示するとします。特定のクラスを持つ要素の下にそれらをラップすることができます.

ホーム
図書館
用途
設定

これで、テーマのスタイルシートで次のようにスタイルを設定できます。

.icons-group-item i {
色:#333;
font-size:50px;
}
.icons-group-item i:hover {
色:#FF6600
}

この記事が、WordPressテーマにアイコンフォントを簡単に追加する方法の学習に役立つことを願っています。 WordPressのナビゲーションメニューに画像アイコンを追加する方法に関するチュートリアルもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map