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

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

ただいまの
回答率

90.51%

  • WordPress

    7181questions

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

  • CSS

    5763questions

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

WordPress 固定ページごとにCSSを読み込ませる方法

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 652

ara12

score 3

前提・実現したいこと

WordPressで固定ページにcssを読み込ませたい

発生している問題・エラーメッセージ

WordPressのsimplecity2を利用しています。
トップページだけ表示される画像の幅を大きくしたく外部cssを読み込ませようとしているのですが、うまい事いきません。
https://teratail.com/questions/32918
を参考にカスタムフィールドを作成し、functions.phpに必要事項を入力しましたが、
外部cssが読み込まれません。

記載する場所が違うのか、それとも作成したcssの記述方法が違うのかさっぱりわかりません。

教授いただけたら幸いです。 

もしくは初心者でも分かるサイトがあれば教えていただけると大変嬉しいです。
よろしくお願いいたします。

該当のソースコード

ここに言語を入力

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • ruuusaamarki

    2017/10/29 14:04

    外部cssが読み込まれませんというところは <link>タグが表示されていないのか、cssのパスだけ通っていないのか というところも確認していただきますと(デベロッパーツールなどで) 問題の発見もしやすくなると思います。

    キャンセル

  • ara12

    2017/10/29 18:51

    ありがとうございます。記載していただいています様に<link>タグが表示されているか確認してみました。cssはstyle.cssが適応されている様です。

    キャンセル

回答 2

checkベストアンサー

+1

特定のテンプレートのみにCSSを追加する
http://wpcj.net/1587

カスタムフィールドなど使わなくてもCSSファイルを指定して以下のような記述をfunctions.phpに追記し、テーマディレクトリの中にCSSファイルを設置して読み込ませれば良いだけです。

