WordPressを使い始めて慣れてくると、「ここをもっとこうしたい」「ああしたい」という希望が増えてきますよね。WordPressのカスタマイズ機能だけでもなんとかなることも多いですが、どうしてもそれだけでは対応できないこともあります。そんな時にたどり着くのが「子テーマ」を使うということ。子テーマとは、簡単に言うと「現在のWordPressテーマを継承しつつ自分用にカスタマイズされたテーマ」です。WordPressで使用しているテーマ自体を直接変更せず、その拡張版の子テーマにあれこれ手を加えていくだけなので、使用している元の親テーマが更新されても、一から再度カスタマイズをし直さなくてもよいのが最大のメリットです（さらに詳しく知りたい方は、こちら。子テーマ導入の概要も書かれています）。
今回は、Azureから子テーマを導入する方法についてみていきます。前回に引き続き、テーマは「XeoryBase」を使用しています。
子テーマの作成に必要なもの
WordPress子テーマを作成するには、「style.css」と「functions.php」というファイルを作成する必要があります。ざっくり言うと、「style.css」は子テーマで使用するスタイル（フォントとか色とか）を記述するもので、「functions.php」はテーマが親テーマのスタイルとうまく連携が取れるようにスタイルシート（style.css）が読み込まれるようにするためのファイルです。これらを作成しなくてはならないのですが、どこに作成すればよいのでしょうか。
答えは「Azureのクラウド内」です。Azure経由でWordPressのインストールを行うとあまり意識しないかもしれませんが、クラウトサーバー内にWordPressを使用するためのファイルが作成されています。子テーマを使用するためにはこちらをいじる必要があります。作業はとても簡単なのでサクッとトライしてみましょう。
1. AzureポータルからApp Service Editorを開く
Azureクラウド内のファイルをいじる方法はいくつかあります。自分のローカルPCで作成したファイルをアップロードする方法が一つです。が、Azureポータルから自分のPC上でフォルダやファイルを作成するのと同じ感覚で操作できる方法を今回は説明します。
まずは、Azureポータルから子テーマを導入したいアプリをクリックします。次のような画面が表示されるので、「App Service Editor（プレビュー）」⇒「移動」の順にクリックします。別タブでApp Service Editorが開きます。
2. App Service Editorでファイルを作成する
App Service Editorの画面では左側にフォルダやファイルの構造、右側に選択中のファイルの内容が表示され編集できるような仕組みになっています。ここから「style.css」と「functions.php」を作成します。
まず、上記２ファイルの作成場所ですが、「WWWROOT > wp-content > theme」内に子テーマそ管理するフォルダを作成しその中に作ります。フォルダの作成はWindowsと同じように「右クリック > New Folder」で作成できます。フォルダ名はなんでも構いませんが、親テーマ名-childとすることが推奨されています。今回の親テーマは「Xeory Base」でテーマは「xeory_base」フォルダに保存されているため、作成する子テーマのフォルダは「xeory_base-child」とします。
フォルダができたら、その中に「style.css」と「functions.php」を作成します。こちらもWindowsの操作と同様に、フォルダ上で右クリックし「New File」を選択することにより作成できます。ここまでの作業が終わるとフォルダの構造が次のようになっているはずなので確認してみてください。
3. functions.phpとstyle.cssの編集
まずはfunctions.phpの説明から。次のコードをそのまま張り付けてください。深くは説明しないので、興味があればこちらなどを見てみてください。
style.cssには、カスタマイズの内容を記入していくのですが、書き出し（ヘッダー）に決まりがあります。次のコードをコピーして、style.cssに張り付けてください。重要なのはtempleteの部分だけです。ここは、親テーマのフォルダ名を入力します。Xeory Baseの場合は、下記コードにあるように「xeory_base」です。先ほど、App Service Editorで確認したものと同じです。ここまでで、子テーマを作成する下準備は完了です。
3. WordPressのスタイルをカスタマイズする
あとは、自分好みに変更したい要素についてスタイルを「style.css」に記入していくだけです。今回はテストとして、当サイトでも行っているように、タイトルの左側に縦棒が入るようにしてみます。ヘッダーの下にh1以降のコードを追加してください。このようにスタイルを変更したい項目（この場合はh1タグ）について追加していくとそれに応じてWordPressの表示が変わっていきます。
4. テーマを有効化する
スタイルが変わっていきますと書きましたが、正確にはまだWordPressのテーマを変更していないため変わりません。子テーマといえどテーマの一つのなので、有効化して初めてカスタマイズが反映された子テーマの使用が始まります。早速子テーマの有効化をしましょう（ WordPress管理画面 > 外観 > テーマ）。
選択できるテーマ一覧の中に子テーマの名前があるはずです。先ほど、style.css内のTheme Nameとして入力した名前が表示されます（本記事と同じstyle.cssを使ったのであれば、「XeoryBase Child」となっているはず）。これにマウスカーソルを合わせて、有効化ボタンを押せば終了です。実際の投稿を見てタイトルの横に縦棒が表示されているかどうか確認してみてください。
