mw-wp-fromのcssをテーマcssの前に読み込ませたい

前提・実現したいこと

・実現したいこと
mw-wp-fromのcssに記載されている内容をテーマのcssで上書きしたい
例：ラジオボタン同士の間隔を変更したいなど

・前提
mw-wp-formのcssを直接変更しない
テーマのcssを!importを使って上書きしない
テーマのcssはfunction.phpに記載

発生している問題・エラーメッセージ

テーマのcssの方が読み込み順が先の為、上書きできません。
以下のコメントの箇所に変更するにはどうすればよろしいでしょうか

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
7<!-- ここで/plugins/mw-wp-form/css/style.css　を読みたい -->
8  <link rel='stylesheet' id='add-css-css'  href='〜URL省略/themes/テーマ名/style.css?ver=1583721469' type='text/css' media='screen' />
9</head>
10<body>
11</body>
12<link rel='stylesheet' id='mw-wp-form-css'  href='〜URL省略/wp-content/plugins/mw-wp-form/css/style.css?ver=5.3.2' type='text/css' media='all' />
13</html>
14

行動規範の内容に同意します

回答2件

セレクタの詳細度を上げるんじゃダメなんですか？

セレクタの詳細度が高ければ後から書かれたcssで上書きされることもありません

テーマのcssをMU Formのcssに依存させるなどやってできないことはないものの
コンテンツでMU Formが使われていたらcssを読むというような処理をしているから
cssがページの最後の方で読まれているのだと思います
セレクタの詳細度をあげればどうにかなるようなことを
この処理を崩してまでやることではない気がします

投稿2020/03/09 08:12

KazuhiroHatano

総合スコア7804

To prioritize loading the mw-wp-form CSS before the theme CSS without directly modifying the theme's CSS or using! important, you can enqueue the mw-wp-form CSS file before enqueuing the theme's CSS file. Here's how you can achieve this in your theme's functions.php file:

コードfunction enqueue_custom_styles() {
    // Enqueue mw-wp-form CSS
    wp_enqueue_style( 'mw_wp_form_styles', 'path/to/mw-wp-form.css', array(), '1.0' );

    // Enqueue theme CSS
    wp_enqueue_style( 'theme_styles', get_stylesheet_uri(), array('mw_wp_form_styles'), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );

In this code:

Replace 'path/to/mw-wp-form.css' with the actual path to your mw-wp-form CSS file.
'mw_wp_form_styles' is the handle for mw-wp-form CSS. You can replace it with a more suitable handle if needed.
'theme_styles' is the handle for your theme's CSS. Replace it if your theme uses a different handle.

We're using the dependency parameter in wp_enqueue_style to ensure that the mw-wp-form CSS is loaded before the theme's CSS.

By enqueuing the mw-wp-form CSS before the theme's CSS, you allow its styles to take precedence over the theme's styles without directly modifying either CSS file or resorting to! important.

Here are the best CSS online learning platforms: