TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

今回は、TCDテンプレート『IZM(tcd034)』の子テーマを作成して行きたいと思います。

当ブログはWordPress無料テーマのSimplicityを使用しています。見出しタグの装飾などのマイナーチェンジは、Simplicityの子テーマをカスタマイズしています。Simplicityは子テーマまで無料でダウンロードして使用できる有難いテーマです。

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

スポンサーリンク

WordPressの子テーマとは

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

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

簡単に言うと、WordPressテーマ(親テーマ)をカスタマイズするための専用テーマになります。『親テーマ』⇒『子テーマ』という風に、親テーマのスタイルを子テーマが引き継ぎ、カスタマイズが必要な場合は、子テーマに記載してブラウザに表示させます。

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

WordPressのテーマというのは、繁盛にアップデートを繰り返します、バグを修正したり、改良を加えていくのですね。この場合、元のファイルが上書きされて新しいバージョンになります。ここで親テーマに直接カスタマイズを加えている場合、加えた部分は上書きされて、真っ新の状態に戻ってしまいます。

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

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

『IZM(tcd034)』の子テーマを作る方法

実際に『IZM(tcd034)』の子テーマを作っていきたいと思いますが、子テーマを作成するには3つのステップが必要になります

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

子テーマフォルダの作成

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

作成したフォルダをFTPソフトでアップロードしてやります。

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

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

ファイルの作成

次に、先ほど作成したフォルダ『izm_tcd034-child』の中に、2つのファイルを新規作成します。

  • style.css
  • functions.php

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

style.css

functions.php

こんな感じですね。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

子テーマの有効化

最後は子テーマを有効化して完了です。ダッシュボードから『外観』⇒『テーマの編集』と進みます。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

何故か子テーマが認識されずに1時間ほど費やしましたが、親テーマ名にフォルダ名を記入すると認識されました。最初は、『IZM』と入力したのですが、これは認識されずに「壊れています」となってしまいました。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

このように子テーマが現れました。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

icon-check-square-o 親テーマ(変更前)

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

icon-check-square-o 子テーマ(変更後)

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

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

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

『外観』⇒『テーマの編集』に進んで、style.cssにコードを貼り付けます。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

試し書きを行ってみると、確かに反映されていました。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

次にサイドバーの文章の文字の大きさを変えたいと思います。初期設定では異様に文字が小さいです。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

これをもう少し大きくして行きます。ダッシュボードから『外観』⇒『style.css編集』へ進み、親テーマから左サイドバーの文字を設定するコードをコピーして来て貼り付けてやり、『font-size:12px⇒『font-size:15px』に変更します。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

??

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

調べてみた所、TCDは子テーマが反映されない事があるらしく、『header php』のコードを書き替えがどうのこうのと、素人のワタシには難しすぎて何のことやら・・・。 もう少し簡単な方法はないのかと探してみると、参考になるような記事を発見!

この記事によると、『!important』を付けてやると反映されるという事でした。先ほどのコードの『15px』の後ろに『!important』を挿入してみました。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

2016/7/23追記

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

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

3.『header.php』内の<!–?php wp_head(); ?–>の下に以下のコードを記入。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

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

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

最後になりますが、TCDテンプレート『IZM(tcd034)』にはテーマオプションにカスタムCSSという項目があり、こちらにコードを書き込む事で、テーマファイルを直接編集することなく安全にカスタマイズが可能になるという事です。

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法【WordPress有料テーマ】

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

TCD最新テンプレート


IZM(TCD34)関連記事
スポンサーリンク

フォローする

コメントをどうぞ

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