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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

4897閲覧

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

JP_Shiba_Inu

総合スコア8

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/21 01:51

編集2017/03/21 09:46

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

前提・実現したいこと

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/


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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JP_Shiba_Inu

2017/03/21 08:57

kei344様 回答ありがとうございます。 今回この様な事を実装したいのには訳がありまして、head要素内にカスタムフィールドを使用してのstyle要素が非常に増えてしまった為 フラグインやテーマのstyleを一つのcssにまとめる事が出来たらと思い質問いたしました。 また、style.phpなどのphp関数でcssを書き込む事も試したのですがhead要素内にphpを出力する事に納得できず今回の質問の内容にたどり着いた次第です。 head要素内にstyle要素を入れる方がよい理由というのはどういった点でしょうか? よろしければご教授下さい。
kei344

2017/03/21 09:16

> style要素を入れる方がよい理由というのはどういった点でしょうか? 特に大きな理由はありません。また、head要素内にCSSがたくさんあっても特に問題ないと思います。 質問本文のコードについては、 file_put_contents にURLを渡しているので保存されないと思います。そこはディレクトリ(get_stylesheet_directory())を指定すべきです。(allow_url_fopenは file_get_contentsでのURL取得に対応していると思います) 【PHP: file_put_contents - Manual】 http://php.net/manual/ja/function.file-put-contents.php 【WordPressでpathやURLを取得するためのタグと出力例まとめ | OXY NOTES】 http://oxynotes.com/?p=8590
JP_Shiba_Inu

2017/03/21 23:56

kei344様おはようございます。 回答ありがとうございます。 掲載していただいたサイト、非常に勉強になりました。 file_get_contentsの事を色々調べてみたのですが下記のサイトにたどり着きました。 http://www.flatflag.nir87.com/server-358 このサイトやkei344様から教えていただいたサイトを参考に$ss_dirの部分を$_SERVER['DOCUMENT_ROOT']に変更してみたところlayoutsフォルダに無事custom-styles.cssが保存されました。 しかし、自分の実力では$_SERVER['DOCUMENT_ROOT']の記述のみの変更で正しいのか判断しかねております。 よろしければ検証していただけませんでしょうか? お手数ですが宜しくお願い致します。
kei344

2017/03/22 02:21

> 検証 検証とは?
JP_Shiba_Inu

2017/03/22 07:25

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

2017/03/22 07:45

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

2017/03/22 08:22

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

JP_Shiba_Inu

2017/03/21 05:26

miz様 回答ありがとうございます。 大変お恥ずかしいのですが戻り値の表示方法がわからないのでよろしければ教えて頂ければ助かります。 <?php file_put_contents($ss_dir . '/layouts/custom-styles.css', $css, LOCK_EX); ?> このコードをtest.phpなどに貼り付けてWarningメッセージを読み取れば良いのでしょうか? allow_url_fopenですがエックスサーバーを確認しました所onになっておりました。 お手数ですが宜しくお願い致します。
退会済みユーザー

退会済みユーザー

2017/03/21 05:47

$ret = file_put_contents($ss_dir . '/layouts/custom-styles.css', $css, LOCK_EX); var_dump($ret); die(); みたいな感じです。 ただ、allow_url_fopenがonに設定されているのであれば、別要因のようですね。
JP_Shiba_Inu

2017/03/21 06:28

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

退会済みユーザー

2017/03/21 07:09

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

2017/03/21 09:01

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

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
JP_Shiba_Inu

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問