Web制作(フリーランスWebデザイナー)

日にち2016/4/8
WordPress

WordPressのプラグインAdvanced Custom Fieldsを使ってCSSを簡単に変更する方法

この記事は書いてから 約 1年 経過しています。 1年以上経過しているので情報が古い可能性があります。

WordPressのプラグインAdvanced Custom Fieldsを使ってCSSを簡単に変更する方法

クライアント様から簡単にテキストカラーやバックグラウンドカラーをこちらで変更したいとのご依頼をいただきました。プラグイン等で簡単に変更出来れば使いたかったのですが、無かったのでAdvanced Custom Fieldsを使って変更出来る様にしました。しかし、これが綺麗なやり方かと言われると微妙です。なので、先にスマートにカラー編集の仕方を紹介してる記事を紹介します。hijiriworld様で紹介されてますのでこちらをおすすめします。

用意するプラグイン

Advanced Custom Fields
CPT UI

Advanced Custom Fieldsのカラーピッカーを使う

WordPressのプラグインAdvanced Custom Fieldsを使ってCSSを簡単に変更する方法

フィールドラベル、フィールド名、フィールドタイプ等入力し、保存してください。ACFは使っている方が多いのでわからなくても検索すればわかります。初めての方でも使いやすいプラグインかと思います。

PHPでACFのフィールドを読み込ませる

シングルページでも大丈夫ですが、固定ページをおすすめします。まずは、page-color.phpなどの名前でつくります。

header {
    background-color: <? $color = get_field('color'); if($color){ echo $color; } ?>;
    color: <? $color = get_field('color'); if($color){ echo $color; } ?>;
}

footer {
    background-color: <? $color = get_field('color'); if($color){ echo $color; } ?>;
}

上記の様にCSSを書きます。どこのカラーを変更させるかはご自身で設定してください。今回はheaderとfooterです。

<? $color = get_field('color'); if($color){ echo $color; } ?>

これがACFのカラーピッカーの色を読み込みます。

固定ページの内容をhead部分に読み込ませる

最後に、index等読み込ませたいページのhead部分に下記のPHPを入れて固定ページを読み込ませたら完了です!

<?php 
    $page_info = get_page_by_path('固定ページのスラッグ');
    $page = get_post($page_info);
    echo $page->post_content;
?>

今回はカラーですが、フォントサイズなども管理画面の固定ページからCSSの変更が出来ます。

facebook twitter

© 2013-2017 visual hallucination.