現在地: トップページ » WordPress » WordPressの子テーマを作る(だけ)の手順!

WordPressの子テーマを作る(だけ)の手順!

WordPressのカスタマイズは、子テーマを作るのが簡単便利!
親テーマのファイルをそのまま上書きしてカスタマイズしても良いですが、更新すると新しく上書きされてしまうため、また一からカスタマイズしなくてはいけません。子テーマを作成すれば、親テーマを更新しても子テーマのスタイルが残ります! ・・・
と、いろいろなブログや参考書に載っていますので、僕もチャレンジ!

親テーマの選択 choice theme

テーマは、WordPressのインストール直後のダッシュボード、外観 >> テーマ から選べます。今回は、Twenty Sixteen を選択しました。 これは、デフォルトでインストールされているテーマです。新規追加で、たくさんの中から自分お好みのテーマを選ぶことができます!
 
20160822_theme
 
設定 >> 一般 を選択すると、WordPress のインストール時に入力した、サイトのタイトル、キャッチフレーズやメアドが入力されています!便利ですね!
 
20160823_configuration
 
現時点でどのようなサイトになっているか、見てみます。 左上のサイトのタイトルを、マウスオーバーすると「サイトを表示」というドロップダウンが出るので、クリック。
 
20160823_view-site
 
Twenty Sixteen のテンプレートでサイトが表示されます!
 
20160823_first-site
 
それでは、いよいよ子テーマを作成していきます!
 

子テーマ作成のガイドライン guidelines of make child-theme

子テーマのフォルダーを作成 cook folder

はじめに、WordPressがインストールしてあるフォルダーの中にある themes というフォルダーの中に、子テーマ用のフォルダーを作ります。
下の写真では、twentysixteen-child(好きな名前で良い)としてあります。
場所: /wordpressがインストールしてあるフォルダー/wp_content/themes/
 
20160823_twentysixteen-child-folder
 
twentysixteenで最低限必要なファイルは、下図にあるファイルです(だと思います)。.cssファイルは、テーマによって数が違います。すべての.cssファイルを関連付けておきます。

  • style.css スタイルシートです。すべてのテーマにあります(中身は空にしておきます)
  • rtl.css twenty sixteenの場合はあります(中身は空にしておきます)
  • screenshot.png テーマを選ぶ一覧に出てくるスクリーンショットになります。自由に作ります(推奨サイズは880px × 660pxです)
  • functions.php 必要な関数をここに書いていきます。すべてのテーマにあります

 
20160823_required-files
 

style.cssの編集

style.cssの冒頭に、次のようなコメント文(/*から始まり*/で終わる)を入力することで、テーマに認識されます。必ず必要なのは、2行目の Theme Name と5行目の Template(親テーマのフォルダ名)です。 このコメント文以降は、何も記載していない状態です。
 

/*
	Theme Name:	twentysixteenの子テーマ
 	Author:		Takumi Nakamoto
 	Version:	1.0.0
 	Template:	twenty sixteen
*/

 

functions.php

phpなので、<?phpで始まり、?>で終わります。 下のコードはスタイルシート.cssの、親テーマとの依存性を定義したものです。 親テーマの.cssファイルが読み込まれ、次に子テーマの.cssファイルが読み込まれます。子テーマに記述されたスタイルが上書きされる形なので、変更したい部分のみ書けば良いです。 便利&楽チンですね〜。
 

<?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( 'parent-style', get_template_directory_uri() . '/rtl.css' );
     }
?>

参考:WORDPRESS CODEX 子テーマ
 

子テーマを選ぶ activate of child-theme

style.css が認識されると、ダッシュボード・外観 >> テーマ の中に、作成した「twentysixteenの子テーマ」が入っていることがわかります!
 
20160823_detected-child
 
子テーマをマウスオーバーすると「有効化」というボタンが表示されるので、押します。
 
20160823_activate-child
 
サイトを表示させると、親テーマと全く同じレイアウトで表示されているのがわかります。
 
20160823_template-from-child
 
以上の手順で、子テーマが作成できてしまいました!簡単ですね!
 

子テーマのスタイルをカスタマイズしてみる customize of child-theme

何かスタイルをカスタマイズしてみましょう!とりあえず、見出し「Hello world!部分」のフォントの色を変更してみたいと思います。
 

開発ツールでスタイルを確認 check styles on developer tool

はじめに、この見出しにどんなスタイルが適用されているかを、開発ツールで確認します。 Google Chrome であれば、アドレスバー右横メニュー >> その他のツール >> デベロッパー ツールをクリック。
 
20160823_developer
 
Elements の各タグをマウスオーバーすると、該当する要素の色が変わるので確認しやすいです。各タグの左横にある▶マークを展開していくと目的のタグを見つけられます。 下の写真では、見出し h2 と リンク a タグ が見つかりました!適用されているスタイルは、entry-title a だとわかります。
 
20160823_check-elements-style
 

子テーマstyle.cssの編集

子テーマのフォルダーに保存した、style.css を開き、entry-title a のクラスを定義します。属性にcolor を追加します。#ff3300は、赤っぽい色です。
 

.entry-title a {
 	color: #ff3300;
 }

 
style.css を保存、アップロードします。 ホームページを再読み込みすると、Hello world! の文字が赤色に変わっていることがわかります!
 
20160823_chose-child-style
 
その他、お好みで自由自在にカスタマイズしていくことができます!これからが楽しみですね!
 

まとめ summary

子テーマを作成するだけでも、かなりの達成感がありますね!
様々なテーマをカスタマイズしてみれば、WordPressの勉強にもなるので超楽しいです!
目指せ自作テーマ!で、とりあえずは子テーマをせっせと作って勉強していきます!
最近母の具合が悪く、一昨日は病院に連れて行きました。暑い日が続いて、体力も落ちているのですね。皆さんも、ご自愛くださいね。 夏休みも後半。日中子供が外で遊ぶ声を聞きながら仕事しています。時々、鳥の鳴き声なのか子供の声なのかわからなくなることがありますww


飛騨高山で畑を耕しながら、フリーランスのWebデザイナーとして活動しています。自然や文化に触れながら、人を癒し和ませるデザインを追求しています!文章作成、イラスト作成、写真撮影やパソコン作業全般が得意で大好きです。工業高校→工業大学で機械や電気の勉強をしていましたが、これからは自然の時代!と思い、自然の中で楽しく元気に暮らし続けることを目標に頑張っています。スピリチュアル大好き。最先端は苦手。時事問題も苦手。新聞は好きです。12年間乗ったクラウンからCAST SPORTへ乗り換え。Mac,iPad,GRATINA 4G(au/京セラ),NIKON COOLPIX P6000,D7200使い。ヘンプアクセサリー作りが趣味。

コメントを残す

メールアドレスが公開されることはありません。