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

Question

現在、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/の中にあるのでパスはあってると思うのですが、調べていてもなかなか解決できなくて困っています。

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

--- 追記 ---

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

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

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

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

Comments

[CHERRY]

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

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

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

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

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

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

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

[hirokuro900]

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

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

Answer 1

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を記載すると無効になります。