WordPress子テーマの作り方

2019.03.22

WordPressでは、かなりの頻度でテーマやプラグインのバージョンアップが行われています。

セキュリティ上で考えると、必要なことですので、それはそれでいいのですが、親テーマのCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)をカスタマイズしている場合等には、バージョンアップによって、スタイル(デザインとほぼ同義と考えて頂いて結構かと思います)も、上書きされ、バージョンアップしたオリジナルのものに戻ってしまうケースが考えられます。

したがって、CSSに限らず、WordPressをカスタマイズするのであれば、子テーマを作成し、その子テーマにカスタマイズしていくのがベストな方法です。

本記事では、その子テーマの作り方について、説明します。

事前準備

事前準備としては、大きくいうと三点あります。

まず、一点目が、FTPソフトがインストールされていないなら、事前にインストールしておくことです。

オススメは、フリーソフトのFileZillaです。

以下のリンクより、インストールファイルをダウンロードし、インストールおよびご自分がWordPressをインストールしているレンタルサーバーとの接続設定を済ませておいて下さい。

 FileZillaプロジェクト日本語トップページ

二点目と三点目は、ご自分のパソコンの任意のフォルダに、「style.css」と「functions.php」という空ファイルを作成しておくことです。

具体的な作成手順としては、Windowsに標準で入っているメモ帳を開いて、名前を付けて保存で、「style.txt」と一旦、保存し、次に、「txt」という拡張子の部分を、「css」に変更すればOKです。

同様に、「functions.txt」を作成した後、拡張子を、「php」に変更し、「functions.php」も作成しておきます。

事前準備としては、この三点でOKです。

子テーマの作り方

FileZillaを起動し、「ファイル(F)」→「サイトマネージャー(S)」とクリックします。

接続先が1ケ所なら、以下のように、インストール時に行った情報がデフォルトで記憶されていますので、「接続」をクリックすれば、ご自分のWordPressがインストールされているレンタルサーバーとの接続が確立されます。

そうすると、以下のような画面が表示されます。

エクスプローラーと同じような感じで考えていただければ結構ですが、左側が、ご自分のパソコン等のローカルサイトで、右側が、レンタルサーバー等のリモートサイトとなります。

任意のフォルダの任意のファイルをドラッグすれば、コピーが可能となります。操作としては、非常にカンタンです。

次に、子テーマを作っていきます。

右側のリモートサイトのWordPressがインストールされているドメイン(例として、ここでは、「sample.com」として説明します)の下の階層にいき、themesの下に、新規でディレクトリを作成します。

例えば、以下のようなディレクトリ構成になっているかと思います。

/sample.com/public_html/wp-content/themes

で、themesフォルダの中で、右クリックし、「ディレクトリの作成(C)」をクリックします。

そうすると、以下のようなポップアップ画面が表示されますので、「新規ディレクトリ」の部分に、子テーマの名前をアルファベットで付けます。

この時に、名前の付け方としては、「親テーマのディレクトリ名-child」というように付けるのがいいでしょう。

例えば、親テーマのディレクトリ名が「twentyseventeen」だとすれば、「twentyseventeen-child」という具合です。

「新規ディレクトリ」の部分に、入力し、「OK」をクリックします。

次に、事前準備で作成しておいた「style.css」ファイルを、ローカルサイト(自分のパソコン等)からリモートサイト(WordPressがインストールされているレンタルサーバー等)に作成した子テーマのフォルダにドラッグし、コピーします。

コピーが終了すれば、一旦、FileZillaは閉じておきます。

次に、WordPressにログインし、「外観」→「テーマエディター」の順に、クリックします。

そうすると、以下のようなポップアップ画面が表示されます。

注意!となっていますので、一瞬ドキッとするかもしれませんが、ご心配には及びません。

要は、『親テーマを直接編集するとキケン!』という注意事項ですが、まさに、今している作業は、その親テーマをいじらなくて済むように、子テーマを作成しているわけですから。

したがって、「理解しました」をクリックすれば、OKです。

次に、画面右側の編集するテーマを選択:で、先程の「twentyseventeen-child」を「選択」します。

そうすると、またもや、以下のような嫌な感じの表示がされますが、「style.css」の中身が空っぽなので、このように表示されるだけで、こちらも特段、気にする必要はありません。

次に、その空のファイルの中身を記述しますが、基本的には以下のような超カンタンな内容を記述するだけです。

2行目のTemplateに、親テーマの名前(ディレクトリ名と同じ)を記述し、3行目のTheme Nameに、子テーマの名前(ディレクトリ名と同じ)を記述し、最後に「ファイルを更新」をクリックします。

更新が上手くいけば、以下のような表示がされます。

次に、再び、FileZillaを起動し、 と同様の手順にて、今度は、空の「functions.php」ファイルをコピーします。

さらに、再び、WordPressにログインし、「外観」→「テーマエディター」の順に、クリックし、「テーマのための関数(functions.php)」をクリックします。

次に、以下のように、記述し、「ファイルを更新」をクリックします。

こちらに関しては、「style.css」とは違い、テーマが異なっても、基本的には、以下と同じ記述で問題ないかと思います。

最後に、子テーマを有効化します。ダッシュボードに戻り、「外観」→「テーマ」の順で、クリックします。

そうすると、以下のような画面が表示されます。

当然ながら、この段階では、親テーマ(Twenty Seventeen)が有効になっていますので、子テーマのほうに、カーソルを持っていきます。

そうすると、「有効化」ボタンが表示されますので、クリックします。

以下のように、右と左のテーマの位置が自動で入れ替わり、「新しいテーマを有効化しました。」と表示されれば、子テーマが有効になり、作業としては、完了です。

最初のうちは、記事を書くことに精一杯で、テーマがどうこうというレベルではないかもしれません。

しかし、それなりに、触っていくうちに、少し、デザイン等をイジリたくなってくるものです。

そのようなこともあり、できれば、最初に、子テーマを作っておき、いつでも、イジレる状態にしておくことは、後々のためになることでしょう。

オススメ書籍

WordPress はじめてのデザイン&カスタマイズ入門 ブログ・サイトの改善方法がわかる