投稿2017/03/21 01:51
編集2017/03/21 09:46長くなりますが宜しくお願い致します。
CSS内でPHPの変数を使い、最終的に.phpではなく.cssのファイル形式で自動的に<head>内に出力。その際に小テーマディレクトリのURLではなくhome_urlのバスを<head>内に出力したいです。
プラグインのAdvanced Custom Fieldsにてテーマのoptionページを作成しています。
PHPファイルにカスタムフィールドを記入する為にフィールドタイプでカラーピッカーを選択し以下のコードを作成しました。
フィールド名はdefault_body_colorとします。
<?php the_field( 'default_body_color' ); ?>
このコードを小テーマディレクトリにincフォルダを作成してcustom-styles.phpを作成します。
そしてcustom-styles.phpに以下のコードを記入しました。
body { background-color:<?php the_field('default_body_color','option');?>; }
続いてfunctions.phpファイルに次のコードを追加します。
function generate_options_css() { $ss_dir = get_stylesheet_directory(); ob_start();//すべての出力をバッファに取り込む require($ss_dir . '/inc/custom-styles.php');// custom-style.phpファイルを取得する $css = ob_get_clean();//出力を変数に格納した後、バッファをフラッシュする file_put_contents($ss_dir . '/layouts/custom-styles.css', $css, LOCK_EX);//cssファイルとして保存する } add_action( 'acf/save_post', 'generate_options_css', 20 );//出力を解析し、保存時にCSSファイルを書き込む
小テーマディレクトリにlayoutsフォルダを作成しておきます。
最後にfunctions.phpファイルに以下のコードを記入しておきます。
function theme_enqueue_styles() { wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/layouts/custom-styles.css' ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
そしてAdvanced Custom Fieldsで作成したoptionページのカラーピッカーでカラーコードを選択するとcustom-styles.cssが自動で作成され、サイトの**<head>内に以下のコードが出力されます。custom-styles.cssは自動で作成されるのでlayoutsフォルダ内は空ですがoptionページをUpdateすると自動的にlayoutsフォルダ内にcustom-styles.css**が作成されるしくみです。
<link rel='stylesheet' id='custom-styles-css' href='https://〇〇〇.com/wp-content/themes/〇〇〇-child/layouts/custom-styles.css' type='text/css' media='all' />
optionページのカラーピッカーでカラーコードをホワイトで選択するとcustom-styles.cssには例えば以下の様に出力されます。
body { background-color: #FFFFFF; }
この方法にて小テーマのURLでcustom-styles.cssをはき出す事には成功しました。
しかし、やりたい事としてget_stylesheet_directory()を使用せずhome_urlでcustom-styles.cssを出力したいです。
<head>内に以下の様なコードを出力したです。
<link rel='stylesheet' id='custom-styles-css' href='https://〇〇〇.com/layouts/custom-styles.css' type='text/css' media='all' />
そこで試した事としましてfunctions.phpファイルのコードを以下の様に変更しました。
function generate_options_css() { $ss_dir = get_home_url();//この部分を変更しました。 ob_start();//すべての出力をバッファに取り込む require($ss_dir . '/inc/custom-styles.php');// custom-style.phpファイルを取得する $css = ob_get_clean();//出力を変数に格納した後、バッファをフラッシュする file_put_contents($ss_dir . '/layouts/custom-styles.css', $css, LOCK_EX);//cssファイルとして保存する } add_action( 'acf/save_post', 'generate_options_css', 20 );//出力を解析し、保存時にCSSファイルを書き込む
変更部分は下記部分です。
$ss_dir = get_stylesheet_directory(); >>変更>> $ss_dir = get_home_url();
続いてincフォルダとincフォルダ内のcustom-styles.phpとlayoutsフォルダをサイトアドレス (home_url)直下に移動しておきます。
最後にfunctions.phpファイルを以下の様に変更します。
function theme_enqueue_styles() { wp_enqueue_style( 'custom-styles', get_home_url() . '/layouts/custom-styles.css' );//この部分を変更しました。 } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
変更部分は下記部分です。
wp_enqueue_style( 'custom-styles', get_stylesheet_directory_uri() . '/layouts/custom-styles.css' ); ↓↓↓変更↓↓↓ wp_enqueue_style( 'custom-styles', get_home_url() . '/layouts/custom-styles.css' );
そしてAdvanced Custom Fieldsで作成したoptionページのカラーピッカーでカラーコードを選択し、Updateしたのですが反映されませんでした。
<head>内を確認しますと下記の様にwp_enqueue_styleで指定したget_home_url()は出力されているようです。
<link rel='stylesheet' id='custom-styles-css' href='https://〇〇〇.com/layouts/custom-styles.css' type='text/css' media='all' />
しかし、コードにはエラーが出ていてcustom-styles.cssがない状態になってしまいました。
layoutsフォルダ内をftpで確認してもcustom-styles.cssは作成されず空でした。
どの様に修正したらhome_url直下にcustom-styles.cssが作成できる様になりますでしょうか？
$ss_dirの記述方法が間違っている様に思うのですが自分の力では特定できず困っております。
[使用環境]
Wordpress Version：v4.7.3
Advanced Custom Fields PRO：v5.5.10
PHP version：v7.0.9
サーバー：エックスサーバー
php.ini：allow_url_fopenとallow_url_includeを共にonにしてあります。
WWWありとなし、共に全ページ.htaccessにてSSL化してあります。
[カスタマイズ箇所]
wp-config.php内にてwp-contentフォルダをcontentに変更
site_urlとhome_urlを変更(サブドメインを使用)
site_url：https://abc.〇〇〇.com/wp
home_url：https://abc.〇〇〇.com
Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in "include
上記のエラーが発生した為、php.ini内の"allow_url_include"がoff設定をonに変更
**参考にしたサイト : **http://www.designly.net/blog/custom-stylesheet-in-wordpress-with-advanced-custom-fields-and-the-acf-options-add-on/
大変長くなりましたが以上、ご教授宜しくお願い致します。
回答3件
0
CSSとして保存せずにhead要素内にstyle要素を入れるのが良いような気がします。
PHP
1<style> 2body { 3 background-color:<?php the_field('default_body_color','option');?>; 4} 5</style>
投稿2017/03/21 08:18
総合スコア69625
0
以下の箇所でエラーが返ってきていることを、戻り値を表示して確認してみてください。
PHP
1file_put_contents($ss_dir . '/layouts/custom-styles.css', $css, LOCK_EX);
file_put_contents()でhttp://の形式を開くには、
php.ini内の"allow_url_fopen"がonである必要があるようです。
そのあたりを確認してみてはいかがでしょうか。
http://php.net/manual/ja/function.file-put-contents.php
（「注意」のヒントあたりをご確認ください）
投稿2017/03/21 03:59
退会済みユーザー
総合スコア0
0
自己解決
最終的にDOCUMENT_ROOTを指定して解決いたしました。
functions.phpに記入しましたコードは以下になります。
function generate_options_original_css() { $ss_dir = $_SERVER['DOCUMENT_ROOT'];//変更箇所 get_stylesheet_directory(); ob_start(); require($ss_dir . '/inc/custom-styles.php'); $css = ob_get_clean(); file_put_contents($ss_dir . '/css/layouts/custom-styles.css', $css, LOCK_EX); } add_action( 'acf/save_post', 'generate_options_original_css', 20 );
miz様,kei344様この度は回答ありがとうございました。
大変勉強になりました。
投稿2017/03/22 08:29
編集2017/03/22 08:33総合スコア8
あなたの回答
tips
プレビュー
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/21 08:57
2017/03/21 09:16
2017/03/21 23:56
2017/03/22 02:21
2017/03/22 07:25
2017/03/22 07:45
2017/03/22 08:22