child-theme_ecmg

ワードプレス

「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

記事ページをカスタマイズしたい。え?記事下にこんな「いいね!ボタン」も設置したいし。

child-theme_01

こんなオリジナルシェアボタンだって作りたい。

child-theme_02

せやでぇ?カスタイズしたいねんけど、直接テーマファイル触わるんコワいやんけ

んでテーマをアップデートしたらせっかくのカスタマイズが消えるらしいやんけ

んで子テーマ作れば解決するらしーやんけ

ややこしそーやんけー手ぇ出しにくいやんけー億劫やんけぇ!

わかる!わかるぞ!私もしばらく見て見ぬふりをしていた一人。やってみたら作業は簡単。知識が先行すると億劫になるだけ。安心するために、ラクになるために。子テーマなんてサクッと作ってしまおう。

まずは「作り方」のみにフォーカス。ややこしい仕組みは後で説明。実作業は10分で終わらせよう。早く寝よう。明日も早い。

簡単2ステップの作業順

1. 三つのファイルをコピペでつくる(所要時間8分)

2. アップロードして有効化(所要時間2分)

これだけ。

 子テーマ | 親テーマ(元のテーマ)

child-theme_03

上の画像がゴールの図。子テーマを有効化してる状態。早速おっぱじめますか。

child-theme_ins1

スタートッ!!

1. 三つのファイルをコピペでつくる

いきなりですが最後にアップロードするフォルダーを作ります。好きな名前でOKですが使用テーマ名に「-child」とつければ分かりやすい。ここでは「MAG-child」で。

child-theme_04

「functions.php」をつくる

テキストエディタに下の記述をコピー&ペースト。「functions.php」と名前を付けて「MAG-child」フォルダー内に保存します。書き換えの必要もなし。そのままでOK

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

child-theme_05

child-theme_06

Windowsデフォルトの「メモ帳」は、改行コードが変更されてしまうなど不具合の原因になることが多いので利用は避けましょう。Windowsなら「サクラエディタ」、Macなら「CotEditor」あたりが無料でおすすめ。
子テーマ作成もカスタマイズのひとつ。自己責任の上で行ってください。

「style.css」をつくる

テキストエディタに下の記述をコピー&ペースト。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

Theme Name:」の右側はさっき作ったフォルダー名に書き換え。

Template:」の右側は親テーマのフォルダー名に書き換え。

Version:」の右側は親テーマの現行バージョンに書き換え。

調べ方も簡単。親テーマのフォルダー名はレンタルサーバー内を覗くとわかります。
「wp-content/themes/」直下にあるはず。

child-theme_07

サーバーを覗いたついでに、親テーマフォルダー直下からこんなファイルをダウンロードしておきましょう。

child-theme_08

ひとつだけある、「●●.png」や「●●.jpg」の画像ファイル。コレがあれば最後、テーマの一覧ページにこんな違いが出ます。

 画像ファイル無し | 有り

child-theme_09

child-theme_10

これだけのこと。でも気分違うでしょ。
そのまま「MAG-child」フォルダー内に保存しておきます。

child-theme_11

親テーマの現行バージョンも、WordPress管理画面「外観」⇒「テーマの編集」に入ると「style.css」が表示され、そこの一番上に書いてあるのですぐに分かります

child-theme_12

child-theme_13

で、この例での完成形はこうなるワケです。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

「style.css」と名前を付けて、同様に「MAG-child」フォルダー内に保存。

child-theme_14

「screenshot.png」は上の【省略可】のプルダウンセクションで説明したファイルです。
無くても問題なし。

「single.php」をつくる

今回は記事ページをカスタマイズするので、「single.php」をつくります。「外観」⇒「テーマの編集」⇒右カラムから「個別投稿(single.php)」を選択。全選択してテキストエディタにコピペするだけ。

child-theme_15

「single.php」と名前を付けて、同様に「MAG-child」フォルダー内に保存。

child-theme_16

ハイ、準備が整いました。ここまでの実作業時間8分。

child-theme_ins2

