mami6500
@mami6500

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

[Wordpress]functions.phpにcssを読み込ませたい

解決したいこと

functions.phpにcssを読み込ませたい

発生している問題・エラー

cssが反映されない

該当するソースコード

ソースコードを入力
```<?php

// functions.php に CSS を読み込む処理を追加する
function yori_enqueue_styles()
{
	// YORI テーマの style.css を読み込む
	wp_enqueue_style('yuri-style', get_template_directory_uri() . '/test.css', array(), '1.0.0', 'all');
}
add_action('wp_enqueue_scripts', 'yuri_enqueue_styles');


//デフォルトパターン消去
add_filter('should_load_remote_block_patterns', function () {
	return false;
});

//カテゴリー追加
add_action('init', function () {
	register_block_pattern_category(
		'ms-cat',
		array('label' => __('Category', 'my-plugin'))
	);
	register_block_pattern_category(
		'text',
		array('label' => __('aaa', 'my-plugin'))
	);
});

//パターン追加
add_action('init', function () {
	register_block_pattern(
		'my-awesome',
		array(
			'title'       => __('タイトル', 'my-plugin'),
			'content'     => '
			<!-- wp:paragraph -->
			<p class="title">タイトル</p>
			<!-- /wp:paragraph -->',
			'categories'  => array('text'),
		)
	);

	register_block_pattern(
		'my-plugin/my-awesome-pattern',
		array(
			'title'       => __('Two buttons', 'my-plugin'),
			'content'     => '<!-- wp:buttons -->
                <div class="wp-block-buttons">
                    <!-- wp:button -->
                    <div class="wp-block-button">
                        <a class="wp-block-button__link"></a>
                    </div>
                    <!-- /wp:button -->
                    <!-- wp:button -->
                    <div class="wp-block-button is-style-outline">
                        <a class="wp-block-button__link has-text-color"></a>
                    </div>
                    <!-- /wp:button -->
                </div>
                <!-- /wp:buttons -->',
			'categories'  => array('ms-cat'),
		)
	);
});



### 自分で試したこと
ディレクトリの確認(functions.phpと同じ階層にtest.cssを配置)
0

1Answer

テーマの名前が「YORI」で合ってるならyuri_enqueue_styles、つまり「o」が「u」になってます。
あとハンドルもyuri-styleになってます。その他もよく確認なさって下さい。

0Like

Comments

  1. @mami6500

    Questioner

    テーマの名前はYURIで合ってきますので、そこは問題ありません。

    そのた気づいた点がありましたら教えていただけると幸いです。

  2. @mami6500

    ここで定義している関数名と add_action() に渡している関数名が違います(yori_...yuri_...)。またコメントには style.css を読み込むと書いてありますがコードでは test.css を読み込んでいます。

    function yori_enqueue_styles()
    {
    	// YORI テーマの style.css を読み込む
    	wp_enqueue_style('yuri-style', get_template_directory_uri() . '/test.css', array(), '1.0.0', 'all');
    }
    add_action('wp_enqueue_scripts', 'yuri_enqueue_styles');
    
  3. テーマの名前はYURIで合ってきますので、そこは問題ありません。

    言葉足らずで申し訳ないのですが、uasiさん(フォローありがとうこざいます)が仰るように定義してる関数名とadd_actionに指定されているコールバック関数名が違っています。

    他のアクション関数に渡されているコールバック関数の書き方と規則性が無いのと、こういったタイプミスの事故を防ぐため(このような関数は再使用しないことが多い)にも無名関数で書いた方がよろしいかと思われます。

    - function yori_enqueue_styles()
    - {
    - 	// YORI テーマの style.css を読み込む
    - 	wp_enqueue_style('yuri-style', get_template_directory_uri() . '/test.css', array(), '1.0.0', 'all');
    - }
    - add_action('wp_enqueue_scripts', 'yuri_enqueue_styles');
    
    + add_action('wp_enqueue_scripts', function () {
    + 	wp_enqueue_style('yuri-style', get_template_directory_uri() . '/test.css', array(), '1.0.0', 'all');
    + });
    
  4. @mami6500

    Questioner

    コメントありがとうございます。

    // functions.php に CSS を読み込む処理を追加する
     add_action('wp_enqueue_scripts', function () {
    	wp_enqueue_style('yuri-style', get_template_directory_uri() . '/test.css', array(), '1.0.0', 'all');
     });
    

    上記のように修正させていただいたのですが、まだcssが反映されない状況です。
    その他修正点などございますでしょうか?

  5. cssが反映されない状況

    ここで言うCSSが反映されないは範囲が広すぎです。原因を切り分けて下さい。

    キャッシュ的問題

    ブラウザ側は常にキャッシュを無効にしておく。
    キャッシュ系プラグインは全て無効にする。

    HTMLとして出力されているか

    出力されているダグを確認した上で反映されてないか?

    test.cssとありますが、普通はテーマヘッダー情報が書かれたstyle.cssを使います。そもそも管理画面上でテーマとして選択出来ていますか?それとも子テーマあるいはプラグインの話をしていますか?
    この点を理解してるしてないで話が大きく変わってきます。

  6. @mami6500

    Questioner

    お返事ありがとうざいます。
    説明不足で申し訳ないです。

    キャッシュ的問題

    キャッシュは何度も確認しています。パターンを再度挿入してみたり、キャッシュも飛ばしていますが、CSSが反映されない状況です。

    出力されているダグを確認した上で反映されてないか?

    タグの出力が確認済みです。
    タグにつけているクラス名に対して+念の為body要素に対してもcssを当てています。

    test.cssとありますが、普通はテーマヘッダー情報が書かれたstyle.cssを使います。

    もちろん理解しています。が、そもそもstyle.scssを作成しており、scssによる原因の可能性も0ではなかったため、今は新しく作成したtest.cssをリンクさせようとしている状況です。
    また、test.cssおよびstyle.cssを置いている階層はfuctions.phpと同じ階層に配置しております。

    そもそも管理画面上でテーマとして選択出来ていますか?

    そちらも確認済みです。試しにブロックパターンをfunctions.phpで追加してみたのですが、WP上で反映されているので、操作しているテーマに間違いはないです。

    子テーマあるいはプラグインの話をしていますか?

    子テーマでもプラグインでもありません。オリジナルテーマとして作成しています。

  7. タグの出力が確認済みです。

    <link href="..../test.css"...>の出力を確認済みならhrefのurlにアクセスしてちゃんとソースが返ってくるか確認してみて下さい。

    ソースが反映されているなら、css自体に問題があります。(念のために申し上げておきますがscssはそのままでは使えません)
    これは質問の範囲外となりますから、自身でブラウザの開発者機能(Chromeに標準搭載されているDevToolsなど)でコードに誤りが無いか調べて下さい。

Your answer might help someone💌