子テーマの作成・使用

ワードプレスはテーマというテンプレートみたいのを使って、HPデザインをつくっていきます。

メニューの場所、基本色、雰囲気を決めてくれるテーマです。

ところでテーマを使うときには「子テーマ」とセットで使うといいんです。

この記事ではいろんなテーマ(デザイン)に使える「子テーマ」の作成・使用のしかたをまとめてみます。

なぜ「子テーマ」を使う必要があるの!?

「子テーマ」を使う理由は、ワードプレステーマのカスタマイズ(文字サイズを大きく、行と行のあいだをもっと空ける、など)をしたときに、その設定が消えにくくなるからなんです。

ワードプレスはたまに「新しいバージョン」「テーマの新しいバージョン」に仕様をアップデートしていきます。

そのときに「親テーマ」をアップデートするため、せっかく「18px」と定めた文字サイズが「12px」と小さく戻ってしまうんです。

ワードプレスでのページ読み込みは、「(古い)親テーマ」→「(新しい)親テーマ」→「子テーマ」と読み込みます。

一番さいごに「子テーマ」を読み込んでくれます。

子テーマに「こうしたい」を書いておけば、親テーマがどうであろうと、子テーマとおりに「18px」で表示してくれる仕組みなんです。

無料テンプレート「first」の子テーマをつくりました

写真が「ばーん」とあるテーマです。

メニューバーもみやすいです。

First

無料テーマ「first」の子テーマをつくります。

デスクトップ上に「first」のフォルダをもってきました。

(圧縮ファイルでしたので「解凍」しました)

ダウンロードいたしました「first」フォルダの中には、こんなファイル・フォルダが入ってました。

たくさんですね。

「first-child」のフォルダをつくります

フォルダの「新規作成」で、「first-child」という名前のフォルダをつくります。

現時点では「空フォルダ」です。

名前は右クリック→フォルダ名を変更、などの方法できちんとつけてあげます。

「functions.php」「style.css」というファイルを新規作成します

テキストエディタをつかって「functions.php」「style.css」という2つのファイルをつくります。

先ほどの「first-child」フォルダの中に2つのファイルが入るようにします。

わたしのOSはmacなので「Atom」というテキストエディタでつくりました。

調べたところwindowsでも「Atom」は使えるようですが、試してみたことがありません。

phpという言語に適したテキストエディタを導入するといいと思われます。

わたしがwindows所有時につかった経験のあるテキストエディタは「さくらエディタ」「TeraPad」「メモ帳」です。

「メモ帳」は最初からアクセサリに入っているので使ったことがある人も多いと思います。

「改行」コードの関係で、メモ帳だと改行の表示が調整しにくいかもしれません。

「さくらエディタ」「TeraPad」はフリーのソフトウェアで、インターネット上から無料でダウンロードさせてもらうことができます。

「グーグルクローム」ブラウザなどと一緒に、ダウンロード未経験の人は、安全なフリーソフトの使い方になれると、パソコンスキルがアップしますよ。

「functions.php」ファイルにはこう記載しました

functions.phpにはこう記載しました。

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’ );
} ?>

色がかわるテキストエディタは見やすいです。

phpは「動かすプログラム」の役割をにないます。

「style.css」ファイルはこう記載しました

スタイルシート(CSS)の記載は、ワードプレステーマごとにつくりなおし・書き換えをしています。

実質2行の短い記載です

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

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

どのワードプレステーマの「子テーマ」かわからなくならないよう、「テーマネーム名」「テンプレート」を入れていきます。

小文字でスペルミスしないよう、コピペでうつすのがよいです。

たとえば無料テーマ「twentyfourteen」の子テーマはどうつくるの!?

「twentyfourteen」というテーマでしたら、このようにstyle.cssを書き直します。

フォルダ名(デスクトップ上に新規作成)

twentyfourteen

functions.php(先のをコピペ)

そのまま(同上)

style.css(先のをコピペして一部を書き直し)

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

/*  〜〜〜  */(コメント)の意味は!?

〜〜〜の両はしに「/*   */」があります。

「コメント」といって、プログラムの効き目を「無効」にしています。

現在このスタイルシートの中身には何もかかれていません。

ワードプレスにアップしたあとで「文字色」「行間」など書き足していきます。

*カスタマイズ時には「ディベロッパー開発ツール」の画面を開き、ブラウザ上から直接手を入れるようです。

子テーマを圧縮します

子テーマ「first-child」の中に2つのファイルが入っています。

「functions.php」「style.css」で、中身も書いてあるもの(書き直したもの)が入っています。

「右クリック」→「フォルダを圧縮」などの方法で圧縮します。

zip形式にします

圧縮されたフォルダができました。

ワードプレス管理画面(ダッシュボード)にアップロードします

子テーマができあがりました!

圧縮もしました!

ワードプレス管理画面に「(親)テーマ」「子テーマ」の順でインストールしていきます。

●親テーマ

無料テーマ「first」などをインストールします。

ダッシュボード>外観>テーマ>「新規追加」

「zipフォルダを選択」とボタンがでるので、デスクトップに用意した「親テーマ」を選んでインストールします。

親テーマも「zip」形式で圧縮したものをアップしましょう!

「有効可」で入れた親テーマを選択・実行します。

●子テーマ

親テーマ(「first」など)を入れたあと「子テーマ」(「first-child」など)をインストールします。

先ほどの「親テーマ」と同じ手順でzipフォルダ(圧縮)をインストールして「有効化」してください。

子テーマが効いて、「親テーマ→子テーマ」で選択したデザインになっていると思います。

まとめ

「親テーマ」「子テーマ」かならずセットで使うようにしましょう。

将来ワードプレスのアップデートで「上書き」したとき、せっかく書いた「設定」が消えずにすみます。

子テーマつきの親テーマが用意された場合もありますが、ない場合も多いです(今のところ8割くらい)

使いたいテーマの「子テーマ」がないときには、さくっとつくって書き換えて、圧縮したものを用意できるようにしましょう。