LoginSignup
@cyout

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

Wordpressで親とその子ページのみのCSSをあてたい

Q&A

Closed

PHPWordPress

Wordpressで特定の親ページとその子ページだけに専用のCSSを適応させたいです。

現在の記述

(スラッグ名は実際のものとは違います)
親ページのスラッグが

https://domain.com/sample

だった場合の記述になります。

function enqueue_scripts(){

  if( is_page('sample') || is_parent_slug() === 'sample'):
		wp_enqueue_style('style-sample', get_stylesheet_directory_uri() .'/assets/css/sample.css');
	endif;
 }

 add_action('wp_enqueue_scripts', 'enqueue_scripts');

これだと親ページの

https://domain.com/sample

ここには問題なく反映されたのですが
子ページ、孫ページにあたる

https://domain.com/sample/children
https://domain.com/sample/children/grandchild

のページはエラーが出てしまいページすら表示されません。

現在使用しているテーマは【Lightning】になります。

ご教示いただきたいです。
よろしくお願いします。

0 likes

8Answer

makkie
@makkie

こんにちは。
＞子ページ、孫ページにあたる
＞のページはエラーが出てしまいページすら表示されません。
このエラーがあることで、CSSが適用されていないことは明白なので、そのエラーメッセージを見て、対処をしたらどうでしょうか？

wp enqueue styleを使うにあたって、省略してはいけないパラーメータもあるので、つまづいた時はCodex見ると良いと思います。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

1Like
musica_gatto
@musica_gatto

@cyout さん

横からで失礼いたします。
コメントとさせて頂くと、エラーメッセージの内容は、
functions.phpの251行目に記述している「is_parent_slug()」という関数が存在しません という内容です。

is_parent_slug() は、WordPressの公式の関数の中に存在しませんので、エラーとなっています。
Webを検索したところ、色々な人が、is_parent_slug() を使った例を挙げているようですが、is_parent_slug() という関数を自作して使っておられるようです。

そのため、functions.phpの中に、下記のコードを入れて実行して頂くと、どうでしょうか？
親ページのslugを返却する関数です。

function is_parent_slug() {
    global $post;
    if ($post->post_parent) {
        $post_data = get_post($post->post_parent);
        return $post_data->post_name;
    }
}
1Like

Comments

  1. @cyout

    Questioner

    @musica_gatto さん
    ありがとうございます！
    無事CSSあてることができました！！

    ネットにあるものをそのまま入れていたため全く気づきませんでした💦
    本当にありがとうございます！！
cyout
@cyout

@makkie さん
@musica_gatto さん
ご回答本当にありがとうございます。
とても助かりました。

今後もっと勉強して活用できるようにしていきたいと思います。

1Like
makkie
@makkie

@cyoutさん、最後までお付き合いできなくてすみませんでした。
解決できてよかったです。
次、お困りごとありましたら、最初にエラーメッセージをご提示いただけると、解決まで時間かからずに回答も付きやすいかと思います。
勉強頑張ってくださいね。

@musica_gatto さん、フォローありがとうございました。

1Like

Comments

  1. @cyout

    Questioner

    独学でやっている為、質問するのもよくわかってませんでした💦
    今後はエラーメッセージも含め持ってる情報は全て提示するよう心がけます！
    ありがとうございました！
cyout
@cyout

確認不足でした…

https://domain.com/

親とかよりも前のドメインページもエラーで表示がされてませんでした。

通常のCSSも読み込みながら、特定の親子ページのみのCSSを反映させたいです。

0Like
cyout
@cyout

@makkie
ご回答ありがとうございます。

独学でやってるためあまり詳しくなく…
記述位置としてはfunction.phpの最下部に記述しました。
特に省略したつもりはなかったのですがどこかが省略されているということでしょうか？

デバックモードで確認したところ

if( is_page('sample') || is_parent_slug() === 'sample'):

ここでエラーがでてるようでした。

全く的外れなことを言っていた場合すみません。

0Like
makkie
@makkie

エラーメッセージの内容を見ないと、どこに問題があるかはわからないのですが、
Codex（リンク先）はご覧になりましたか？
Codexではwp_enqueue_style();の()の中に指定するパラーメータで必ず記述しなくてはいけないパラーメータと記述しなくてもいいパラメータがあり、パラメータ同士を,で区切ります。

cyoutさんのコードだと、if( is_page('sample') || is_parent_slug() === 'sample'):の下に記述しているwp_enqueue_style('style-sample', get_stylesheet_directory_uri() .'/assets/css/sample.css');の箇所に不足もしくは記述ミスがあるのではと思った次第です。

以下、cyoutさんが書かれたコードの``wp_enqueue_style`のパラメータ部分をパラメータ毎に改行して見やすくしました。

wp_enqueue_style(
'style-sample',
get_stylesheet_directory_uri() .'/assets/css/sample.css'
);

記号の全角半角、変なところにスペースが入っていてもエラーになる場合があるので、Codexの情報と照らし合わせながら、確認してみてください。

エラーメッセージがわからないので、もやっとしたアドバイスしか出来なくてすみません。

0Like

Comments

  1. @cyout

    Questioner

    詳細ありがとうございます!

    どこが悪いか確認するのに時間がかかりそうですが…💦

    下手な説明なのにご確認いただきありがとうございます!

    一度確認し、また不明点出てきた場合質問させていただくかもしれません…

    解決した場合はクローズさせていただきます！
cyout
@cyout

@makkie さん
Codexを見ていたのですが、やはり原因がよくわかりませんでした…

もしお時間あればエラーを記載しますのでご確認いただけると助かります。

Fatal error: Uncaught Error: Call to undefined function is_parent_slug() in /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning-child-sample/functions.php:251 Stack trace: #0 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/class-wp-hook.php(308): enqueue_scripts() #1 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/class-wp-hook.php(332): WP_Hook->apply_filters() #2 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/plugin.php(517): WP_Hook->do_action() #3 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/script-loader.php(2180): do_action() #4 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/class-wp-hook.php(308): wp_enqueue_scripts() #5 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/class-wp-hook.php(332): WP_Hook->apply_filters() #6 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/plugin.php(517): WP_Hook->do_action() #7 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/general-template.php(3043): do_action() #8 /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning/_g3/header.php(18): wp_head() #9 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/template.php(785): require('...') #10 /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning/functions.php(148): load_template() #11 /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning/_g3/index.php(10): lightning_get_template_part() #12 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/template.php(785): require('...') #13 /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning/functions.php(148): load_template() #14 /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning/index.php(7): lightning_get_template_part() #15 /var/www/vhosts/sample.com/httpdocs/sample/wp-includes/template-loader.php(106): include('...') #16 /var/www/vhosts/sample.com/httpdocs/sample/wp-blog-header.php(19): require_once('...') #17 /var/www/vhosts/sample.com/httpdocs/index.php(17): require('...') #18 {main} thrown in /var/www/vhosts/sample.com/httpdocs/sample/wp-content/themes/lightning-child-sample/functions.php on line 251

エラーの行数で出てる部分の記述が

if( is_page('sample') || is_parent_slug() === 'sample'):

この部分になります。

よろしくお願いします。

0Like

Your answer might help someone💌

LoginSign Up