WordPressをカスタマイズするときに子テーマを作ってからという方法をいつもとっています。子テーマを作るのはとても簡単なのですが、とはいえちょっとめんどくさいので以前 子テーマ作成プラグイン、『子テーマメーカー』作りました という記事でプラグインを作りました。年月が経ち、内容をちょっと修正したくなったので改訂版を作ってみました。管理画面から指定のテーマの子テーマを作成できます。
旧子テーマメーカープラグインについて
で、子テーマを作ったのはもう３年以上も前になるんですね。かなり前です。この頃に一般的に作られていた方法と現在では親テーマの style.css の推奨読み込み方法が異なってきました。
また、この子テーマメーカーを使ってくれた方から「作成しましたというメッセージが欲しい」という要望をいただいていたので、メッセージを追加したり、デザインを変更したりしました。
改良版：子テーマメーカープラグインの使い方
今現在入っているテーマが
このように４つあるとします。プラグインを使って子テーマを作ってみます。
プラグインをインストールすると、子テーマメーカーが使えるようになるので、
ダッシュボード 設定＞Child Theme Maker をクリック
入力フォームが表示されます。
親テーマ名：親テーマのフォルダ名を入力します。
子テーマ名：子テーマの名前を入力します。子テーマの名前は 親テーマ-入力した子テーマ名 になります。
親テーマ名：twentyseventeen
子テーマ名：usort
と入力すると、子テーマ名が twentyseventeen-usort となります。
子テーマを作成をクリック
子テーマ「twentyseventeen-usort」を作成しましたと表示されます。
テーマ一覧を見ると、
twentyseventeen-usortというテーマが追加されていました。とても簡単です。
追加した子テーマを確認してみる
追加した子テーマを確認してみます
twentyseventeen-usortの有効化をクリック
新しいテーマを有効化しましたと表示されました。表画面を確認してみると、
親テーマのtwentyseventeenと全く同じような表示になっています。これが本当に子テーマかどうかを確認するために、
ダッシュボード 外観＞テーマの編集 をクリックして
* {
background-color: #ccc;
}
この「バックグラウンド色を#cccにする」というコードを追加してみます。
すると、
このように背景が灰色（#ccc）になりました。子テーマが有効になっているようです。
元のテーマ（twentyseventeen）に戻してみると、
元のままなので、親テーマに影響を与えることなくカスタマイズが出来るということがわかります。
子テーマメーカーのインストール
改訂版の子テーマメーカープラグインはこちらにzipファイルを置きました
↓
child-theme-maker.zip
※ 十分なテストは行っていませんので、ご使用される場合は個人の責任で行って下さい。
インストールの手順は以下の通りです。
ダッシュボード プラグイン＞新規追加 をクリック
プラグインのアップロードをクリック
ファイルを選択をクリックし、
ダウンロードしたzipファイルを指定して、今すぐインストールをクリック
プラグインを有効化をクリック、これでインストールが終了です。
おまけ：作った子テーマの中身と改訂版の内容について
作った子テーマの中身
作った子テーマの中身について書いておきます。
まず、作成した子テーマは wp-content\themes\ にフォルダが作られます。フォルダ名はtwentyseventeen-usortのような名前になっています。
このフォルダに、
style.css、functions.phpというファイルがあります。
作成直後のstyle.cssの内容はこのようになっています。
/* Theme Name: twentyseventeen-usort Template: twentyseventeen */
作成直後のfunctions.phpの内容はこのようになっています。
<?php
/* 親テーマstyle.cssの読み込み */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* functions.phpの内容を書く */
最低限、この２つのファイルがあり、このように中身が書いてあれば子テーマとして機能することになります。
改訂版の内容について
改訂版のプラグインはchild-theme-maker.phpというファイルが1つしか入っていません。
<?php
/*
Plugin Name: Child Theme Maker
Description: Make Child Theme
Author: Mika UMOTO(USORT)
Author URI: https://usort.jp
Version: 0.2
*/
add_action('admin_print_scripts', 'ctm_custom_js');
function ctm_custom_js( ) {
// カスタムJavascript関数の定義
// 親テーマ名が入力されたら、子テーマ名のプレフィックスを表示する
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$(document).ready(function(){
$("#prefix_parent").text($("#parent").val());
$('#parent').change(function() {
$("#prefix_parent").text($("#parent").val());
});
});
});
</script>
<style type="text/css">
<!--
.mct-form {
margin-top:20px;
}
.mct-form label {
display:inline-block;
width:200px;
font-weight:bold;
}
.mct-form input[type="text"] {
display:inline-block;
width:200px;
}
.mct-form .ctm_notice {
font-size:12px;
margin-left:10px;
}
.mct-form input[type="submit"] {
margin-top:20px;
width:200px;
}
--!>
</style>
<?php
}
/*
* admin_menu フィルタで ctm_add_pages を実行
*/
add_action('admin_menu', 'ctm_add_pages');
function ctm_add_pages() {
// 「設定」にサブメニューを追加
add_options_page('子テーマメーカー', 'Child Theme Maker', 8, 'ctm', 'child_theme_maker');
}
/*
* 子テーマメーカー
*/
function child_theme_maker() {
/* 子テーマメーカー
WordPressの子テーマを作るとき必要最低限のファイルを用意する
*/
$themeDir = WP_CONTENT_DIR.'/themes/';
$errorMessage = '';
$status = '';
if (isset($_POST['submit'])) {
if (isset($_POST['_ctm_nonce']) && $_POST['_ctm_nonce']){
if (check_admin_referer('childthememaker', '_ctm_nonce')){
// 送信が押されたとき
$parent = _ctmEditPost('parent');
$child = _ctmEditPost('child');
// 入力チェック
$errorMessage = _ctmCheckinput($parent, $child, $themeDir);
if ($errorMessage == '') {
// 子テーマを作る
_ctmMakeChildTheme($parent, $child, $themeDir);
}
} else {
die('nonce error');
}
}
}
// 画面表示
_ctmForm($errorMessage);
}
function _ctmEditPost($postName){
if (isset($_POST[$postName])){
return $_POST[$postName];
}
return '';
}
function _ctmCheckinput($parent, $child, $themeDir) {
$messageArray = array();
if ($parent != '') {
// 親テーマの存在チェック
if (file_exists($themeDir.$parent)) {
} else {
$messageArray[] = 'この親テーマフォルダは存在していません';
}
} else {
// 必須入力チェック(親テーマ名)
$messageArray[] = '親テーマ名を入力してください。';
}
if ($child != ''){
// 子テーマ名の文字チェック
if(preg_match('/^[a-zA-Z0-9_-]+$/', $child)) {
// 子テーマの非存在チェック
if (file_exists($themeDir.$parent.'-'.$child)) {
$messageArray[] = 'この子テーマフォルダは既に存在しています';
}
} else {
$messageArray[] = '子テーマ名に「英数半角、ハイフン、アンダーバー」以外が入っています';
}
} else {
// 必須入力チェック(子テーマ名)
$messageArray[] = '子テーマ名を入力してください。';
}
if (count($messageArray) > 0){
return implode($messageArray, '<br />');
}
return '';
}
function _ctmMakeChildTheme($parent, $child, $themeDir) {
// 子テーマ出力
$styleCss = '/*
Theme Name: %1$s-%2$s
Template: %1$s
*/
';
// フォルダ作成
$childPath = $themeDir.$parent.'-'.$child;
mkdir($childPath);
// style.css 作成
touch($childPath.'/style.css');
$string = sprintf($styleCss, $parent, $child);
file_put_contents($childPath.'/style.css', $string);
// functions.php作成
touch($childPath.'/functions.php');
$string = "<?php
/* 親テーマstyle.cssの読み込み */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
/* functions.phpの内容を書く */
";
$status = file_put_contents($childPath.'/functions.php', $string);
}
function _ctmForm($errorMessage){
if (isset($_POST['submit'])) {
if($errorMessage == ''){
?>
<div class="updated"><p><strong>子テーマ「<?php echo _ctmEditPost('parent');?>-<?php echo _ctmEditPost('child');?>」を作成しました</strong></p></div>
<?php
} else {
?>
<div class="error"><p><strong><?php echo $errorMessage;?></strong></p></div>
<?php
}
}
?>
<div class="wrap">
<h1 class="wp-heading-inline">子テーマメーカー</h1>
<hr class="wp-header-end">
<div class="mct-form">
<form method="post">
<div class="form-group">
<div>
<label>親テーマ名</label><input type="text" name="parent" id="parent" value="<?php echo _ctmEditPost('parent'); ?>">
</div>
<div class="ctm_notice">親テーマのフォルダ名を入力してください</div>
</div>
<label>子テーマ名</label><span id="prefix_parent"></span>-<input type="text" id="child" name="child" value="<?php echo _ctmEditPost('child'); ?>"> <div class="ctm_notice">
子テーマの名前を「英数半角、ハイフン、アンダーバー」で入力してください</div>
<br>
<input type="submit" name="submit" class="btn btn-primary" value="子テーマを作成">
<?php wp_nonce_field( 'childthememaker','_ctm_nonce' ); ?>
</form>
</div>
</div>
<?php
}
1ファイルの206行の中にjQuery、css、php、HTMLが書いてありますのでご興味がありましたらご覧下さい。
コメント