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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

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

Q&A

解決済

1回答

471閲覧

子テーマのCSSが部分的に反映されない。

tuckQ

総合スコア64

WordPress

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

0グッド

0クリップ

投稿2017/08/19 10:21

編集2017/08/19 12:24

###前提

  • WordPressのwriteeというテーマを使用しております。
  • 子テーマでCSS設定しても部分的に反映されないスタイルがあります。
  • ソースを確認したところ「親スタイル→子スタイル→親スタイル→その他のスタイル」のような順でCSSが当たっていることがわかりました。

###実現したいこと
子スタイルが一番最後に当たるスタイルになるようにしたいです。

###発生している問題・エラーメッセージ
ソースのCSS書き出し順は以下のような感じです。

<link rel='stylesheet' id='parent-style-css' href='http://example.com/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' /> <link rel='stylesheet' id='child-style-css' href='http://example.com/wp/wp-content/themes/writee-child/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' /> <link rel='stylesheet' id='WRT-style-css' href='http://example.com/wp/wp-content/themes/writee/style.css?ver=4.8.1' type='text/css' media='all' /> <link rel='stylesheet' id='WRT-main-style-css' href='http://example.com/wp/wp-content/themes/writee/assets/css/style-ltr.css?ver=4.8.1' type='text/css' media='all' /> <style type="text/css">.entry-content a,a:active, a:focus, a:hover{color:#bf9e3b}.social-navigation.theme-colors, .comments-area .comments-list .comment .comment-meta .comment-header .comment-reply, .entry .entry-header .entry-meta .entry-cat, .entry .entry-quote-author, .widget.widget_recent-post .entry-list .entry .entry-meta .entry-cat, .widget.widget_popular-post .entry-list .entry .entry-meta .entry-cat, .widget.widget_posts .entry-list .entry .entry-meta .entry-cat, .widget.widget_recent_posts .entry .entry-meta .entry-cat, .widget.widget_related_posts .entry .entry-meta .entry-cat, .widget.widget_categories ul li a:hover, .widget.widget_product_categories ul li a:hover, .widget.widget_archive ul li a:hover, .widget.widget_archives ul li a:hover, .widget.widget_twitter .tweets-list .tweet a, .widget.widget_recent_comments .recentcomments span a{ color :#bf9e3b}.widget.widget_categories ul li a:before, .widget.widget_product_categories ul li a:before, .widget.widget_archive ul li a:before, .widget.widget_archives ul li a:before .widget.widget_archives ul li a:before {background-color: #bf9e3b }.widget.widget_tag_cloud .tagcloud a:hover { color:#bf9e3b; border-color:#bf9e3b}.pace-running .pace{background-color:#ffffff;} .pace-done .pace{background-color:transparent;} .pace { -webkit-pointer-events: none; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; position: fixed; top: 0; left: 0; width: 100%; z-index:9999; -webkit-transform: translate3d(0, -50px, 0); -ms-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); -webkit-transition: -webkit-transform .5s ease-out; -ms-transition: -webkit-transform .5s ease-out; transition: transform .5s ease-out; } .pace.pace-active { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .pace .pace-progress { display: block; position: fixed; z-index: 2000; top: 0; right: 100%; width: 100%; height: 5px; background:#bf9e3b; pointer-events: none; } </style><script> var RTL = false; </script><style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen"> html { margin-top: 32px !important; } * html body { margin-top: 32px !important; } @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } * html body { margin-top: 46px !important; } } </style>

こテーマのfunction.phpには下記のように記述しております。

###該当のソースコード

<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/assets/css/style-ltr.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/assets/css/style-ltr.css', array('parent-style') ); }

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/19 11:10

WordPressテーマはテーマ名だけではなく取得したURLを質問文に追記ください。(URLにはリンクを張ることができます) また、例示用ドメインはご自身で所有されていない限り example.com, example.jp, example.co.jp など例示用に予約されたドメイン名を利用してください。 http://www.atmarkit.co.jp/fwin2k/win2ktips/801exampledom/exampledom.html
tuckQ

2017/08/19 12:25

ご指摘ありがとうございます。質問内容を修正しました。ご確認のほど宜しくお願いいたします。
guest

回答1

0

ベストアンサー

WordPressの子テーマは、子テーマのfunctions.phpを実行した後、親テーマのfunctions.phpを実行します。そのため、子テーマで親テーマのCSSを読み込むと親⇒子⇒親と読み込むことになります。
親テーマのスタイルは親テーマに任せて、子テーマ側では子テーマのCSSのみを登録するのが手早いでしょう。

当該テーマ inc/functions/theme-functions.php にCSSを登録している関数があり、そこで登録されているハンドル名 'WRT-main-style' を、子テーマの依存スタイルシートに指定すれば順序を親⇒子にできると思います。

インラインのCSSについてはプラグイン等で wp_add_inline_style で登録されている可能性があります。その場合もハンドルを使って順序の登録がされているので、それを調べれば「最後」が特定できると思います。

投稿2017/08/20 05:28

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tuckQ

2017/08/23 13:51

CSSの読み込み順を指定したところ解決することができました。 インラインCSSはwp_headにフックされていたのでこれを調整してみようと思います。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問