Advanced Custom Fieldの出力をcssに反映させる方法【コピペOK】

みんな大好きWordpress。そのWordpressでめちゃめちゃ有名なプラグインがAdvanced Custom Fieldですよね（以下ACF)。そのACFで設定した値をcssに出力して、ホームページの変化を加えるようにする方法をご紹介します。

基本的にcss内にphpは書けません。

当然ながらCSSファイルにACFの出力コードを記入しても動きません。

ですので、CSSの元となるphpを作って、そこにACFの出力コードを書き、カスタムフィールドが更新されるとその内容がphpに入り、同時に新しくCSSとして出力するといった処理を行います。

CSSを作るためのPHPを書いてみる。

前置きはいいので早速やっていきます。

functions.phpに以下の内容を書きます。コピペで大丈夫です。functions.phpは書き方を間違えるとえらいことになるので注意してください。

functions.php

[php]
function generate_options_css() {
$ss_dir = get_stylesheet_directory();
ob_start();
require($ss_dir . ‘/好きな名前.php’);//好きな名前でphpを作ってアップロードしておいてね
$css = ob_get_clean();
file_put_contents($ss_dir . ‘/好きな名前.css’, $css, LOCK_EX);
//なんでもいいので好きな名前をつける。実際にcssファイルを作る必要はありません。
}
add_action( ‘acf/save_post’, ‘generate_options_css’, 20 );
[/php]

次にその好きな名前.phpに以下を記述。

[php]
<?php
header(‘Content-Type: text/css; charset=utf-8’);
include_once( ‘config.php’ );
?>
[/php]

基本的にはこれでOKです。 そしてカスタムフィールドの出力を先ほどの好きな名前.phpに書いていきます。 例えばこんな感じ。

例）ACFのカラーピッカーの出力で背景色を決めてみる場合。

[php]
<?php if( get_field(‘フィールド名’) ) { ?>
body{background-color:<?php the_field(‘フィールド名’); ?>;}
<?php } ?>
[/php]

こうすることでそのカスタムフィールドが更新されると、自動的に好きな名前.cssが生成されますので、
ファイルへのパスをheader.phpとかに書いてあげればサイトに反映されます。

もしACFのプロ版をお使いの方でオプションページを作成している方はこのように

[php]
<?php if( get_field(‘フィールド名’,’options’) ) { ?>
body{background-color:<?php the_field(‘フィールド名’,’options’); ?>;}
<?php } ?>
[/php]

‘options’をつけるのを忘れないでくださいね。（これよく忘れるw）

ページごとに処理を変える場合

もしページごとになんらかの変化を加えたい（ページごとに背景を変えたいとかフォントファミリーを変えたいとかまあ色々）場合はページのループの中にこういうことをすればいいと思います。

固定ページとか

[php]
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="post-<?php the_ID(); ?>">
<!– なんか書く –>
</div>

<?php endwhile; endif;>
[/php]

最初に作ったphp

[php]
<?php query_posts(‘post_type=page’); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
.post-<?php the_ID(); ?>{
<?php if( get_field(‘フィールド名’) ) { ?>
background-color:<?php the_field(‘フィールド名’); ?>;
<?php } ?>
}
<?php endwhile; endif;>
[/php]

ループも使えるので、こんな感じのことを書けばページごとの処理が可能になります。ページIDから数字が自動的に生成されて、それにCSSが記述されます。

お客様がなんか自分で設定したいとか仰られるような案件には使えるかもですねー。