WordPress、子テーマ制作に関して

WordPressの子テーマに関する情報を、備忘録的にまとめておきます。

親テーマはSimplicityを使用します。
公式の「カスタマイズ用の子テーマ（無印）」データも用意されていて、至れり尽くせりですね。こちらを元にカスタマイズしていきます。
http://wp-simplicity.com/downloads/child-theme/

「style.css」のカスタマイズ

全体に関わるCSSの修正ですね。「style.css」ファイルに記述して、カスタマイズしていきます。

h2、h3、h4の修正の例

h2

..article h2 {
    background-color: #6a5acd;
    border-left: 0 none;
    color: #fff;
    padding: 15px 30px;
}

h3

..article h3 {
  font-size:23px;
  border-bottom:5px solid #6a5acd;
  padding:4px 0;
}

h4

..article h4 {
    padding:0px 0px 0px 5px;
    font-size:16px;
}

色は「#6a5acd」部分を変えることで変更可能。
装飾のデザイン例は、こちらも参照ください。WordPress見出し（h1・h2・h3…）のデザイン変更

表示例

サイドバーのウイジェット見出し、修正の例

#sidebar h4{
    background:#eee; 
    border-left:7px solid #ccc; 
    padding:.4em .5em
}

サイドバーはh4のようですね。こちらもcssで指定します。

表示例

「mobile.css」のカスタマイズ

スマホ表示に関するCSSの修正ですね。「mobile.css」ファイルに記述して、カスタマイズしていきます。

「記事を読む」「本文抜粋」を表示させない

スマホは表示面積が限られるので、なるべく要素を少なくしたい時があります。「記事を読む」「本文抜粋」を非表示にするカスタマイズです。

「記事を読む」を表示させない

.entry-read a{
 display:none;
}

「本文抜粋」を表示させない

.entry-snippet{
  display:none;
}