AFFINGER4 Word Press

AFFINGER4のオリジナルボタンにWebアイコンを追加する方法。

投稿日:

こんにちはポテコです。

今日は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のボタンも作りたいのですが、似たのがなかったのでまた今度設置します。


コメントを閉じる

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

↓記事が気に入ったらシェアしてね。↓
スポンサーリンク

おすすめの記事&広告

関連記事

Profile


ポテコ

ガジェット好きの38歳、3児のパパ。筋トレやランニングも大好きです。最近はブログにハマってHTML5&CSSを勉強中。お仕事はアパレルのECサイト責任者をしています。主にTwitterで活動しています。よかったらフォローしてください。

メインPC:自作PC
サブパソコン:SurfacePro4
カメラ : a5100,標準レンズ
タブレット :HUAWEI Media Pad M3+iPad Pro 10.5
スマホ :HUAWEI nova
データSIM :OCNモバイルONE
通話SIM :Softbank

ライフ

2017/10/11

もうすぐ40歳になります。そのことについてただ書いていこうかろと思います。これはただの記録です。

こんにちはポテコです。 私の誕生日は3月の27日ですので、あと半年ほどで40歳になります。長いようであっという間で、楽しくて辛いこともたくさんあった。 そんな40年間です。 今日は昔を懐かしんでみよう ...

iPad Pro タブレット

2017/09/04

【痛風持ち】健康になりたい私がApple Watch3に期待すること、&しなきゃいけないこと。

こんにちはポテコです。 2017年の5月に4年ぶりに痛風発作がでてからというもの、頻繁に「発作」が出るようになってしまいました。 痛風は生活習慣病ですから、基本的にはこの4つで改善できるハズですがそれ ...

iPad Pro タブレット

2017/08/20

「Surface Pro4」+「HUAWEI Media Pad M3 」ユーザーがiPadPro10.5インチを購入した理由

こんにんちはポテコです。 先日やっとiPadProを買いました。長かった決断するまでが長かった。Twitterなどで交流がある方からはやっと買ったかという声が聞こえてきそうですがお話していけたらと思い ...

パソコン 自作PC

2017/08/06

SurfacePro4ユーザーが「Core i7-7700K&GTX1080」のハイスペック自作PCを作って感じたこと。

こんにちはポテコです。 ついについに自作PCを作りました。もう毎日幸せです。 今日は一つ一つの部品についてはレビューしませんが、SurfacePro4のCore mからのステップアップで感じたことを書 ...

ライフ

2017/06/11

4年ぶりに痛風発作がでました。もうやだ!!

こんにちはポテコです。 私は尿酸値が高い、そう痛風持ちでございます。 いまどき痛風もちはそこまで珍しくもなく、痛風持ちをカミングアウトすると意外に「おれも!」とか「実はわたくしもなんですよねー。」とか ...

-AFFINGER4, Word Press

Copyright© ぽてぽてポテコの”のらくら日記” , 2017 All Rights Reserved.