サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年12月10日 21:54
わいひらさん
お世話になっております。みるみです。
ブログのヘッダー右上に自前でナビメニューのようなものを設置していますが、ここで使用しているFontAwesome（ver5）が、真ん中のペンアイコン（\f304、<i class="fas fa-pen"></i>）のみ表示されないことがあるのを発見しました。
その後色々実験などした概要は以下です。
- 自分のメインブラウザでは気付いていなかったが、キャッシュのないクリーンな環境で試すと表示されていなかった
- 一瞬表示されるがその後消えているらしい
- FontAwesomeのアイコンページで「Updated: Version 5.1.0」となっているもののみこの現象が起き、Versionが5.0.0だとちゃんと表示される
- よくよくソースを見たら、下記のように実装しているのに実際のコードは「fas」が全て「fa」になっている
- →ひょっとして最初は「fas」で正しく出力されたあとなにかのきっかけで全部「fa」に変わっており、そのせいで表示されなくなっている？（実際、ブラウザによってはなぜかsolidアイコンではなくLightアイコンみたいになっている）
という感じです。
入力しているソースは以下です。
<div class="pc_top_right_pages">
<ul>
<li><a href="https://milmemo.net/profile"><i class="fas fa-user"></i>プロフィール</a></li>
<li><a href="https://milmemo.net/what-is-this-blog"><i class="fas fa-edit"></i>このブログについて</a></li>
<li><a href="https://milmemo.net/contact"><i class="fas fa-envelope"></i>お問い合わせ</a></li>
</ul>
</div>
もしCocoonでなにか処理をされているのでしたら、ご教授いただけますと幸いです。
2019年12月11日 19:45
ソースコードにFont Awesome4とFont Awesome5が読み込まれているようですけどなぜなんでしょう？
Cocoon設定の「全体」タブにある「サイトアイコンフォント」はFont Awesome5になっているのでしょうか。
また、フォーラムの案内に設定方法へのリンクがあるので、高速化を無効にしておいていただいてよろしいでしょうか。
Topic starter
2019年12月11日 23:31
＞高速化設定
圧縮類３つとWebフォントの非同期読み込みをOffにしました。
Cocoonの設定自体はver4にしています。
ver5が読み込まれているのは、自分で設置しているver5に対応させるために、先日CocoonがFontAwesomeのバージョン対応したときに自分で読み込み追加したから…だったと思います。
function wp_enqueue_web_font_lazy_load_js(){
if ( is_web_font_lazy_load_enable() && !is_admin() ){
wp_enqueue_script( 'web-font-lazy-load-js', get_template_directory_uri().'/js/web-font-lazy-load.js', array(), false, true );
$data = ('
loadWebFont("'.get_site_icon_font_url().'");
');
if (is_site_icon_font_font_awesome_5()) {
$data .= 'loadWebFont("'.get_template_directory_uri().'/css/fontawesome5.css");';
}
wp_add_inline_script( 'web-font-lazy-load-js', $data, 'after' ) ;
}
}
もともと最低限のcssだけ非同期読み込みしたくてver4だけ上記のようにwp_enqueue_web_font_lazy_load_js()関数をオーバーライドしていましたが、先日のFontAwesomeバージョン対応したときに色々おかしくなったのでver5も追記した記憶があります。
なんか自分でも既にこの作業の目的が怪しく感じてはいるものの、オーバーライドを解除してもfasがfaになる現象は確認できました（特定のアイコンが非表示になる現象も変わらず）。
今はこのオーバーライドは有効の状態にしています。
Topic starter
2019年12月11日 23:32
2019年12月11日 23:40
Font Awesomeの機能ではver4を設定している場合はver4のクラス名（fa）、ver5を設定している場合はver4のクラス名（fas）に置換されるので当然かと。
ver5のアイコンを使用するなら、Cocoon設定でFont Awesome 5を選択する必要があります。
わいひら reacted
2019年12月12日 20:39
ロコさんも書かれていますが、Font Awesome4を選択すると、Font Awesome4用の設定に書き換えられます。
独自カスタマイズをされている場合で、Font Awesome4の設定も維持したい場合は、そのようにまたカスタムコードを追加する必要があるかと思います。
オーバーライドするとしたら、change_fa関数あたり。
ただそうするんだったら、設定でFont Awesome5を選んで必要な処理があれば書き直すようにしたほうが良いような気がします。
Topic starter
2019年12月12日 22:01
ええと、結論から言いますと、Cocoonの設定をver5にしたら全般的に解決されました。一部問題が出た部分はありましたが、そこは手動で直せるものでした。
FontAwesomeのver5についての説明記事に書いてあった「PHP処理」というのがこのfas→faだったのですね、流し読みしてしまっていました。
わいひらさん、ロコさん、いつもいつも勝手なカスタマイズに関する質問に応じていただきありがとうございます。とても恐縮です…。
今回もありがとうございました。
わいひら reacted
2019年12月13日 01:00
なるほど。
とりあえずうまくいったようでよかったです ?
FontAwesomeのver5についての説明記事に書いてあった「PHP処理」というのがこのfas→faだったのですね、流し読みしてしまっていました。
そうなんです。
あまり、多くの方に影響がない部分は、そこまで詳しく説明は書いていないので、多分わからなかったと思います。
ただ、全部の変更点を事細かく書くとなると、アップデート時に毎回長時間をかけて記事を書く必要が出てくるので、負担軽減のためにも独自カスタマイズ部分に影響がある部分に関しては、今後ともどうしてもさらっと書く程度になると思います。
みるみ reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。