こんにちはポテコです。
今日はAFFINGER4のオリジナルボタンにWebアイコンを追加する方法をお伝えします。
AFFINGER4にはウィジェットで簡単にオリジナルボタンを追加できる機能があります。使い方はひとそれぞれだけですが、筆者が欲しいWebアイコンがなかったので追加しました。
かなり手探りでしたので、忘れないようにメモ記事にします。
今日はそんなお話です。
AFFINGER4のオリジナルボタンにWebアイコンを追加する方法。
子テーマで編集します。事前準備としてステップ①から③を用意します。
ステップ①
FTPソフトを使ってAFFINGER4のst-widgets.phpファイルをダウンロードして、子テーマのAFFINGER4 Childにアップロードします。
ステップ②
追加したいWebアイコンを探します。使えるWebアイコンは「Font Awesome」のものだけです。ここにいないものを追加する方法はいまだ未開拓です。
ステップ③
追加したいアイコンをクリックすると、コードが出てきます。メモ帳などにコピーしておきます。
st-widgets.phpを編集する。
WordPressの管理画面から外観の中のテーマの編集をクリック。
st-widgets.phpをクリックしてCtrl+Fで、select class="widefat"と入力してマークされた部分のそのしたのところに、同じようなコードが連続してるのがわかると思います。
それら一つ一つがオリジナルボタンのWebフォントになっています。そこに追加したいWebフォントを追加します。
一番上でもいいですが、追加ですので私は一番下に追加しました。マーカーの部分です。
コードを追加します。
ステップ①
下のコードの黄色い部分に追加したいWebフォントのコードを入れかえます。
ステップ②
赤いマーカーのところはボタンの名前になりますので、したい名前に変更します。
<option <?php if ( $st_webfont === '<i class="fa fa-facebook-square" aria-hidden="true"></i>' ) {
echo 'selected="selected"';
} ?> value='<i class="fa fa-facebook-square" aria-hidden="true"></i>'>Facebook
</option>
私はPush7のボタンを作りたかったで、雷マークっぽいものをチョイスしました。先ほどのコードをいれて名前も変更したコードをいれました。
<option <?php if ( $st_webfont === '<i class="fa fa-bolt" aria-hidden="true"></i>' ) {
echo 'selected="selected"';
} ?> value='<i class="fa fa-bolt" aria-hidden="true"></i>'>ファーボルト
</option>
あとは追加したボタンの分だけ同じことをします。
ウィジェットでボタンを追加する
ステップ①
管理画面から外観をクリックしてウィジェットへ。オリジナルボタンをクリックして任意のところに追加します。
ステップ②
Webフォントに追加したアイコン名が出ていたら成功です。お疲れさまでした。
まとめ
私はAFFINGER4のオリジナルの機能のみで、できるだけカスタマイズすることにしています。＊だってまだHTMLとかCSSとかまだ勉強中だから、、、。
筆者はプロフィール欄のフォローボタンを設置したかったのですが、どうしても思うようにできなかったので、オリジナルボタンを使うことにしました。
カスタマイズでカラーを変えるとわりと、シンプルにできたので満足しています。
こんな感じです。TwitterとFacebookはデフォルトで入ってました。本当はFeediyのボタンも作りたいのですが、似たのがなかったのでまた今度設置します。
