tuckQ score 64
2017/08/19 21:24 投稿
| 子テーマのCSSが部分的に反映されない。 |
| ###前提 |
| - WordPressの |
| - WordPressの[writee](https://ja.wordpress.org/themes/writee/)というテーマを使用しております。 |
| - 子テーマでCSS設定しても部分的に反映されないスタイルがあります。 |
| - ソースを確認したところ「親スタイル→子スタイル→親スタイル→その他のスタイル」のような順でCSSが当たっていることがわかりました。 |
| ###実現したいこと |
| 子スタイルが一番最後に当たるスタイルになるようにしたいです。 |
| ###発生している問題・エラーメッセージ |
| ソースのCSS書き出し順は以下のような感じです。 |
| ``` |
| <link rel='stylesheet' id='parent-style-css' href='http:// |
| <link rel='stylesheet' id='child-style-css' href='http:// |
| <link rel='stylesheet' id='WRT-style-css' href='http:// |
| <link rel='stylesheet' id='WRT-main-style-css' href='http:// |
| <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') |
| ); |
| } |
| ``` |
