ワードプレスのカスタマイズについて調べているとよく目にする『子テーマ』。
初心者には少し難しく感じてしまいます。
そこでこの記事では初心者向けに子テーマをFTPソフトなどを使用せずに、簡単に作成する方法をご紹介していきます。
スポンサーリンク
目次
子テーマを作成する意味
ワードプレスのカスタマイズにはテーマを直接編集する方法と、子テーマを編集する方法という２種類の方法があります。
もちろん同じようにカスタマイズはできますが、テーマを直接編集していると
という危険性が出てきます。
子テーマの場合はテーマのアップデートに影響されることなくカスタマイズ内容が残るという点から、この方法が推奨されているというわけです。
そこで今回は『Xeory Base』のテーマを使用した簡単な子テーマ作りを解説していきます。
子テーマの作成
この記事で作成する子テーマは安全のため『style.css』をメインに作成していきます。
本来の子テーマ作りでは『functions.php』も作成しますが、phpはミスをすると画面が真っ白になってしまう危険がありますので、今回のFTPソフトを使用しない方法では省いておきます。
子テーマ用のフォルダの作成
まずは子テーマ用の空のフォルダをPC上に作成します。
今回は『Xeory Base』のテーマを使用するため、フォルダ名を『xeory_base-child』に変更します。
CSSファイルの作成
次にCSSファイルを作成していくために、PC上にダンロードしている『Xeory Base』テーマを使用していきます。
Xeory Baseのテーマの中から『style.css』をコピーし、先ほど作成したxeory_base-childのフォルダの中に入れます。
フォルダの中に入れたら、『xeory_base-child』の中のstyle.cssを少し編集しておきましょう。
コピーしたファイルのstyle.cssを開き下記のコードを確認します。
[su_note note_color=”#F0F0F0″ radius=”1″] /*Theme Name: XeoryBase
Theme URI: http://xeory.jp/
Description: Xeory ベーステーマ
Author: バズ部
Author URI: http://bazubu.com/
Version: 0.1.9
*/
[/su_note]
この部分のコードを下記のコードに置き換え、Descriptionを子テーマ用に変更します。
/* Theme Name: XeoryBaseChild Theme URI: http://xeory.jp/ Description: Xeory Base Child Theme Author: バズ部 Author URI: http://bazubu.com/ Template: xeory_base Version: 0.1.9 */
これでCSSの準備は完了です。
テーマ画像を作成
画像の作成はテーマ画像が表示されるというだけで、なければないで問題ありません。
テーマ画像とは下のように、テーマ選択画面で表示されるものです。
テーマ画像を表示させたいという方は画像を作成し、ファイル名を『screenshot』に変更しておきましょう。
作成した画像はxeory_base-childのフォルダの中に入れておきます。
ファイル画像のサイズは『Xeory Base』を参考に880×660のPNGファイルを用意できるとより良いです。
作成したファイルを圧縮
xeory_base-childをワードプレスに直接入れ込むことができるように『.zip』形式に圧縮します。
方法はxeory_base-childのフォルダの上で右クリックをし、この中の『”xeory_base-child”を圧縮』をクリックするだけです。
これでアップロードの準備は完了です。
子テーマのアップロード
子テーマが完成したのでワードプレスにアップロードしていきます。
〈子テーマの新規追加〉
『外観』『テーマ』の画面に移動し、テーマの『新規追加』をクリックします。
〈子テーマのアップロード〉
テーマのアップロードをクリックし、『ファイルを選択』から作成した子テーマの圧縮ファイルを選択し『今すぐインストール』をクリックします。
〈子テーマの有効化〉
インストール完了後、再びテーマ画面に戻ってみると子テーマが表示されています。
これを『有効化』することで、子テーマとして運営できるようになります。
すでにカスタマイズをしてしまっている方へ
今回の方法では『Xeory Base』の初期の状態にテーマの外観が戻ってしまいます。
すでにXeory Baseのテーマのstyle.cssを直接カスタマイズしてしまったという方は、カスタマイズしたファイルをコピーしてあげる必要がありますので最後にその方法を紹介しておきます。
Xeory Baseのstyle.cssのコピー
『外観』→『テーマの編集』から右上のテーマの選択で『Xeory Base』を選び、選択ボタンをクリックします。
カスタマイズしたXeory Baseのstyle.cssを開き、13行目にある
width: 1200px;
box-sizing: border-box;
margin: 0 auto;
*zoom: 1;
}
[/su_note]
以降のコードを最後まで全てコピーします。
xeory_base-childのstyle.cssの置き換え
『外観』→『テーマの編集』から右上のテーマの選択で『XeoryBaseChild』を選び、選択ボタンをクリックします。
xeory_base-childのstyle.cssを開き同じく
width: 1200px;
box-sizing: border-box;
margin: 0 auto;
*zoom: 1;
}
[/su_note]
以降のコード全てを先ほどコピーしたコードに置き換えます。
置き換えた後に『ファイルを更新』すると、今までカスタマイズしたCSSの内容が子テーマに反映されます。
これで直接カスタマイズしていた内容も、子テーマに反映させることができます。
コメントを残す