[Font Awesome][WP]WordPressのショートコードでFont Awesomeを使いたい

皆さんこんにちは。たてしきです。

今回は私がFont Awesome(以下FA)を使いたかったので…書きました。


目次


下準備

まず…FAをWordPressに組み込みましょう。

外観→テーマの編集 より、「header.php」を編集します。

header.phpの<head>内に、次のコードを貼り付けます。

<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">


ショートコードの追加

ショートコードを追加してみましょう。

WordPress バージョン 2.5 から ショートコード(Shortcodes)というものがサポートされました。これは投稿内容で使えるマクロを作るために導入されました。ショートコードの例と使い方については、WordPress.com Shortcodes を参照してください。ただしそこで紹介されているショートコードの一部は WordPress.com だけで使えるものです。

── https://wpdocs.osdn.jp/ショートコード

外観→テーマの編集 より、「functions.php」を編集します。

functions.phpのどこかに、このコードを書き込みます。


使い方

[fa]のショートコードに属性を追加します。

項目必須説明
iconはいフォントの名前を指定します。fa-spinner
typeいいえフォントのタイプを指定します。fas (solid)
fab (brand)
etc...
optionいいえオプションを指定します。fa-3x
fa-pulse
fa-spin
etc...
colorいいえアイコンの色を指定します。
CSS方式で指定可能です。
red
blue
#002200
f0f
etc...

[fa icon="fa-bell"]

[fa type="fab" icon="fa-twitter"]

[fa icon="fa-sync" option="fa-spin"]

[fa option="fa-pulse"]

↑デフォルトは「fa-spinner」。

[fa option="fa-pulse" color="blue"]


最後に

ただ疲れただけだったかも。

ぜひ使ってみてくださいね!

それでは、また。

0 comments