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. きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG…
  2. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  3. もっとストレスフリーに・・Todoistの連携ワザで高速タスク登録!
  4. 知っとかないと、後から大変!? WordPressメディア設定と画像サイズのキケ…
  5. Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャー…

関連記事

  1. valuable-content-from-image_ec

    ワードプレス

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

    記事を見栄えよく、伝わりやすくするには?ブログ記事を書き始めると、…

  2. original-share-button_ecmg-ps
  3. facebook-app-id-app-secret_ecmg

    マーケティング

    サラリと終える開発者登録。FacebookのApp ID(アプリID)とApp secretの取得方…

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

  4. compress-jpeg-png-images_ecrt

    ワードプレス

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

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

  5. tcd-theme-user-review_ecmg

    ワードプレス

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

    TCDテーマの、実際の使用感。幅広いユーザーニーズに応える『TCD…

  6. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法

    もっと思い通りに。具体的な調整例。下の記事で紹介した「カッコ美しい…

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

特集記事

  1. tcd-theme-user-review_ecmg
  2. adjust-the-button_ecmg
  3. todoist-extension_ecmg
  4. todoist_ec
  5. retina_ecmg
  6. display-speed_ec
  7. tcd-theme-selection_ecmg-ps
  8. extension-tools-for-bloggers_ec

ピックアップ記事

  1. customized-theme-update_ecmg-1-ps
  2. tcd-theme-widget_ecmg
  3. widgetoon-js-count-jsoon_ecmg
  4. original-share-button_ecmg-ps
  5. compress-jpeg-png-images_ecrt
  6. blog-theme-mag_ecmg-ps
  7. jpg-gif-png_ecmg
  8. dash_ecmg

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

business-books

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

todoist

掘り出し記事

  1. mergely-ecmg
  2. todoist-re-schedule_ec
  3. retina-weight-saving_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. tcd-theme-options_ecmg
  2. facebook-page-plugin_ecmg-ps
  3. sns-count-cache_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 | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

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

  1. reset-button_ecrt
  2. blog-contents_ecrt
  3. restriction_ecmg-ps
  1. display-speed_ec

    ワードプレス

    目指せ軽量化!今から始める、WordPressサイトの表示スピード改善計画
  2. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  4. improvement-flow_ecmg

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP