Celtispackを2.0.1に更新したらアイコンが表示されなくなったので対策しました

前回はWordPressが自動更新された後にブログカードの表示がおかしくなったので、とりあえずWordPressをダウングレードしたよっていう記事を書きました↓

WordPressをダウングレードして前のバージョンに戻す方法

...

web-ashibi.net

2016.06.26

ブログカードを表示するのに使用させて頂いている「celtispack」というプラグインの最新版を、テスト環境で試して大丈夫そうだったので本番も新しいバージョンに更新しました。

2016年7月現在、当ブログはWordPress 4.5.3、celtispack 2.0.1 という環境です。

ところがceltispackを最新バージョンにするとブログカードは問題なく表示されるんですけど、「IcoMoon」で表示していたSNS等のアイコンが表示されないという問題が勃発！笑

無事に解決したので対策を書きたいと思います。

アイコンが消えた原因

なぜアイコンが消えたのか、原因を調べました。
僕はよくFirefoxのアドオン「Firebug」を使ってます。

「Firebug」っていうのはWEB開発用のツールなんですけど、これをある程度使えるようになるとWordPressのカスタマイズ能力も１段レベルアップすると思います！

Firefox (ja) 向けアドオン

addons.mozilla.org

簡単に説明するとページ上でカーソルを当てると、そこにどんなCSSが指定されているかを表示することができたり、CSSファイルを書き換えなくてもその場でCSSを編集して結果をプレビューしたりできちゃうんです。

Google Chromeでも似たような便利なツールがあります。
詳しいことはまた別の機会に書くとして今回の目的、消えたアイコンの部分をチェックしてみると「celtispack」のCSSが干渉しているために表示されなくなっていました。

新しいバージョンで追加されたCSSのようですね。
ということで、プラグインのCSSをいじって対策します！

celtispackのCSSを編集する

celtispackにはスクロールボタンを表示する機能があって、そのためのCSSが原因だったので該当部分を削除することで対策します。

編集するファイルはこちらにあります↓
「WordPress本体のディレクトリ/wp-content/plugins/celtispack/css/celtispack-style.css」

「celtispack-style.css」の255行目にこのようなコードがあります↓

/* スクロールボタン 
-------------------------------------------------------------- */
/*fontello サイトで font awesome の up, down, double up, double down アイコンフォントのみ抽出 */

この「/* スクロールボタン」以下のコードを全て削除しちゃいましょう。
削除したら同じ場所にアップロードして作業完了です！

簡単ですね♪

ただし「celthispack」のスクロール機能は使わないことが前提です(^^;)
このブログを参考にしてくださっている方は同じような現象になっているかと思いますので参考にしてみてください。

まとめ

セキュリティの面でもWordPress本体はなるべく最新版にしておいた方が良いので、これで一安心です。
でも自動更新でいきなり不具合発生すると焦りますね(^^;)

自動更新は止めとこうかな。
次回ちょっと自動更新のこと書こうと思います！

ではまた〜♪