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(親テーマのフォルダ名)です。 このコメント文以降は、何も記載していない状態です。

 

 

functions.php

phpなので、<?phpで始まり、?>で終わります。 下のコードはスタイルシート.cssの、親テーマとの依存性を定義したものです。 親テーマの.cssファイルが読み込まれ、次に子テーマの.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は、赤っぽい色です。

 

 

style.css を保存、アップロードします。 ホームページを再読み込みすると、Hello world! の文字が赤色に変わっていることがわかります!

 

20160823_chose-child-style

 

その他、お好みで自由自在にカスタマイズしていくことができます!これからが楽しみですね!

 

まとめ summary

子テーマを作成するだけでも、かなりの達成感がありますね!
様々なテーマをカスタマイズしてみれば、WordPressの勉強にもなるので超楽しいです!

目指せ自作テーマ!で、とりあえずは子テーマをせっせと作って勉強していきます!

最近母の具合が悪く、一昨日は病院に連れて行きました。暑い日が続いて、体力も落ちているのですね。皆さんも、ご自愛くださいね。 夏休みも後半。日中子供が外で遊ぶ声を聞きながら仕事しています。時々、鳥の鳴き声なのか子供の声なのかわからなくなることがありますww

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です