【WordPress】ライブ用CSSのリアルタイム値について

WordPressの機能としてカスタマイザーという大変便利なものがあります。

カスタマイザー画面の例

文字色を変えたいとか、大きさを変えたいとかをリアルタイムのプレビューで確認できるので、ユーザー側からしても大変便利なものです。

一方、この機能を実装側から考えると、リアルタイムで（色とか大きさの）変更=変更した値に合わせてCSSを適用という事に。

ではそのコードをどう書けばよいか。

正解から言うと、そのまま単純にCodexの例に沿って行けば大丈夫です。

以下がCodexの例。

function mytheme_customize_css()
{
    ?>
         <style type="text/css">
             h1 { color:<?php echo get_theme_mod('header_color', '#000000'); ?>; }
         </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

ここで重要なのが、関数内外どちらにしろget_theme_mods()で取得した内容はことカスタマイザーではリアルタイムではないっぽいということ。（他は分かりません）

・get_theme_mods⇒テーマ設定値を全て取得
・get_theme_mod⇒テーマ設定を1つ取得

カスタマイザーで利用する際には特に注意が必要という事みたいです。

functions.phpでget_theme_modsで取得した値をechoするとだめでした。

関数内部でも同様です。

コアファイルのソースを確認すると、get_theme_mod()では以下のソースが一役買っているようです。

return apply_filters( "theme_mod_{$name}", $mods[ $name ] );

実際、これをそのまま記述するとリアルタイムで値が更新されていました。

コメント文を見る限りでも、動的に変更が想定されるテーマ値を考慮しているみたいなニュアンスで書かれています。（自分訳）

WordPress, その他Wordpress, PHP

Posted by 行未