初心者のXeory Base子テーマ作り!!追加ソフト不要/Mac

文系男子nino(@kurashilog)です。

ぼくはワードプレスでブログを書いてます。
そのカスタマイズにはHTMLやCSSなど、プログラミングの知識があった方が良いのでドットインストールで勉強中です。

「WordPress カスタマイズ」で検索すると様々なページがヒットしますよね。
ぼくも情報収集する内に、どうやら「子テーマ」というものを作成した方が良さそうだという事に辿り着きました。

はい、いつも通り”なにそれ状態”に陥ったので、子テーマ作成までの道のりを書き残しておきます。
初心者が子テーマ作成に挑戦したらこうなったよ、というお話。

題して「文系男子初めての子作り(初心者)」行ってみましょう!

スポンサーリンク

まずテーマとは何ぞ

そもそもテーマって何?と思ったぼくはWebデザインレシピさんの記事を読んでみました。

記事を読んでなんとなくわかった事は

  • 「テーマ」とは、作成したブログやwebサイトのデザインを決めるひな形のこと
    デフォルトのテーマとして「Twenty Fifteen」とか入ってますよね。
  • テーマはいろんな素材が集まってできている
    サイトのスクリーンショット、style.css(スタイルシート)、テンプレートファイル(PHPによって書かれたファイル群)などでテーマは構成されている。

なるほど手に負えないかもしれない。

でも、テーマを構成している素材自体を編集することで見た目をカスタマイズできるということは理解できました。

ちなみにぼくはバズ部さんの「Xeory Base」を使ってます。

そして子テーマとは何ぞ

じゃあテーマの素材を編集すればいいわけね。
と思ったのですが、どうもそれでは次のような不都合が出てくるようです。

  • 間違った編集をすると、最悪サイトが真っ白になる
    このため、編集前にバックアップを取っておくように促す記事が多かった。真っ白になるとか怖すぎ!絶対避けたいですよね。
  • テーマをアップデートした際、自分で編集した箇所が消える
    せっかく編集しても、テーマ自体をアップデートすると消えちゃうんですね。セキュリティや機能の面からもアプデした方が良いのに、編集箇所が消えちゃうからできないー、というジレンマに陥ることが予想されます。

こういった問題点の解消方法として「子テーマ」が出てきます。
Toroノマドさんの記事がとても判りやすかったです。

子テーマの特徴

まず、利用しているテーマを「親テーマ」とします。
ぼくの場合、「Xeory Base」が親テーマですね。

そして子テーマは親テーマの内容を引き継ぎ、上書きします。
(そうでないものも一部あるみたい。)

つまり、子テーマを作成して編集するようにすれば、親テーマの内容を直接編集せずともカスタマイズできる仕組み。

これなら親テーマのバージョンアップも安心して行えますね。

子テーマを作ってみよう

「Xeory Base」を例として、子テーマを作っていきましょう。
最低限必要になるものは次のとおり。

  • 子テーマ名のフォルダ
  • style.css(スタイルシート)
  • screenshot.jpg(子テーマ用の画像)

機能の変更にはこれら以外のファイルも必要ですが、今回はデザインだけ変えてみたいのでとりあえずこれでOK。(スタイルシートがデザインを決めるファイルです。)

子テーマ名のフォルダを作成

  1. 親テーマのフォルダを新規作成
    「Xeory Base」をダウンロードした際のzipファイルをダブルクリックします。
  2. フォルダ名を子テーマ用に変更
    解凍された「xeory_base」のフォルダ名を「xeory_base-child」に変更します。

  3. 不要なファイルを削除
    フォルダ内にはいろんなファイルがありますが、「style.css」以外は削除してしまいましょう。

    クリックで拡大

style.cssの編集

  1. 「style.css」の内容を削除
    Mac標準アプリの「テキストエディット」で開き、「command+A」で全選択し、deleteキーで削除します。

    なんかいろいろ書いてあるけど全削除!!

     

  2. 次のコードをコピペ

    5行目(Template):親テーマのフォルダ名
    6行目(Theme Name):子テーマのフォルダ名
    7行目(Theme URI):自分のサイトのURL
    8行目(Description):この子テーマの説明
    9行目(Author):自分の名前

    このうち、5行目と6行目は必須となるので忘れず記述しましょう。

    保存してテキストエディットを閉じます。

screenshot.jpgの作成

子テーマ表示用の画像を準備して、ファイル名を「screenshot.jpg」とします。そのファイルを子テーマ名のフォルダ(今回では「xeory_base-child」)に保存します。

ここの画像として表示される

子テーマ名のフォルダをzipファイルへ圧縮

そのままではアップロードできないので、zipファイルにしておきましょう。

  1. フォルダを右クリックし圧縮

  2. zipファイルができました。

子テーマを有効化しよう

もうちょっとです!頑張ろう!
(画像はクリックで拡大します)

  1. 外観→テーマ→新規追加

  2. 作成したzipファイルを選択

  3. 子テーマを有効化

おつかれさまでした!

これで子テーマの作成、設定は完了です。
あとは子テーマのstyle.cssに追記していけば、デザインのカスタマイズができます。

外観→テーマの編集→スタイルシート(style.css)を選択すれば追記できますよ。

画像は、style.css以外にもファイルを追加してます。

カスタマイズ内容は、検索すればたくさん出てきますので気になるものを試してみましょう。
気に入らなかったり、うまく動かないときは子テーマを編集・削除すれば良いので、親テーマを直接いじるよりは気軽にトライできます。

いろいろカスタマイズして、自分色のブログにしちゃいましょう。

スポンサーリンク

3 件のコメント

  • ありがとうございます
    散々時間掛けていたのが馬鹿らしく思えるぐらいに簡単に出来ました。
    もし良かったらオススメのテーマのカスタマイズサイトは有りますか?
    もうこれ以上無駄な時間を使えないのでよろしくお願いします。

  • コメントありがとうございます!
    特定のオススメサイトはコレ!というのは残念ながら思いつきません…ごめんなさい。
    ぼくは「テーマ名+カスタマイズ」で検索していろいろ試してみてます。
    また、すでにご存知かもしれませんが「ドットインストール」や「Progate」でHTML&CSSの基礎知識を学ぶと自分でもカスタマイズしやすくなるのでオススメですよ!無料で利用できますのでぜひ。

  • コメントを残す

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