Word press CSS 共通設定しているCSSを固定ページ別に適用させる

word press作成の際の備忘録のために書くので忘れずに見直すこと。

また、私のテンプレのみこのやり方が適用されるかもしれないため各テンプレで確認が必要。

word pressを運営しているとphpで書かれているということもあり便利な反面、

共通設定になっている分、細かな設定に迷うときがある。

それが各固定ページへのcssへの適用である。

※私にしか分からないような文面で拙く、且つ、間違いも多分に含まれているのでご理解いただけないかもしれません。申し訳ございません。

 

【idを振ってある、例えば(container)(main)(contents)などに別途適用させたい固定ページ名をclass指定して各固定ページにそれぞれ個別のCSSを適用させる】

【概念】

①word pressは、元々ブログ作成のためのオープンソースで提供されているブログシステムのソフトウェアである。

②テーマによっても違うが基本的に閲覧する画面のファイルとしては、下記のようなphpファイルに分類され構成されている。

【header.php】=上部部分(ヘッダー)

【index.php】=トップページ(最初から決まっているトップページ。コンテンツは投稿で作成するがイメージとしてはコンテンツ部分。)

【page.php】=固定ページ(自分の好きなページを作る際に使われる。コンテンツは投稿で作成するがイメージとしてはコンテンツ部分。)

【sidebar.php】=サイドバーを設置する場合

【footer.php】=下部部分(フッター)

【single.php】=個別の投稿を見るページ

【comments.php】=個別のコメントを見るページ

 

【方法、やり方】

①CSSの基本である1つしかないものにつける【id】を確認する。

※その【id】は基本的に【div】で使用されるため大概htmlファイル側には”【<div id=”container”>~</div>】”などと表記される。

尚、word pressではhtmlを書く際にも、phpファイルに記載している。

phpの言語自体は非常に強いスクリプトで基本的にhtmlと一緒に書かれることが多い。

 

②php側のファイル(別のCSSを適用したいファイル)のクラスを変更する

“【<div id=”container”>~</div>】” ⇒ ”【<div id=”container” class=”●●●”>~</div>】” に変更

※●●●=●●●.php(.phpの前に記載のあるページ名)

 

③CSS側のファイル(いくつかあるが基本的に(container)(main)(contents)などが書かれているcssファイル(style.css、base.css、main.css、common.cssのどれかには通常記載してある)にクラスを追加する

【書き方】

・全ての固定ページに適用したい場合(page.php=.page=全ての固定ページ)
body.page #main {
position: absolute;
top: 200px;
}

※body(要素)の後にスペースは空けず、.pageの後にはスペースを空ける

※上記を訳すと.page(固定ページというくくり)の中のbody(要素)中の#main(id)に対して適用すること、という意味合い。

 

・個々の固定ページに適用したい場合(page.php、fashion.php=.page .fashion=固定ページのなかのfashionの固定ページのみ)

※例えばこちらのサイトの管理者が洋服が好きでその固定ページを1ページ作った場合。

body.page .fashion #breadcrumb {
position: absolute;
top: 195px;
}

※body(要素)の後にスペースは空けず、.page、.fashionの後にはそれぞれスペースを空ける

※上記を訳すと.page(固定ページというくくり)の中の.fashionという固定ページの中のbody(要素)中の#breadcrumb(id)(パン屑)に対して適用すること、という意味合い。

要はCSSで適用するのが訳が分からなくなったときは、内包されているかどうかで考えること。

内容されていなければ全て適用外となる点に注意。

#mainや#breadcrumbなどは【id】なのでそれ単体を表すものだが、基本的にはどの固定ページのどの

要素でも指定CSSを適用させることが出来る。

 

【例】

・個々の固定ページに適用したい場合(page.php、fashion.php=.page .fashion=固定ページのなかのfashionの固定ページのみ)

body.page .fashion #main .contents p {
font-size: 20px;
}

※body(要素)の後にスペースは空けず、.page、.fashion、#mainの後にはそれぞれスペースを空ける

※上記を訳すと.page(固定ページというくくり)の中の.fashionという固定ページの中のbody(要素)中の#main(id)(主にコンテンツの全体枠を指すことが多い)中の.contents(実際のコンテンツ部分)中のp(要素)に対して文字の大きさを20pxと適用すること、という意味合い。

 

【トップページと固定ページ、そして固定ページの複製である他の固定ページがあり、phpファイルにはclass指定でそのページ名を、CSSファイルには適用させたい固定ページをクラス名に入れたクラスを作れば適用される】