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テーマ記事下にカード型「いいね!ボタン」をセンスよく設置する方法

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

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

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

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

関連記事

Wordpressで子テーマを作る際に知っておくべき仕組みと注意点

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 「私の名前はページプラグイン。」Facebookページのいいね!ボタンをWord…
  2. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  3. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  4. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  5. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…

関連記事

  1. simple-image-sizes_ec-ps

    ワードプレス

    メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simple Image Si…

    挿入画像サイズ、もっと自由に選びたい。ハイどーも。お悩み相談室のコ…

  2. favicon-generator_ec
  3. facebook-fast-display_ecmg

    ワードプレス

    瞬間奥義「非同期設定」。Facebookのいいねボタン、ページプラグインたちの読込み遅延を斬るっ!

    余計な読込み遅延を解消セヨ。えぇー今回の任務は「ぺいじ」の読込…

  4. jpg-gif-png_ecmg
  5. theme-manual-update_ec

    ワードプレス

    アップデート通知が来ない!?WordPressテーマを手動でアップデートする方法

    アップデート通知、なんでこないの?ある有名なストーリーがあります。…

  6. browzer-extension_ec

    ワードプレス

    ”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

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

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

レク.サウンドラボ

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

特集記事

  1. todoist-extension_ecmg
  2. todoist-tips_ecmg
  3. valuable-content-from-image_ec
  4. theme-change_ecrt
  5. tcd-mag_ecmg-ps
  6. extension-tools-for-bloggers_ec
  7. adjust-the-button_ecmg
  8. tcd-theme-user-review_ecmg

ピックアップ記事

  1. jpg-gif-png_ecmg
  2. todoist-productivity_ecmg
  3. like-button-card_ecmg-ps
  4. chrome-font_ecmg
  5. unroll-me_ec
  6. todoist-advanced_ec
  7. blog-theme-mag_ecmg-ps
  8. facebook-page-plugin_ecmg-ps

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. screenpresso-initial-setting_ec
  2. backup-all-in-auto_ec
  3. todoist-share_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. gif-animation_ec
  2. facebook-page-plugin_ecmg-ps
  3. tcd-theme-options_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | Blogger向けおすすめ書籍

「言葉にできる」は武器になる。 現代広告の心理技術101

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps
  1. retina_ecmg

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  2. business-books_ecmg

    マーケティング

    【厳選6冊】起業したくなったら読んでおきたいビジネス書。自分の強みを見つけて活か…
  3. todoist-extension_ecmg

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  4. extension-tools-for-bloggers_ec

    ブログ

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

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
PAGE TOP