WordPress

【超絶初心者】WordPressで子テーマを作ろう！

  /

え？子テーマ？

それってなんですのん？？

私はWordPressを始めた時は超絶初心者で、右も左も分からず始めました。

なので、もちろん初めて子テーマと聞いても？？？がいっぱいでした。

このブログのテーマはXeory Baseです。

Xeory Baseはシンプルなデザインと機能で構成されています。

私はシンプルな見た目が好みでテーマに使用しましたが、、、機能も本当にシンプル！！！

なのでカスタマイズ必須です。

しかしカスタマイズする時に直接テーマを編集すると、テーマのアップデート時に全て上書きされてしまって、一所懸命編集したデータが消えてしまう、、、との事。

おっ…ソロシーーーーーーーイ！！！！！！

やっとの事で立ち上げて、頑張って作り上げたものが一瞬で消える…それは避けたい。

という事で、カスタマイズをする為に子テーマを設定したので、備忘録として設定手順を残しておきたいと思います。

子テーマとは？？

子テーマを簡単に分かりやすく解釈すると、、、

当サイトの場合、メインテーマのXeory Baseを親テーマと呼びます。

子テーマとは、親テーマにカスタマイズしたい機能の追加編集を反映させるために別途作成したサブテーマ、といったイメージです。

と言われてもよく分からないですよね。

例えば、当サイトのカスタマイズのひとつに、「フォントの変更」があります。

フォントの変更の場合、スタイルシート(style.css)へのコードの追加が必要となります。

親テーマのスタイルシート(style.css)を直接編集することも可能なのですが、子テーマのスタイルシート(style.css)を作り、そこで追加編集をした方が、後々都合が良いのです。

子テーマでは、親テーマのスタイルシート(style.css)の情報をベースに、「親テーマのデザインとして組み込まれているフォントを使わずに、子テーマで指定したフォントを使用する」という指示を出す事で、親テーマを触らずに子テーマでの編集作業が可能になるのです。

子テーマを作る意味

ではなぜ子テーマを作った方が良いのでしょうか？

親テーマは触らないに越したことはない

まず、親テーマにはテーマのデザインや機能などの全ての情報が詰まっています。

万が一編集を間違ってしまったら…

超絶初心者は、もはやどこをどう修正したら良いのか分からず焦ります。おそらく何が原因なのか、どうしてそうなったのかも分からないのではないでしょうか。

そう、自分でコードを復旧させる事が困難なのです！

エラーが出たら、とりあえず一度元に戻して…としたいところですが、最悪の場合、画面真っ白事件に遭遇します。

そうなるとログインすらできなくなり、どうにも対処ができず最初から設定し直しとなります…

号泣モノです。。

親テーマは触らないに越したことはない。いや、触りたくない。（本音）

親テーマを直接編集せずにカスタマイズするためには子テーマが必須であり、万が一子テーマでエラーが出てしまっても、親テーマは健在なので最悪の事態を招くことはありません。

親テーマのアップデートの影響を受けない

直接親テーマに編集をすると、テーマのアップデート時に全ての編集が消えてしまう可能性があります。

アップデートではファイルが全て新しく更新されてしまいます。

そう、編集したファイルも全て上書きされてしまうのです！

一所懸命自分好みにサイトを作り上げても、アップデートで一瞬にして消えてしまったら…

絶望ですよね…

それを防ぐために子テーマを作成して、そこで編集作業をするのです。

親テーマと子テーマは別物です。

そのため親テーマがアップデートされて内容が変更されようとも、子テーマでの編集が消えることはなく、安心安全なのです。

子テーマを作ろう

作成環境

当サイトでの子テーマの作成環境です。

OS：Mac

テーマ：Xeory Base

テキストエディタ：Sublime Text

FTPソフト：FileZilla

サーバー：Xserver

Re.
Re.
テキストエディタとは、テキストファイルを編集できるソフトです。HTMLファイルやCSSファイル、PHPファイルなどプログラミング言語が書かれたファイルを開いて編集したりすることができます。

FTPソフトとは、サーバーとファイルをやり取りするためのソフトです。サーバー上にファイルをアップロードやダウンロードする時にFTPソフトを使います。
どちらもフリーでインストールできます。

①　デスクトップに『xeory_base-child』の空のフォルダを作る

デスクトップ＞ファイル＞新規フォルダを作成し、タイトルを『xeory_base-child』に変更します。

 

 

②　①のフォルダ内にstyle.cssのファイルを作る

Sublime Textを開き、下のコードを入力して、タイトルをstyle.cssと入力して①のフォルダ内に保存します。

/*
Template:xeory_base
Theme Name:xeory_base-child
*/

 

③　①のフォルダ内にfunctions.phpのファイルを作る

②と同じ流れでファイルを作成します。

下のコードを入力し、タイトル名をfunctions.phpと入力します。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

 

④　『xeory_base-child』のフォルダをサーバーにアップロードする

フォルダをアップロードするにはFTPソフトのFileZillaを使います。

まずFileZillaを開きます。

 

Re.
Re.

左のローカルサイトの部分には、自分のパソコンのファイル等が表示されています。

右のリモートサイトの部分には、サーバーのファイル等が表示される部分です。

FileZillaでサーバーにアクセスします。

ホスト名にFTPホスト名（FTPサーバー名）、ユーザ名にFTPユーザー名（FTPアカウント名）、パスワードにFTPパスワードを入力してサーバーに接続します。

Re.
Re.
接続に必要なFTPホスト名（FTPサーバー名）、FTPユーザー名（FTPアカウント名）、FTPパスワードはサーバー契約時にメールにて送られてきていると思います。

接続すると、右側のリモートサイトの部分に、サーバー上のフォルダが表示されます。

自分のサイト＞wp-content＞themesと開きます。

左側のローカルサイトからDesktop＞xeory_base-childを探し、ドラッグ&ドロップで左側のリモートサイト部分のthemes内にアップロードします。

⑤子テーマを有効化する

WordPressの管理画面から、外観 ＞ テーマを選択し、xeory_base-childを有効化することで、無事に子テーマ作成終了です。

 

 

 

header.phpのファイルを作る

子テーマの作成に最低限必要なファイルは、style.cssとfunctions.phpですが、今後Google Adsenseを考えている方は、header.phpのファイルも作成しておくことをお勧めします。

自身のサイトをAdsenseにリンクさせる時に、コードをheader.phpに組み込む場面があります。

もちろん、こちらも親テーマに直接編集を加えるとアップデート時に消えてしまうので、子テーマをに組み込む事をお勧めします。

header.phpの場合は、FTPソフトで親テーマのheader.phpファイルをリモートサイトからローカルサイトにダウンロードし、それを子テーマのファイル内にアップロードさせることで作成する事ができます。

①FileZillaを開き、サーバーに接続します。

②右側のリモートサイト内のXeory Base＞header.phpをドラッグ&ドロップで左側のローカルサイトにダウンロードします。（一時的にダウンロードさせるだけなので、Desktopなど自分の分かりやすい所でOKです。）

③ダウンロードしたheader.phpを右側のリモートサイト内のxeory_base-child内にドラッグ&ドロップでアップロードします。

④WordPressの管理画面から、外観 ＞ テーマエディターで、右上のテーマを選択でxeory_base-childを選択し、その下のテンプレート一覧にテーマヘッダー （header.php）とあれば完了です。

これで親テーマを触らずにheader.phpを編集する事が可能になりました。

 

 

 

 


こちらもオススメです！