HOME  /WordPress(初級)
 /WordPress Visual Icon Fontsのインストール方法と使い方
2020年03月27日

WordPress Visual Icon Fontsのインストール方法と使い方

 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

アイコン文字(例:  )を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。

このプラグインの特徴は下記になります。

1.TynyMCEのビジュアルエディタの中で使える

2.検索メニューがあり、容易にアイコンが探せる

3.アイコン名称で指定する場合も正式サイトと同一名称が使える

このドキュメントではこのプラグインのインストール方法と簡単な使い方を紹介しています。

1.WordPress Visual Icon Fontsのインストール方法と確認

ダッシュボードの『プラグイン→新規追加』の画面を開きます。
検索画面に『WP Visual Icon Fonts』を入力し、表示された下記画面から『いますぐインストール』を実行します。

『プラグインの有効化』を実行します。

以上で、プラグインのインストールが終了しました。

『投稿の新規追加』の画面を開いてください。

メニュー欄にWP Visual Fonts のアイコンが追加されます。

以上でプラグインの追加が完了しました。

1-1. Visual Iconの基本事項

私が良く使うアイコンは、下記の様なアイコンになります

アイコン エディタ上の名前 検索キーワード html記述の名前
 home home class=”fa fa-home”
 book book  class=”fa fa-book”
 file-o file  class=”fa fa-file-o”
 pencil-square-0 pencil  class=”fa fa-pencil-square-o”

※1.検索キーワードはビジュアルエディタで記述する時にビジュアルアイコンを検索する為のキーワードです。 

※2.html記述の名前とはテキストエディタで直接ビジュアルアイコンを記述する時に使う名前です。

※3.Breadcrumb NavXT(パンくず)のインストールと使い方ではこの表記方法を利用しています。

尚、どのようなアイコンを使うのか?また検索キーワードを何にするか?は、アイコンの公式サイトを参考にして決めてください。

1-2.ビジュアルエディタでVisual Icon の呼び出し方

①ビジュアルアイコンを入れたい場所にカーソルをセットしてビジュアルアイコンボタンを挿入する

②表示された下記画面のプルダウンボタンを挿入する。

③表示された検索窓に、検索キーワードを入れ、検索し、所定アイコンを選択する。

上記で選択したアイコンが画面上に入力されます。

­ ­使用上の注意点

あるアイコンを1回使うと、同一アイコンを他の箇所に挿入する事ができません。

次のバージョンでは直るかもわかりませんが・・
再度同一アイコンを使う場合はドキュメントの更新を行って下さい。

ビジュアルアイコンのメニューがリセットされてそのアイコンが再度利用できます。

 

<ドキュメントガイド>

前のテーマ:OnePress Image Elevatorのインストールと画像管理の事例

次のテーマ:Twenty twelveのメニューのカスタマイズ事例

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(初級)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

WordPressのCSSファイルやPHPファイルを編集する為には『UTF-8 の BOM なし』のテキストエディタが必要になります。本稿ではこのサイトで使っているEmEditor Free版の利用事例を紹介しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。