wordpressの子テーマの作り方が絶対わかる記事【初心者必見】

デザイン&マーケティング
typographyimages / Pixabay
スポンサーリンク
プロフィール
この記事を書いた人
東裏 篤史

【GOMA (ゴーマ)】くまさん(夫)ときのこ(妻)のユニット。京都胡麻(ごま)に移住して、新しい田舎暮らしを提唱するGOMA(ゴーマ)を立ち上げました。ゲストハウス経営とサイクリングツアーをはじめとしたアウトドアアクティビティ、ウェブデザイン、デジタルマーケティング、ドローンフォトグラファーなど多業を行なっています。サイクリングやテクノロジー、DIY、田舎暮らしの情報などを中心に誰にでもわかりやすく解説しています。2018年第一子誕生。
くまさん(東裏篤史)の詳しいプロフィールはこちら

東裏 篤史をフォローする

wordpressの子テーマの作り方って理解できてますか?

くまさん
くまさん

僕は最初まーったく理解できませんでした。

最近web制作の現場ではwordpressのカスタマイズがメインになることがほとんどではないでしょうか?

僕がwebを触り始めた2005年ごろは、テーブルレイアウトのサイトがメインでした。
そこから時代が変遷し、CSSやらCGIやらCMSやら何やら何やらいろいろ出てきて、今はwordpressを扱うことがほとんどです。

htmlとCSSは理解できても、wordpressはちんぷんかんぷんな方もい多いのではないでしょうか?
そんな、今からwordpressカスタマイズを始めようとする人が、ほとんどつまずくモノが「子テーマ」であると断言できます!僕もそうでしたから。

この記事では、wordpressの子テーマの作り方について、誰でも100%わかる内容で記事にしてみようと思います!

子テーマを作る前に

子テーマとは

簡単に言うと、「wordpressのテーマを安心してカスタマイズする」ための物です。

wordpressはCMSと呼ばれるブログベースのシステムです。根幹には「記事」があり、テーマを着せ替えるだけでサイトの見た目を簡単に変えることができます。

最近はコーポレートサイトの案件でも、記事をクライアントが更新できるwordpressで作ることが本当に多くなってきました。

TCDなど国内の有料テーマを選べば、驚くほど簡単に美しいサイトを構築することができます。

そんなwordpressのテーマですが、ソースコードやCSSを直に触ってカスタマイズした場合、テーマの更新で全部消えてしまった!という事態が起こります。

くまさん
くまさん

最近も取引先の方がそれでカスタマイズを全てパーにした話を聞きました。背筋が凍ります!

ローカルで更新ファイルを管理していれば問題ないのですが、非常に煩わしく大変ですよね。そんな問題を全て解決してくれるのが「子テーマ」なのです。

環境を整える

ではここから、子テーマを作る前の環境整備を、僕のやり方を例にとって説明していきます。

まず、構造を理解する

wordpressを本格的にカスタマイズするにあたり、初心者の人が一番怖いのが「phpファイルを触る」と言うことではないでしょうか?

ご存知の通りhtmlやCSSは静的ファイルなので、web構築の基礎を学んだ方であればそれほどハードルは高くないと思いますが、PHPファイルは動的ファイルです。ちょっと間違うだけでサイトそのものがエラーで落ちる、なんてことも多々あるので恐怖ですよね?

くまさん
くまさん

僕はそれでサイトを全て粉砕したこともあります。

でも、恐れることはありません。バックアップを取って触れば良いのです。

PHPファイルそのものは動的プログラムですが、最終的に出力されるのはHTMLです。そこを理解して触れば初心者でもどんどんwordpressをカスタマイズできます!

ローカルでの作業に徹する

脅されます。

脅されます。

wordpressの管理画面には、直接テーマを触ることができるエディタがついていますが、ここでカスタマイズすることは100%おすすめできません。wordpressさんも上記のように注意!を促してきます。

と言うわけで、テーマをカスタマイズするときはローカルでの作業環境を構築する、というのが僕のおすすめのやり方です。

ローカルの作業環境構築方法

では、僕のおすすめの方法を説明していきます。僕の作業環境は「Adobe Dreamweaver CC」です。

くまさん
くまさん

マクロメディア時代からかれこれ10年以上お世話になっております。

というわけで、Dreamweaver CCの環境を例にとって進めていきますね。

子テーマの作成方法

くまさん
くまさん

さて、ここからが本題です。

では、今ちょうどカスタマイズしているTCDのテーマ「KADAN」を例にとって進めていきましょう。

テーマディレクトリのダウンロード

やり方は割愛しますが、サーバーに接続し「themes」ディレクトリの中でカスタマイズしたいテーマのディレクトリをローカルにダウンロードします。

ここでは「kadan_tcd056」というディレクトリがそれにあたります。

子テーマのフォルダを作ろう

子テーマの親となるテーマと同一の階層に、新しく子テーマのフォルダを作ります。

ここではわかりやすいように「kadan_tcd056-child」と、最後に「-child」をつけて作成しました。

子テーマフォルダの中身を作ろう

作成した子テーマフォルダの中に、必要なファイルを二つ準備します。

function.php」と「style.css」です。

