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

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

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

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

当ブログはWordPress無料テーマのSimplicity(現在はSANGO)を使用していますが、見出しタグの装飾などのマイナーチェンジは子テーマをカスタマイズしています。

Simplicityは子テーマも無料でダウンロードして使用できる有難いテーマです。

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

WordPressの子テーマとは

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

分かり易く教えてね。

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

子テーマフォルダの作成

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマフォルダの作成

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマフォルダの作成

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

FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】FileZillaの使い方を初心者向けに分かりやすく解説【FTPソフト】

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマフォルダの作成

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマフォルダの作成

ファイルの作成

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

  • style.css
  • functions.php

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 ファイルの作成

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

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

style.css

/*
Theme Name: 子テーマの名前
Template: 親テーマのフォルダ名
*/

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' );
 
}

こんな感じですね。

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 ファイルの作成

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 ファイルの作成

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 ファイルの作成

子テーマの有効化

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

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

壊れてるジャン(笑)。

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

最初は、『IZM』と入力したのですが、これは認識されずに「壊れています」となってしまいました。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

スポンサーリンク

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

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

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

/* 蛍光ペン  */
strong {
background: linear-gradient(transparent 0% , #ffff00 0% );
}

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマのstyle.cssにコードを書きこんで反映されるかテスト

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 子テーマのstyle.cssにコードを書きこんで反映されるかテスト

ちゃんと反映されてますね。

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

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法<

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

??

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

大きくなっていないような…。

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

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

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

参考 子テーマのstyle.cssに入力したCSSが反映されない理由と対策西沢直木のIT講座

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

おお!でっかくなりましたね。

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

2016/7/23追記

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

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

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

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

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

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); echo '?' . filemtime(get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />

TCDテンプレート『IZM(tcd034)』の子テーマを作成する方法 CSSが反映されない場合の対処法

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

まとめ

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

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

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

TCDテンプレート『IZM(tcd034)』カスタムCSS

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

TCD無料テンプレート
TCD最新テンプレート

IZM関連記事一覧はコチラ

コメントを残す

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

日本語が含まれない投稿や心無いコメントは無視されますのでご注意ください。(スパム対策)