WordPress Child Themeを使ってオリジナルを汚さずにカスタマイズする方法

2013/04/01

8Bit製のWordPressの有料テーマ「Standard Theme」 を購入しました。
購入前は、日本語に対応しているか、不安でした。
適応してみると、案の定、日本語で使用するとフォントサイズが大きすぎたので、カスタマイズすることにしました。

Standard Theme は、Child themeに対応していて、簡単にカスタマイズできます。
また、Child themeでカスタマイズすると、オリジナルのStandard Theme をアップデートしても、カスタマイズが上書きされて消えてしまうことがありません。

ここでは、Child themeを使ったカスタマイズ方法を紹介します。

1. Standard Themeをインストールする

Standard Themeを購入後、ダウンロードしたstandard.zipをWordPressにインストールします。
WordPressの管理ページから [外観] – [テーマ] – [テーマのインストール] を選択し、”アップロード”からstandard.zipを指定します。

2. Standard Child Theme Kitをインストールする

GitHubからStandard Child Theme Kitをダウンロードします。 WordPressの管理ページから [外観] – [テーマ] – [テーマのインストール] を選択し、”アップロード”からダウンロードしたeightbit-standard-child-theme-kit-3.2.1-0-gfd31c49.zipを指定します。
その後、”有効化”して、現在のテーマを「Standard Child Theme Kit」に設定します。

3. CSSをカスタマイズする

WordPressの管理ページから [外観] – [テーマ編集]を開き、style.cssを編集します。
これで、オリジナルのStandard Themeを汚すことなく、カスタマイズすることができます。

カスタマイズは、オリジナルのCSSをベースに変更するのがよいと思います。
オリジナルのCSSはダウンロードしたstandard.zipに入っているstyle.cssです。
style.cssは余分な空白や改行が削除されているので、ProCSSorなどで整形すると読みやすくなります。

反応して頂けると励みになります。ありがとうございます

No Comments

Be the first to start the conversation.

コメントを残す

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Text formatting is available via select HTML.

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

*