テーマカスタマイザーの追加CSSの値の取得・出力方法。

WordPress4.7でテーマカスタマイザーに追加された「追加CSS」。

これまで子テーマで対応していたCSSの追加を管理画面から簡単にできるようになり、劇的に便利になりました。

この追加CSS、通常はwp_head関数で出力されるのですが、中には、wp_head関数を使わずに値を取得・出力したい場合もあると思います。

例えば、「wp_head関数を使っていないAMPページでのみ、値を取得・出力したい」なんて場合ですね。

そこで今回は、追加CSSの値を簡単に出力・出力する方法をご紹介します。

追加CSSの値を取得する方法

追加CSSの値を取得するのはとっても簡単。下記の関数を使うだけです。

wp_get_custom_css()

「ここに独自のCSSを追加することができます〜」というコメントと一緒に、入力したCSSがこの中に保存されています。

追加CSSの値を出力する方法

上記の関数は、入力された値しか取得できないので、出力しなければいけません。

例えば、AMPページで読み込む場合は下記のようなコードになります。

<?php
$styles = wp_get_custom_css();
if($styles) echo '<style amp-custom>'.strip_tags($styles).'</style>'; ?>

また、AMPページは制約が多いので、正規表現でAMP仕様のCSSに変えるのも良いでしょう。

こちらがそのコードです。

<?php
$styles = wp_get_custom_css();
if($styles) {
echo '<style amp-custom>';
$styles = preg_replace('/!important/i', '', $styles);
$styles = preg_replace('/img/i', 'amp-img', $styles);
$styles = preg_replace('/iframe/i', 'amp-iframe', $styles);
echo strip_tags($styles).'</style>';
}
?>

普通のページで読み込む場合

ちなみに、普通のページで読み込む場合は、専用の関数があるので、それを使った方が楽です。下記がその関数です。

wp_custom_css_cb()

styleタグで囲まれたCSSが出力されます。

追加CSSの関数がある場所

今回の関数は、wp-includesフォルダのtheme.phpの中で定義されています。中身はこちら。

function wp_custom_css_cb() {
  $styles = wp_get_custom_css();
  if ( $styles || is_customize_preview() ) : ?>
    <style type="text/css" id="wp-custom-css">
      <?php echo strip_tags( $styles ); // Note that esc_html() cannot be used because `div &gt; span` is not interpreted properly. ?>
    </style>
   <?php endif;
}

以上、ご参考までに！(｀･ω･´)ゞ