function add_page_style() {
    if ( is_front_page() ) {
        wp_enqueue_style( 'page-style', get_template_directory_uri() . '/CSSファイル名.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'add_page_style' );

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/30 07:44

    記載いただきました記述をfunctions.phpに読み込ませたところ、エラーがでていました。
    functions.phpと同じディレクトリ内にcssファイルをおいています。
    確認したところ存在しないフォルダを探しにいっている様子です。
    get_template_directory_uri() .で吐き出したURLが違っているということになるのでしょうか。ファイル指定をしてみます。
    ありがとうございます。

    キャンセル

  • 2017/10/30 09:12

    子テーマですか?
    でしたら

    get_template_directory_uri



    get_stylesheet_directory_uri

    に変えてください。

    キャンセル

  • 2017/10/31 04:58

    すみません。子テーマでした。
    get_stylesheet_directory_uriに変更したところ、エラーは無くなりましたが
    変化なしです。

    キャンセル

  • 2017/10/31 09:04

    キャッシュが効いている可能性は無いですか?
    また、ブラウザでファイルが読み込まれているかソースを確認して確認してみてください。

    キャンセル

  • 2017/10/31 20:58

    ありがとうございます。
    キャッシュを削除したら、成功しました。
    お手数おかけしました。

    朝、コメントしたつもりだったのですが、コメントがきえてしまっていました。
    ありがとうございました。

    キャンセル

+1

ぱっと思いついたことを書かせていただきます。

1.ソースの確認
リンク先のサンプルソースをそのまま使っていると仮定します。

/* カスタムフィールドで外部CSSを読み込む */
//オリジナル関数include_custom_cssを定義
function include_custom_css(){
//singleページ、または固定ページだったら以下を実行
    if(is_single()||is_page()){
//固定ページの新規追加ページにカスタムフィールドを表示して名前のところにincludeCSSを指定、値のところにcssのパスを指定します。おそらくhttp://example.com/wp-content/themes/simplicity2/kobetsu.cssみたいな感じです。
    if($css = get_post_meta(get_the_ID(), 'includeCSS', true)){
    echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$css}\" />\n";
                        }
                    }
                }
add_action('wp_head','include_custom_css');


まずカスタムフィールドを表示します
カスタムフィールドの新規追加でincludeCSSとcssのパスを指定します。

2.addアクションの優先順位を変えて試してみる。
ご利用のテーマfunctions.php内に複数のwp_headの指定があったため念のため変えてみる。

add_action('wp_head','include_custom_css', 99);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/29 19:21

    ありがとうございます。
    どちらもやってみたのですが、読み込まれませんでした。

    読み込ませたいcssを元のstyle.cssに追記したところ反映されるのでcssの記載方法には問題がないのだと思いますが。
    指定の方法が間違っているのか、phpの記載の場所が違うのか。いろいろやってみている所です。

    キャンセル

  • 2017/10/29 19:37

    すみません、少し確認してないことがあり、回答を修正させていただきました。

    おそらく1のコメントのような形で管理画面から設定してただけると
    大丈夫なのではないでしょうか。

    当方のテスト環境でfunctionsの最下部に参考ページのソースをコピペしたらうまく動きました。

    これでうまくいかない場合は以下をテストしてみてください。

    プラグインをすべて停止してテスト。
    テーマの変更をしていればそちらを確認。(子テーマで構築していればそちらを一旦外してみる)

    キャンセル

  • 2017/10/29 20:44

    To: ruuusaamarkiさん
    リンク先のコードを使うのであればCSSは絶対パスで指定する必要があるのでは?

    キャンセル

  • 2017/10/29 21:01

    kei344さんありがとうございます!
    そうですね、絶対パスのほうが確実ですね!

    キャンセル

  • 2017/10/30 07:46

    ありがとうございます。
    プラグインを外し、子テーマでやっていたのでそれも外してやってみましたが、読み込んでくれませんでした。
    何か別の要因なのかもしれません。

    キャンセル

  • 2017/10/30 13:18

    テストありがとうございます。
    確認させていただきたいのですが
    1.トップページの設定を管理画面からされていますでしょうか。
    -------------------------------------------------------
    管理画面左メニューの【設定】→【表示設定】→
    フロントページの表示という項目から固定ページで該当のページを選ぶ
    -------------------------------------------------------

    2.simplicity2のheada.phpの38行目にwp_head()があると思いますが
    この場所に<link>タグは出ていますでしょうか。

    一つテストとして(すでにやられていたらすみません)
    cssのパスの確認を確かめてみてください。
    画像やその他のファイルに絶対パスでアクセスできるかどうか。
    この辺りはapacheなどサーバの設定でインストールディレクトリが
    環境によって異なるため、回答で提示したパスと変わってくる場合があります。
    ---------------------------------------------------------------------------------
    http://example.com/wp-content/themes/simplicity2/kobetsu.css
    http://example.com/example/wp-content/themes/simplicity2/kobetsu.css
    https://example.com/wp-content/themes/simplicity2/kobetsu.css

    キャンセル

  • 2017/10/31 04:42

    丁寧にありがとうございます。

    1は再度設定してみました。
    2なのですが、heada.phpの38行目のwp_head()には
    -------------------------------------------------------------------------
    <?php wp_head(); ?>
    </head>
    -------------------------------------------------------------------------
    と記載されていて<link>が見当たりませんでしたので、再度simplecity2のheada.phpを新しいものにしてみました。
    が、変化はありません。
    要素を検証では、指定したcssの箇所にERR_ABORTEDと赤字で示されていて、エラーが出ているみたいです。

    キャンセル

  • 2017/10/31 09:56

    uuusaamarkiさん。
    丁寧にありがとうございます。
    ay03さんに教えていただいた方法で解決しました。
    どうもキャッシュが原因だったようです。
    何度か削除していたつもりだったのですが・・・
    何度も、見ていただいてありがとうございます。

    キャンセル

  • 2017/10/31 13:56

    解決されて何よりです!お疲れさまでしたm(_)m
    ちなみにwp_head()という関数で<link>タグが呼び出されるということなので
    (add_action('wp_head'の部分で指定した関数を実行している)
    phpファイルを見ても<link>タグはないと思いますが
    ブラウザからみてhtmlとして吐き出されたソースには<link>タグが出ているかどうかという確認でした。
    言葉足らずでしたが解決したようでよかったです!

    キャンセル

  • 2017/10/31 20:56

    ありがとうございました。

    キャンセル

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

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

関連した質問

  • 解決済

    wordpress MH magazineの投稿ページなどの作成者を非表示にする方法教えてください。

    タイトルの通りなのですが、素人なのでテンプレートを使ってサイトを作っており、投稿者?作成者?の非表示の仕方がわかりません。 どなたかご教授ください。 宜しくお願いいたし

  • 解決済

    wordpressページ構成の仕方

    友人と趣味のサイトを立ち上げたくwordpressにて制作しています。 昨日相談させていただいたのですが、根本的に考え方が間違っているのではないかと思い、別質問させていただきます

  • 解決済

    プラグインChild Pages Shortcodeについて

    プラグインChild Pages Shortcodeについて質問です。 固定ページの親ページに商品一覧を画像付で商品ページを作成すると自動で追加されていく・・・。 みたいなことがで

  • 受付中

    サイトのメイン中央に、検索ボックスを表示させたい

    前提・実現したいこと 表題のとおりですが、ワードプレスで作ったサイトのメイン中央に 検索ボックスを表示させたいんです。 完成イメージはフォトACみたいな感じです 背景画像があっ

  • 解決済

    WP-Members とUser Frontedの相性について

    UserFrontedを使用してフロントにフォームを設置しました。 WP-Membaersも使用しています。 WP-Membersの新規登録やログインフォームは問題ないのですが

  • 解決済

    Font Awesomeが反映されない

    前提・実現したいこと ワードプレスでブログを書いていて、Font Awesomeを使いたいのですがアイコンが表示されないです。 固定ページではしっかりと表示されるのですが、新規投稿

  • 解決済

    Wordpress : 塗りつぶし解除

    Wordpress初心者です。 固定ページにてカテゴリー毎の人気記事を掲載しようと試みましたところ、こちらが意図しない青色の塗りつぶしが生じてしまいました。この塗りつぶしを解除

  • 受付中

    WP でStripe で決済できるようにしたい

    お世話になります。 現在、https://crosspiece.jp/how-to-use-stripe/ このサイトがわかりやすいので、このサイトのとおりすすめてるのですが、

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

  • WordPress

    7181questions

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

  • CSS

    5763questions

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