wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

wordpressで「子テーマ」という用語を聞いたことはありませんか?

まだwordpressを使い始めた初心者の方にとっては、聞きなれないものかもしれません。

ただし、実はこの子テーマについてよく知っておかないと「カスタマイズしまくったCSSが、テーマを更新したら消えて元に戻ってしまった…」なんてことにもなりかねないんです。

そこで今回は、そのような事態に陥らないために、子テーマについてお伝えします。

 
運営者情報
ken logo 100x100 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

WordPressなどのインターネットサービスを利用して、WEBメディア制作などを行っている、株式会社ドミニオン 代表取締役 河村健一です。

約10年くらいの経験と知識を用いて、おすすめできるサービスやWordPressの始め方をご紹介しています。

Twitterでは日々、SEOに関することや近況を発信していますので、是非こちらもチェックしてみてください!

Twitter:https://twitter.com/ken84620459

WordPressの子テーマとは?

まず、子テーマとは、「既存のテーマに加えてカスタマイズしたい時、カスタマイズ部分だけをテーマ化し、既存テーマにくっつける形で使うもの」というイメージです。

子テーマを使うメリット

子テーマの第一のメリットは、親テーマ(子テーマの元になる既存テーマのこと)のアップデートなどの影響を受けない点です。

例えば、頻繁にテーマの更新がある場合(これ自体は良いことなのですが)、色々とカスタマイズしたのに、それが初期化されてしまうといった事態が起こります。

一方で、子テーマを作ってそちらを使っていると、このようなことが発生しません。

WordPressでの子テーマの作り方

それでは実際の子テーマの作り方を説明していきます。簡単ですので、一緒に見て行きましょう。

親テーマをインストール

wp official theme - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

まずは、既存テーマの中から使いたいテーマを選択しましょう。今回はtwenty sixteenの子テーマを作っていきます。

こうしてテーマのインストールまで終わらし、使える状態にしておいてください。

2171410ad04b34ed2d56bf62728b79ed - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

子テーマフォルダ、style.cssを作成

次は、子テーマフォルダを作成します。

例えば、「twenty sixteen-child」のような名前のフォルダにします。その後、「twenty sixteen-child」フォルダ内にstyle.cssを作成し、以下の内容を記入します。

/*
 Theme Name:   Twenty Sixteen child
 Theme URI:    http://example.com/twenty-sixteen-child/
 Description:  Twenty Sixteen Child Theme
 Author:       Exam ple
 Author URI:   http://example.com
 Template:     twentysixteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-sixteen-child
*/

この表記の中で重要なのは2点です。

  • Theme Name:子テーマの名前になります
  • Template:親テーマの名前を入れます。(フォルダ名をそのまま)

子テーマのfunctions.phpを追加

次は、子テーマだと認識させるために、functions.phpを書きます。

<?php
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

上記のような内容を入力してください。

そして、FTPなどでフォルダ毎アップロードします。

54a1ff43da23da61994c34d92930f40c - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめすると、ダッシュボードの外観→テーマのところに、子テーマがテーマの選択ページに出現します。

d8c87b4f0d72d9515accccade6a66caf - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

子テーマのCSSカスタマイズについて

ここまで作れてしまえば、後は簡単です。

子テーマのstyle.cssにCSSを追記していくことで、CSSをカスタマイズできます。

5b1348ac01df52e58f6bec95b4955b50 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめ

ただし、ここで気をつけていただきたいのは、CSSを打ち消すのではなく、追記するという点です。

例えば、「padding:10px」のような指定が親テーマにある場合、それを放置していた場合、そのpaddingが適用されることになります。

functions.phpをカスタマイズ

また、functions.phpをカスタマイズもできます。

例えば、投稿時にカテゴリー分類をしたりなどの作業ができます。

function auto_set_category ( $post_id ) {
  global $post;
  $new_post = get_post( $post_id );
  $content = $new_post->post_content;

/* 全てのカテゴリーをチェック */
$cat_all = get_terms( "category", "fields=all&get=all" );
foreach($cat_all as $value):

/* カテゴリーと同じキーワードが含まれていたら、既存のカテゴリから新規のカテゴリに変更 */
  if ( stripos( $content, $value->name ) !== false ) {
    wp_remove_object_terms( $post_id, 1, 'category' );
    wp_add_object_terms( $post_id, $value->name, 'category' );
}
/* カテゴリーと同じキーワードがない場合、既存のカテゴリを外す */
  else { wp_remove_object_terms( $post_id, $value->name, 'category' ); 
}
endforeach;

/* カテゴリーがない場合は、デフォルトに設定 */
$catcheck = get_the_category($post_id);
if ( is_array($catcheck) && is_null($catcheck[0]) ) {
  wp_add_object_terms( $post_id, 1, 'category' );
			} 
}
add_action( 'save_post', 'auto_set_category' );

header.phpをカスタマイズ

他にも、header.phpなどもカスタマイズすることができます。

こういったファイルは親テーマから一旦コピーをして、カスタマイズ後に子テーマにアップロードするのが良いでしょう。

例えば子テーマにして設定したいこととしたら、Googleアナリティクスのコードくらいでしょうか?

画像パスの工夫

なお、テーマフォルダ内に画像を置いている場合、画像パスが適切にならない時があります。

これは、phpで記載されている関数「bloginfo(‘template_url’)」が使われていることが原因かもしれません。

「bloginfo(‘template_url’)」→「bloginfo(‘stylesheet_directory’)」または「get_stylesheet_directory_uri()」に書き換えることで、対策できるでしょう。

子テーマ制作時のトラブルシューティング

子テーマを作っている時に、あれ?という問題が起きた時のトラブルシューティングの参考もお伝えします。

CSSが反映されない

CSSが反映されない時は、以下の内容を調べてみてください。

  • サーバーが変更を反映しているか(デベロッパーツール上でも確認できるか)
  • CSSの上書きキャンセル忘れがないか

親テーマが見つかりません

親テーマが見つかりませんと出る時は、style.cssにコメントアウトした部分が影響している可能性が高いので、以下を確かめてください。

  • 全角スペースが混ざっていないか
  • Templateの表記と親テーマのTheme Nameは同じか
  • 大文字・小文字が間違えていないか

子テーマで複数のCSSを読み込ませる

親テーマの複数のCSSを上書きしたい場合、優先順位などを気にしなくてはならず、少々面倒になります。

やり方としてはほとんど同じで、functions.phpに追記をしていきます。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'hoge', get_template_directory_uri() .'/hoge.css' );
}

親テーマのCSS読み込み順と合わせるのがポイントです。

WordPressの子テーマに関するまとめ

以上になりますが、いかがでしたでしょうか?

子テーマは一度作成に慣れてしまえば、誰でも簡単に作成することができます。

特に、例えばエックスサーバー0 - wordpressの子テーマの作成方法と初心者向けトラブルシューティングまとめを利用しているのであれば、単純にサーバーフォルダで子テーマのフォルダを作成し、基本的にはstyleシートとfunction.phpのシートをコピーしていれておくだけで完成します。

子テーマを作成した方が、それまでのカスタマイズが無駄になりませんので、ぜひ作成して見てくださいね。最後まで読んでいただき、ありがとうございました。

おすすめの記事