| 2025.05.18 | 対応方法に「キャッシュの消去とハード再読み込み」を追加 |
ツイッターからXに変更になってそろそろ落ち着いたところで、Cocoonのバージョンアップ（2.6.7以降）により、SNSのアイコンがツイッターからXに変更されました。
しかし、いざCocoonをバージョンアップをしてみると、↓のようにXのSNSアイコン（ロゴ）が表示されない問題が発生。
結局、ちょっとしたことで表示されるようになりましたが、この記事ではその対応方法を解説していきます。
Cocoonを使っていて、XのSNSアイコンが表示されない場合に、ぜひ参考にしてください！
※X以外のSNSアイコンが表示されない場合にも、この記事は参考になると思います。
XのSNSアイコンが表示されない
Cocoonの2.6.7から、SNSアイコンの「ツイッター」→「X」への変更が対応されています。
Xのロゴ（Webフォント）が表示されない
先日、Cocoonをバージョンアップしたら、下の画像のように大きい方の「X」のロゴ（Webフォント）が表示されない現象が発生しました。
SNSシェアボタン（記事上）
SNSシェア／フォローボタン（記事下）
XのSNSアイコンを表示させる
「表示されない」問題は、ほとんどが「キャッシュ」が原因であることが多いです。
そのため、対応としては「キャッシュをクリアする」ことになります。
「キャッシュをクリアする」といってもいくつか方法があるので、以下の順番で試していきます。
Webページの再表示
最初は「Webページの再表示」（ショートカットキー）をさせる方法です。
ページが表示されている状態で、「SHIFT」＋「CTRL」＋「R」を押します。
「Webページの再表示」は、ブラウザのキャッシュを使わないでページを再表示するので、この方法で表示問題が解決されることが多いです。
ブラウザのキャッシュをクリア
「Webページの再表示」でも解決できない場合は、ブラウザのキャッシュをクリアしてみましょう。
ブラウザごとの、キャッシュをクリアする手順は以下の通り。
Chromeのキャッシュをクリア
Chomeのキャッシュをクリアする手順です。
右上の3点リーダー（①）をクリックし、「設定」（②）をクリック。
「プライバシーとセキュリティ」（①）をクリックし、「閲覧履歴データの削除」（②）をクリック。
以下①～②を入力し、「データを削除」をクリック。
- 「全期間」
- 「キャッシュされた画像とファイル」のみチェック
これでChromeのキャッシュがクリアされます。
Edgeのキャッシュをクリア
Edgeのキャッシュをクリアする手順です。
右上の3点リーダー（①）をクリックし、「設定」（②）をクリック。
「プライバシー、検索、サービス」（①）をクリックし、「閲覧データをクリア」（②）をクリック。
以下①～②を入力し、「今すぐクリア」をクリック。
- 「すべての期間」
- 「キャッシュされた画像とファイル」のみチェック
これでEdgeのキャッシュがクリアされます。
Firefoxのキャッシュをクリア
Firefoxのキャッシュをクリアする手順です。
右上の3点リーダー（①）をクリックし、「設定」（②）をクリック。
「プライバシーとセキュリティ」（①）をクリックし、「データを消去」（②）をクリック。
「ウェブコンテンツのキャッシュ」のみチェックをつけ、「消去」をクリック。
これでFirefoxのキャッシュがクリアされます。
キャッシュの消去とハード再読み込み
これはChromeとEdge限定の方法です。
先のキャッシュのクリアでもダメだった場合は、「デベロッパ・ツール」（開発ツール）を使って、「キャッシュの消去とハード再読み込み」を試してみましょう。
Chrome
Chromeで「キャッシュの消去とハード再読み込み」する方法です。
事前にChromeを開いてから以下のどちらかのキーを押すと、画像のような「デベロッパ・ツール」（開発者ツール）が開きます。
- 「F12」キー
または、 - 「CTRL」＋「SHIFT]＋「I」（アイ）
メニューからも開けますよ！
Chromeの右上にある3点リーダーアイコン（①）→「その他のツール」（②）→「デベロッパーツール」（③）をクリック。
「デベロッパ・ツール」画面が開いたら、Chromeの左上にあるリロードボタン（①）で右クリックし、「キャッシュの消去とハード再読み込み」（②）をクリック。
これでChromeのキャッシュがクリアされますが、さらに強力なハード再読み込みすることでアイコンが表示されるかもしれません。
Edge
Edgeで「キャッシュの消去とハード再読み込み」する方法です。
事前にEdgeを開いてから以下のどちらかのキーを押すと、Chromeと同じような「デベロッパ・ツール」（開発者ツール）が開きます。
- 「F12」キー
または、 - 「CTRL」＋「SHIFT]＋「I」（アイ）
以下の画面が開いたら、「DevToolsを開く」をクリックしてください。
Edgeも以下の手順でメニューから開けます。
右上の「3点リーダーアイコン」→「その他のツール」→「開発者ツール」をクリック。
「デベロッパ・ツール」画面が開いたら、Edgeの左上にあるリロードボタン（①）で右クリックし、「キャッシュをクリアしてハードリフレッシュ」（②）をクリック。
これでEdgeのキャッシュがクリアされますが、さらに強力なハードリフレッシュすることでアイコンが表示されるかもしれません。
Cocoonのキャッシュをクリア
「ページの再表示」でもダメ、「ブラウザのキャッシュクリア」もダメな場合に、Cocoonのキャッシュをクリアしてみましょう。
僕がXのSNSアイコンが表示されなかった時は、Cocoonのキャッシュクリアで解決できましたよ！
SNSのアイコン（ボタン）はSNSシェアとSNSフォローの2種類ありますが、別々にキャッシュされているので、それぞれクリアしていきます。
WordPress管理画面メニュー「Cocoon設定」の「Cocoon設定」（①）をクリック。
①「SNSシェア」タブをクリック。
②画面下の「キャッシュの有効化」のチェックを外す。
③「SNSフォロー」タブをクリック。
④画面下の「キャッシュの有効化」のチェックを外す。
⑤「変更をまとめて保存」をクリック。
これで、Cocoonの方でキャッシュされない設定に変更できました。
ブラウザで再表示させて、XのSNSアイコンが表示されるか確認をしてください。
Xアイコンが表示されるようになったら、さきほどチェックを外した「キャッシュの有効化」に再度チェックをつけて保存ください。（元に戻す）
キャッシュ系プラグインを削除
ここまでの方法を全て試してそれでもダメな場合は、キャッシュ系のプラグインが原因の可能性があります。
もしかして、キャッシュ系のプラグインを使ってませんか？
キャッシュするプラグインとしてよく使われているものに、以下のものがあります。
もし、キャッシュするプラグインを使っている場合は、そのプラグインを削除してください。
元々、Cocoonではキャッシュの機能は実装されているので、キャッシュ系プラグインは不要です。（トラブルの元です）
「キャッシュ系プラグイン」の利用は非推奨となっているので、必ず削除しましょう！
もし、キャッシュ系のプラグインを削除してもXのSNSアイコンが表示されない場合は、WordPressの環境がおかしくなっていることも考えられます。
しばらくそのままで様子を見てみてそれでも表示されないようだったら、WordPressの環境を作り直した方がいいかもしれません。
これ以上は僕もわかりません。
まとめ
XのSNSアイコン（ロゴ）が表示されない場合は、キャッシュが原因であることが多いです。
以下の順番で試してみましょう！
- まずは、ブラウザでページの再表示（CTRL+SHIFT+R）。
- それでもダメだったら、ブラウザのキャッシュをクリア。
- それもでダメだったら、Cocoonのキャッシュをクリア。
- それもでダメだったら、キャッシュ系プラグインを削除（使っている場合）
コメント