[Genesisフレームワーク]子テーマCSS&PHPファイルの編集方法と注意点

2019年5月26日

Genesis frameworkで子テーマのstyle.cssやfunctions.phpを編集して、サイトをカスタマイズする方法です。 普通のWordpressテーマと違って、 Genesis frameworkは親テーマと子テーマの関係性が違うのでほんの少しだけ注意が必要です。

テーマ構造の違いによる注意点

一般的な日本のWordPressテーマは、次のような構成が多いです。

親テーマ:テーマテンプレート本体(サイト構成&デザイン)
子テーマ:サイトのデザイン編集に使う

親テーマ自身に基本的なテーマのデザイン等すべてが盛り込まれています。更新の際は本体である親テーマが変更されるので、子テーマにデザインをカスタマイズするコードを書き込んでいると思います。

これに対して、Genesis frameworkの親テーマと子テーマの役割が次ようになっております。

親テーマ:Genesis framework本体(フレームワーク=サイト構成)
子テーマ:サイトデザイン本体

親テーマ(フレームワーク)はかなり質素なデザインになっており、基本的な機能のみを抑えたものになっています。そして、子テーマをさまざまな開発元から購入してサイトのデザインを好きに変えられるようになっています。

つまり、子テーマ自身も提供元のアップデートやメンテナンスで一新されるため、追加したいデザイン面の編集は子テーマにすることはできません。

国産テーマとは異なり、この点で編集時は注意が必要になります。

style.cssのカスタマイズ

とはいえ、特に複雑な手順はありません。

外観 → カスタマイズ → 追加CSS

で、追加CSSに書き込むだけ。

functions.phpのカスタマイズ

function.phpも子テーマのものを直接変更することは避け、Code Snippetsというプラグインを使って編集するのをおすすめします。

https://ja.wordpress.org/plugins/code-snippets/

非常に高評価で10万件以上インストールされているfunction.php編集用のプラグインです。子テーマが更新されても問題なく編集内容が維持されます。また、サイトへの負荷も少なく設計されているようです。