やっぱりシンプルなデザインとレイアウトが好きなのでWordPressのデザイン・テーマをオープンソースのThematicにしたんですが、デフォルトでは気に入らないところもあるので、サクッとChild Themeを作ってカスタマイズを始めてみた。
僕がThematicを選んだメインの理由は、以下3点ですが
- デザインがシンプル。ベースにしやすい
- オープンソース
- WordPress Theme Frameworkが使われているため、拡張が煩雑にならなそう
以下のスライドでも、ThematicやWordPress Theme Frameworkについて良くまとめられている。
Child Themeとは？
また、Child Themeとは、元の「thematic」をベースにした派生版とでも言えば分かりやすいでしょうか。元のテーマ・デザインを崩さずに、シンプルに派生版を作る方法です。
さて、ということでChild Themeの作り方の簡単なまとめ。
Child Theme作成の準備
- Thematicのあるフォルダの「thematicsamplechildtheme」フォルダの名称を変更。僕は「thematic_p」に変更。
- 名称変更したフォルダをWordPressのthemesフォルダに移動。通常、WordPressのThemesフォルダはwp-contentの中にある。
これだけで、とりあえず準備は完了。
あとはWordPressの管理画面で「外観」 ＞ 「テーマ」に、作成したChild Themeが出てくるので、それを有効化する。
※このとき注意点。
テーマ変更前に設定したウィジェットは、すべて初期化されてしまうのでChild Themeを有効にしてからウィジェットを設定した方が良さそうです。
スタイルの変更
スタイルの変更は、移動したフォルダ（僕の場合は「thematic_p」）にある styles.css で行う。
なにもいじらないと @import を使ってデフォルトのスタイルをthematicのフォルダから読み込むようになっているが、これらを変更したい場合は、もとを崩さないためにも thematic_p にコピーをして編集。
僕の場合は、以下のように設定した。
- thematic_p に styles というフォルダを作って、custom.css を作成。
- thematic_p にある styles.css で、@importを使って custom.css を読み込むように設定。
- カスタムの変更に関しては、すべて、この custom.css に書き込むようにした
表示内容の変更
表示内容の変更は、Hooks もしくは Filters と呼ばれるもので行う。これらの変更を、Child Themeのフォルダ（僕の場合「thematic_p」）の functions.php に記述する。
こちらは後日まとめるとして、参考になったブログ記事をご紹介：
Zazie@Tokyo : Thematic ThemeでThemeを変えてみました
ざっと見た感じ、このFrameworkはすごく良く出来ていそうなので、これからのカスタマイズが楽しみです。
まずは、記事ページに最近発表されたTwitter公式「ツイートする」ボタンを付けてみた。
2010年8月15日に公開され、2017年2月25日に更新された記事です。
About the author
「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら。
ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net 、Twitter @rriver 、またはFacebook までご連絡ください。