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

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

ただいまの
回答率

89.20%

wordpressにて子テーマ内のfunction.phpから固定ページへオリジナルcssとjsを読み込ませたいです

解決済

回答 1

投稿 編集

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

hirokuro900

score 25

現在、wordpressのSANGOテーマに子テーマを作成しています。
その子テーマ内のfunction.phpから特定の固定ページ($slug名を指定)にオリジナルのcssとjsを読み込ませたいです。

header.phpからオリジナルのcssとjsを読み込む事には成功しています。
下記はそのコードです。
固定ページのスラッグ名 : page-front.php

<?php wp_head(); ?>
<!-- wp_head()の後にcssを読み込んでいます。 -->

<!---------------->
<!-- CSS読み込み -->
<!---------------->
<?php if (is_page('front')) { ?>

<!-- リセット -->
<link href="<?php echo get_stylesheet_directory_uri();?>
/contents/css/reset.css"rel="stylesheet">

<!-- swiperCSS -->
<link href="<?php echo get_stylesheet_directory_uri();?>
/contents/css/swiper.css" rel="stylesheet">

<!-- animateCSS -->
<link href="<?php echo get_stylesheet_directory_uri();?>
/contents/css/animate.css" rel="stylesheet">

<!-- メインスタイル -->
<link href="<?php echo get_stylesheet_directory_uri();?>
/contents/css/front.css"  rel="stylesheet">

<!------------------>
<!-- Google-Fonts -->
<!------------------>
<link href="https://fonts.googleapis.com/css?29 
family=Cormorant+Garamond|Noto+Serif+JP:500&display=swap" rel="stylesheet">

<?php } ?>


ここからが本題になるのですが問題のfunction.phpです。

<?php
//子テーマのCSSの読み込み
add_action( 'wp_enqueue_scripts', 'enqueue_my_child_styles' );
function enqueue_my_child_styles() {
  wp_enqueue_style( 'child-style', 
      get_stylesheet_directory_uri() . '/style.css', 
      array('sng-stylesheet','sng-option')
    );
}
add_action( 'after_setup_theme', 'enqueue_my_child_gutenberg_styles' );
function enqueue_my_child_gutenberg_styles() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'my-gutenberg.css' );
}

/************************
 *functions.phpへの追記は以下に
 *************************/

// page-front.phpかどうかの分岐
function front_style() {
    if( is_page('front') ) { // 固定ページの$SLUGがfrontだったら
        // 読み込み解除 
        wp_dequeue_style('sng-stylesheet'); 
        wp_dequeue_style('sng-option'); 
         wp_dequeue_style('style'); 
        //  読み込み = reset.css
        wp_enqueue_style( 'front-reset', 
        get_stylesheet_directory_uri() . '/content/css/reset.css', 
        array());
        //  読み込み = swiper.css
        wp_enqueue_style( 'front-swiper', 
        get_stylesheet_directory_uri() . '/contents/css/swiper.css', 
        array());
        //  読み込み = animate.css
        wp_enqueue_style( 'front-animate', 
        get_stylesheet_directory_uri() . '/contents/css/animate.css', 
        array());
        //  読み込み = front.css
        wp_enqueue_style( 'front-style', 
        get_stylesheet_directory_uri() . '/contents/css/front.css', 
        array());
     }
}
add_action( 'wp_enqueue_scripts', 'front_style' );

/************************
 *functions.phpへの追記はこの上に
 *************************/


最後のadd_action( 'wp_enqueue_scripts', 'front_style' );
の 'wp_enqueue_scripts' を 'wp_head' などに変更したりして色々試しているのですが反映されません。
function.phpに上記のコードを書いて実行する時はheader.phpは下記の用に書いています。

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  <meta name="msapplication-TileColor" content="<?php echo get_theme_mod( 'main_color', '#6bb6ff');?>">
  <meta name="theme-color" content="<?php echo get_theme_mod( 'main_color', '#6bb6ff');?>">


  <!------------->
  <!-- タイトル -->
  <!------------->
  <title>test</title>

  <?php wp_head(); // 削除禁止 ?>

cssを保存しているディレクトリは子テーマ内のcentents/css/の中にあるのでパスはあってると思うのですが、調べていてもなかなか解決できなくて困っています。

CSSファイルの階層画像
PHPファイルの階層画像

解決できずに困っています。
どなたか教えて下さい..

--- 追記 ---

情報不足で申し訳ありません。

F12を押してChromeの検証モードにしてからCtrl + Shift + R(スーパーリロード)を
してもcssが読み込まれないです。
この時にキャッシュの削除をしてからスーパーリロードも試しています。

状態としては、
親テーマのstyle.cssが適用されており、それ以外のcssなどは何も適用されていません。

現在出先で、デバックモードの詳細情報は後ほど記述いたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • CHERRY

    2019/10/27 16:54

    > 色々試しているのですが反映されません。

    Webブラウザのキャッシュをクリアしても状況は変わりませんか?
    キャッシュ系のプラグイン等は、使われていませんか?


    「反映されない」だけでは、どのような状態になっているかわかりませんので、どの様になっているのかを具体的に記載していただけないでしょうか。

    Webブラウザに表示されている HTML の内容は、どうなっていますか?

    Webブラウザのデベロッパーツールで確認すると エラーが出ていないですか? 

    Web サーバのログにエラーやメッセージがなにか出ていないですか? 

    WordPress のデバッグモードを有効にすると なにかメッセージが表示されますか?

    キャンセル

  • hirokuro900

    2019/10/27 19:05

    大変お恥ずかしいのですが、wordpressの管理画面からfunctions.phpを確認した所、編集したファイルではなく編集する前のファイルが入っており、FTPソフトを再起動してアップロードをし直したらちゃんと反映されました...

    貴重なお時間をさいて、解決方法を検討していただきありがとうございます。
    WordPressのデバックモードなどをこれからは参考にさせていただきます。

    キャンセル

回答 1

check解決した方法

0

WordPressの管理画面(ダッシュボード)

外観

テーマエディター

編集するテーマを選択(今回はSANGOテーマなのでSNGO Child)

functions.php
を確認した所、変更をしたハズのコードがなく元のコードが記載してあったのでFTPソフト(今回は「FileZilla」)を再起動してもう一度編集したfunctions.phpをアップロードした所正常にfunctions.phpの内容が反映されました。

functions.phpの中身は
子テーマからオリジナルのCSSを特別な固定ページ($Slug名を指定)に反映させる為の内容を記載しています。

wp_dequeue_style('反映を無効にしたいCSSのハンドル名'); 


ifで特定のページの場合の処理
上記のwp_dequeue_styleでそのページで無効にするCSSを記載すると無効になります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • wordpressにて子テーマ内のfunction.phpから固定ページへオリジナルcssとjsを読み込ませたいです