wordpressのtwentytwelveの子テーマの作り方とサンプル

WordPressはプログラムとデザインを分けている。プログラムはfunctions.phpなど、デザインはstyle.cssなどに分ける。

子テーマとは、親テーマのプログラムだけを継承し、デザインをすべて初期化したもの。

「phpのプログラムをゼロから作るのは嫌だけど、デザインはゼロから作りたいな」というときは、twentytwelveなどの公式テーマを親テーマとして、オリジナルの子テーマを作ってみよう。

注:公式テーマのstyle.cssを直接書き換えることは推奨されない。

子テーマの作り方

これでテーマ選択画面にchildというテーマが作られた。このテーマを選択するとstyle.cssがある。ここにこれからcssを書いていく。

style.cssに最初に書くコード

/*
Theme Name: child
Template: twentytwelve
*/
@charset "utf-8";

style.cssのコードの意味

Theme Name: child

「このテーマはchildというテーマです」という意味。

Template: twentytwelve

「このテーマはtwentytwelveを親テーマとしています。つまり機能自体はtwentytwelveを受け継いでいます」という意味。

@charset "utf-8"

「スタイルシートの文字コードはutf8です」という意味。

親テーマの決め方

今回はtwentytwelveを親テーマとしたが、WordPress公式であればどのテーマでも問題ない。

初期画面

この状態でchildテーマを有効化すると、cssがまったくない(デザインがまったくない)ページになる。

機能は親テーマを受け継いでいるが、デザインはいっさい受け継いでいないため、作り手の思うようにデザインを文字どおり一から作ることができる。

注:設定によっては親テーマのデザインを受け継ぐこともできるがおすすめしない。特に2015や2016を親テーマとするときは、そのデザインを受け継ぐとメディアクエリの設定が非常に煩雑になる。

style.cssのサンプルコード

公式テーマを見るかぎり、style.cssは次の構成をとることが多い。

ここではpageとhomeは省く。

viewport

ここからstyle.cssにコードを埋めていく。以下はあくまでもサンプル。

@-ms-viewport { width: device-width; }
@viewport { width: device-width; }

このコードによってサイト全体がスマホ対応になる(表現は正確でない)。viewportのコードはよほどの理由がないかぎり必ず書く。

normalize

