2014.02.07 Web・WordPress

後悔するその前に！WordPressで子テーマをカスタマイズする前にやるべきテンプレコピーの話

2230322088_d442236739_z
Mr. Spontaneous / ebolasmallpox

本日もroom9にお越しいただきありがとうございます♪

Qtaro（＠Daisuke_9taro）です。

WordPressの子テーマ、バッチリ使えてますか？

この記事は

  • とりあえず子テーマは用意できたんだけど、次何するんだっけ？？
  • これから用意するとこなんだけど、なんか注意することある？


という方向けの記事です！！

WordPress子テーマの仕組みのメリットとして、「親テーマのアップデートで更新されるファイル（テンプレ）」と「自分がカスタマイズしたいファイル（テンプレ）」を別管理にできるという点が挙げられます。

今回はこのポイントについてもう少し丁寧に説明してみたいと思います。
前半で前置きの説明を、後半で実際にやり方を説明します。

なお、やり方については2パターンあります。

  • ①WordPressの管理画面から行う方法（FTPと言われてピンとこない方、もしくはこれから子テーマ準備する方向け）
  • ②FTPクライアントを使用して行う方法（FTP普通に使える、もしくは既に子テーマガリガリ編集している方向け）

どちらでも同様の結果になりますので、しっくりくる方法でお試しください^^

「子テーマ」関連記事、めっちゃ書いてます！！

「子テーマ？何だっけそれ？」という方はまずはこの辺の記事をどうぞ（今回の記事はこれらの「続編」になります。）

子テーマ？何ソレおいしいの？？って方はコチラ

なるほど！で、どういう仕組みなのさ！！という方はコチラ

子テーマ無事適用できたよ！。。そんな方は一先ずコチラ


それでは早速いってみましょー♪♪ヾ( ´∀｀)*:;,｡･★

スポンサーリンク

前置き：カスタマイズする部分は「親」から「子」へコピーしとこ！！

まず本題に入る前に軽く前置きの説明を。

すでに子テーマばっちり使えているぜ！！という方も、復習がてら「サラッ」と確認しておきましょう♪
仕組みが分かってしまえば、やることはそんなに難しくありません^^

1）最小構成は「style.css」のみでOK

子テーマの定義部分の様子

まずWordPressの子テーマにおいて、最低限「style.css」のみ存在していれば「子テーマ」としては成り立ちます。
その子テーマのテーマ情報宣言部分（画像の青枠）で「Template:（親テーマ名）」の記述があることが必須となります。

例えば、上記画像の場合（当ブログで配布している子テーマ「Yukiguni」例）
「Template:stinger3ver20131217」という記述がありますので、これは親テーマにstinger3ver20131217を使用した「子テーマ」ですよ！！、という宣言をしています。

2）「親」のphpファイル修正？ちょっと待って！！

上書きされないためにはここ（子テーマ）にコピーしなきゃ！！！
というわけで、「style.css」さえあればWordPressの子テーマとしては成り立ちます。

ただ、子テーマを用意する魅力は何と言っても、自分がカスタマイズした内容は別管理できる（勝手に上書きされないようにできる）というところにあります。

親テーマのテーマファイル（主に拡張子がphpのファイル）を直接編集してしまうと、親の「テーマの更新」で上書きされてしまいます。

このへんの話は記事冒頭にも載せた、こちらの記事で詳しく書かせていただきました→結局必要なの？？WordPress初心者こそ「子テーマ」を使ってほしい理由を分かりやすく説明するよ！！！

3）手を入れる部分は「親」から「子」へコピー

カスタマイズする箇所は子テーマへコピーしておきましょう〜

「ヘッダー(header.php)はphpを直接編集してロゴ画像を表示」
とか
「サイドバー(sidebar.php)にヴィジェットスペースを追加」
とか
「フッター(footer.php)をなんか色々めっちゃゴージャスに」
とか

既存のテーマを利用していても、こんな感じでカスタマイズすることって結構あると思います。その場合は子テーマに対象のテンプレ（phpファイル）をコピーしておくことで、親テーマが更新されても勝手に上書きされることはなくなります。

大事なトコなのでちょっと丁寧に説明しました。

ではそろそろやり方にいきましょう！！

①WordPressの管理画面から行う方法（初心者向け）

まず、WordPress初心者向け（orまだ子テーマを用意してない方向け）のやり方を説明します。
「FTPクライアント」と言われて「？」となる方が対象です。

覚えてしまえば圧倒的に②の方が簡単なので、こちらのやり方はあくまで
「入門編」
ということを認識しておきましょう^^
段取りは以下の感じです。

  • 1.子テーマをローカル環境に準備
  • 2.親テーマから子テーマへphpファイルをコピー
  • 3.管理画面から子テーマを適用

①-1.子テーマをローカル環境に準備

