2019年版【賢威8】ソーシャル(SNS)アイコン表示されない

SNSボタンのマークが消えた?

【賢威8】になって、ソーシャルアイコン(SNSボタン)が標準装備になりました。

ところが、どうしても表示されないアイコンがあります。

下の赤い枠の部分です。

Twitter、Facebook、Google+のアイコンが表示されるべきところに、表示されません。

(なぜか、はてなブックマークのアイコンだけは表示されています)


原因を調べてみました

ネットで調べてみると、ソーシャルアイコンの表示には、

「social-button.phpや、social-button2.phpの設定が必要」

らしいのですが、【賢威8】のフォルダを探しても、そのようなCSSファイル自体、存在しません。

「自作のソーシャルアイコンを作成する」のであれば、【賢威7】までの対応方法は見つかります。

でも、せっかく【賢威8】になってデフォルトで対応したのですから、それも何だか釈然としません。

スポンサーリンク

やっと原因がわかった

ひたすらネットで検索してみました。

(同様の事象で悩んでいる人は、他にいないのでしょうか。めちゃ苦労しました )

そもそものソーシャルアイコンの設定の仕方から、いろいろ調べた結果ですが、 やっと以下の実現方法を見つけました。

スポンサーリンク

Font Awesomeを設定する

もう結論からお伝えしますね。

header.phpのヘッダーセクションに以下のコードを追加する。

ヘッダーセクションとは「<head>」と「</head>」の間です。

<


	
	

	

	

※ただし賢威8の場合、「賢威の設定」-「埋め込みコード設定」の「直前に挿入するコード記入欄」に記述するほうがモアベターです。

「header.php」は子テーマにコピーできないのですが、親テーマを修正するとエラーの原因になったりするので、出来ることならいじりたくありません。賢威8の便利機能の一つです

スポンサーリンク

無事、表示されました

【賢威8】では、Font Awesomeというところから、SNSボタンのアイコンを取得する必要があるみたいなのですが、それがうまく働いていなかったようです。(少なくとも私の環境では)

もし、同じように悩んでいる方がいらしたら、助けになれば幸いです。

私は賢威を使っています。

※2019/03/04追記。

その後、調べていたら「\js\insertstyle.js」に次の記述を見つけました。

    //External Styles
    const CODEMIRROR_CSS = 'https://d8fd03967nrad.cloudfront.net/libs/codemirror/5.13.2/codemirror.min.css';
    const FONT_AWESOME_CSS = 'https://d8fd03967nrad.cloudfront.net/libs/font-awesome/4.5.0/css/font-awesome.min.css';
    const JQUERY_UI_CSS = 'https://d8fd03967nrad.cloudfront.net/libs/jQueryUI/1.12.1/themes/ui-lightness/jquery-ui.css';

また「\wp-content\plugins\download-manager\admin\tpls\welcome.php」にも以下の記述があります。

var cb = function() {
	var fa_css = document.createElement('link'); fa_css.rel = 'stylesheet';
	fa_css.href = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
	var insert_fa_css = document.getElementsByTagName('head')[0]; insert_fa_css.parentNode.insertBefore(fa_css, insert_fa_css);
};

このあたり、バージョンの違いで表示されないのかもしれません。

また調べてみます。

スポンサーリンク

※2019年03月06日追記

いろいろ試していたら、header.phpに追記していたコードを外しても、SNSアイコンが表示されるようになってました。

謎です。

スポンサーリンク

※2019年03月09日追記

またアイコンが表示されなくなりました。いったんheader.phpのコードを外していたのですが、復活させました。

スポンサーリンク

※2019年03月10日追記

ネットでこんな方法を見つけたのですが、駄目でした。

%MINIFYHTML22295f5dcab255a4421c1a37bc93c2a033%%MINIFYHTML22295f5dcab255a4421c1a37bc93c2a034%

※2019年03月21日追記

ページの最適化をしてたら、「font-awesome.min.css」が読み込みのスピードを異常に遅くしているのに気が付きました。
で、また外してみたのですが、SNSアイコンは表示されたまま。(キャッシュは削除しています)

どうなっているんでしょうね。
フォントにもう。(ノ∀`)タハー

賢威8のSNSアイコンのカスタマイズや、ソーシャルボタンの追加方法はこちらにまとめましたので、ご覧ください。