【改訂版】子テーマメーカープラグインで簡単に子テーマを作る

Photo by Jari Hytönen on Unsplash

WordPressをカスタマイズするときに子テーマを作ってからという方法をいつもとっています。子テーマを作るのはとても簡単なのですが、とはいえちょっとめんどくさいので以前 子テーマ作成プラグイン、『子テーマメーカー』作りました という記事でプラグインを作りました。年月が経ち、内容をちょっと修正したくなったので改訂版を作ってみました。管理画面から指定のテーマの子テーマを作成できます。

旧子テーマメーカープラグインについて

WordPressでサイトを構築するとき、私の場合はほぼ必ず子テーマを作ってその中をカスタマイズしています。作るときに作り方を忘れて、親...

で、子テーマを作ったのはもう3年以上も前になるんですね。かなり前です。この頃に一般的に作られていた方法と現在では親テーマの style.css の推奨読み込み方法が異なってきました。

また、この子テーマメーカーを使ってくれた方から「作成しましたというメッセージが欲しい」という要望をいただいていたので、メッセージを追加したり、デザインを変更したりしました。

改良版:子テーマメーカープラグインの使い方

今現在入っているテーマが

このように4つあるとします。プラグインを使って子テーマを作ってみます。

プラグインをインストールすると、子テーマメーカーが使えるようになるので、

ダッシュボード 設定>Child Theme Maker をクリック

入力フォームが表示されます。

親テーマ名:親テーマのフォルダ名を入力します。
子テーマ名:子テーマの名前を入力します。子テーマの名前は 親テーマ-入力した子テーマ名 になります。

親テーマ名:twentyseventeen
子テーマ名:usort

と入力すると、子テーマ名が twentyseventeen-usort となります。

子テーマを作成をクリック

子テーマ「twentyseventeen-usort」を作成しましたと表示されます。

テーマ一覧を見ると、

twentyseventeen-usortというテーマが追加されていました。とても簡単です。

追加した子テーマを確認してみる

追加した子テーマを確認してみます

twentyseventeen-usort有効化をクリック

新しいテーマを有効化しましたと表示されました。表画面を確認してみると、

親テーマのtwentyseventeenと全く同じような表示になっています。これが本当に子テーマかどうかを確認するために、

ダッシュボード 外観>テーマの編集 をクリックして

この「バックグラウンド色を#cccにする」というコードを追加してみます。

すると、

このように背景が灰色(#ccc)になりました。子テーマが有効になっているようです。

元のテーマ(twentyseventeen)に戻してみると、

元のままなので、親テーマに影響を与えることなくカスタマイズが出来るということがわかります。

子テーマメーカーのインストール

改訂版の子テーマメーカープラグインはこちらにzipファイルを置きました

child-theme-maker.zip

※ 十分なテストは行っていませんので、ご使用される場合は個人の責任で行って下さい。

インストールの手順は以下の通りです。

ダッシュボード プラグイン>新規追加 をクリック

プラグインのアップロードをクリック

ファイルを選択をクリックし、

ダウンロードしたzipファイルを指定して、今すぐインストールをクリック

プラグインを有効化をクリック、これでインストールが終了です。

おまけ:作った子テーマの中身と改訂版の内容について

作った子テーマの中身

作った子テーマの中身について書いておきます。

まず、作成した子テーマは wp-content\themes\ にフォルダが作られます。フォルダ名はtwentyseventeen-usortのような名前になっています。

このフォルダに、

style.cssfunctions.phpというファイルがあります。

作成直後のstyle.cssの内容はこのようになっています。

作成直後のfunctions.phpの内容はこのようになっています。

最低限、この2つのファイルがあり、このように中身が書いてあれば子テーマとして機能することになります。

改訂版の内容について

改訂版のプラグインはchild-theme-maker.phpというファイルが1つしか入っていません。

1ファイルの206行の中にjQuery、css、php、HTMLが書いてありますのでご興味がありましたらご覧下さい。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。