自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】 | えんじにか

えんじにか

元エンジニアがセラピストになっちゃったブログ。iPhoneや日々の雑多など個人的に気になったことを綴っています。

自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】

      2014/05/12

medium 2536017020 400x263 自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】
photo credit: Nikolay Bachiyski via photopin cc

最近黙々と自作テーマを作っていますが、初めてということもあって、時間がかかっております。

時間がかかるということは、途中で断念しちゃう人もいると思ったので、テーマを自分で簡単に作りたい場合は子テーマにしてみるのも選択肢の一つです。

子テーマってなに?

気に入ったテーマをベースにして、見た目に関する部分(css)だけ作成して、見た目(デザイン)を変える方法。

例えば、WordPressの公式テーマであるTwenty Twelveと全く同じものを自作するとなると、約30ファイル必要になるわけですが、子テーマを利用する場合は、style.cssの1つだけ作成すればよいので時間の短縮ができますね。

20140509135800 400x421 自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】

子テーマの作り方

①子テーマ用のフォルダを作成する。(例.original等)
②元にしたいテーマのstyle.cssを①にコピーする。
③コピーしたstyle.cssの先頭のコメント行に、「Template:ベースになるテーマを指定」を追加する。下記cssの12行目。
④コピーしたstyle.cssの先頭のコメント行を修正する。このコメント部分が管理画面からテーマを選択した時に表示される説明になる。下記css2〜11行目。

例)style.css先頭コメント行抜粋

/*
Theme Name: Original
Theme URI: http://up-app-m.com
Author: Harashin
Author URI: http://up-app-m.com
Description: Twenty Twelveを元にした子テーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns
Text Domain: original
Template:twentytwelve

2〜11行目は子テーマに対する説明。
12行目はベースになるテーマを指定。

デザインする

自分の好きなように子テーマのstyle.cssを加工して自分好みのデザインに仕上げてください。

子テーマの使い方

①「wp-content/themes」フォルダに、ベースにするテーマと子テーマのフォルダをそれぞれ配置する。
fe2e10e9fdcb3656e5145b03de550c65 400x396 自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】

②管理画面 > 外観 > テーマ から子テーマを有効化する。
f165b642998be7a8e2220f1b7668bc85 400x318 自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】

テーマ詳細を見た場合

6225ebc2b8fcd4d611b73d7122442d79 400x248 自作テーマが難しい!そう感じたら子テーマを検討してみよう【WordPress】
自分が設定した通りに、説明が表示されています。
スクリーンショット(screenshot.png、300×225px)を準備すれば、網掛け部分に画面イメージが表示されます。

さいごに

もちろんWordPressなので、有料のテーマでも子テーマを使うことができますし、このブログで使っているStinger3は子テーマを作って公開もされてますよね。

もっと手軽に自分でブログをデザインしたい。機能としては今のテーマで十分満足だけどデザインを変えたい。そんな方は子テーマから初めてみるのもいいかもしれませんね。

最近テーマを自作中で、今後しばらくは自作テーマに関する記事を書きますので、気になる方はフォローやいいね!してみてくださいね。

Posted from するぷろ for iOS.

 - ▽自作テーマ ,

AdSense

AdSense

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current ye@r *

  関連記事

関連記事はありませんでした