WordpressのエディタでHTMLとCSSを追加しますか？

Question

私は "freestore"の子テーマを使用しています。 （https://en-gb.wordpress.org/themes/freestore/）

シンプルなHTMLとCSSを使用して自分のページの1つにコンテンツを追加しようとしています。 私はテーマのCSSスタイルをstyle.cssで変更することに成功しましたが、独自のHTMLを追加してからCSSを追加してスタイルを設定しようとしています。

「ホームページ」を作成し、wordpress tinymceのテキストエディタを使用して、自分のHTMLを追加できます。 style.cssでCSSを追加しようとすると、スタイルは適用されません。ただし、スタイルをインラインで追加することはできますが、スタイルを外部に追加したいと考えています。

例：私は追加することになり、私のstyle.cssファイルで

<div id="cssTest">TEXT</div>

：：私は行を追加しますwordpressのテキストエディタで

#cssTest { 
    background-color: red; 
} 

CSSスタイル適用されません。しかし、正常に動作しますが、HTMLエディタに以下を追加：

<div id="cssTest" style="background-color: red;">TEXT</div> 

私の質問のいずれかです：

1. 私は、外部スタイルシートを経由して、私のスタイルを適用するにはどうすればよいですか？
2. 自分のテンプレートをそのページに作成し、HTMLを追加する必要がありますか？

Answer 1

子テーマstyle.cssにText Domain: freestore-child parentthemename-childがあるかどうかを確認します。あなたが追加するすべてのcss id/class要素が実装されます。

最も良い方法は、custom.cssファイルを作成し、wp_enqueue_style機能を介して子供のテーマのfunctions.phpにエンキューすることです。

私は、自宅のような特定のページ用にページテンプレートを作成することをお勧めします。

Answer 2

ほとんどの場合、元のテーマに属し、適用しようとしているルールよりも「固有の」CSSルールがあります。これを確認するには、ブラウザツールで要素を調べ、その要素に適用されるCSSルールを確認します。

そのルールとは、例えば

.content main .section_1 .gxt1 { 
    background-color: black; 
} 

だろう場合は、元のルールが含まれている場合、それは

.content main .section_1 .gxt1 #cssTest { 
    background-color: red; 
} 

のように、高い特異性を持つルールを追加上書きする必要があると思います!importantの場合は、!importantも追加する必要があります。だから、

.content main .section_1 .gxt1 { 
    background-color: black !important; 
} 

を上書きするために、あなたは慎重に編集 `style.css`こと）

.content main .section_1 .gxt1 #cssTest { 
    background-color: red !important; 
}