WordPressの子テーマ作成方法と編集上のメリット

WordPressの子テーマ

WordPressのテーマでは、子テーマというものを作ることが出来る。

WordPressでブログやWebサイトを作るならば、多くの場合テーマは無料のものか購入するか作られたものをインストールした方が良い。自分で作るにはプログラミングとデザインの両方のスキルが必要だし、良い外観のテンプレートを作れてもバグがあったりSEOに弱ければ問題だから。

しかし、ある程度使っていくと他者の作ったテーマを弄りたくなる。デザインのこだわりが出てくる。すると、デフォルトの「外観」→「カスタマイズ」で編集出来る範囲のデザイン変更では物足りなくなる。有名なテンプレートだと他ブログとの違いも少なく個性もないし、積極的にアレンジしたい。

そんな時、子テーマを作成して弄る方がリスクがなくメリットが多い。

著者にしくんについて

ABOUT US

にしくん

身長109cm、体重19kg、26歳。横紋筋肉腫（小児がん）、ムコ多糖症モルキオ病（ライソゾーム病）。高卒でフリーで仕事をしようとするがなかなか上手く行かず、後に上場するIT企業の株式会社セラクに21歳で入社。しかし、22歳3月に同級生は新卒になるから逆のことがしたいとニートに。そして、スマホアプリ開発、クラブダンサー、ライター、YouTuber、ホストなどを経て23歳でSOD専属の監督兼男優になる。現在は、ドラマや映画で俳優、テレビや雑誌などでタレントとして活動。また、IT企業の株式会社フリューゲルで執行役員、部長をしつつ現役のプログラマー。弊社では、未経験者へのプログラミング教育もしていて積極的に採用中。詳細、質問などはSNSでお気軽にどうぞ。

• WebSite
• Twitter
• Facebook
• Google+
• Instagram

ブログ移籍しました

KOHEY NISHI'S BLOG

Sponsored Link

作成方法と編集上のメリット

子テーマというのは上書き機能。最初に親テーマから情報を読み取るのだけれど、子テーマが存在していれば子テーマの内容が反映させる。親テーマではタイトルを赤字に指定していても、子テーマでタイトルを青字とすればタイトルは青くなる。

子テーマを作成する主なメリットは２つ。

・テーマをアップデートしても影響がない
・ミスしても簡単に元どおりに出来る

WordPressは常に新しい仕様になるからそれに合わせてテーマも更新される。そんな時、インストールしたテーマそのもののコードを弄っていても更新されると、弄った部分が更新にしたがって消えてしまう。

また、もし子テーマを作って弄ったなら、ミスした場合にも子テーマの一部を削除すれば簡単に元通りになる。

だから、子テーマを作って弄った方が良い。

親切なテーマだと、子テーマも用意されている。しかし、よくわからなければ子テーマまでインストールしていないかもしれないので、ここでは自分で作ってみる。

最低限用意するのはスタイルシート（style.css）と、テーマのための関数（functions.php）だけ。

とても簡単！

“style.css”と”functions.php”

まずは子テーマの名前を決めてZIPファイルを作る。

フォルダの名前の付け方に決まりはないけれど、親テーマが”theme”という名前なら“theme-child”とかにするとわかりやすくて良い。そして、フォルダの中に”style.css”と”functions.php”を作る。

それぞれ以下のように記述する。

	/*
	Theme Name: Theme Child
	Template: theme
	*/

view raw style.css hosted with by GitHub

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

view raw functions.php hosted with by GitHub

CSSやFunctionsを追加する場合は子テーマの方に記述する。

そして、ZIPファイルにして「外観」 → 「テーマ」 → 「新規追加」 → 「テーマのアップロード」 → 「ファイルの選択」 → 「今すぐインストール」で、子テーマの方を有効化する。

すると、テーマをアップデートしても子テーマの追加部分の変化はないし、バグや不都合があれば記述を削除するだけで良い。

例えば「読みやすいブログ記事の書き方｜PREP法、”strong”と”b”の違い」に記述したものを追加してみる。

蛍光色マーカー

	.pink_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;
	}
	.blue_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;
	}
	.yellow_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%) repeat scroll 0 0;
	}
	.pink_bold_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 0%, #FFDFEF 0%) repeat scroll 0 0;
	}
	.blue_bold_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 0%, #cce5ff 0%) repeat scroll 0 0;
	}
	.yellow_bold_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 0%, #ffffbc 0%) repeat scroll 0 0;
	}
	.pink_thin_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #FFDFEF 0%) repeat scroll 0 0;
	}
	.blue_thin_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #cce5ff 0%) repeat scroll 0 0;
	}
	.yellow_thin_line{
	background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffffbc 0%) repeat scroll 0 0;
	}

view raw color-line.css hosted with by GitHub

moreタグ

	add_filter('the_content', 'adMoreReplace');
	function adMoreReplace($contentData) {
	if (is_mobile()){
	$adTags = <<< EOF
	<!--スマホ用-->
	EOF;
	}else{
	$adTags = <<< EOF
	<!--PC用・タブレット用-->
	EOF;
	}
	$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
	$contentData = str_replace('<p></p>', '', $contentData);
	$contentData = str_replace('<p><br />', '<p>', $contentData);
	return $contentData;
	}

view raw adMoreReplace hosted with by GitHub

を子テーマの方に記述すると、classの”pink_line”やmoreタグ位置の広告を使えるようになる。

部分的にオリジナルにする

全体的には今のテーマで気に入っている。ある程度のデザインはカスタマイズとウィジェットで出来る。しかし、それを超えたテーマとは違うオリジナルの編集をしたいことがある。

例えば、今現在のテンプレートで大方は満足しているのだけれど、ある時、他に一部だけ羨ましいデザインがあったとする。LION MEDIAというテーマはスマホで開くと上にニュースみたいな横流れの文字スペースと、スライド式メニューがある。（下の画像タップで動き確認可）

これがデフォルトで存在しないテーマでも、子テーマを使うことで実装出来る。ヘッダー部分を記述するファイル”header.php”をコピーして子テーマに置き、それを編集する。すると、本来のテーマで出来ないレベルの変更追加も出来るようになる。

ただ与えられたテーマのデザインで満足ならばそれで良い。しかし、皆とデザインの差別化をしたい！徘徊率や広告効果を上げたい！もっと自分らしいブログにしたい！となった時は子テーマが必須になるので、子テーマを作成しよう！

読みやすいブログ記事の書き方
子テーマ作成方法と編集上のメリット
フリーランスITエンジニア向け案件紹介
ショートコードを作成使用
転職を本気で考えている方向けのプログラミングスクール！【WebCampPRO】