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
スマホ :HUAWEI nova
データSIM :OCNモバイルONE
通話SIM :Softbank

ライフ

2017/06/11

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

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

Windows PC パソコン

2017/05/24

HuaweiからめちゃくちゃかっこいいノートPCが発表!!その名も「MateBook X」これはいいぞ!!

こんにちはポテコです。 Huaweiから新しいWindows搭載のラップトップが3つ発表されました。 MateBook E(2in1) MateBook X(13インチノートPC) MateBook ...

パソコン 自作PC

2017/05/21

ディアウォールで作る「スピーカースタンド」これで快適な作業環境の第一歩を踏み出した。

こんにちはポテコです。 自作PCを迎えいるためにIKEAの机を買おうかと思っていますが、その為にはまず、、、。 スピーカーが邪魔!! ということで、ディアウォールを使って壁に貼り付けることにしました。 ...

iPad Pro タブレット

2017/05/19

WWDCでiPadPro10.5インチが発表されたら、お財布が爆発しそうな件

こんにちはポテコです。 WWDCでiPadPro10.5インチとSiriスピーカーが発表されるのではないかという噂がありますが、もし発表されたら私ポテコのお財布はどうなってしまうのか心配です。 現在の ...

イヤフォン ガジェットモノ

2017/05/07

「Hellodigi HD10 bluetooth 」という両耳が独立したワイヤレスイヤフォンを買ったのでレビューします。これは入門機に最適!!

こんにちはポテコです。 Amazonで「Hellodigi HD10 bluetooth 」という両耳が独立しているワイヤレスイヤフォンを買って1か月たったのでレビューします。 このイヤフォンはコード ...

-AFFINGER4, Word Press

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