WordPress ThematicのChild Themeをいじってみた

Advertisement

やっぱりシンプルなデザインとレイアウトが好きなのでWordPressのデザイン・テーマをオープンソースのThematicにしたんですが、デフォルトでは気に入らないところもあるので、サクッとChild Themeを作ってカスタマイズを始めてみた。

僕がThematicを選んだメインの理由は、以下3点ですが

  • デザインがシンプル。ベースにしやすい
  • オープンソース
  • WordPress Theme Frameworkが使われているため、拡張が煩雑にならなそう


以下のスライドでも、ThematicやWordPress Theme Frameworkについて良くまとめられている。

Child Themeとは?

また、Child Themeとは、元の「thematic」をベースにした派生版とでも言えば分かりやすいでしょうか。元のテーマ・デザインを崩さずに、シンプルに派生版を作る方法です。

さて、ということでChild Themeの作り方の簡単なまとめ。

Child Theme作成の準備

  1. Thematicのあるフォルダの「thematicsamplechildtheme」フォルダの名称を変更。僕は「thematic_p」に変更。
  2. 名称変更したフォルダをWordPressのthemesフォルダに移動。通常、WordPressのThemesフォルダはwp-contentの中にある。

これだけで、とりあえず準備は完了。
あとはWordPressの管理画面で「外観」 > 「テーマ」に、作成したChild Themeが出てくるので、それを有効化する。

※このとき注意点。
テーマ変更前に設定したウィジェットは、すべて初期化されてしまうのでChild Themeを有効にしてからウィジェットを設定した方が良さそうです。

スタイルの変更

スタイルの変更は、移動したフォルダ(僕の場合は「thematic_p」)にある styles.css で行う。
なにもいじらないと @import を使ってデフォルトのスタイルをthematicのフォルダから読み込むようになっているが、これらを変更したい場合は、もとを崩さないためにも thematic_p にコピーをして編集。

僕の場合は、以下のように設定した。

  1. thematic_p に styles というフォルダを作って、custom.css を作成。
  2. thematic_p にある styles.css で、@importを使って custom.css を読み込むように設定。
  3. カスタムの変更に関しては、すべて、この custom.css に書き込むようにした

表示内容の変更

表示内容の変更は、Hooks もしくは Filters と呼ばれるもので行う。これらの変更を、Child Themeのフォルダ(僕の場合「thematic_p」)の functions.php に記述する。

こちらは後日まとめるとして、参考になったブログ記事をご紹介:
Zazie@Tokyo : Thematic ThemeでThemeを変えてみました

ざっと見た感じ、このFrameworkはすごく良く出来ていそうなので、これからのカスタマイズが楽しみです。
まずは、記事ページに最近発表されたTwitter公式「ツイートする」ボタンを付けてみた。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。