2. アップロードして有効化

かっ飛ばしていきましょう。まずは「MAG-child」フォルダーを圧縮!

child-theme_17

「外観」⇒「テーマ」⇒「新規追加」⇒「テーマのアップロード」!

child-theme_18

child-theme_19

child-theme_20

「ファイルを選択」から用意した圧縮ファイルを選択!⇒「今すぐインストール」!有効化!

child-theme_21

child-theme_22

child-theme_03

ゴォォオールッ!!

child-theme_ins3

子テーマ完成です。お疲れ様でした!実作業時間10分。(でも焦って作業しないでくださいね・・)

現状でサイトの状態は親テーマと全く変わらない状態。カスタマイズしていたとしても変わらない。念のためサイト表示を確認しておきますか。・・・大丈夫だった?じゃあ、子テーマ作成は完了。カスタマイズしてもいいし、いったん寝てもいい。自由です


もう、いつでも自由にカスタマイズできる

「外観」⇒「テーマの編集」に入れば、デフォルトで子テーマの編集画面になっているので 

child-theme_23

記事ページをカスタマイズするなら、右カラム「個別投稿(single.php)」を選択して、自由にいじってOK。ご想像どおりここでは親テーマを直接編集するわけではないので、テーマをアップデートしてもカスタマイズが消えることはありません。オメデトゴザイマス。

これで、こんなカスタマイズも安心して試せますね。

サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタマイズ

絶対に目を通してほしいこと

さて、今回は「子テーマの作り方」にフォーカスして紹介してきました。作り方だけであれば、実作業はほんのちょっとだということが伝わったかと思います。

ただし!本当は知っておくべき知識は省いてきました。「子テーマの仕組みと注意点」。下のプルダウンに図解付きでまとめているので、落ち着いたら絶対に目を通してください

子テーマの仕組み

child-theme_ins4

今回「functions.php」と「style.css」に書いた記述は、あくまで子テーマを認識させるだけの記述です。

これまでの作業でなんとなく想像できるかもしれませんが、テーマファイルは基本的に、「親テーマ⇒子テーマ」の順に読み込まれます。例えば今回の場合、子テーマに追加した「single.php」は、親テーマの「single.php」の後に読み込まれるということ。

child-theme_24

上の図のようにデータは上書きされ、実際のサイトには、子テーマの「single.php」の内容が表示される、というわけ。だから子テーマ側のカスタマイズが反映されるんですね。

基本的にはどのテンプレートファイル(「●●.php」)も、子テーマ側の同名ファイルに上書きされてサイト表示されます。つまり今回と同じ手順で子テーマに入れておくだけで、どのファイルにも同じように「安心カスタマイズ」ができる、ということ。

「functions.php」は例外。彼はテーマの神様のような存在。詳しくなるまでは「触らぬ神に祟りなし」の方向で。

「style.css」は “上書き” ではなく “追加” される

テンプレートファイル(「●●.php」)とは違い、「style.css」はちょっと特殊。同じように「親テーマ⇒子テーマ」の順に読み込まれますが、上書きされることはありません

親テーマの「style.css」の内容に、子テーマの「style.css」の内容が追加された形で出力されます

child-theme_25

思い出してみると・・そりゃそーですよね。子テーマを作ったとき、「style.css」の中身はこれだけでした。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

この記述の後に追記したCSSは、親テーマがアップデートされても消えないので安心です。その他のテンプレートファイルと一緒ですね。

/*
Theme Name:MAG-child
Template:mag_tcd036
Version:1.23
*/

/***** line3 *****/
.line3	{
  position: relative;
  margin: 1.2em 0 1.2em;
  padding: .7em 0;
  border-radius: 4px;
  background-color: #6B6B6B;
  color: #ffffff;
  font-size: 1.1em;
  text-align: center;
  clear: both;
}

TCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま。子テーマ同様の安心。優しさ。初心者への愛。

理想のWEBサイトを直感デザイン。TCD『テーマオプション』の使い方

テーマアップデート時の注意点

