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

このブログはMacとワードプレスで書いてます。

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

「WordPress カスタマイズ」で検索するとたくさんのページがヒットしますよね。

情報収集する内に、どうやら「子テーマ」というものを作成した方が良さそうだという事に辿り着きました。

ポメすけ
こてーま?

いつも通り”なにそれ状態”になったので、子テーマ作成までの道のりを書き残しておきます。

nino
追加ソフト不要で作る方法だよ。

ワードプレスのテーマって何?

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

参考 WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方Web Design RECIPES

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

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

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

でも、テーマを構成している素材(ファイル)を編集してカスタマイズするということは理解できました。

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

<2018/2/19追記>
2018年2月からテーマをsangoに変更しました。

ワードプレスの子テーマって何?

nino
ふむふむ。テーマの素材を編集したらいいのね。

と思ったのですが、どうもそれでは次のような不都合が出てくるようです。

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

こういった問題点の解決策として「子テーマ」が出てきます。

Toroノマドさんの記事がとてもわかりやすかったです。

参考 WordPressのテーマをカスタマイズするなら子テーマの設置がおすすめ!Toroノマド

子テーマの特徴

まず、利用しているテーマを「親テーマ」と呼びます。

ぼくの場合、「Xeory Base」が親テーマですね。

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

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

ポメすけ
これなら親テーマのアップデートも安心やで。

子テーマを作ってみよう

「Xeory Base」を例として、子テーマを作っていきましょう。

最低限必要なものは3つです。

準備しよう
  1. 子テーマ名のフォルダ
  2. style.css(スタイルシート)
  3. 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ファイルができました。
    子テーマのzipファイルができた

子テーマを有効化しよう

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

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


    外観から新規追加をクリック
  2. 作成したzipファイルを選択


    子テーマのzipファイルを選択
  3. 子テーマを有効化
    子テーマを有効化

追加ソフトなしで子テーマ作成できた

nino
これで子テーマの作成、設定は完了だよ。

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

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

スタイルシートを編集する画面

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

カスタマイズ内容は、検索すればたくさん出てきますので気になるものを試してみましょう。

気に入らなかったり、うまく動かないときは子テーマを編集・削除すれば良いので、親テーマを直接いじるよりは気軽にトライできます。

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

nino
以上、「初心者のXeory Base子テーマ作り」という記事でした。
ポメすけ
お問い合わせや記事リクエストはコチラのお問い合わせフォームからどうぞやで!

あなたにオススメの記事

nino
この記事を読んでくれたアナタにはこんな記事もオススメだよ!

3 Comments

中沢和人

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

返信する
nino

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

返信する

コメントを残す

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