WordPressで子テーマを作って安心のカスタマイズ

WordPress(以下:WP)のカスタマイズを安心安全に行うために「子テーマ」と呼ばれるものを作ります。

 

子テーマとは

 

元のテーマ(親テーマ)とセットで使います。親テーマの情報を引き継いでいます。親テーマに手を加える事無く変更したい部分だけ上書きします。

 

 

子テーマを作るメリット

 

  • メリット1:子テーマで変更を加えた部分は親テーマを更新(アップデート)しても残ります。親子関係でもファイルを別に作っているからです。
  • メリット2:親テーマに手を加えると誤って重要なコードを消したり変更したりしてしまうかもしれません。直すのは非常に大変です。でも子テーマなら消してしまってもカスタマイズ部分だけなので被害は少ないです。カスタマイズ部分のコードも親テーマに比べれば非常に少ないので他にコピーを保存しておく事も出来ます。

 

子テーマで変更を加えれば安心って事だね。早速作ろう

 

子テーマの作り方

 

本来はFTPソフト(Cyberduck、File Zillaなど共に無料でオススメ)を使うのがいいのですが、今回は少しだけなのでFTPソフトは使わずWPをインストールしたレンタルサーバーを直接操作する方法で説明します◎

 

他のレンタルサーバーの方も全く同じでは無いと思いますが頑張ってやってみてください

 

レンタルサーバーの管理ツールで作ります

ここではスターサーバで解説しますので「スターサーバー管理」→「サーバー管理ツール」からログインします。

 

FTPアカウント設定をクリック、

 

ドメインを選択してください。

 

WebFTPにログインします。

 

これがWPを作っているファイル群です。

 

スクロールした下の方のフォルダ、wp-contentをクリックします。

 

themesをクリックします。

 

WPの管理画面からご自身でインストールしたり最初から入っていたりするテーマが入っています。今回はtwentyfifteenの子テーマを作ろうと思います。(ので、ご自身のテーマと置き換えて読み進めてください)

上のアドレスは今見ている階層を表しています。 wp-content/themes となっている事を確認してください。(親)twentyfifteenと同じ階層であるここに子テーマフォルダを作ります。

 

 

子テーマ用のフォルダを作ります

新規作成をクリックします。小窓が出るので、、

 

(親)twentyfifteenと同じ名前に、、

 

-child を足して(子)twentyfifteen-childという名前のフォルダを作ります。フォルダ追加をクリックします。

 

親)twentyfifteenの下に(子)twentyfifteen-childテーマフォルダが出来ました。

この中に子テーマを作るのに必要なファイル2つ、functions.php と style.css を作っていきます。

 

 

子テーマに必要な2つのファイルを作ります

twentyfifteen-childのフォルダをクリックして開くと当然「ディレクトリ(フォルダの意味)は空です」とあります。新規作成をクリックしてください。

 

必須ファイル1: style.css

ファイル名にstyle.cssと書いて「ファイルを追加」します。

 

style.cssファイルが出来ました。この中に書くことがあるので

 

右の鉛筆マークをクリックします。編集モードでファイルを開きますと出るので「OK」

 

ここに書きます。

 

内容は上記の4行です。/* 〜 */(スラッシュ、アスタリスク)で囲んだ内容はCSSとしては影響は無いのですがWPはこの内容を読み取ります。

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

このままコピペしてご自身のテーマ名に書き換えてください。Aは子テーマのテーマ名、Bは親のフォルダ名を入れます。

親のフォルダ名なのでTwenty Fifteenでは無くてtwentyfifteenです。テーマ名がLightningならフォルダ名はlightningです。Bではこの(twentyfifteen)情報を引き継ぎますと書いています。

「上書保存」を押して閉じます。

 

 

必須ファイル2: functions.php

style.cssのファイルを作った時と同じように右上の「新規作成」をクリックしてこの窓を出します。ファイル名に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');
wp_enqueue_style('child-style', get_stylesheet_directory_uri() .'/style.css', array('parent-style'));
}
?>

こちらをコピぺしてもいいですし、

WordPress Codexの子テーマ解説の下の方を見ると同じ物が入手出来ます。

 

ただしphpファイルの開始タグの<? phpと閉じタグの?>を追加しないとTwenty Fifteenではダメだったので、先頭に<? php最後に?>を追加しました。

 

