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', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

child-theme_05

child-theme_06

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

上記の記述で子テーマの認識はされるはずですが・・・

子テーマの「style.css」に追記したものがうまく反映されない!

という場合、下記を「functions.php」として保存し、再試行してみてくだい。

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

この記述では、「親テーマの後に子テーマのスタイルシートをロードする」ことを、より明示的にしています。

「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。ご想像どおりここでは親テーマを直接編集するわけではないので、テーマをアップデートしてもカスタマイズが消えることはありません。オメデトゴザイマス。

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

必ず目を通してほしいこと

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

ただし!本当は知っておくべき知識は省いてきました。「子テーマの仕組みと注意点」。下の記事で図解付きでまとめたので、落ち着いたら必ず目を通してください

有効的なカスタマイズまとめ

スポンサーリンク

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  2. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  3. 魔法のような仕事効率化。ブログにも使えるWindows定型文ツール「Phrase…
  4. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  5. ”知っているつもり”の拡張子、jpg gif png。画像形式による違いと特徴、…

関連記事

  1. retina-text-widget-ecmg
  2. intuitive-custom-post-order_ec

    ワードプレス

    ほら、こんなに直感的。投稿記事の順番を並び替えるWordPressプラグインIntuitive Cu…

    記事の順番だって、自由に決めたい。ブログなどのトップページで表示さ…

  3. retina-slider_ec

    ワードプレス

    【Retinaディスプレイ対応5】WordPressのスライダーやサムネイル画像を綺麗に表示させる設…

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

  4. tcd-theme-options_ecmg

    ワードプレス

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

    サイトレイアウトは、直感的に、簡単に。WEBサイトを立上げると、最…

  5. facebook-app-id-app-secret-ecmg2

    マーケティング

    今すぐできる、開発者登録とFacebookアプリの作り方。App ID、App secretを取得し…

    こんなに簡単だったんですか。サイト運営をしていると、Faceboo…

  6. retina-logo_ec

    ワードプレス

    【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像…

    サイトロゴは、サイトの顔。このサイトでは最上部にロゴを配置していま…

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

特集記事

  1. retina_ecmg
  2. tcd-theme-user-review_ecmg
  3. adjust-the-button_ecmg
  4. display-speed_ec
  5. todoist_ec
  6. theme-change_ecrt

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

todoist

人気記事

  1. screenpresso-initial-setting_ec
  2. media-setting_ec
  3. child-theme-mechanism_ecmg-ps
  4. todoist-basic_ec-ps
  5. compress-jpeg-png-images-ecmg
  6. jpg-gif-png_ecmg

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

tcd-mag

ピックアップ記事

  1. todoist-routine_ecrt
  2. child-theme_ecmg
  3. todoist-basic_ec-ps
  4. spark-tutorial-ecmg
  5. todoist-class_ecrt
  6. intuitive-custom-post-order_ec

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

retina-os-solution

掘り出し記事

  1. todoist-re-schedule_ec
  2. todoist-share_ec
  3. todoist-design_ec
  4. mailbox-goodbye-newapp_ec
  5. insert-card-link_ecmg
  6. mergely-ecmg

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

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. enlarge-image-ecmg
  3. chrome-full-screen-capture-ecmg
  4. jpg-gif-png_ecmg
  5. intuitive-custom-post-order_ec
  6. todoist-basic_ec-ps

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. todoist_ec
  2. display-speed_ec
  3. tcd-mag_ecmg-ps
  4. retina_ecmg
  5. theme-change_ecrt
  6. extension-tools-for-bloggers_ec

人気記事

  1. compress-jpeg-png-images-ecmg
  2. child-theme-mechanism_ecmg-ps
  3. screenpresso-initial-setting_ec
  4. child-theme_ecmg
  5. jpg-gif-png_ecmg
  6. media-setting_ec
  7. todoist-basic_ec-ps

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  2. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  4. tcd-mag_ecmg-ps

    ワードプレス

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

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
PAGE TOP