ただいまテーマ変更後の改装中です。少々見づらかったらすみません

導入しようとして調べたら日本語のページが出てこなかったので作ってみました。 見出しやリストのデザインを見ていると、ちょっと凝ってておしゃれなものの一部は 【Font Awesome】というなにかが必要だと出てきます。 私がオンラインで何か書き始めたのは、違うキャリア同士で絵文字のやりとりができない時代なのでその頃の名残で、今でも記号と顔文字以外は避けていたのですが どうやらこのFont Awesomeというのはその当時の絵文字のような、機種依存の類ではなくサイト自体に設定するものでありサイトの持ち主がちゃんと設定していれば、文字化けすることはないようで。 それなら怖がらずに設定してみようかな…と思い調べたら、前述したようにこのテーマ向けの説明がなかったので 『こんな作業をした』という備忘録も兼ねて、プラグインを使わずにOceanWPで設定した手順を書いておくことにしました。 プラグインを使うととても楽だというのは知っていますが…あまりプラグインを入れすぎるとサイトの表示が遅くなるからできるだけ避けたいので テーマのCSSに書き込む方法でやっていきます。 OceanWPにFontAwesomeを導入する 3の動作確認がちょっと不安ですが、まずは設定をしていきます。 作業の流れFontAwesomeに会員登録するOceanWPのheader.phpに書き込む動作確認 会員登録自体は、解説されているサイトが多いので難しくありませんでした。設定の手順含め、私が参考にしたのはこちらです↓ Font Awesome5の使い方を徹底解説！2019年版｜サウンドテック・ラボ Font Awesomeを設定する手順だけでなく、会員登録のことも別記事で説明しておられてとても分かりやすかったです。 1. Font Awesomeに会員登録する 上のサイトに載っていた通りの手順で登録します。やったことは全く同じなので、ここでは詳しく書かずFont AwesomeのURLのみ載せますね。 Font Awesome 無料と有料、2種類のプランがありますが私は無料を選びました。 2.OceanWPのheader.phpに書き込む CSSの設定はテーマエディターではなく外観のコードに書くのがOceanWPですが、Font Awesomeはheader.phpでも反映されておりました。 OceanWPは子テーマでカスタマイズしておりますが、私が使っている子テーマにはheader.phpが無いので親テーマに書き加えます。 子テーマに header.phpがあるのでしたら、テーマのアップデート時に消える心配が無いよう子テーマ側に書くのがよいかと。 3.動作確認 見出しなどに使うための導入ですが、そもそも表示されるのかを確認するため普通にアイコンを表示させてみます。 Icons | Font Awesome にアクセスして、使いたいアイコンを探します。 無料版だと、使えるアイコンが有料版よりは少ないので 左側の【Free】を選んで、無料版でも使えるもののみ表示に切り替えると探しやすくなります。 それでも1000種類超えと非常に多いので他の項目も選んだり、単語で検索するなどの方法で表示させるアイコンを絞って探すほうが楽だと思いました。 例えば、【Free】の【Weather】(天気)で絞り込みをかけると 24個まで絞り込めます。 この中からsnowflakeを選んでみると、 同じ名前の他のアイコンも右側に表示されつつこのアイコンの大きい版が出て、細かいところも確認できます。 右下のボタンを押すと、貼り付けるためのコードが出てくるのでこれを使いたい部分に貼り付けます。 まずはちゃんと動くかどうかを見たいので大きさの調整などはせず、カスタムHTMLブロックに切り替えてから貼りブロックの並べ替えをしてプレビューから表示されてるかどうかを見てみると… ビジュアル編集に切り替えると、編集画面からは真っ白にしか見えませんがプレビューで見ると表示されています。 これで動作確認も終了です！ 終わりに これで『Font Awesomeが必要』と書いてあるおしゃれな見出しやリストが設定できるようになりました。 私には『OceanWP導入でプラグインをいくつか入れているから、あんまりプラグインを増やしたくない』という理由があるので、プラグインは使わずテーマに書き込む方法を選びましたが プラグインを導入する場合だと、テーマを変えたあとやアップデートのあとでも再びコードを入れる手間が省けるので使う人自身の好みで導入方法を決めるのがいいかと思います。

プラグインなし

OceanWPにFont Awesomeを導入する【プラグインなし】