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

2019年8月26日2019年9月6日

この記事は最終更新から4年以上経過しています。内容が古くなっている可能性があります。

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

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

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

～目次～

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

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

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

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

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

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

$shortcodes_custom_css = get_post_meta( $post->ID, '_wpb_shortcodes_custom_css', true );
if ( ! empty( $shortcodes_custom_css ) ) {
  echo '<style data-type="vc_shortcodes-custom-css-'.$post->ID.'">';
  echo $shortcodes_custom_css;
  echo '</style>';
}