WordPress自作テーマ用HTML・CSSテンプレート(カスタマイズ例と、WordPressで使う準備)

前回作成したHTMLをもとにした、HTMLとCSSのカスタマイズ例を書いてみました。PHPコードでの書き直しをはじめる前までの手順メモです。とっても長々と書いてしまったので、最後にかんたんなまとめと全部のファイルを載せています。
大まかな流れ
今回のおおまかな流れを記します。
- ベースとなるHTMLファイルに、クラスなどを追記する(カスタマイズしやすくするため)
- CSSを修正する(HTMLに追記したクラスなどを使って)
- ローカルでWordPressを使う環境を整える
- WordPressテーマとして使うための準備(HTML・CSSを少し修正する)
- ローカルのWordPressのテーマフォルダ内にアップロードする
- ブラウザで表示させてみる
HTML・CSSのカスタマイズ例(クラスなどの追記)
前回作成したHTMLファイルには、ブログの構成に必要な最小限の要素だけを書きました。
もう少しカスタマイズしやすくするために、クラスやidをつけたりdivやspanで囲ったりしていきます。
index.html
まず、前回作成したindex.htmlのコードと構造(階層)を画像であらわしてみました。別ウィンドウで開きますので、拡大してみてください。
これを以下のように書きなおしました。
修正したindex.htmlのコードと構造(階層)を画像であらわしてみたものです。別ウィンドウで開きますので、拡大してみてください。
やったことのメモです。
- クラスやidが無くてもカスタマイズに支障はないかなあという箇所には、なにも追加していません。上の画像で「クラス無し」と書いているところです。
もちろん全部の要素にクラスを書いてもいいのだと思います。今回はできる限りシンプルに。 - 後ほどPHPコードに書きかえることによって、自動でクラスがつく箇所があります。上の画像で「クラスあとで」と書いているところなどです。
- 「クラス追加」と書いた箇所には、クラスやidを追加しました。
- 新たにdivやspanで囲った箇所がありますので、前のHTMLと階層がちょっと変わっています。
これについても、もっとdivを使ったほうがカスタマイズしやすいのかもしれませんが…今回はできる限りシンプルに。 - WordPressの現在のデフォルトテーマ「Twenty Thirteen」を参照してクラス名を決めました。自分のわかりやすいクラス名で良いかと。
single.html
同様にsingle.htmlも書き直しました。
single.htmlは個別記事を表示するページですので、index.html(トップページ)とは以下のあたりが異なります。
- ぱんくずリストがあります。クラスを追加しました。
- 記事タイトルは<h1>にしています(index.htmlではh2)。
- 関連記事の表示があります。記事の下にもあるので、ここには無くてもいいかも。
<div>で囲わず、<ul>にクラスを追加しました。 - 「続きを読む」は無くなります。
- シェアボタンがあります。
- 関連記事の表示があります。こちらにはサムネイルも表示させています。記事タイトルにクラスを追加しました。
- ページャー(1 2 3 … )の代わりに、前後記事へのページャーがあります。divで囲い、クラスを追加しました。記事タイトルにもクラスを。
page.html
続いて、page.htmlを書き直しました。
固定ページを表示するpage.htmlは、single.htmlから要らないものを削って作成するイメージです。single.htmlと異なる箇所をを挙げてみます。
- 日付やカテゴリー名などは表示させていません。
- 画像(アイキャッチ表示)もありません。
- 関連記事、シェアボタン、ページャーもありません。
archive.html
最後にarchive.htmlを書き直しました。
カテゴリーやタグ、日付別に記事一覧を表示させるページですので、ほとんどindex.phpと同じです。異なるのは以下の箇所くらいです。
- ぱんくずリストがあります。
- 何のページかを表示するタイトルがあります。
ここまでのまとめ(サンプルも)
前回は、クラス名などは無しのごくシンプルなHTMLを作成しました。
そして今回、ベースとなるHTMLにクラス名を追記したり、一部をdivなどで囲ったりして、もうちょっとカスタマイズしやすく修正しました(見た目はほぼ変わっていません)。
修正前後のindex.htmlの構造の比較です。
CSSテンプレート(サンプルも)
上で書き加えたクラスなどを使った、カスタマイズの一例です。
このCSSを、4つのHTMLファイルに適用させてみます。
あとはごりごりとカスタマイズして、お好みのデザインを完成させるのみです。
CSSのリセット・ノーマライズ
さて、上のサンプルでは、見出し(記事タイトルなど)が大きなフォントで表示されていたり、リスト(<ul>)の左側や、ヘッダー上などにバランスの悪い余白がつくられたりしています。これはブラウザのデフォルトスタイルによるものです。ブラウザが親切に、ここは見出しだから大きく表示しよう!とか、ここはリストだから一文字下げよう!とかしてくれているわけです。
このデフォルトスタイルはブラウザによって設定が異なるので(つまり見た目が結構異なるので)、このままだとデザインが崩れてしまう可能性があります。
その違いをなくすためにおこなうのが、CSSのリセットあるいはノーマライズです。
以下の記事にてとっても詳しく解説されています!
リセット(Twenty Twelve)
WordPressの一つ前のデフォルトテーマ「Twenty Twelve」ではCSSのリセットがおこなわれています。
Twenty Twelveのstyle.css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } /*中略*/ ol, ul { list-style: none; } /*以下省略*/
このように、あらゆる要素の余白(marginやpadding)を0にしたり、フォントサイズを統一したり、文書全体の行間を統一したり、リストの箇条書きのてんてんを無くしたり…ブラウザのデフォルトスタイルをリセットしています。
ナビゲーションメニューやシェアボタン、関連記事など、<ul>でマークアップしていても、左側の余白やてんてんが要らない箇所が多いですものね。
でもこれだと全ての<ul>が箇条書き(の見た目)ではなくなってしまいます。
そこで、記事内の<ul>部分については改めて以下のように指定するわけです。
.entry-content ul/*記事内のリスト部分*/{ margin: 0 0 24px;/*余白をつくったり*/ margin: 0 0 1.714285714rem; line-height: 1.714285714;/*行間を広くしたり*/ } .entry-content ul{ list-style: disc outside;/*箇条書きのてんてんを表示させたり*/ } .entry-content li{ margin: 0 0 0 36px; margin: 0 0 0 2.571428571rem; }
ノーマライズ(Twenty Thirteen)
これに対して、WordPressの現在のテーマ「Twenty Thirteen」ではノーマライズCSSという手法をとっています。ブラウザのデフォルトスタイルを全部リセットしてしまうのではなく、有用なスタイルは活用しようっていう考え方のようです。
<ul>の部分を比較すると…「Twenty Thirteen」のstyle.cssには<ul>の余白を0にする、などの記述はありません。せっかくブラウザがリストを読みやすく表示してくれるのだからそのまま活用しようっていうことでしょうか。
そして、箇条書きのてんてんが無いほうがいい箇所に対して、こんな記述があります。
Twenty Thirteenのstyle.css
nav ul, nav ol /*ナビゲーションメニューでは、*/{ list-style: none;/*てんてん無し!*/ list-style-image: none; }
.widget ul, .widget ol /*サイドバーウィジェット内のリストでは、*/{ list-style-type: none;/*てんてん無し!*/ margin: 0; padding: 0; }
ここまでのまとめ(サンプルも)
CSSのリセットやノーマライズは自分にあった方法を取れば良いと思います。リセット、ノーマライズにもそれぞれ多くの書き方があるようですし。
ここでは「Twenty Thirteen」を参照して、以下の内容をstyle.cssに追記してみます。
このCSSを、4つのHTMLファイルに適用させてみます。
すこしだけバランスが整ったかと思います(まだまだですが)。カスタマイズの一例でした。
ローカルでWordPressを使う環境を整える
Windowsでローカル環境を整えたときの記事を載せます。
MacではMAMPを使いました。手順はそれほど違いありませんでした。(なお、本番環境でカスタマイズしても問題ない場合は、この手順は必要ありません。)
環境が整ったら、作成したファイルと画像をひとつのフォルダにまとめ、ローカルのwordpress→wp-content→themesフォルダの中に入れます。
WordPressテーマとして使うための準備
HTML、CSSのカスタマイズは、ある程度進めたらいったん終了するようにしています。細かな調整は、中身を実際の記事に置き換えてから(HTMLの一部をPHPコードに置き換える作業が終わってから)のほうがやりやすいように思うためです。
慣れている方なら、それなりに長い(実際の投稿に近い)テキストや画像を使用したほうが、完成形をイメージしやすくていいのかもしれませんが…。頭がごちゃごちゃしてしまうので、わたしはこんな手順でテーマづくりをしています。
ともあれこの後、作成したファイルをWordPressのテーマテンプレートとして使用するために少し準備をしておきます。
HTML
- 4つのHTMLに書いたstyle.cssへのリンクを絶対パスに修正します。
この部分を、
絶対パス(http://~)に修正します。フォルダの場所は環境によって異なるかと思いますので適宜書き換えてください。
(でもすぐに消してPHPコードに置き換えてしまうので、ちょっとの間、画像の部分が表示されなくても良ければそのままで。)
画像を使っている部分(たくさんありましたね…)を、
このように修正します。
※2013.10.30:修正しました
CSS
- style.cssの冒頭に、以下を追記します。
@charset "UTF-8";/*文字コード指定*/ /* Theme Name: テーマ名(必須です。お好きなテーマ名を。) Description: テーマの説明(任意) Theme URI: テーマのURI(任意) Author: テーマの作者名(任意) Version: テーマのバージョン(任意) License: テーマのライセンス(任意) License URI: テーマのライセンスのURI(任意) */
画像
- screenshot.pngという名前の画像を、同じフォルダに入れておきます。ここではdummy.pngをコピーして使っています。
ローカルのWordPressにログインし、ブラウザで表示させてみる
http://localhost/wordpress/wp-adminからログインし、ダッシュボードにアクセスします。
外観→テーマから、作成したテーマを有効化します。さきほど用意したscreenshot.pngはここに使用されるものです。この画像は横長なのでちょっとかっこ悪いですが…。
Webサイトを表示してみましょう。
http://localhost/wordpress/にアクセスします。ダッシュボード左上から「サイトを表示」させても良いです。
無事にindex.phpが表示されました!
あたりまえですが、書いたHTMLがそのまま表示されています。でもほんとはここにWordPressで投稿した記事や、WordPressで設定したブログタイトルなどを表示させる必要がありますよね。そのための作業を、このあとのテーマ作成で進めていきます。
全部のまとめ(サンプルも)
今回やったことを最後にまとめます。とっても長くなってしまったので…。
※2013.10.30:一部追記しました
- HTML:ベースとなるテンプレート(前回の)にクラスを追加するなどの修正をおこない、カスタマイズしやすくしました。
WordPressテーマとして使うため、相対パスの部分を絶対パスに書き換え、ファイルの拡張子を.phpに修正しました。 - CSS:修正したHTMLに合わせてかんたんにレイアウトしました。リセット(ノーマライズ)もおこないました。
WordPressテーマとして使うため、冒頭に文字コードとテーマ名などを追記しました。 - 画像:WordPressのダッシュボードで表示させるための、テーマのスクリーンショット用の画像を新たに用意しました。
- WordPressをローカルで使う環境を整えました。
HTML・CSS・画像ファイル一式をフォルダにまとめ、WordPressのテーマフォルダ内に入れました。 - ローカルのWordPressにアクセスし、ダッシュボードと作成したindex.phpを表示させてみました。
ここまでの内容を反映させたファイルです(パスを書き換えてしまっているので、このリンクから開いてもCSSは効いていませんし、画像も表示されません)。
※2013.11.04:一部修正しました
このあとの流れ
次回以降の大まかな流れは以下のとおりです。
- 全ページ共通の部分(ヘッダーやフッター、サイドバー)を別ファイルとして分割する
- WordPress側の準備(タイトルを入れておいたり、記事やページをいくつか作成しておいたりする)
- タイトルや記事、ページを表示させるため、HTMLの一部をPHPに書き換える
- function.phpを作成する
- CSSを微調整する
- 本番環境にアップロードして、完成!
いよいよ本格的にWordPressテーマの作成にとりかかります!