1. ホーム
  2. テンプレ比較
  3. メシプレ02マニュアル
  4. ≫メシオプレス02 子テーマを使ったカスタマイズ基本 

メシオプレス02 子テーマを使ったカスタマイズ基本 

メシオプレス02に限らず、ワードプレスのテーマを直接編集しちゃうと、テーマがアップデートされたときに、修正した箇所が消えちゃうんですよね。

※メシオプレス02は、今のところインストールされるテーマ名を毎回変更して、誤って上書きしちゃわないようになってるみたいです。

そこで良く使われるのが「子テーマ」

kote-ma1

対象テーマの、修正したい場所だけを別テーマとして切り離してしまうというやり方です。

やり方は、ワードプレスの公式サイトでも紹介されています(子テーマの作り方)が、言ってることがちょっとむずかしいんですよ。やることはカンタンなんですけどね。

このサイトでは、難しい理屈は抜きにして「こうしたらとりあえず出来る」っていう方法を解説していきますね。

子テーマの作り方

フリーのFTPツールなどを使って、ファイルの転送やフォルダ作成ができる方なら、とりあえず可能です。

大きな流れはこんな感じ

  1. サーバ上に子テーマ用のフォルダを作る
  2. style.css内で親テーマを指定する
  3. 思う存分カスタマイズする

では、やっていきましょう。

サーバ上に子テーマ用のフォルダを作る

まず、フリーのFTPツールで、あなたのワードプレスが動いているサーバに接続してください。
そして、以下のフォルダまで移動します。

<ワードプレスのインストールフォルダ>/wp-content/themes

ここに、子テーマ用のフォルダを作ってください。
フォルダの名前は、アルファベット(+数字)ならなんでもOK。

ただし、すでにあるフォルダとカブらないようにしてくださいね。ちなみに、2014年8月時点のメシオプレス02フォルダは「msx-02-140805」です。たぶん、今後アップデートされたら、後ろの数字が変わっていくんだと思います。

ここでは例として、kote-ma というフォルダを作りました。

サーバでコマンド実行して、確認した結果がこちら。

bash-4.1# pwd
/var/www/html/orenosa-ba/wp-content/themes
bash-4.1# ls
index.php  infoplate5wp  kote-ma  msx-02-140805  twentyfourteen  twentythirteen  twentytwelve
bash-4.1# cd kote-ma/
bash-4.1# ls
screenshot.png  style.css

style.css内で親テーマを指定する

子テーマフォルダ内に、style.css という名前のファイルを作ります。
パソコンで、以下の様なファイルを作ってください。
保存時に、文字コードはUTF-8を指定してね。

/*
Theme Name:     子テーマで~っす
Theme URI:      http: //kote-ma.com/
Description:    子テーマの説明でーす
Author:         ORE-SAMA
Author URI:     http: //kote-ma.com
Template:       msx-02-140805
Version:        0.1.0
*/
@import url('../msx-02-140805/style.css');

うわあ…なんかズラズラと…って、思うかもしれませんが、必須なのは「Template」だけです。っていうか、これだけでもOK。Theme Nameは必須らしいんですが、なくても動きました。

Templateには、メシオプレス02のフォルダ名を書いてください。
@import…のところは、

@import url('../<メシオプレス02のフォルダ名>/style.css');

って書いてね。

めんどくさい人用

/*
Template: msx-02-140805
*/
@import url('../msx-02-140805/style.css');

さて、これで外観→テーマを見てみると…。

kote-maitiran

できとる!

表示が真っ白で気になるというひとは、子テーマのフォルダに、screenshot.png という名前でサムネイル画像を置いておくと、表示されます。サイズは320 x 240 くらいで作っておけばいいと思います。

kote-masamuneiru

調子に乗ってサムネイルを作った例


思う存分カスタマイズする

ひとまず、スタイルシートのカスタマイズと、内部関数のカスタマイズをざっくり解説しますね。

スタイルシートのカスタマイズ

子テーマフォルダ内のstyle.cssに続けてどんどん書いていってください。
オリジナルで定義されたクラスなんかは、上書き定義できます。

ワードプレスのインストールフォルダ/wp-content/themes/子テーマフォルダ/style.css

/*
Template: msx-02-140805
*/
@import url('../msx-02-140805/style.css');

独自のスタイルシート定義をここから下に書いていく…

内部関数(functions.php)のカスタマイズ

ワードプレスのインストールフォルダ/wp-content/themes/子テーマフォルダ/functions.php

<?php

ここに、関数定義などを書く

?>

そんな感じ。
いったんファイル作っちゃえば、ワードプレス管理画面の外観←テーマ編集から、子テーマのファイルを編集できます。

LINEで送る
Pocket