質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.76%

CSSをカスタムフィールドを記入したPHPで作成し、head内に.cssファイル形式で自動出力。出力バスでhome_urlを使用したです。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,727

JP_Shiba_Inu

score 8

長くなりますが宜しくお願い致します。

前提・実現したいこと

CSS内でPHPの変数を使い、最終的に.phpではなく.cssのファイル形式で自動的に<head>内に出力。その際に小テーマディレクトリのURLではなくhome_urlのバスを<head>内に出力したいです。


小テーマのURL [get_stylesheet_directory()]を使用すると上手くCSSファイルを自動作成できるのですがhome_url()を使用するとCSSファイルが自動で作成できず空のままになってしまいます。

試したこと

プラグインの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_urlcustom-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.phplayoutsフォルダをサイトアドレス (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/


大変長くなりましたが以上、ご教授宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

以下の箇所でエラーが返ってきていることを、戻り値を表示して確認してみてください。

file_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 15:28

    質問ばかりですみません。
    現在テストしているアドレスがサブドメインなのですがそれは関係してますでしょうか?
    エックスサーバーが/home/サーバーID/〇〇〇.com/public_html/サブドメイン名/inc/custom-styles.phpの様な構造なのですが関係してますでしょうか?
    function generate_options_cssで指定しているパスが間違っている可能性はありますでしょうか?
    お忙しいとは思いますが引き続き宜しくお願い致します。

    キャンセル

  • 2017/03/21 16:09

    申し訳ありません。
    allow_url_fopenが外れだと、私にも原因は見当がつきません。

    file_put_contentsがエラー値であるfalseを返しているとすると、パスの問題である可能性はあります。
    念のため、パスが予期している値か確認し、そのあたりの確認した結果を質問文へ追記されてはいかがでしょうか。
    (エックスサーバーであること、サブドメインであること、allow_url_fopenはonであることなどの細かい情報も追記されると、有識者からの適切な回答が期待できるかもしれません)

    キャンセル

  • 2017/03/21 18:01

    miz様、前回共に大変助かっております。ありがとうございます。
    一度カスタマイズしていない状態でサブドメインでないURLにWordPressとAdvanced Custom Fieldsをインストールしてもう一度一から検証していきますので細かい点などその都度更新していきたいと思います。
    何かお気付きの点がございましたら引き続きアドバイズ頂けたら幸いです。

    キャンセル

+2

CSSとして保存せずにhead要素内にstyle要素を入れるのが良いような気がします。

<style>
body {
 background-color:<?php the_field('default_body_color','option');?>;
}
</style>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/22 16:25

    kei344様
    検証と言う言葉が間違っておりました。
    $_SERVER['DOCUMENT_ROOT']を記述した選択に自信がないので、このコードを使用しても大丈夫かお答えいただければと思いました。言い回しが分かりづらく申し訳ないです。

    キャンセル

  • 2017/03/22 16:45

    元の指定の何が問題で、なぜ $_SERVER['DOCUMENT_ROOT'] なら問題ないのかがわかっているならそれでいいのでは?
    書かれている構成から、ABSPATHを利用しても同じ結果が得られるとは思います。(変える必要はありません)

    キャンセル

  • 2017/03/22 17:22

    kei344様
    回答ありがとうございます。しばらくこれでサイト運用していきたいと思います。
    この度はありがとうございました。非常に勉強になりました。

    キャンセル

check解決した方法

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様この度は回答ありがとうございました。

大変勉強になりました。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • PHPに関する質問
  • CSSをカスタムフィールドを記入したPHPで作成し、head内に.cssファイル形式で自動出力。出力バスでhome_urlを使用したです。