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

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

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

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

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

関連記事

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

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  2. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  3. WordPress初心者にオイシイ、簡単記事装飾。TCDテーマ「クイックタグ」機…
  4. Todoistとも連携。複数のメールアカウントを一括管理するMac・iPhone…
  5. サイトデザインに合わせよう。TCDテーマ記事下にカード型「いいね!ボタン」をセン…

関連記事

  1. tcd-theme-options_ecmg

    ワードプレス

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

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

  2. facebook-app-id-app-secret_ecmg

    マーケティング

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

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

  3. facebook-fast-display_ecmg

    ワードプレス

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

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

  4. favicon-generator_ec
  5. lightshot_ecmg

    WEBデザイン

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    "気軽な"先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  6. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

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

特集記事

  1. todoist-extension_ecmg
  2. valuable-content-from-image_ec
  3. todoist_ec
  4. business-books_ecmg
  5. theme-change_ecrt
  6. improvement-flow_ecmg

ピックアップ記事

  1. todoist-constitution_ec
  2. annotation-image_ecmg
  3. facebook-page-plugin_ecmg-ps
  4. simple-image-sizes_ec-ps
  5. todoist-basic_ec-ps
  6. todoist-productivity_ecmg

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

todoist

掘り出し記事

  1. mergely-ecmg
  2. feedly-count-problem_ecmg
  3. browzer-extension_ec
  4. analytics-ip-filter_ecmg

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. blog-theme-mag_ecmg-ps
  2. todoist-constitution_ec
  3. tcd-css-customize_ecmg
  4. lightshot_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. enlarge-image-ecmg
  2. spark-tutorial-ecmg
  3. modern-dilemma-ecmg
  4. paradigm-shift-ecmg

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考系ピックアップ記事

  1. reset-button_ecrt
  2. modern-dilemma-ecmg
  3. irreplaceable-ecmg
  4. blog-contents_ecrt
  1. todoist_ec

    マネジメント

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
PAGE TOP