子テーマって何?
初心者には理解し難い内容が多いインターネットの情報
今だから言えるのですが、私がWordPressを知った初心者の頃、はっきり言って「子テーマ」という言葉そのものの意味がわかりませんでした。
というより、そもそも「テーマ」というものが何かもわかっていなかったのかもしれません(笑)
インターネットを検索すれば、「子テーマの作り方」などの記事をたくさん見つけることができます。
だけど、本当の初心者の頃は、”子テーマ”という言葉を知りませんし、知ったとしても、自分に必要か必要でないかわからないので、「子テーマの作り方」という言葉でインターネットを検索をするという発想がないのです。
そう思うと、初心者向けと謳って、一生懸命に情報発信していらっしゃる方も多いのですが、内容を読むと、それは既に初心者向けではなく、ご自分が初心者であったことを疾うの昔に忘れたような記事ばかりで、実際はWordPressをある程度、理解した方向けの記事になっていますから、本当の初心者には、到底、理解し難い内容なのです。
なので、なるべく、自分自身が初めて、WordPressを知った時のような頃を思い浮かべてお伝えしてみたいと思います。
なお、この投稿の最後に、TCD WordPressテーマ「MAG」の子テーマをダウンロード提供させていただきました。
子テーマはカスタマイズのためにある
ワードプレスのテーマというものは、不定期に更新があります。 その内容は、テーマの不具合を直した場合、既存機能の改善した場合、あるいは新しい機能を追加した場合など、それらを反映した最新バージョンのテーマを利用者に配布するためです。
よく、こんな画像で「新しいバージョンが利用できます。今すぐ更新」と表示されていることがあると思います。
※WordPressテーマ「DIVER」の更新表示画面
もし、子テーマがないWordPressテーマで、親テーマに対してゴリゴリとカスタマイズしている場合、この「今すぐ更新」というボタンをポッチっと押した時点で、今まで一生懸命カスタマイズした内容がすべて泡と消えてしまいます。
その理由は、テーマが更新される場合、現在のテーマの内容を「上書き」して更新するからなのです。
なので、親テーマでカスタマイズをしていた内容も全て上書きされて、テーマのデフォルト(初期状態)の内容に置き換わってしまいます。
ですから、これを自分がカスタマイズした状態に戻したい場合は、カスタマイズした内容をすべてもう一度ゴリゴリと書き換えなければいけません。
それも、テーマの更新がある都度に、これを繰り返してやる必要があります。
この面倒なことを解消してくれるのが「子テーマ」の役割なのです。
わかり易く言えば、テーマをカスタマイズする時には、親テーマに手をつけるのではなく、子テーマに対してカスタマイズの内容を書き込みをします。
子テーマを持っているテーマは、まず親テーマの内容を読み込んで、その後に子テーマの内容を読み込みしてサイトを表示します。
テーマの更新は「親テーマ」に対してだけ行われ、子テーマの内容が上書きされることはありませんから、親テーマが何度更新しても、苦労してカスタマイズした内容が消えることはありません。
そもそも、カスタマイズを一切しなければ、子テーマなどいらないのですが、人はどうしてもオリジナリティーを求めてしまいますし、他の綺麗なサイトを見ると、自分もあーしたい、こーしたいと思ってこだわってしまうものです。
また、カスタマイズをしないと、どうにも使う気になれないというカスタマイズ前提の無料テーマも同じです。
親テーマと子テーマをWordPressに入れる順番
どっちでもいいのですが、基本をお伝えいたします。
親テーマから追加して下さい。
なぜかと言えば、子テーマを入れた時に親テーマが入っているかどうかのチェックをします。
子テーマを先に入れて、WordPressがフリーズするなんてことはありませんが、確か「親テーマが存在しない」旨の注意メッセージがでます。
基本は、親テーマを先に追加する。
親テーマは有効化しない。
間違って親テーマを有効化しても問題はない。
そのあと子テーマを入れて、有効化する。
子テーマを有効化させたまま使う。
これが、親テーマと子テーマの二つをもっているWordPressテーマの追加のしかたです。
WordPressテーマにおける子テーマの必要性
私の感覚を含みますが、無料テーマには子テーマを提供しているものが多いようです。
もちろん有償テーマでも、カスタマイズをしたいユーザーを想定して、標準で提供してくれているものもあります。
ただ、同じ子テーマを提供していても、無料テーマと有償テーマが違うのは、無料テーマの場合、子テーマを使ってカスタマイズしないと、それなりのサイトに仕上がらないという点です。
有償テーマの場合は、カスタマイズしなくとも、それなりのサイトに仕上がる。
そこが、無料テーマと有償テーマの大きな違いがでるところだと思います。
子テーマが必要なカスタマイズを例に挙げると、こんな感じになります。
- テーマのテンプレートファイル(ヘッダー、フッター、投稿、固定ページ、カテゴリーアーカイブページなど)に対するカスタマイズ
- テーマに含まれた Javascript など、外部ファイルを部分的に「削除」または「修正」する必要がある場合
- プラグインなどで上手く表示できない部分があった場合に直接カスタマイズで手を加える時
そもそも有料テーマが、こういったカスタマイズを要求されるようなテーマであったら、有料の価値がありません。
また、こういったカスタマイズを、親テーマである本体に施したのでは、テーマが更新される度にカスタマイズ内容がクリアされるため、たまったものではありません。
代表的な無料テーマの「Simplicity2」や「Cocoon」などが、もともと子テーマを提供しているのは、カスタマイズ前提のテーマとして提供されているからということも言えます。
言いかえれば、カスタマイズをしなければ、十分に満足して使うことができないテーマであるとも言え、そのために、わざとシンプルにして提供しているとも言えます。
ただ、カスタマイズでも、したいことがstyle.css(スタイルシート)で全て済むような内容であれば子テーマは不要です。
子テーマの代わりに、サイト全体に反映させることができる「追加CSS」や、ブログ記事投稿ページや固定ページごとに個別に指定できる「カスタムCSS」を利用することで、テーマの更新に影響されることなくカスタマイズできるからです。
初心者がしたいカスタマイズでよくあるのが、見出しを自分の好みのデザインに変えたい、囲み枠をつくりたい、先頭にチェックマークをつけたリストや、番号の付いたリストを表示させたいといったことですが、こういうことであれば、「追加CSS」や「カスタムCSS」に記述することで解決できるため、子テーマは必要ありません。
初心者はカスタマイズが必要な無料テーマに手を出さないほうがいい
Simplicity2のカスタマイズ
先日、Simplicity2をカスタマイズすることがありました。
何度やっても、無料テーマのカスタマイズは面倒だし、時間がもったいないと思ってしまう。
それに、これを、WordPress初心者で、CSSやHTMLを知らない人がやろうとしたら、どれだけの時間がかかるのだろうか?
たぶん、アフィリエイトを始める記事投稿まで辿りつかず、多くの人が挫折してしまうんだろうなとも思ってしまった。
子テーマを使ってカスタマイズした内容は次のとおり。
- グローバルナビ追従化(javascript.jsのカスタマイズあり)
※画面をスクロールさせて下げても、メニューバーが画面上部で見え続けるようにすること。 - 固定ページのヘッダー、メニュー非表示(※ペラサイト作成対応)
- 固定ページの投稿日や更新日を非表示(※ペラサイト作成対応)
- ヘッダー下に広告用ウィジエットを追加表示できるよう設定
- 「記事を読む」ボタンのカスタマイズ
- サイト幅拡張(main幅、sideber幅変更)
- フォント、游ゴシックに変更
- 見出しリセットと新たな見出し設定
- グローバルナビ「オレンジ」メニューのカスタマイズ
※中央寄せ、カラー変更、ライン設定、画面幅問わず100%表示対応 - ヘッダー下の余白調整
- メイン部分の枠線(囲み線)消去
- サイドバーの枠線(囲み線)消去
- ブログ記事の記事間にライン
- サイドバー・ウィジェットのデザイン変更
- フッターデザイン変更
- Contact Form7による問い合わせ画面のデザイン作成
- その他、囲み枠、アンダーライン等の設定
カスタマイズ対象のファイルは、style.css、functions.php、mobile.css、javascript.js … となるわけですが、これを初心者に”コピペで簡単”だとか、”難しくありません”とか、”初心者でも簡単にできた”とか言うのは酷です。
無料テーマでアフィリエイトを始めようとする方は、テーマのカスタマイズをするために、インターネットをあちこち検索して自分がしたいことを探しては、それをスタイルシートなどにコピペしているのだと思います。
後日、このカスタマイズの仕様を、セットにしてお配りしたいと思います。
カラーや画像だけ変えれば、自分仕様のデザインで、すぐにブログ投稿が始められるはずです。
初心者が無料テーマを選ぶと、出口のないカスタマイズ地獄に陥る
カスタマイズというものは、1か所だけすればいいというものではなく、サイトの全体的なデザインを作ろうとすれば、あらゆる部分をつつきまわすことになります。
メニューバーのカラーを変えれば、サイドバーのカラーも変えたい。
ヘッダー画像を画面一杯に表示させるようにしたら、メニューバーも同じようにしたくなる。
苦労してPCでデザインをうまく変更できたと嬉しくしていたら、カスタマイズした影響で、スマホの表示が崩れていたなど、こっちをつつけば、あっちもつつかざるを得ないという、終わりのないカスタマイズ地獄にハマってしまいます。
たぶん、ゆうに1ヶ月は無駄にするでしょう。
挙句の果ては、自分が思い描くサイトにできなくて、あきらめてしまうことのほうが多いのだと思います。
あれ? アフィリエイトはどうするの??
アフィリエイトをするために、でもお金はかけたくないから無料テーマを選び、一生懸命カスタマイズしてサイトを作ろうとしていたのに、無料テーマを選択したばかりに、カスタマイズ作業で心が折れてしまう。
そんな人がたくさんいます。
私も最初は1万円、あるいは2万円というお金を惜しんで、無料テーマでなんとかしようと思った時がありましたが、結局、一度、カスタマイズで挫折した経験のあるひとりです。
でも、ある時、Google AdWords出稿用に広告サイトを作らなければならず、悩んで選択したのがTCDの「LOTUS」でした。
とりあえずお伝えしておきますが、このテーマはあくまで女性向けビジネスなどに最適なテーマなので、個人ブログには向きません。
お問い合せページは、無料のContact Form7を使わずに、標準で確認画面の機能がついていて、フォームデザインが用意されている有料のMW WP Formを使いました。
(MW WP Formは無料でフォーム作成ができますが、すでに出来上がったフォームデザインが数種類あり、それが有料です。500円で手に入ります。)
そうしたら、1週間でプロと比較しても遜色のないサイトが出来上がりました。
私がこのテーマに対して唯一やったことは、h2~h4までの見出を追加CSSに記述したこと、もう一つは、当サイトでもご紹介している表のレスポンシブ対応を設定したことくらいです。
結局、時間をお金で買ったということです。
でも、払ったお金に見合う以上のサイトが仕上がり、記事の投稿に専念することができたので、とても満足だったことを覚えています。
ちなみに、TCDの一連のテーマは、デモサイトと同じように仕上がるので、いいテーマだと思います。
有料テーマでも、デモを見て買って、いざ自分が作るとデモのようにお洒落なサイトにならないというものも多くありますが、TCDの場合は、誰が作ってもデモと同じようなサイトが出来上がります。
これをきっかけに、有料テーマの凄さを知り、無料テーマを使うことはなくなりました。
結局は目的はアフィリエイトをすることで、時間かけてすべきことは、記事の投稿、キーワード探し、商品選定が優先です。
WordPressのテーマカスタマイズに時間をかけていたのでは、何も利益を生まない時間ばかりが過ぎていき、無駄のほうが大きいと悟りました。
私が無料テーマをカスタマイズできるようになった理由
答えは簡単です。 有料テーマを数多くこなしたからからです。
なぜ、有料テーマを数多くこなすと、カスタマイズができるようになるのでしょうか?
それは、色んな有料テーマを扱うことで、
- WordPressブログがどういうものか?
- 記事を投稿したらどんな風に表示されるのか?
- 画像を入れたら? 動画を入れたら? どんなふうに表示されるのか?
- ウィジエットを使うことで、サイトがどういうふうに変わっていくのか?(※最初はウィジエットの意味もわからないハズです。)
そういった色々なことを、完成されたテーマを使うことによって、WordPressに自然と慣れ親しむ中で経験を積むことができたので、カスタマイズをすることに関しても、理解し易かったという覚えがあります。
それに、何かカスタマイズしたい時でも、きちんと出来上がっているものをカスタマイズするほうが、やさしいからです。
無料テーマのカスタマイズというのは、カスタマイズと言いながら、ゼロから作っていくに等しい部分もありますから、今までブログと無縁だったような初心者が扱うには、極めてハードルが高いと言えます。
そういう意味からすれば、有料テーマは初心者が使うもの、無料テーマが中級者や上級者、あるいはカスタマイズを趣味にしている職人的な人が使うもの、そういう区分けもあながち間違いではありません。
TCDのワードプレステーマ「MAG」の子テーマ提供
さて、この投稿の本題です。
TCDのテーマは、どのテーマも完成度が高く、よほどのことがない限り、初心者が子テーマを使ったカスタマイズをすることはありません。
カスタマイズをしたとしても、追加CSSやカスタムCSSで事足りる程度です。
でも、たまたま、私自身が必要としたので、ご提供したいと思います。
- 子テーマの利用もカスタマイズの範疇になりますから、自己の責任において適用して下さい。
- ダウンロードされるファイルは、zip形式で圧縮してある「mag_child.zip」というファイルになります。
※ウィルスチェック済のファイルです、安心してダウンロードして下さい。 - 「MAG」のバージョンは、Version:3.1.3を対象にしています。
- 「MAG」の親テーマが入っているフォルダ名が、「mag_tcd036」でなければなりません。※通常であればなっているはずです。
- 子テーマに内包されているファイルは次の5つです。
・functions.php
・style.css
・single.php
・page.php
・screenshot.png - WordPressへは、通常のテーマを追加する場合と同様に、zip形式のままで、ダッシュボードから、外観 > 新規追加 > テーマのアップロード > ファイル(mag_child.zip)を選択 > 今すぐインストール > 有効化
「single.php」及び「page.php」が不要な場合
「single.php」及び「page.php」は、最初から子テーマに無くても良いファイルです。
子テーマを使ったカスタマイズの可能性があるかなと思って、良かれで加えているだけです。
不要の場合はダウンロードした「mag_child.zip」を解凍して、不要なファイルを削除し、再度、「mag_child.zip」という同じファイル名でzip形式の圧縮ファイルを作成します。
親テーマに対して既にカスタマイズしたファイルがある場合
例えば、親テーマの「page.php」を既にカスタマイズしている場合は、FFFTPなどを使って、親テーマから「page.php」をダウンロードします。
次に「mag_child.zip」を解凍してできるフォルダ内には「page.php」がありますから、これに対して上書きコピーする、あるいは、フォルダ内の「page.php」を削除して、親テーマからダウンロードした「page.php」を代わりに追加します。
また、「header.php」などのカスタマイズをしている場合は、FFFTPなどを使って、親テーマから「header.php」をダウンロードし、「mag_child.zip」を解凍してできるフォルダ内に単に追加します。
いずれにしても、上記の作業を終えたら、再度、「mag_child.zip」という同じファイル名でzip形式の圧縮ファイルを作成し、テーマの新規追加を行うだけです。
TCDのワードプレステーマ「MAG」のカスタマイズ
子テーマを作成しているという前提でお伝えをします。
ワードプレステーマ「MAG」の固定ページは、アイキャッチ画像を登録しても、固定ページのヘッダーには表示されない仕様になっています。
これを、ブログの投稿と同じように、アイキャッチ画像を固定ページでも表示させるようにします。
子テーマのpage.phpの17行目に赤枠で囲んだ記述があります。
この部分を、下記の記述に置き換えして下さい。
上記の置き換えが終われば、固定ページのヘッダーにアイキャッチ画像が表示されるようになりますが、元々の固定ページに適用されているCSSによって、記事タイトルとアイキャッチの間に隙間が空いてしまいますから、固定ページのカスタムCSSに以下のとおり記述します。
このように、タイトルと画像に隙間なく、ちゃんと表示されるようになります。
いずれにしても、子テーマがあることで、親テーマの更新を気にせずにカスタマイズができますから、便利だと言えます。
子テーマの作り方については、次回詳しくお伝えしたいと思いますので、テーマのカスタマイズが好きな方は、ぜひ、ご利用下さい。