制作コラム

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

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
  header('Content-Type: text/css; charset=utf-8');
  include_once( 'config.php' ); 
?>

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

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

<?php if( get_field('フィールド名') ) { ?>
	body{background-color:<?php the_field('フィールド名'); ?>;}
<?php } ?>

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

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

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

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

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

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

固定ページとか

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


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



 <?php endwhile; endif;>

最初に作った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;>

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

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

一覧に戻る

ホームページ
制作業務

コーポレートサイト制作

コーポレートサイトは企業の看板となるウェブサイトです。顧客とのファーストコンタクトになる場合が多いので、ブランディング視点で企業を魅力的に伝えるホームページを構築いたします。

More

ブランドサイト・集客サイト制作

ブランドサイトや集客サイトはお問い合わせなど、コンバージョンの獲得を強く意識したホームページになります。クライアントの事業内容によって、コーポレートサイトをそのまま集客の核とする場合と、別途ブランドサイトや集客サイトを作ってブランディングを行う場合があります。

More

採用サイト制作

採用サイトは、コーポレートサイトと同様、求職者の心に響くためのブランディング視点が必要になります。求職者の琴線に触れる非金銭的ポイントと貴社の強みや特徴をきちんと整理し、伝わるサイトを制作いたします。

More

ECサイト制作

ECサイトは、事業の形態や規模によって求められる内容や機能が異なります。
アルラボではお客様の事業内容や求められる結果に応じてさまざまな形態のECサイトをご提案しています。

More

サービス一覧

Webマーケティング
集客対策業務

リスティング広告運用

検索ユーザーに貴社のビジネスの接点を作るリスティング広告。
限られた予算の中で費用対効果を重視した最適なリスティング広告運用を行います。

More

SNS・YouTube広告運用

検索ユーザーだけでなく、潜在ユーザーにも適切にアプローチできるFacebookやInstagramなどのSNS広告を運用します。
エリアや年齢性別など、細かくターゲットをセグメントし、適切なユーザーへアプローチします。

More

SEO対策

サイトの検索表示順位を上昇させるSEO対策。
内部施策を標準化し、サイトの構造を正しくクローラーに伝え、適切な検索キーワードからユーザーが求める情報とは何なのかを追求します。

More

コンテンツマーケティング

ユーザーにとって価値のあるコンテンツを継続的に発信し、幅広いワードでアプローチするユーザーをキャッチします。

More

MEO対策

近年重要視されているMEO(Map Engine Optimization)
Googleマップでの検索結果において上位表示させる対策です。アルラボではGoogleマイビジネスの最適化のほか、サイテーション施策など、上位表示に必要なノウハウをご提供可能。

More

Webアクセス解析

ユーザーの属性や特徴、そして行動を分析し、コンバージョンに繋がる課題を解決します。ウェブサイトを着実に成長させる指標としてアクセス解析からの改善提案を行います。

More

お問い合わせ
Contact

私たちは、お客様のビジネスを成長させ、
より前に進ませるためにともに考え、創るWeb制作会社です。

ホームページの新規・リニューアル制作から
ブランディング・広告運用・SEO対策などWeb集客導線を作ります。

お問い合わせ・ご相談

ホームページ制作・広告運用・SEOなど
ご相談はお気軽にご相談ください。

お問い合わせ・ご相談

お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。

0952-20-1501(佐賀)

092-717-3446(福岡)

平日:9:00~17:00