まず子テーマを用意します。
なお子テーマの作成方法についてはこちらの記事がとても参考になります。
【重要】WordPressテンプレートのカスタマイズ前に・・・子テーマをつくってのカスタマイズ方法 -CSS篇-（The Present Note）

「STINGER3」をお使いの方へオススメ

WordPressの最強無料テーマ「STINGER3」をお使いの場合は
当ブログの以下のページより「カスタマイズ用子テーマ」をダウンロードいただければ作成する手間は省けますよー♪♪

stinger_child

①-2.親テーマから子テーマへphpファイルをコピー

次に親テーマから子テーマへ必要なファイルをコピーしていきます。
まずはお使いの「親」テーマファイルをダウンロードしてきましょう
※下記画像は公式ディレクトリで扱っているテーマの場合
親テーマダウンロードだぜ！！

ダウンロードしてきましたら、上記で用意してきた子テーマのフォルダに
カスタマイズで利用するファイルをコピーしてきます。

子テーマへコピーーーー！！

対象が分からない？？そんなときは！！

これから子テーマ用意するという場合「どれが対象になるかなんてわかんないよ。。」という場合がほとんどかと思います。その場合は子テーマに存在しないファイル全てをコピーしてくることをオススメします。

※ただし、親テーマが自動更新されても、子テーマには何も反映されなくなるため、その後特に手を入れないファイルに関しては下記にも示すFTPクライアントソフトを使用して、子テーマから不要なファイルを削除してください。

①-3.管理画面から子テーマを「有効化」

ここまでで子テーマの準備ができました
最後にzipファイルにして、WordPressの管理画面より、子テーマをインストールします。

子テーマインストールやでぇーーー！！

そして、最後に子テーマの「有効化」を忘れずに。。
わすれがちーー子テーマ有効にしてね♪

これで作業は完了です！！
念のためカスタマイズ用にコピーしてきたファイルがちゃんと選べるようになっているか確認してみると。。

選べるようになってるぜぃ！！

ちゃんと子テーマに追加されてます！！
これで「style.php」に加え、「header.php」「footer.php」も親テーマとは別管理にできました！！（これで安心してカスタマイズできます♪）

②FTPクライアントを使用して行う方法

最後にFTPクライアントを普段から利用している方向け（or既に子テーマ利用中の方向け）の説明をザッと。

やることは同様なのでポイントだけ説明しておきます^^

  • 1.子テーマをローカル環境に準備（配備済みの場合は不要）
  • 2.親テーマから子テーマへphpファイルをコピー

②-1.子テーマをローカル環境に準備

上記「①-1」と同様です。
※子テーマを準備済みの場合は作業不要です。

②-2.親テーマから子テーマへphpファイルをコピー

これもやることは上記「①-2」と同様です。
カスタマイズ元の親テーマより必要な箇所をFTPで子テーマにアップロードしましょう。

FTPで子テーマにアップロード

【初心者向け】FTPクライアントの利用方法について

①の方法では子テーマをする準備するタイミングでしか、対象のファイルを変えることができませんが、FTPを利用すると子テーマカスタマイズ後も対象のファイルの出し入れが自由自在です。

WordPressでのFTPソフトの利用方法についてはの以下の記事がとても参考になります。最初は難しく感じるかもしれませんが、WordPressの運用に慣れてきたらチャレンジしてみましょう♪
（僕のオススメはMacでもWindowsでも「FileZilla」です）

・FileZilla
第３章　FTPソフト（ファイルジラ（FileZilla））の使い方と設定方法: 『WordPress ことはじめ』（WisdomMingle.com）
・FFFTP
FTPソフトの設定（ビジデコ）

ここまでできればあとは心置きなく！！

1732787905_4f4b242d08_z
Freedom / josefgrunig

さて、いかがでしたでしょうか？

かなーーーっり！！丁寧に説明してみたつもりです。笑

WordPressの子テーマは、ビギナー向けにとてもメリットのある仕組みであるにも関わらず、ビギナーが導入するには全然優しくない仕組みという、かなり謎の仕様のため、このブログでもこれまで手厚くフォロー記事を書いてきました。

冒頭で紹介させていただいた記事含め、少しでも子テーマの理解にお役に立てればと思います♪

最後に冒頭の記事を再掲しておきます。

子テーマ？何ソレおいしいの？？って方はコチラ

なるほど！で、どういう仕組みなのさ！！という方はコチラ

子テーマ無事適用できたよ！。。そんな方は一先ずコチラ


今回の記事は以上です！

それでは良きWordPressライフを〜♪♪ヾ( ´∀｀)*:;,｡･★

シェア！

ABOUTこの記事をかいた人

Qtaro

秋田県でWeb関連のこと色々やってる人です。2010年新卒で会社員として約4年働いた後、2014年からフリーランスに。ぴよたそ作った人。秋田のWebメディアCLOCKNOTEも運営中。

NEW POST最新の記事

RECOMMENDこちらの記事も人気です。