アップデート時の基本的な注意点はこちらが参考になります。

テーマの更新方法

で、子テーマを利用している場合、親テーマをアップデートしても「もっと最新版がありますよー更新しなさいー」といつまでも通知され続けることがあります

child-theme_26

アップデートしたやんけ!もー通知すな!

と気にするほどでもないことなんですが、実際アップデートしたのに、通知が消えない。これはちょっとキモチワルイ。「子テーマあるある」のひとつです。

これも即解消できます。アップデートした親テーマのバージョンを見てみるともちろん 

child-theme_27

新しくなってます。じゃあ子テーマは?変わってるハズないですよね。これは面倒ですが手動で書き直してやりましょう。

child-theme_28

child-theme_29

無事、通知も消えました。子テーマの恩恵に比べれば、ラクな作業ですね。ちなみに、同じ「テーマの編集」画面内、右上プルダウンから、編集するテーマを切り替えられます。バージョンの書き換えのためだけに、わざわざ親テーマを有効化する必要はありません。

child-theme_30

child-theme_31

関連記事

魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト機能と魅力を徹底解説

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク

ピックアップ記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  2. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  3. ブログにおける「価値あるコンテンツ」とは?三大要素と”オリジナリティー”の正体
  4. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  5. Twitterのシェア数表示を復活!「widgetoon.js & count.…

関連記事

  1. screenpresso-initial-setting_ec
  2. insert-card-link_ecmg

    ワードプレス

    クリックひとつで完成。Embedlyで見栄えの良いカード型の記事リンクを貼る方法

    リンク挿入、どうしてますか?記事を書いていると、「以前に自分が書い…

  3. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点

    TCDテーマからTCDテーマへ!魅了されてしまった。ついに乗り換え…

  4. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  5. quicktag_ecmg

    ワードプレス

    WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機能の使い方

    反則ギリギリな、簡単さ。小見出しのデザインを美しくしたい?ああ、例…

  6. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】もっと美しくワガママに。スライダー画像さえも綺麗に表示させてしまう…

    スライダー嬢も、綺麗に。このサイトのトップページには、スライダーが…

【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. tcd-theme-user-review_ecmg
  2. tcd-mag_ecmg
  3. extension-tools-for-bloggers_ec
  4. theme-change_ecrt
  5. todoist-extension_ecmg
  6. improvement-flow_ecmg
  7. todoist_ec
  8. retina_ecmg
  9. adjust-the-button_ecmg
  10. business-books_ecmg

ピックアップ記事

  1. todoist-basic_ec
  2. jpg-gif-png_ecmg
  3. chrome-font_ecmg
  4. todoist-advanced_ec
  5. media-setting_ec
  6. reset-button_ecrt
  7. blog-contents_ecrt
  8. sns-count-cache_ecmg
  9. todoist-productivity_ecmg
  10. like-button-card_ecmg

強みを見つけて、活かしていくために。

business-books

タスク管理で、自己管理。

todoist

おすすめ記事

  1. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  2. 瞬間奥義「非同期設定」。Facebookのいいねボタン、ペー…
  3. 不要なメール通知にうんざり!購読・迷惑メールの解除をまとめて…
  4. WordPressサイトを丸ごとバックアップ!「BackWP…
  5. 簡単に予定変更。Todoistで実現する、カレンダーだけでは…

魅力的なブログを、今すぐ作る。

tcd-mag

ブログのRetina対応、始めませんか?

retina-os-solution

最近の記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブ…
  2. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  3. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  4. 魅力的なブログで収益化。ワードプレステーマTCD【MAG】の…
  5. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…

ゆっくり、フシギなGIFアニメ。

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分…
  2. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  3. 【保存版】知ったら戻れない、美しさの極みへ。WordPres…
  4. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  5. 最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くし…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-mag_ecmg

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  2. todoist_ec

    マネジメント

    【フリーランス必見】確実に納期を守るために。タスク管理ツールTodoistで予定…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー目線レビュー
  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  5. valuable-content-from-image_ec

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP