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