【Cocoon】X(旧ツイッター)のSNSアイコンが表示されない!

【Cocoon】X(旧ツイッター)のSNSアイコンが表示されない!

この記事では、CocoonでX(旧ツイッター)のSNSアイコンが表示されない場合の対応について、くわしく解説していきます。

テーマはCocoonを対象としています。

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

ツイッターからXに変更になってそろそろ落ち着いたところで、Cocoonのバージョンアップ(2.6.7以降)により、SNSのアイコンがツイッターからXに変更されました。

しかし、いざCocoonをバージョンアップをしてみると、↓のようにXのSNSアイコン(ロゴ)が表示されない問題が発生。

Xのロゴ(Webフォント)が表示されない

結局、ちょっとしたことで表示されるようになりましたが、この記事ではその対応方法を解説していきます。

Cocoonを使っていて、XのSNSアイコンが表示されない場合に、ぜひ参考にしてください!

X以外のSNSアイコンが表示されない場合にも、この記事は参考になると思います。

目次

XのSNSアイコンが表示されない

Cocoonの「2.6.7」から、SNSアイコンの「ツイッター」→「X」への変更が対応されています。

Xのロゴ(Webフォント)が表示されない

先日、Cocoonをバージョンアップしたら、下の画像のように大きい方の「X」のロゴ(Webフォント)が表示されない現象が発生しました。

SNSシェアボタン(記事上)

Xのロゴ(Webフォント)が表示されない

SNSシェア/フォローボタン(記事下)

Xのロゴ(Webフォント)が表示されない

XのSNSアイコンを表示させる

「表示されない」問題は、ほとんどが「キャッシュ」が原因であることが多いです。

そのため、対応としては「キャッシュをクリアする」ことになります。

「キャッシュをクリアする」といってもいくつか方法があるので、以下の順番で試していきます。

Webページの再表示

最初は「Webページの再表示」(ショートカットキー)をさせる方法です。

ページが表示されている状態で、「SHIFT」+「CTRL」+「R」を押します。

Xのロゴ(Webフォント)が表示されるようになった
Xのロゴ(Webフォント)が表示されるようになった

「Webページの再表示」は、ブラウザのキャッシュを使わないでページを再表示するので、この方法で表示問題が解決されることが多いです。

ブラウザのキャッシュをクリア

「Webページの再表示」でも解決できない場合は、ブラウザのキャッシュをクリアしてみましょう。

ブラウザごとの、キャッシュをクリアする手順は以下の通り。

Chromeのキャッシュをクリア

Chomeのキャッシュをクリアする手順です。

右上の3点リーダー(①)をクリックし、「設定」(②)をクリック。

Chromeのキャッシュをクリアする

「プライバシーとセキュリティ」(①)をクリックし、「閲覧履歴データの削除」(②)をクリック。

Chromeのキャッシュをクリアする

以下①~②を入力し、「データを削除」をクリック。

  • 「全期間」
  • 「キャッシュされた画像とファイル」のみチェック
Chromeのキャッシュをクリアする

これでChromeのキャッシュがクリアされます。

Edgeのキャッシュをクリア

Edgeのキャッシュをクリアする手順です。

右上の3点リーダー(①)をクリックし、「設定」(②)をクリック。

Edgeのキャッシュをクリアする

「プライバシー、検索、サービス」(①)をクリックし、「閲覧データをクリア」(②)をクリック。

Edgeのキャッシュをクリアする

以下①~②を入力し、「今すぐクリア」をクリック。

  • 「すべての期間」
  • 「キャッシュされた画像とファイル」のみチェック
Edgeのキャッシュをクリアする

これでEdgeのキャッシュがクリアされます。

Firefoxのキャッシュをクリア

Firefoxのキャッシュをクリアする手順です。

右上の3点リーダー(①)をクリックし、「設定」(②)をクリック。

Firefoxのキャッシュをクリアする

「プライバシーとセキュリティ」(①)をクリックし、「データを消去」(②)をクリック。

Firefoxのキャッシュをクリアする

「ウェブコンテンツのキャッシュ」のみチェックをつけ、「消去」をクリック。

Firefoxのキャッシュをクリアする

これでFirefoxのキャッシュがクリアされます。

Cocoonのキャッシュをクリア

「ページの再表示」でもダメ、「ブラウザのキャッシュクリア」もダメな場合に、Cocoonのキャッシュをクリアしてみましょう。

僕がXのSNSアイコンが表示されなかった時は、Cocoonのキャッシュクリアで解決できました。

SNSのアイコン(ボタン)はSNSシェアとSNSフォローの2種類ありますが、別々にキャッシュされているので、それぞれクリアしていきます。

WordPress管理画面メニュー「Cocoon設定」の「Cocoon設定」(①)をクリック。

Cocoon設定画面を開く

①「SNSシェア」タブをクリック。
②画面下の「キャッシュの有効化」のチェックを外す。

CocoonのSNSシェア/SNSフォローのキャッシュをクリアする

③「SNSフォロー」タブをクリック。
④画面下の「キャッシュの有効化」のチェックを外す。
⑤「変更をまとめて保存」をクリック。

CocoonのSNSシェア/SNSフォローのキャッシュをクリアする

これで、Cocoonの方でキャッシュされない設定に変更できました。

ブラウザで再表示させて、XのSNSアイコンが表示されるか確認をしてください。

Xアイコンが表示されるようになったら、さきほどチェックを外した「キャッシュの有効化」に再度チェックをつけて保存ください。(元に戻す)

キャッシュ系プラグインを削除

ここまでの方法を全て試してそれでもダメな場合は、キャッシュ系のプラグインが原因の可能性があります。

もしかして、キャッシュ系のプラグインを使ってませんか?

キャッシュするプラグインとしてよく使われているものに、以下のもがあります。

  • LiteSpeed Cache
  • WP Fastest Cache
  • W3 Total Cache

もし、キャッシュするプラグインを使っている場合は、そのプラグインを削除してください。

元々、SWELL、Cocoonともに「キャッシュする機能」は実装されているので、キャッシュ系プラグインは不要です。(トラブルの元です)

どちらのテーマも「キャッシュ系プラグイン」の利用は非推奨となっているので、必ず削除しましょう!

もし、キャッシュ系のプラグインを削除してもXのSNSアイコンが表示されない場合は、WordPressの環境がおかしくなっていることも考えられます。

しばらくそのままで様子を見てみてそれでも表示されないようだったら、WordPressの環境を作り直した方がいいかもしれません。

還じい

これ以上は僕もわかりません。

まとめ

XのSNSアイコン(ロゴ)が表示されない場合は、キャッシュが原因であることが多い。

  • まずは、ブラウザでページの再表示(CTRL+SHIFT+R)。
  • それでもダメだったら、ブラウザのキャッシュをクリア。
  • それもでダメだったら、Cocoonのキャッシュをクリア。
  • それもでダメだったら、キャッシュ系プラグインを削除(使っている場合)

「CTRL」+「D」を押すだけで、当サイト【還じいブログ】の記事がブックマークできます!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次