WPBakery Page Builder(VC)のデザインオプションのCSSが一覧ページで効かない時の対処方法

WPBakery Page Builder(VC)のデザインオプションのCSSが一覧ページで効かない時の対処方法
2019年8月26日2019年9月6日

なんすか?WPBakery Page Builderって?なんでもVisual Composerの名前が変わったんだとか。。。
はっきり言って、名前変えるのやめて欲しいです。。ググりづらいし。。以下、Bakeryなんちゃらという名前は無視してVCと略します。

いきなりグチってしまいましたが、ここから本題です。今回、基本的にすべてのコンテンツをVCで作成したサイトを、あれこれカスタマイズする機会がありました。

その中で、VC(WPBakery Page Builder)の「デザインオプション」で指定したCSSが「一覧ページ」で読み込まれなくて困ったので、その対処方法です。

CSSが効かない状況を具体的に…

読み損になっては申し訳ないので、CSSが効かない状況を具体的に書いておきます。
CSSが効かないのは記事の個別ページではありません。下のような一覧ページです。

  • アーカイブ(記事一覧)ページ
  • 新着記事表示に設定されたフロントページ
  • WPQueryやget_postsなどを使って自作した一覧表示テンプレートを使ったページ etc.

つまり、複数の記事をループで回して表示した場合ですね。これらのページでVCの「デザインオプション」を使用して指定したCSSが効きません。というより、そもそもシングル(個別記事)ページでしか、その記事だけに設定した「デザインオプション」のCSSは出力されないようです。

記事ごとに設定したCSSを取得&出力するコード

書き方は様々なので、以下のコードを見本にして頂ければなんとかなると思います。

記事ごとに設定したCSSは、_wpb_shortcodes_custom_cssという名前で記事のメタ情報として保存されています。
こいつを取得して出力してやれば良いわけです。

head内で出力しようと思ったのですが、あちこち書き直さなければならなかったので、今回はテンプレート内のループの頭に上のコードを書いてしまいました。HTML5からbody内にstyleタグを書いても良くなったそうなので、これでいいや♪と。。

最後に

アーカイブページのテンプレートが「全文表示」になっていたり、カスタマイザーで「全文」OR「抜粋」が切り替えられるテーマも多いですよね。「全文表示」にしてるのに、指定したCSSが効かないなんて非常に困ります。

書き方は色々だと思いますが、CSSの保存と取得の仕方がわかれば何とでもなるかと思います。

まとめが少々雑ですが、あまり初心者の方が遭遇する問題ではないと思うのでご了承ください。。。


目次へ
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages