TCDテーマIZM(TCD034)の子テーマを作成する方法【WordPress有料テーマ】

izm-child

前回でWordPressのバックアップ方法をマスターしました。

今回はWordPress有料テーマTCDテーマIZM(TCD034)の子テーマを作成して行きたいと思います。

わたくしのこのブログはWordPressの無料テーマのSimplicityです。

見出しタグの変更といったブログの装飾はSimplicityの子テーマをカスタマイズしています。子テーマまで無料でダウンロードして使用できる有難いテーマです。

しかしTCDには子テーマといったものが存在しませんので、自前で用意するしか方法はないという事です。

スポンサーリンク

WordPressの子テーマとは

いったいWordPress子テーマとはどういう役割をしているのでしょうか?

飼いヌコ
分かり易く教えてね。

簡単に言いますと、WordPressテーマ(親テーマ)をカスタマイズするための専用テーマです。

親テーマ➝子テーマという感じで親テーマのスタイルを子テーマが引き継ぎます。次に子テーマ自体をカスタマイズしてブラウザに表示させます。

飼いヌコ
何故にそんなややこしい事を?

WordPressのテーマというのは、繁盛にアップデートを繰り返します。改良を加えていくのですね。ファイルが上書きされて新しいバージョンになります.

ここで親テーマに直接カスタマイズを加えていますと、加えた部分は上書きされて、真っ新の状態に戻ってしまいます。

一方で子テーマを作成してその子テーマ自身をカスタマイズしてやりましても、アップロードされた場合でもファイルは上書きされずに、カスタマイズした内容はそのまま残ります。

という事はオリジナリティ溢れるテーマの応用が出来る事になります。

飼いヌコ
ふ~ん、子をいじれって事ですね。

子テーマを作る方法

では実際に子テーマを作っていきたいと思います。

子テーマを作成するには3つのステップが必要になります

1子テーマのフォルダの作成
2ファイルの作成
33.ファイルにコードを記入

子テーマフォルダの作成

まずはフォルダを作成して行きますが、どこにフォルダを作成するのかと言いますと、「wp-content」➝「themes」のizmの親フォルダと同じ階層に作成します。

IZMの子テーマの作成1

デスクトップに新しいフォルダを作成して名前をizm_tcd034-childに変更します。

IZMの子テーマの作成2

ここでFFFTPで先ほど作成しましたフォルダをアップロードしてやります。

飼いヌコ
前回勉強したFTPですね。

FFFTPを起動して左のデスクトップ欄から右のthemesフォルダ内へコピーしてやります。

IZMの子テーマの作成3

これで新しいフォルダ「izm_tcd034-child」が作成されました。

IZMの子テーマの作成9

ファイルの作成

今度は先ほど作成しましのフォルダ「izm_tcd034-child」の中に2つのファイルを新規作成します。

  • style.css
  • functions.php

デスクトップで新規でメモ帳を開き、「style.css」「functions.php」の2個の新規ファイルを作成します。

IZMの子テーマの作成4

ファイルに親テーマを継承するコードを記入していきます。ファイルをTeraPadに放り込んで下記のコードを貼り付けて保存します。

飼いヌコ
大丈夫かな?画面が真っ白になったりしないかな?

style.css

functions.php

こんな感じですね。

IZMの子テーマの作成8

IZMの子テーマの作成6

この2つのファイルをFTPソフトで先ほど作成した「izm_tcd034-child」の中にアップロードします。

IZMの子テーマの作成7

子テーマの有効化

最後は子テーマを有効化します。

ダッシュボード➝外観➝テーマの編集と進みます。

IZMの子テーマの作成7

飼いヌコ
壊れてるジャン(笑)。

何故か子テーマが認識されずに1時間ほど費やしました。結果親テーマ名はフォルダ名を記入すると認識されました。

最初は、

IZMの子テーマの作成8

これは認識されずに「壊れています」となってしまいました。

これを訂正してやるには、

IZMの子テーマの作成10

親テーマの名前をフォルダ名と同じにしてやればOKです。

IZMの子テーマの作成11

こんな感じで子テーマが現れました。

IZMの子テーマの作成12

さっそく有効化してみたところ、左のサイドバーに異変が・・・

親テーマ(変更前)

IZMの子テーマの作成13

子テーマ(変更後)

IZMの子テーマの作成14

飼いヌコ
プロフィールとカテゴリーが消えてますね。おまけにSimplycityのWhat’s New Generatorが表示されていますね。

Simplycityにテーマを戻して、インデックスリストトップに貼り付けているWhat’s Newのコードを削除してみました。すると左サイドバーが何も表示されなくなりました。

IZMの子テーマの作成15

仕方がなく親テーマのサイドバーと同じように設定し直しました。

子テーマのstyle.cssにコードを書きこんで反映されるかテスト

子テーマのstyle.cssへコードを書きこんで反映されるかテストしてみます。

強調文を蛍光ペンでなぞったようにするコード

外観➝テーマの編集にすすみstyle.cssにコードを貼り付けます。

IZMの子テーマの作成16

試し書きを行いますと確かに反映されていました。

IZMの子テーマの作成17

飼いヌコ
ちゃんと反映されてますね。

cssが反映されない場合の対処法

次にサイドバーの文章の文字の大きさを変えたいと思います。

初期設定では異様に文字が小さいです。

IZMの子テーマの作成18

これをもう少し大きくして行きます。

ダッシュボード➝外観➝style.css編集へ進みます。

ここに親テーマから左サイドバーの文字を設定するコードをコピーして来て貼り付けます。更にfont-size:12px➝font-size:15pxに変更してやります。

IZMの子テーマの作成19

??

IZMの子テーマの作成20

飼いヌコ
大きくなっていないような・・・

反映されていない様です。

ここでまたもやシンキングタイムに入りました。分からなければネットで検索というのが今の世の中の良いところです。

調べてみた所、TCDは子テーマが反映されない事があるらしく、header phpのコードを書き替えがどうのこうのと、素人のわたくしには難しすぎて何のことやら・・・

もう少し簡単な方法はないのかと探してみると、参考になるような記事を発見!

この記事によりますと、「!important」を付けてやりますと反映されるという事ですが。

先ほどのコードの15pxの後ろに「!important」を挿入します。

IZMの子テーマの作成21

これで反映されているのでしょうか?

IZMの子テーマの作成22

飼いヌコ
おお!でっかくなりましたね。

どうやら反映されたようです。

ただ、このブログでも指摘されていますように、「!important」を付ける必要のない部分まで安易に付けると、収拾がつかなくなるとの事なので注意して行う必要がありますね。

2016/7/23追記

別の方法で反映されましたので付け加えておきます。

1.子テーマにheader.phpというファイルを作成してFTPソフトでアップロードします。

IZMの子テーマの作成24

2.そこに親テーマのheader.phpの内容をコピーして子テーマのheader.phpに貼り付けます。

3.header.php内のの下に以下のコードを記入。

IZMの子テーマの作成25

これで無事に反映されました。

TCDテーマIZM(TCD034)の子テーマ作成のまとめ

子テーマ自体を作るのにはさほど時間がかかりませんでしたが、cssが反映されないとややこしくなってきますね。良い勉強になりました。

最後になりますが、TCDテーマIZMにはテーマオプションにカスタムCSSというのがありまして、こちらにCSSを書き込む事でテーマファイルを直接編集することなく安全にカスタマイズが可能になるという事です。

ここに書き込みますとアップデート時にも上書きされて消えることなく引き継がれます。という事はまるで子テーマその物ですね(笑)。

IZMの子テーマの作成23

飼いヌコ
最初からここに貼り付ければ良かったですね(笑)。

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です