賢威にてページのSNSソーシャルボタンを見やすくし、スマホにもサイズ対応させました。

すべて子テーマにて行っています。

編集しても問題が起こりにくい順に記載していきます。

SNS Count Cacheのプラグイン導入

プラグイン→新規追加で
SNS Count Cache
をインストールして有効

スポンサーリンク
スポンサーリンク

Webアイコンフォント「Font Awesome」を実装

このあたりが少し手間かもしれませんがやってしまえば後が楽です。

やることはファイルをダウンロード→ファイルマネージャーでwww/のルート下に「Font」フォルダを作る→「Font Awesome」や「IcoMoon」でダウンロードしたファイルをアップロードです。

参考
賢威7でWebアイコンフォント「Font Awesome」を実装する方法
https://ruzyu.com/7155

IcoMoonではてな、LINE、feedlyのアイコンを手に入れる

はてな、LINE、feedlyのアイコンはないのでIcoMoonでダウンロードしてルートに置く

賢威7で「はてなブックマーク」「LINE」「feedly」のWebアイコンフォントを実装する方法
https://ruzyu.com/7207

賢威の設定から「Font Awesome」「IcoMoon」のスタイルを読み込ませるコード記載

賢威の設定→賢威の設定→下の辺りの項目の直前に挿入するコード記入欄に

参考
https://ruzyu.com/7196

※参考サイトではcssへとなっていたのですが、
「Font Awesome」のccsファイルは「fontawesome.min.css」(ハイフンなし)なので、 に変えました。

base.cssに追記

CSSファイルに追記していきます。

「base.css」に以下を追記。

「base.css」はPC用スタイルシートです。(賢威7対応)

「base.css」に追記するスタイルシート

rwd.cssに追記

「rwd.css」に追記するスタイルシート

「rwd.css」はスマホ用スタイルシートです。

sns_button.phpの書き換え

「sns_button.php」に記載するコード

元よりあった

・・を全消しして、(要バックアップです!!)

functions.phpに追記

「functions.php」に以下を追記。

//スマホ表示分岐
function is_mobile(){
$useragents = array(
‘iPhone’, // iPhone
‘iPod’, // iPod touch
‘Android.*Mobile’, // 1.5+ Android *** Only mobile
‘Windows.*Phone’, // *** Windows Phone
‘dream’, // Pre 1.5 Android
‘CUPCAKE’, // 1.5+ Android
‘blackberry9500’, // Storm
‘blackberry9530’, // Storm
‘blackberry9520’, // Storm v2
‘blackberry9550’, // Storm v2
‘blackberry9800’, // Torch
‘webOS’, // Palm Pre Experimental
‘incognito’, // Other iPhone browser
‘webmate’ // Other iPhone browser

);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER[‘HTTP_USER_AGENT’]);
}