html, body, div, article, header, aside, footer, span,
h1, h2, h3, h4, h5, h6, p, a, img,
ol, ul, li, form, table, tr, th, td,
blockquote, pre, code, em, strong, sub, sup, iframe {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
html {
  overflow-y: scroll;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  line-height: 1;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  font-family: Avenir, "Helvetica Neue", "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, sans-serif;
}
header, article, aside, footer {
  display: block;
}
h1, h2, h3, h4, h5, h6 {
  clear: both;
}
a {
  color: #0085be;
  text-decoration: none;
}
a:hover {
  color: #0085be;
  text-decoration: underline;
}
img {
  max-width: 100%;
  height: auto;
}
ol {
  list-style: disc inside;
}
ul {
  list-style: decimal inside;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
blockquote {
  quotes: none;
}
blockquote:before, blockquote:after {
  content: '';
  content: none;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

まずは各要素のmarginなどを0にする。これは公式テーマのstyle.cssなどを参考にする。以下はあくまでもサンプル。

html, body, div, article, header, aside, footer, span,
h1, h2, h3, h4, h5, h6, p, a, img,
ol, ul, li, form, table, tr, th, td,
blockquote, pre, code, em, strong, sub, sup, iframe {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

次に書くことは文字の大きさなどの「標準化」。

html {
  overflow-y: scroll;
  font-size: 62.5%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  line-height: 1;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: normal;
  font-family: Avenir, "Helvetica Neue", "ヒラギノ角ゴ ProN", "メイリオ", Meiryo, sans-serif;
}

まずhtmlでfont-sizeを62.5%にする。そしてbodyのfont-sizeであなたの望むフォントサイズをpxとremで設定する。上のサンプルではサイト全体のフォントサイズが16pxに設定される。

もし13pxにしたいなら、bodyのfont-sizeを13pxと1.3remにする。

またゴシックにするか明朝にするかといった設定はhtmlでなくbodyでおこなう。上のfont-familyは当サイトの設定を少し変えたもの。

続いてh1やh2などの設定をおこなうが、これらのフォントサイズやフォントファミリーは基本的にここで指定しない。ここでは

h1, h2, h3, h4, h5, h6 {
  clear: both;
}

のみにとどめておく。h2などはWordPressのページによって変えたいという場合があるため、フォントサイズは後々指定する。

clear

floatの解除設定も最初のうちに指定する。

.clear:after,
.wrapper:after {
  clear: both;
}
.clear:before,
.clear:after,
.wrapper:before,
.wrapper:after {
  display: table;
  content: "";
}

よくわからないという方も一種のおまじないと思って設定しよう。clearの設定は公式テーマにあるものをコピーするといいかもしれない。

header

ここではheaderをサイト上部の共通部分とする。つまり

などをまとめてheaderという。下のサンプルではサイトタイトルのみの設定となっている。

.site-title a {
  font-size: 24px;
  font-weight: light;
  color: #333;
}
.site-title a:hover {
  text-decoration: none;
}
.site-header {
  text-align: center;
}
.site-title {
  margin-top: 24px;
}

2012などの公式テーマの多くはheaderのclassを

.site-header

としている。このクラスの中にサイトタイトルがある。

.site-title

widget

widgetは一言で言えばサイドバーである。サイドバーという領域を2012ではwidget-area、サイドバーを構成するもの(最新投稿、カテゴリー、カレンダーなどのいわゆるウィジェット)をwidgetというclassで定義している。

サイドバー全体 widget-area サイドバー要素 widget

ここでサイドバーを記事の下にくるようにデザインしてみよう。このデザインはスマホ用のデザインになる。

@media screen and (max-width: 479px) {
  .widget-area {
    border-top: 1px solid #f0f0f0;
    margin-top: 32px;
    overflow: hidden;
  }
  .widget {
    overflow: hidden;
    width: 100%;
  }
  .widget-area h3 {
    color: #333;
    font-size: 16px;
  }
  .widget-area h3 a {
    color: #333;
  }
  .widget-area ul {
    line-height: 1.2;
    margin: 0 auto;
    overflow: hidden;
    width: 80%;
  }
  .widget-area li {
    list-style: none;
    margin-bottom: 8px;
    margin-bottom: 0.8rem;
  }
  .widget-area li a {
    color: #333;
  }
}

ここで

@media screen and (max-width: 479px)

は「この中にあるcssは横幅が479pxまでのデバイスに向けているよ」という意味。つまりこの中に書かれているコードは横幅が480px以上の画面には適用されない。

480px以上のcssを書くときは

@media screen and (min-width: 480px) {
  .widget-area li a {
    color: #333;
  }
}

とする。基本的にサイトの各パーツは、このようにデバイスの横幅によってcssを変える。ここでは480px以上のcssは省略する。

当サイトは1カラムの形をとっているが、普通は2カラムであり、サイドバーは記事の右隣にくることが多い。

single

WordPressの投稿記事はsingleというclassで定義されている。投稿記事は記事タイトルと記事本文からなるが、これはentry-titleとentry-contentというclassである。

つまりsingle内にentry-titleとentry-contentがある。当サイトの設定を少し変えてサンプルとして掲載する。

.single .entry-title {
  border-radius: 6px;
  margin: 16px;
  padding: 16px;
  line-height: 1.2;
  font-size: 20px;
  font-weight: normal;
  color: #333;
  background-color: #f0f0f0;
}
.single .entry-content {
  line-height: 1.6;
}
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content p,
.single .entry-content ol,
.single .entry-content ul,
.single .entry-content pre {
  margin: 16px 0;
  padding: 0 10px;
}
.single .entry-content h2 {
  border-bottom: 1px solid #f0f0f0;
  font-size: 20px;
  font-weight: normal;
  padding-top: 24px;
}
.single .entry-content h3 {
  border-bottom: 1px dotted #ccc;
  font-size: 18px;
  font-weight: normal;
  padding-top: 20px;
}

最初のsingle.entry-titleの設定をコピーすると、おそらく当サイトのように記事タイトルが角丸で灰色背景になる。

角丸はborder-radiusで設定する。

.single .entry-title {
  border-radius: 6px;
  margin: 16px;
  padding: 16px;
  line-height: 1.2;
  font-size: 20px;
  font-weight: normal;
  color: #333;
  background-color: #f0f0f0;
}

最初のnormalizeのところでh2のフォントサイズを指定しなかったが、h2のフォントサイズは基本的にこのsingleで指定する。

h2は

  1. サイト説明文
  2. サイトナビゲーションの各タイトル
  3. サイドバーのウィジェットタイトル
  4. フッターのどこか
  5. 記事(post)内
  6. 記事(page)内
  7. アーカイブページ内
  8. yarppなどのプラグインタイトル

に使われるが、これらはまったく性質が異なり、それぞれに合わせてデザインを変えるべきである。以上から記事本文に使われるh2は

.single .entry-content h2

で設定する。

また「引用」用に以下を設定する。

.single .entry-content blockquote {
  background: #f0f0f0;
  border-radius: 6px;
  margin: 0 16px;
  padding: 16px;
}

footer

リンクの色などを調整。

footer {
  line-height: 1.5;
}
footer a {
  color: #333;
}

archive

個別記事の次に見られるページはアーカイブページであり、これはarchiveというclassが担当する。個別記事と同様、アーカイブタイトルとアーカイブコンテンツはそれぞれclassが割り当てられている。

タイトル  archive-title コンテンツ archive-content

ここではアーカイブページをタイトルのリストにしているとする(アーカイブページに記事の本文の一部をのせるようなデザインの方は以下のコードを無視してください)。

.archive-title {
  border-radius: 6px;
  margin: 16px;
  padding: 16px;
  line-height: 1.2;
  font-size: 20px;
  font-weight: normal;
  color: #333;
  background-color: #f0f0f0;
}
.archive-content {
  line-height: 1.2;
  padding: 0 10px;
}
.archive-content li {
  list-style: none;
  margin: 8px 0;
}
.archive-content li a {
  color: #333;
}

404

ページが存在しないときWordPressは404ページを自動的につくって返す。このページのclassはerror404である。

.error404 article {
  margin: 0 auto;
  margin-top: 64px;
  max-width: 480px;
  overflow: hidden;
  width: 90%;
}

などと指定して、404画面のデザインを無難にしよう。

結局はphpも作らないといけない

WordPressのデザインを変えていくと、どうしてもphpファイルを変えたくなる。

例えばデフォルトでは投稿記事の終わりに「次へ」ボタンや投稿者などのメタ情報が出てくるが、これを消したいとき、cssで無理やり消すよりももともとの機能を消す。

注:display:noneを使って無理やり消すような真似は厳禁。

親テーマの機能を変えることになるが、これも親テーマに入っているphpを直接変えることは推奨されず、あくまでもそのコピーを子テーマのフォルダに入れて、そのphpファイルを変更する。

例えば投稿記事の投稿者などのメタ情報を消すときは、親テーマのsingle.phpというファイルを子テーマにも作り、その中にあるfooterの部分を丸ごと消す。

phpの機能部分を変えていくと、またcssのほうも変わってくる。このようにphpとcssを行ったり来たりしながらデザインを変えることが、一見めんどうに思えて実は一番効率がいい。

php ↔ css

(次はphpのサンプルを掲載予定)

ご質問はこちら

記事になにか誤りがある場合、またはWordPressや子テーマに関してご質問がある場合はこちらにご連絡をお願いします。

広告