前回でWordPressのバックアップ方法をマスターしました。
今回はWordPress有料テーマTCDテーマIZM(TCD034)の子テーマを作成して行きたいと思います。
わたくしのこのブログはWordPressの無料テーマのSimplicityです。
見出しタグの変更といったブログの装飾はSimplicityの子テーマをカスタマイズしています。子テーマまで無料でダウンロードして使用できる有難いテーマです。
しかしTCDには子テーマといったものが存在しませんので、自前で用意するしか方法はないという事です。
目次
WordPressの子テーマとは
いったいWordPress子テーマとはどういう役割をしているのでしょうか？
簡単に言いますと、WordPressテーマ(親テーマ)をカスタマイズするための専用テーマです。
親テーマ➝子テーマという感じで親テーマのスタイルを子テーマが引き継ぎます。次に子テーマ自体をカスタマイズしてブラウザに表示させます。
WordPressのテーマというのは、繁盛にアップデートを繰り返します。改良を加えていくのですね。ファイルが上書きされて新しいバージョンになります.
ここで親テーマに直接カスタマイズを加えていますと、加えた部分は上書きされて、真っ新の状態に戻ってしまいます。
一方で子テーマを作成してその子テーマ自身をカスタマイズしてやりましても、アップロードされた場合でもファイルは上書きされずに、カスタマイズした内容はそのまま残ります。
という事はオリジナリティ溢れるテーマの応用が出来る事になります。
子テーマを作る方法
では実際に子テーマを作っていきたいと思います。
子テーマを作成するには3つのステップが必要になります
| 1 | 子テーマのフォルダの作成 |
|---|---|
| 2 | ファイルの作成 |
| 3 | 3.ファイルにコードを記入 |
子テーマフォルダの作成
まずはフォルダを作成して行きますが、どこにフォルダを作成するのかと言いますと、「wp-content」➝「themes」のizmの親フォルダと同じ階層に作成します。
デスクトップに新しいフォルダを作成して名前をizm_tcd034-childに変更します。
ここでFFFTPで先ほど作成しましたフォルダをアップロードしてやります。
FFFTPを起動して左のデスクトップ欄から右のthemesフォルダ内へコピーしてやります。
これで新しいフォルダ「izm_tcd034-child」が作成されました。
ファイルの作成
今度は先ほど作成しましのフォルダ「izm_tcd034-child」の中に2つのファイルを新規作成します。
- style.css
- functions.php
デスクトップで新規でメモ帳を開き、「style.css」「functions.php」の2個の新規ファイルを作成します。
ファイルに親テーマを継承するコードを記入していきます。ファイルをTeraPadに放り込んで下記のコードを貼り付けて保存します。
style.css
1 2 3 4 | /* Theme Name: 子テーマの名前 Template: 親テーマのフォルダ名 */ |
functions.php
1 2 3 4 5 6 7 | <?php //子テーマで利用する関数を書く add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } |
こんな感じですね。
この2つのファイルをFTPソフトで先ほど作成した「izm_tcd034-child」の中にアップロードします。
子テーマの有効化
最後は子テーマを有効化します。
ダッシュボード➝外観➝テーマの編集と進みます。
何故か子テーマが認識されずに1時間ほど費やしました。結果親テーマ名はフォルダ名を記入すると認識されました。
最初は、
これは認識されずに「壊れています」となってしまいました。
これを訂正してやるには、
親テーマの名前をフォルダ名と同じにしてやればOKです。
こんな感じで子テーマが現れました。
さっそく有効化してみたところ、左のサイドバーに異変が・・・
親テーマ(変更前)
子テーマ(変更後)
Simplycityにテーマを戻して、インデックスリストトップに貼り付けているWhat’s Newのコードを削除してみました。すると左サイドバーが何も表示されなくなりました。
仕方がなく親テーマのサイドバーと同じように設定し直しました。
子テーマのstyle.cssにコードを書きこんで反映されるかテスト
子テーマのstyle.cssへコードを書きこんで反映されるかテストしてみます。
強調文を蛍光ペンでなぞったようにするコード
1 2 3 4 | /* 蛍光ペン */ strong { background: linear-gradient(transparent 0% , #ffff00 0% ); } |
外観➝テーマの編集にすすみstyle.cssにコードを貼り付けます。
試し書きを行いますと確かに反映されていました。
cssが反映されない場合の対処法
次にサイドバーの文章の文字の大きさを変えたいと思います。
初期設定では異様に文字が小さいです。
これをもう少し大きくして行きます。
ダッシュボード➝外観➝style.css編集へ進みます。
ここに親テーマから左サイドバーの文字を設定するコードをコピーして来て貼り付けます。更にfont-size:12px➝font-size:15pxに変更してやります。
？？
反映されていない様です。
ここでまたもやシンキングタイムに入りました。分からなければネットで検索というのが今の世の中の良いところです。
調べてみた所、TCDは子テーマが反映されない事があるらしく、header phpのコードを書き替えがどうのこうのと、素人のわたくしには難しすぎて何のことやら・・・
もう少し簡単な方法はないのかと探してみると、参考になるような記事を発見！
この記事によりますと、「!important」を付けてやりますと反映されるという事ですが。
先ほどのコードの15pxの後ろに「!important」を挿入します。
これで反映されているのでしょうか？
どうやら反映されたようです。
ただ、このブログでも指摘されていますように、「!important」を付ける必要のない部分まで安易に付けると、収拾がつかなくなるとの事なので注意して行う必要がありますね。
2016/7/23追記
別の方法で反映されましたので付け加えておきます。
1．子テーマにheader.phpというファイルを作成してFTPソフトでアップロードします。
2.そこに親テーマのheader.phpの内容をコピーして子テーマのheader.phpに貼り付けます。
3.header.php内のの下に以下のコードを記入。
1 | <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が反映されないとややこしくなってきますね。良い勉強になりました。
最後になりますが、TCDテーマIZMにはテーマオプションにカスタムCSSというのがありまして、こちらにCSSを書き込む事でテーマファイルを直接編集することなく安全にカスタマイズが可能になるという事です。
ここに書き込みますとアップデート時にも上書きされて消えることなく引き継がれます。という事はまるで子テーマその物ですね(笑)。
