functions.phpを含めたwordpressテーマの子テーマを作る

 今回の課題は1.親テーマをカスタマイズしていた場合の子テーマの作り方、2.function.phpの子テーマ化だ。

 function.phpの子テーマの作り方があまり情報がなく苦労したが無事function.phpも子テーマ化できたので皆さんにご披露する。

 意外にスタイルシートの子テーマの情報はあるんだけど。




WordPressテーマのカスタマイズに子テーマは必要不可欠

 wordpressをカスタマイズするときは子テーマを作って、そちらをカスタマイズしたほうが良いそうだ。

 親テーマを直接カスタマイズするとテーマがバージョンアップされたときにカスタマイズした部分が上書きされてデフォルトのテーマになってしまう。

 めんどくさいけど、子テーマは作っておいたほうがよさそう。

 テーマによっては、子テーマを提供してくれているものもあるけど。

 子テーマがない場合、自力で作るしかない。

子テーマ作成の手順

 子テーマ作成の大まかな手順は

1.テーマをダウンロード。

2.ダウンロードしたテーマフォルダから必要なファイルを選択して子テーマのフォルダを作る。

3.子テーマをwordpressにインストール。

4.インストールした子テーマを適応できるようにする。

5.子テーマのfunction.phpの書き換えと親テーマからのコードの削除。

6.子テーマを有効化。

テーマをPCにダウンロード

 ファイル転送ソフト(FTPクライアントソフト)を使う。

*ファイル転送ソフト(FTPクライアントソフト)「WinSCP」についてはこちらを見てね

1.ファイル転送ソフト(FTPクライアントソフト)を起動させて,サーバー側の「wp-content」をダブルクリックして開く。

2.サーバー側の「theme」フォルダをクリック⇒「適応しているテーマ」を選択しPC側にダウンロードする。

 これで今までカスタマイズしたテーマの保存が終了。

ダウンロードしたテーマフォルダから必要なファイルを選択して子テーマのフォルダを作る

 ダウンロードしたフォルダをファイル転送ソフト(FTPクライアントソフト)でダブルクリックして開いてみると、いろいろなphpやcssファイルがある。

 この中から必要なファイルを選択する。

*以下の作業はファイル転送ソフト(FTPクライアントソフト)の上で行う。

1.ダウンロードしたテーマフォルダをPC側の保存場所から開く。

2.パソコン上の空白部分で右クリック。

3.「新規作成」⇒「フォルダ」で新しいフォルダをつくる。

4.新しく作ったフォルダに名前をつける。
 例)親テーマが「stinger3ver20140327」→新しい子テーマのフォルダ名を【child-stinger3】にした。

5.Ctrlを押しながら必要なファイルを選択⇒右クリック⇒コピー。

6.作った新しい子テーマ用のフォルダを開いて右クリック⇒貼り付けで、必要なファイルをフォルダ内に入れる。

子テーマをwordpressにインストール

 子テーマをWordPressにインストールする。

 子テーマのインストール方法は

  • ファイル転送ソフト(FTPクライアントソフト)を使ってインストールする
  • WordPress管理画面からインストールする

 どちらの方法でもOK。

 ただし、どちらの場合も、インストールが済んでもまだ有効化はしてはだめです!

ファイル転送ソフト(FTPクライアントソフト)を使って子テーマをインストールする場合

1.ファイル転送ソフト(FTPクライアントソフト)を起動させて,サーバー側の「wp-content」をダブルクリック。

2.PC側の一番上のフォルダをダブルクリックして子テーマの保存場所のフォルダを開く。

3.子テーマをクリックし、サーバー側の「theme」フォルダまで持って行く。

WordPressの管理画面から子テーマをインストールする場合

1.子テーマのフォルダをZip形式に圧縮しておく。
 Zip形式に圧縮する方法は「Zipフォルダーを作って添付ファイルの容量を減らそう」を見てね。

2.WordPressの管理画面の〔外観〕→〔テーマ〕をクリック。

3.〔新規追加〕をクリック。

4.〔テーマのアップロード〕をクリック。

5.〔ファイルの選択〕をクリックし、子テーマのZipフォルダを選択する。

6.〔今すぐインストール〕をクリックする。

インストールした子テーマを適応できるようにする

1.サーバー(うちの場合はミニバード)に接続

2.FTPアカウントにログイン。

3.【wp-content】⇒【theme】をクリック。

4.子テーマのフォルダをクリック。

5.スタイルシートphp(style.css)とモバイル用のスタイルシートを開いて、以下の記述を書き加える。

/*
Theme Name:半角スペース+子テーマの名前
Template:半角スペース+親テーマの名前
*/

 うちのサイトの場合は↓

/*
Theme Name: child-stinger3
Template: stinger3ver20140327
*/

子テーマのfunction.phpの書き換えと親テーマからのコードの削除

1.サーバーに接続(うちの場合はミニバード)。

2.FTPアカウントにログイン。

3.【wp-content】⇒【theme】をクリック。

4.【function.php】を開いてすべての記述を削除し、変わりに以下の記述を追加。

<?php
?>

*カスタマイズしたいコードがあるときは、以下のように記述する

<?php
追加したいコード
?>

5.上書きして保存。

*親テーマのfunction.phpにカスタマイズしたコードがすでにある場合は、子テーマに記述し、親テーマからコードを削除し上書き保存する。

子テーマを有効化

 最後にWordPressの管理画面から子テーマを有効化する。

WordPressの管理画面に入れなくなったら

 子テーマの有効化後、WordPressの管理画面に入れなくなることがある。

 カスタマイズに失敗したということだけど…。

 この場合は、ファイル転送ソフト(FTPクライアントソフト)でダウンロードした元のファイルをアップロードして、ソフト上で子テーマのフォルダを削除する。