【Xeory Base】子テーマを作成してアップロードする方法

子テーマはカスタマイズをしていく上で必要性の高いものです。
理由としてはテーマ自体のアップデートによる変更を防いだりすることができることがあげられます。

この記事ではそんな『子テーマ』の作成方法や、アップロードする方法などを解説していきます。




子テーマを作成する方法

今回は「Xeory Base」のテーマを使用して子テーマの作成を行っていきます。
作成場所はPC上のデスクトップで問題ありません。
子テーマの作成に用意するのは「Xeory Base」のテーマファイルとなります。

フォルダの作成

まずは空のフォルダを用意します。
デスクトップ上で右クリックをして新規フォルダの作成を選択することで作成できます。
フォルダ名は『xeory_base-child』としておきましょう。

必要な各ファイルの作成

xeory_base-childのフォルダの中に必要なファイルを作成していきます。
(必要なファイルとはカスタマイズで使用する可能性のあるものです。)
基本的な作成方法としては「Xeory Base」のフォルダの中からファイルをコピーし(command+c)、新しく作成したフォルダの「xeory_base-child」にペースト(command+v)するだけです。

今回は「functions.php」「style.css」「single.php」をコピーしておきました。
ついでにテーマ画像となる「screenshot.png」の画像も入れ込んでいます。
この中でもfunctions.phpとstyle.cssはファイルの編集が必要となるため一つずつ解説していきます。

functions.php

コピーしたファイルを開き、ファイル内の全てのコードを削除して下のコードに置き換えます。

これで子テーマ用のfunctions.phpファイルの完成です。

style.css

ファイルの2行目から9行目にある『/*』〜『*/』で囲まれたcssファイルを編集していきます。

●Xeory Baseからコピーしたcssファイル

/*
Theme Name: XeoryBase
Theme URI: http://xeory.jp/
Description: Xeory ベーステーマ
Author: バズ部
Author URI: http://bazubu.com/
Version: 0.1.7
*/

この部分を下のコードに置き換えます。

これで子テーマ用のstyle.cssファイルの完成です。

子テーマが完成して準備が整ったので、アップロードを行っていきます。

子テーマをアップロード

子テーマのアップロードする方法は大きく2種類あります。
ワードプレスに直接読み込む方法とFTPソフトを使用した方法です。
今回はこの2つの方法をご紹介します。

FTPソフトを使用しない方法

作成した子テーマはファイルを圧縮することで、直接ワードプレス内に入れ込むことができます。
※この方法は画面が白飛びしてしまった場合などに、対処が難しくなるのでなるべくFTPソフトを使用した作業をオススメします。

〈ファイルを圧縮〉

まずはファイルの圧縮です。
作成した子テーマ上で右クリックをし、「”xeory_base-child”を圧縮」をクリックします。
すると画面上にxeory_base-child.zipというファイルが生成されます。

〈ワードプレスにテーマを追加〉

圧縮したファイルをワードプレス上にアップします。
ワードプレス管理画面より「外観」>「テーマ」を選択し(①)、テーマ画面で「新規追加」をクリック(②)します。
「テーマのアップロード」をクリック(③)して、ファイルを選択のボタンを押し圧縮したファイルを選択(④)します。
選択できたら「今すぐインストール」をクリック(⑤)することで子テーマをインストールできます。

FTPソフトを使用した方法

FTPソフトはファイルをサーバーにアップするためのものです。
「FileZilla」や「Cyberduck」など無料のものもありますが、今回は『Adobe Dreamweaver』を使用していきます。

〈接続設定〉

Dreamweaverを開き「サイト」>「新規サイト」からサーバーへ接続するための設定を行っていきます。
この作業を行う前にPC上に接続ファイルを保存するためのサーバー用の空のフォルダを用意しておきましょう。

まずはサイトの設定から行っていきます。
サイト名は任意のものを入力し、ローカルサイトフォルダには作成したサーバー用のフォルダの場所を選択します。

入力が完了したら「保存」をクリックし、次にサーバーの設定を行っていきます。

各項目を入力していきます。
入力するための情報はレンタルサーバーの情報から確認することができます。

例)ロリポップの場合

ユーザー専用ページの『ユーザー設定』の中にある『アカウント情報』から確認。

全ての情報を入力し「テスト」をクリックして接続を確認できたら、「保存」をクリックして完了です。

〈サーバーから情報を入手〉

接続が完了したら、サーバー用のフォルダに情報を入れ込みます。

①リモートをクリックしてサーバーに接続。
②GETをクリックしてローカルにコピー。

この2つの手順でPC上に作成したサーバー用のフォルダにサーバーの情報が入ります。
GETの作業が完了した後でサーバー用のフォルダを確認してみると、サイト名のフォルダが生成されていて中にはワードプレスのファイルが入っています。

これで子テーマのアップロード準備ができたのと共に、ローカル上にバックアップの生成が完了しました。

〈子テーマのアップロード〉

子テーマをアップロードするために、先ほど入手した情報のフォルダの中に子テーマを入れ込んでいきます。
(子テーマを入れるのはPC上のサーバー用に作成したフォルダです。)

対象のサイトのフォルダの中にあるワードプレスのフォルダを開き「wp-content」>「themes」の中に作成した『xeory_base-child』のフォルダを入れます。
※この時親テーマである「Xeory Base」のフォルダがないと子テーマが機能しないので、親テーマも入っていることを確認しておいて下さい。

フォルダを入れ込んだらDreamweaverを開き、サーバーにPUTしていきます。

GETと同じ要領でサーバーに接続し、「PUT」のボタンをクリックします。
こうすることでローカルの方のフォルダに子テーマを入れたという変更内容を、サーバーに移すことができます。
PUT作業が完了したら、ワードプレスを開いて確認してみます。

ワードプレス管理画面から「外観」>「テーマ」を選択すると、『XeoryBaseChild』というテーマができました。
これを有効化することで子テーマを使用できるようになります。


コメントを残す

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

CAPTCHA