function.phpの設定

「function.php」ですが、中身に以下のコードを書き込み保存します。他には何も必要ありません。

くまさん
くまさん

function.phpですが、最終行に改行を入れると動作しない不具合が出ることがあります。注意してくださいね。

style.cssの設定

style.cssは、親フォルダからそのままコピーして使用します。その方が今後のカスタマイズが楽になります。

コピーしたら、テーマのバージョン情報などがコメントアウトして書いてあると思いますので、そこを以下の内容で上書きします。

内容説明

  • Theme Name:
    子テーマの名前(必須)フォルダにつけた名前をそのままつけるとわかりやすいです。
  • Theme URI:
    テーマURI — テーマの配布ページなど。
  • Description:
    説明文です。
  • Theme Author:
    作者の名前
  • Author URI:
    作者のURI
  • Template:
    親テーマフォルダの名前(必須)
  • Version:
    バージョン管理する場合は記述。

赤で表示しTheme NameとTemplateは必須です。他はなくても動作します。

最低この2つのファイルが用意できたら子テーマの準備は完了です。サーバーへファイルをアップロードします。

子テーマを有効化しよう

上記の準備ができたらwordpressの管理画面へ戻ります。

これで子テーマがwordpressに認識されて有効化できます!

ついでに、管理画面のサムネイルをかっこよく表示したいので準備も合わせて行いましょう。

子テーマサムネイル設定方法

そのままではサムネイルがなくてさみしいので設定してみましょう。

「screenshot.jpg」(pngも可)という名前の画像ファイルを用意します。中身は4:3のサイズならピクセル数は問いません。それを子テーマのフォルダに入れてアップすれば、子テーマのサムネイルが表示されます!

子テーマの設定完了!

これで子テーマの設定が終了しました。

くまさん
くまさん

お疲れ様でした!結構簡単でしたよね😀

子テーマの構造について

テーマのバージョンアップが行われる際は、基本的にテーマのディレクトリ内が全て上書きされます。なので、ファイルの内容をカスタマイズしていてる場合上書きされてしまうわけです。

では子テーマの構造について説明します。

ルールとして、子テーマが設定された場合、必ず子テーマディレクトリ内のファイルから優先的に参照します

上記の場合、「footer.php」「front-page.php」のカスタマイズを行うために、親ディレクトリからファイルをコピーして持ってきています。

これにより、「footer.php」「front-page.php」のファイルは子テーマ内のものが読み込まれるので、こちらをカスタマイズして入れば親テーマのディレクトリが全て上書きされても問題ないのです。

あとは、カスタマイズしたいファイルを親テーマフォルダから子テーマフォルダにコピーして、カスタマイズしてアップロードの繰り返しです。

さあ、何も恐れることはない!ガンガンカスタマイズだ!

くまさん
くまさん

ここまで来たらあとは好きにLETSカスタマイズ!

あとは、CSSなりファイルなりをガンガンカスタマイズしていくだけです。カスタマイズ場所を知りたい場合は下記のChromeデベロッパーツールを利用するのがおすすめです。

画面で「ここをカスタマイズしたいなー」という場所を右クリック、メニューから「検証」を選択するとデベロッパーツールの登場です。

コードやCSSを画面上で触れちゃいますので、「ここのwidth広げたいな〜」とか、「このテキストもうちょっとデカくしたいな〜」とかを直接画面上でテストできます。

しかも、どのCSSが作用しているかもわかるので、確認したらあとは子テーマのCSSのコードを書き換えてアップロードすればOKです。

くまさん
くまさん

いやー、便利な世の中になりました!

まとめ

いかがでしたか?子テーマの作り方がわからない方も理解することができたのではないでしょうか?

wordpressの構造が理解できたら、カスタマイズの自由度ががぶわーっと増えます。それに子テーマがものすごく役立ちます!

子テーマさえ作っておけば、カスタマイズファイルがphpエラーを出しても最悪親テーマフォルダから持って来れば必ず復旧できます。さあ、皆さん恐れずにLETSカスタマイズ!

プロが教えるwordpressによるコーポレートサイトの作り方
wordpressによるコーポレートサイトを作ろう!くまさん僕のwordpressによるコーポレートサイトの作り方を伝授します!プロフィールを見ていただければわかりますが、僕はwebもやるデザイナーです。とはいえ最近の案件の中心はwebサイト構築が多く...
GOMAデザイン
もっと楽しく伝わる「カタチ」をつくりませんか。

京都を中心に、ローカルでビジネスを行う中小企業や団体に着目したホームページ制作会社です。地元を元気にするページづくりを心がけます。ウェブのちょっとしたことから、ウェブ制作・リニューアルまで、お話をじっくり聞いて最善の選択ができるようご提案しています。
くまさんの10年以上のデザイナー歴で獲得したノウハウと、東京、大阪で磨いたきのこのマーケター視点から見た最新のトレンドで、印刷物、web、広報、SNSを「どうやって使って成果に結びつけるか」まで、責任を持ってお手伝いします。

デザイン&マーケティング
スポンサーリンク
東裏 篤史をフォローする
ゴーマの休日定期購読
GOMA(ゴーマ)の休日

コメント