●設定

→→サイトアイコンフォント「Font Awesome 5」

●現象

Cocoon設定のデモプレビューにアイコンが表示されない。
デモプレビュー内のヘッダー上のサイトリンク（サイト名）をクリックした場合は正しく表示される。

●原因

Cocoon 2.9.3.5でのバグ作り込み（デグレード）。

●作り込み経緯

以前はプレビューのたびに該当ページを毎回ゼロから生成していた。

この方式を廃止し、一度組み立てたHTMLをキャッシュ保存する仕組みへと変更した。
キャッシュは設定が保存されるたびに自動で更新される。
これにより、無駄な処理を排除し、デモ表示の高速化を実現した。

その際、Fontawsome 5へのHTML変換が漏れている。

●補足

HTMLのアイコンはFontawesome 4で組み立てられる。
その後、Cocoonの設定に応じて、関数change_faを介しFontawesome 5のコードへと動的に変換される。

●対策

組み立てたHTMLを変換した返却。

$html = ob_get_clean();
return change_fa($html);

https://github.com/xserver-inc/cocoon/blob/174fa986775582c31d217cc5b545fcea6a541759/lib/settings-preview.php#L145

●雑談

デバッガー疲れたわ笑
お礼にXwriteを弄り倒したいので1ヶ月分のライセンスください笑笑

lib/sns-follow.php

先述のコードはSNSフォロー情報が2つの関数に分かれていたので、1つに統合。（統合版での確認はしていません）

https://notepad.pw/share/7nkb42k39

利点

いずれ、関数get_theme_sns_follow_servicesにfilterフックを追加。
get_theme_sns_follow_servicesからテンプレートに反映する仕組みになれば、フックを用い新設したいSNSフォローを簡単に追加できるようになる。

同様の仕組みをSNSシェアにも取り入れることを検討要。

外観で設定した背景画像

上記ということは、「外観」－「背景」の以下の部分で良いのでしょうか。

body.custom-background {
    background-image: url("https://xxxxx/wp-content/uploads/abcde.jpeg");
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}

.body.custom-background {
    background-image: url("https://xxxxx/wp-content/uploads/xxxxx.jpeg");
}

.body.custom-background {
    background-image: none;
}

ありがとうございます！

無事に背景の変更ができました！

外観で設定した背景画像

上記ということは、「外観」－「背景」の以下の部分で良いのでしょうか。

はい。「外観」で背景画像が設定されている状態で、特定の投稿記事の背景を別の背景に変更したいという旨です。

外観で設定した背景画像

上記ということは、「外観」－「背景」の以下の部分で良いのでしょうか。

body.custom-background {
    background-image: url("https://xxxxx/wp-content/uploads/abcde.jpeg");
    background-position: left top;
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
}

.body.custom-background {
    background-image: url("https://xxxxx/wp-content/uploads/xxxxx.jpeg");
}

.body.custom-background {
    background-image: none;
}

お手数をおかけして申し訳ございません。

ひとまず順を追って解説します。

初期状態として、サイトは外観設定で背景画像が設定されています。

本件は、この状態で特定の投稿記事での背景を指定した背景色に変更したいという旨です。

「固定ページではできた」というのは誤りです。
正確には、背景画像を別の背景画像に変更できた　です。
そのためこの補足は本件とは繋がりはありません。

以上がこれまでの一連の内容です。


以下からはその続きです。

背景色は画像に影響は与えないというご指摘を受けて、対案として設定したい背景色の画像データを作成し、背景画像として投稿記事の背景変更を試みましたが、これも失敗しました。
カスタムCSSにて以下のように記入をしましたが、背景画像は変更されませんでした。


body{
background-image: url(画像URL);
background-repeat: repeat;
}

同様の内容で追加CSSでIDを付けて記入しても同じく変更されませんでした。


そのため状況としましては以下のようになっております。

投稿記事
・背景画像を背景色に変更→失敗
・背景画像を別の背景画像に変更→失敗

固定ページ
・背景画像を背景色に変更→失敗
・背景画像を別の背景画像に変更→成功

補足

固定ページの背景画像を別の背景画像に成功したやり方は、追加CSSへ対象記事のIDを指定したCSSによって成功しており、上記に記載しました「body」のCSSを記事のカスタムCSSへ記入しても背景画像は変更されませんでした。

すみません。

トピックのタイトルから、以下がお問い合わせ内容かと、思ってしまいました。

特定の投稿記事を表示した際にサイト全体の背景を指定した背景色で表示できるようにしたい

body.post-id-（記事のID） {
           background-color:#EBF8F4;
}

固定ページでは『body.page-id-（記事のID）』でのCSSで背景の変更ができたのですが、投稿記事に関しては上手く行かず、参考になるような例も見当たらなかったのでご相談する運びとなりました。

特定の投稿記事でサイト背景色を変更する方法があれば教えて頂ければと思います。

固定ページでは背景色をCSSで指定できるけど、投稿ページではできない。

そう受け取りました。

しかし、今回のように、以下のような記載があり、お問い合わせ内容が、良く分からなくなりました。

外観で設定した背景画像のままで変化がありませんでした。

元の背景画像のままで変化がありませんでした。

「background-color」は、背景色を指定するプロパティです。

画像に影響は与えないです。

お問い合わせは、どういう内容なのでしょうか？

ご回答いただきありがとうございます。

ご指摘いただいた通り記事のカスタムCSSでも試行したのですが、元の背景画像のままで変化がありませんでした。

念のため再度IDを指定して追加CSSで記入したやり方でも同様でした。

新規作成の白紙の投稿記事で記入しても同じく変化しないので、対象記事そのものに特定の問題がある訳でもないと思われます。