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

   

eye_wp

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

WordPressが自動更新されてブログカードがおかしくなったので、とりあえずダウングレードしてみた
以前にブログカード風にリンクを貼れるプラグイン「Celtispack」をご紹介し ...

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

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

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

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

スポンサーリンク

アイコンが消えた原因

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

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

Firebug
Firebug は、Web ページを閲覧中にクリック一つで使える豊富な開発ツールを Firefox に統合します。あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

簡単に説明するとページ上でカーソルを当てると、そこにどんな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行目にこのようなコードがあります↓

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

簡単ですね♪

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

まとめ

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

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

ではまた〜♪

スポンサーリンク

この記事をシェアする!

 - WordPress