親テーマ(のCSS)を読み込んでから子テーマ(のCSS)を読み込んでね、という指示が書いてあります。

だから子テーマで書いた内容が上書きされるんだね

「上書保存」を押して閉じます。

 

 

WPの管理画面を更新して外観>テーマを開くと、子テーマが出来ました。

でも画像が無いとなんだかなぁ

 

 

子テーマ画像を作って見やすくする

画像は無くても機能しますが、あった方が分かりやすいので画像を作ります◎

 

例えば親であるtwentyfifteenフォルダの中を見てみると、screenshot.pngというファイルがあります。虫眼鏡マークをクリックすると、

 

テーマの紹介に使われている画像が見れます。子テーマも同じ画像にした方が分かりやすいのでこちらを拝借して(スクショしても◎)

 

8:6の比率で今回は640×480pxの大きさにして、子テーマと分かりやすく書き込み、png形式で保存します。

 

保存したファイルをサーバーの管理ツールの子テーマフォルダの中にアップロードします。

 

必須ファイルの style.css、functions.php に screenshot.png が加わって

 

「子テーマ」完成しました。

子テーマを有効化した状態でサイトを表示すると今までと同じサイトが見れているはずです。

 


 

今後Twenty FifteenのカスタマイズはTwenty Fifteen Child を有効化して行います。

子テーマを有効化して外観>テーマエディターを見ると

 

先程レンタルサーバーの管理ツールで作ったstyle.css(スタイルシート )が開いていると思うので「*/」の下からカスタマイズを書いていく事になります。

functions.phpもあるね

 

”親テーマを引き継ぎます”とちゃんと書いてあります◎

 

 

子テーマ 使用例

こうして作った子テーマ、実際にどう使えるか一例です。

 

WPの内容を上書きする

この使い方が一番多いのではないかと思うのですがちょこちょこした部分を自分好みに変更したい。文字の大きさだったり背景色だったりこの区切り線いらないないなぁだったりです。

例えばサイトの一番下、会社情報やロゴなどどのページを見てもだいたい出ている重要な部分、フッター(footer)です。ここをブランドカラーにしたいとします。

 

検証ツールなどを使ってそこの指示に使われているセレクタ(ここでは.site-footer)を調べて

 

style.cssに同じセレクタ(.site-footer)で上書きします。背景色を濃いグレーにしたので文字も白く変更します。

 

こんな感じで変えたい所だけ上書きして変更出来ます。

 

 

投稿記事に装飾を加える

文字を囲んだり、背景に色を付けたり、付箋のようにしたりです。

 

style.cssに(a).box27という指示があったらこうゆう装飾(文字と枠線の間隔、線の太さ、色、角を丸く、、、)をしてくださいねと書いておきます。(b).box27 .box-titleにはタイトル背景色、文字色など書いています。

 

投稿記事を書いていて「あの囲みを使おう」と思ったら(a).box27、(b).box27.box-titleと書けば予めstyle.cssに書いた事と紐付いて

 

囲み線などが表示されます。

 

ちなみに何を書いたか後々になっても分かるように /* 〜 */ スラッシュ、アスタリスクで囲んでその中にコメントを書いておくと便利です。

この中に書いた物はコードとしては認識されないんだよ

 

webアイコンフォントを入れる

私はwebアイコンフォントを入れて投稿記事などに使っています。

 

画像では無く文字と同じ扱いなのでwebアイコンフォントと言います。大きさ、色自由に変えられます。

 

子テーマに作ったstyle.cssに記述(icoMoonのデータをコピペ)します。

 

webアイコンフォントの作り方〜PWへの設置の仕方、実際の使い方も「プログラミング1年生」で説明しています◎

21時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_前編

22時限:WordPressにIcoMoonで作ったwebアイコンフォントを入れる方法_後編

 

icoMoonでオリジナルのイラストをwebアイコンフォントのデータにしてくれます。そのためにはいくつかポイントがあるのでまとめました。画像の保存形式はsvgなのでイラストレーター、インクスケープ(「インクスケープ1年生」あります)は勿論、子供用のプログラミングサイト、スクラッチのお絵かき機能を使って作る事も出来ます。

23時限:webアイコンフォントを描く時の注意点