WordPress自作子テーマの作り方

2017-05-10 2017-05-10

ゴールデン・ウィーク期間中に、「6日連続企画」と題して、「厳選・オシャレなWordPress無料テーマ6選」を、お届けしておりました（↓）。

【2017年】厳選・オシャレなWordPress無料テーマ6選

先日、リニューアルオープンした、当ブログ。実は、WordPressの「無料テーマ」を使っています。以前は「Simplicity」を使っていましたが、「もっと、おしゃれにしたい・・・！」「でも、サブブログだし、あくまで無料テーマで！」との思いで、約50個以上のテーマを試し、今のデザインに変わりました。明日から始まる、ゴールデンウィーク。休みの取れる今だからこそ、ブログのテコ入れ・デザインを変えたいと思っている方、居ませんか！？　WordPressの、無料テーマを探している　「Simplicity」や「Xeory」「Stinger...

その中の、「第3弾：PORTFOLIO」「第4弾：Pixgraphy」など、いくつかのテーマでは、「自作子テーマが必要」でしたね。

WordPressのテーマによっては、「第1弾：Agama」「第2弾：Customizr」のように、もともと子テーマを用意してくれている場合もありますが、無い場合も多いです。

そこで今回は、子テーマを自分で作る方法を、ご紹介します。

Contents

WordPress 自分で子テーマを作成する方法
まとめ

WordPress 自分で子テーマを作成する方法

そもそも、子テーマって？なんで必要？

WordPressの使いたいテーマ（＝親テーマ）を継承しつつ、カスタマイズしたいところだけを、別に定義したサブテーマを、「子テーマ」と呼びます。

子テーマが無いと、親テーマが更新されるたびに、カスタマイズをイチからやり直す羽目になったり、もしカスタマイズを失敗しても、簡単に戻せるなど、メリットがたくさんあります。

詳しくは、コチラ（↓）で解説しているので、見てね。

コビトブログ｜イチから稼ぐ　「ネット副業・月10万」

「STORK（ストーク）」を、たった1時間で、おしゃれにカスタマイズ！

コビトブログ

【必読】親テーマにしか存在しないファイルを、子テーマで編集する方法

以前、Google AdSense（グーグルアドセンス）に関する記事を、ご案内させて頂きました。その中の1つ…

自分で子テーマを作るには、以下の3つを作成するだけです。

　子テーマ用のフォルダ
　子テーマ用の「style.css」
　子テーマ用の「function.php」

それでは、順に、やり方をご案内します。

1．子テーマ用フォルダを作る

まず、子テーマ用のフォルダと、必要なファイルを設置します。

サーバ上のファイル操作をしますので、やったことが無い方は、必ず事前にコチラ（↓）を参考にして下さい。

コビトブログ

プロなら絶対使わない、本当は怖い「FTP」知らずに使っていませんか？

ブログを運営していると、「FTP」という文字を、見たことがある方も多いと思います。昔から、ファイルの転送に使わ…

コビトブログ

「FTP」まだ使ってる？プロが使う「SCP」通信で、安全にファイル転送しよう

前回コチラ（↓）の記事で、「FTP」の危険性について、お伝えしました。現在は「FTP」に代わり、暗号化された…

※　以降の、キャプチャ画像は、「SCP」ツールのものです

僕は、安全にファイル転送をできる「WinSCP」という「SCP」ツールを使っています。

サーバ側で用意されている「ファイルマネージャー」等は、安全な通信ではないものが多いので、暗号化された「SCP」通信を利用しています（使い方は、上記（↑）の記事で、書いています）。

本記事も、このツールによるキャプチャ画像で、ご案内します。

ファイル転送用ツールにログインして、ご自身のドメインフォルダから、「public_html」→「wp-content」→「themes」の順に、フォルダ階層を辿り、子テーマを作りたい「親テーマ」のフォルダ名をコピーします。

（↑）の画像は、例えば「第6弾：Gridsby」の子テーマを作る場合です。

「themes」フォルダ内に、「gridsby」というフォルダがあるので、それを「ダブルクリック」or「F2」キーで選択し、フォルダ名をコピーします。

次に、右クリックを押し「新規」→「ディレクトリ」で、新しいフォルダを作成します。

フォルダ名を、「（コピーした親テーマフォルダ名）_child」とします。

「themes」フォルダ内に、親テーマ・子テーマのフォルダができていれば、OKです。（画像の場合だと、「gridsby」「gridsby_child」というフォルダが出来ています）

2．子テーマ用の「style.css」を作る

先ほど作成した子テーマフォルダに移動して、右クリックを押し「新規」→「ファイル」で、新しいファイルを作成します。

ファイル名を、「style.css」とします。

エディタが開くので、（↑）の画像を参考に、以下の内容をコピぺします。

/*
 Template:（親テーマ名）
 Theme Name:（子テーマ名）
 Description:（親テーマ名） の子テーマです
 Author:（あなたの名前（英数字で））
 Version:1.0
 */

「（親テーマ名）」「（子テーマ名）」「（あなたの名前）」の、計4ヶ所を、間違えないよう記入してください。

特に、「Template」「Theme Name」の「（親テーマ名）」「（子テーマ名）」を間違うと、うまく反映されないので、不安な場合は、フォルダからコピペしてくださいね。

また、他サイトで、「style.css」ファイル内に、「@import url(“../●●●/style.css”);」のような記述を入れるよう、案内している記事がありますが、現在はあまり良くない方法なので、注意しましょう。

左上の「（ファイルの保存）」アイコンを押して、内容を保存します。

その後は、右上の「×」を押して、エディタを閉じます。

3．子テーマ用の「function.php」を作る

先ほど作成した子テーマフォルダに移動して、右クリックを押し「新規」→「ファイル」で、新しいファイルを作成します。

ファイル名を、「function.php」とします。

エディタが開くので、（↑）の画像を参考に、以下の内容をコピぺします。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}