2017-05-21 19 views
-4

私は現在、ワードプレスでeSportsチーム用のウェブサイトを作成しています。私はちょうど問題に遭遇しました。ソート方法を覚えていません。私はこれを行うための方法があるChromeの拡張機能を作るから覚えているが、私は覚えていない、と私は今ここにいる理由:)あなたが絵に見ることができるようワードプレスCSSを上書きしますか?

First code は、それがであるものであることがありますCSSと私は他のページのためにそれを保持する必要がありますが、私は私の1ページがそれを上書きしたい。カスタムCSSを追加できるボックスがありますが、コードを追加すると古いコードで上書きされます。私はこれがhappends理由を知っているが、

Overwritten code

は、だから私の質問は、どのように私は私の新しいCSSは私の昔のCSSを上書きすることです(私は避けることを好むだろう)、元のCSSを変更することなく、それを修正しない方法?

+1

質問する前に調査してください! [Wordpress CSSを上書きする](https://css-tricks.com/methods-overriding-styles-wordpress/) – Sank6

答えて

0
Yo can overwrite CSS with adding child selectors for your specified DIV element. 

フィドル例ここhttp://jsfiddle.net/JfGVE/2031/

+0

なぜこれがダウンリストされたのか分かりますか? – Krishna9960

+0

私はそれがなぜdownvoted、私のポストと同じであるか知っていない:/これは私のために、私はまだ元のCSSに触れることを意味するか、または#headerer私はできません。それは私が2番目のCSSに触れることができる理由です、それは与えられたページにのみリンクしています。だから、最初のCSSを上書きできる2番目のCSSの中に何かが必要です。 (!importantコマンドのように) –

+0

特異度を上げてみてください。ここにリンクhttps://css-tricks.com/specifics-on-css-specificity/ – Krishna9960

1

現在、特定の要素に適用されるどのようなコードを検査すると、Chromeはまた、特定のセレクタが適用されるかを表示しますそのルールと(私は!重要試してみましたが、それは何もしません)それはから来ている。あなたがする必要があるのは、より強力なセレクターを書くことだけです。あなたの例では、body:not(.template-slider) #Header { }は...

理想的
body.page:not(.template-slider) #Header {/* CSS here */ } 

によって上書きされます、しかし、それは現在のセレクタの特異性を増加する必要がありますが、最後にあなたのルールを適用し、使用していないに最善だろう同じセレクター。これを行う最も簡単な方法は、テーマ/ WPのインストールがうまくいかない限り、アクティブなテーマのstyle.cssの末尾にCSSを追加することです。

ところで、自分で開発していないテーマを使用している場合、アクティブなテーマは子供のテーマにする必要があります。これは重要ですが、なぜそれが重要なのか、どのような利点があるのか​​、どのように行うのかなど、個別に検討する必要があります。

(遠いことで、推奨WordPressの方法)あなたのアクティブなテーマのstyle.cssへの書き込みはできない場合は、常にあなたの中に置かれ、お好みの別のスタイルシート(すなわちmy-custom-style.css)、にすべてのあなたのCSSを置くことができますテーマのフォルダアクティブ、そして、あなたのアクティブなテーマのfunctions.phpに次のコードを使用して登録:

function add_styles_to_your_active_theme() { 
    wp_enqueue_style (
    'my-custom-style', 
    get_stylesheet_directory_uri() . '/my-custom-style.css', 
    array(), 
    null 
); 
} 

add_action('wp_enqueue_scripts', 'add_styles_to_your_active_theme'); 

追加し、それがロードさを確認した後、あなたは依存関係として登録されている他のスタイルシートを指定することによって、<head>タグでその位置を変更することができます上記の第3引数を使用してを呼び出す。

sの他の登録されたスクリプトをその配列に配置する必要があります。 ハンドルは、いずれのページの<head>タグを調べて、最後にロードされた<link rel="stylesheet" />タグを見つけ、idから-cssタグを削除することによって見つけることができます。たとえば、最後に読み込まれたスタイルシートのリンクIDがsome-theme-style-cssの場合、wp_enqueue_style()への呼び出しの3番目のパラメータはarray('some-theme-style')である必要があります。

その後、もう一度<head>タグを確認し、最後にタグを付けてください。そうでない場合は、それぞれ<link />id$depsアレイに追加し、-cssを最後まで削除します。スタイルシートが最後にロードされたら、適用セレクタをコピー・ペーストして、必要なものにルールを変更して適用します。

ただし、通常の使用条件では、上記の方法は不要です。通常は子テーマを使用し、style.cssCSSを入れてください。テーマやプラグインのクリエイターのために予約されているような、このような細かいことは心配する必要はありません。

関連する問題