MENU
WordPressを中心にITネタを画像付きでわかりやすく丁寧に解説(旧:ゆうそうとITブログ)
当サイトには広告が含まれております

子テーマ作成プラグイン、『子テーマメーカー』作りました

広告
WordPress プラグイン php JQuery
この記事は最終更新日から10年経過しています。内容が古い可能性があります。

WordPressでサイトを構築するとき、私の場合はほぼ必ず子テーマを作ってその中をカスタマイズしています。作るときに作り方を忘れて、親テーマを丸ごとコピーしてしまったり、子テーマに必要なファイルは…と自分のblogを見たりしています。
あまり何度もそれをやっていていやになったので、WordPressのプラグインを作ってみました。

記事をざっと見る

とりあえずはHTML+jQuery+phpで作ってみた

いままでずっとWordPressに手を入れるときは使っている子テーマのfunctions.phpで作ってきました。配布する目的が無いということと、プラグインにしてしまうと色々めんどうかなぁと思って。しかし、今回やりたいことは「子テーマを作る」ということなので、子テーマの中にあるfunctions.phpで作るというのも違う気がしました。

とはいえ、プラグインは以前試しに一度だけ作ったことがあるぐらいでそれも1年以上前ですっかり作り方も忘れてしまいました。まずは子テーマを作るために自分が考えているロジックがちゃんと動くか、HTML+jQuery+phpで作ってみました。

仕様は

・画面から親テーマ名、子テーマ名を入力
・送信を押すと、子テーマフォルダ(親テーマ名-子テーマ名)が作られる
・子テーマフォルダの中にはstyle.cssとfunctions.php(空ファイル)が作成されている

です。

<?php
/* 子テーマメーカー
   WordPressの子テーマを作るとき必要最低限のファイルを用意する
*/
/* 入力
    親テーマ名
    子テーマ名(親テーマにハイフンでくっつける)
*/

$themeDir = '';
$errorMessage = '';

if (isset($_POST['submit'])) {
    // 送信が押されたとき
    $parent = editPost('parent');
    $child = editPost('child');
    // 入力チェック
    $errorMessage = checkInput($parent, $child, $themeDir);
    if ($errorMessage == '') {
        // 子テーマを作る
        makeChildTheme($parent, $child, $themeDir);
    }
}

function editPost($postName){
    if (isset($_POST[$postName])){
        return esc_html($_POST[$postName]);
    }
    return '';
}

function checkInput($parent, $child, $themeDir) {
    
    if(($parent != '') AND ($child != '')){
        // 親テーマの存在チェック
        if (file_exists($themeDir.$parent)) {
            // 子テーマの非存在チェック
            if (file_exists($themeDir.$parent.'-'.$child)) {
                return 'この子テーマフォルダは既に存在しています';
            } else {
                return '';
            }
        } else {
            return 'この親テーマフォルダは存在していません';
        }
    } else {
        // 必須入力チェック(親テーマ名、子テーマ名)
        return '親テーマ名と子テーマ名は両方とも入力してください。';
    }

}

function makeChildTheme($parent, $child, $themeDir) {
    // 子テーマ出力
    $styleCss = '/*
Theme Name: %1$s-%2$s
Template: %1$s
*/

@import url("../%1$s/style.css");
';
    // フォルダ作成
    $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');
}

?>
<html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <title>ホームページ</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <script type="text/javascript">
    $(document).ready(function(){
        $("#prefix_parent").text($("#parent").val());
        $('#parent').change(function() {
            $("#prefix_parent").text($("#parent").val());
        });
        
    });

    </script>
    <style type="text/css">
        body {
        font-family: 'flopdesign-kana', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
        }
    </style>
</head>
<body>
    <div style="width:70%;margin-left : auto ; margin-right : auto ;">
    <p class="bg-primary" style="margin-top:10px;padding:10px;font-weight:bold;font-size:1.5em">WordPress 子テーマメーカー</p>
    <form method="post">
    <div class="form-group">
    <label style="width:200px;">親テーマ名</label><input type="text" name="parent" id="parent" value="<?php echo editPost('parent'); ?>">
    <br />親テーマのフォルダ名を入力してください<br />
    </div>
    <label style="width:200px;">子テーマ名</label><span id="prefix_parent"></span>-<input type="text" id="child" name="child" value="<?php echo editPost('child'); ?>">        <br />
    子テーマの名前を入れてください<br />
    <input type="submit" name="submit" class="btn btn-primary" value="送信">
    </form>
    <p class="bg-danger"><?php echo $errorMessage;?></p>
    </div>
</body>
</html>

ソースはこんな感じです。適当な名前のPHPファイルとして保存して、PHPが動く場所*にこのファイルを置くと動作が確認できます。同じディレクトリにいくつかWordPressのthemesからテーマをコピーしておくといいと思います。
* XAMPPのhtdocsの下のフォルダの中とか、レンタルサーバーのWWWの下とか

こんな感じの画面で、

送信をクリックすると

こんな感じで子テーマ(twentyfourteen-feb)が出来ています。

子テーマの中にこの2ファイルが作成されていて、

/*
Theme Name: twentyfourteen-feb
Template: twentyfourteen
*/

@import url("../twentyfourteen/style.css");

style.cssの中身はこんな感じで　twentyfourteen の子テーマだという指定が出来ています。

ここまでできあがっていればあとは追加したいcssをstyle.cssに書いたり、追加したい処理をfunctions.phpに書いていけば良さそうです。

作ったPHPをWordPressのプラグインにしてみる

この後は、色々なサイトを参照してプラグインにしてみました。このプラグインを作ろうと思ったときにたぶん調べれば似たようなプラグインがあるんだろうなぁと思ったのですが、プラグインを作るという勉強にもなるし、調べずに作ってみました(^^)/

プラグインは　child-theme-maker　という名前で作ることにしました。できあがったプラグインにはchild-theme-maker.phpというファイルが一つだけ入っています。

<?php
/* 
Plugin Name: Child Theme Maker
Description: Make Child Theme
Author: Mika UMOTO(RYUS) 
Author URI: http://ryus.co.jp
Version: 0.1 
*/
add_action('admin_print_scripts', 'mct_custom_js');

function mct_custom_js( ) {
  // カスタムJavascript関数の定義
        
        ?>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
            <script type="text/javascript">
        $(document).ready(function(){
            $("#prefix_parent").text($("#parent").val());
            $('#parent').change(function() {
                $("#prefix_parent").text($("#parent").val());
            });
        });
        </script>
<?php
}


/*
 * admin_menu フィルタで ryus_add_pages を実行
 */
add_action('admin_menu', 'mct_add_pages');
function mct_add_pages() {
    // 「設定」にサブメニューを追加
    add_options_page('子テーマメーカー', 'Child Theme Maker', 8, 'ctm', 'child_theme_maker');
}
/*
 * 子テーマメーカー
 */
 
function child_theme_maker() {
/* 子テーマメーカー
   WordPressの子テーマを作るとき必要最低限のファイルを用意する
*/
    
    $themeDir = WP_CONTENT_DIR.'/themes/';

    $errorMessage = '';

    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');
            }
        }
    }
    // 画面表示
    _mctForm($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 (file_exists($themeDir.$parent.'-'.$child)) {
                $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
    */

    @import url("../%1$s/style.css");
    ';
        // フォルダ作成
        $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');
    }

    function _mctForm($errorMessage){
?>
        <div style="width:90%;margin-left : auto ; margin-right : auto ;">
        <p class="bg-primary" style="margin-top:10px;padding:10px;font-weight:bold;font-size:1.5em">WordPress 子テーマメーカー</p>
        <form method="post">
        <div class="form-group">
        <label style="width:200px;">親テーマ名</label><input type="text" name="parent" id="parent" value="<?php echo _ctmEditPost('parent'); ?>">
        <br />親テーマのフォルダ名を入力してください<br />
        </div>
        <label style="width:200px;">子テーマ名</label><span id="prefix_parent"></span>-<input type="text" id="child" name="child" value="<?php echo _ctmEditPost('child'); ?>">        <br />
        子テーマの名前を入れてください<br />
        <input type="submit" name="submit" class="btn btn-primary" value="送信">
        <?php wp_nonce_field( 'childthememaker','_ctm_nonce' ); ?>
        </form>
        <p class="bg-danger"><?php echo $errorMessage;?></p>
        </div>
<?php
    }

ソースはこんな感じです。zipに圧縮したものをこちらに置きました。もしよろしければ自己責任の範囲で使ってみてください(^_^;。
* 2016/01/18 ファイルの内容を若干変更しました。

このプラグインのフォルダchild-theme-makerを　wp-content/plugins/ 　に置きます。

ダッシュボード　プラグイン＞インストール済みプラグインを見ると

このように　Child Theme Maker　があるので　有効化　をクリック



設定＞Child Theme Maker　をクリック


 
このように先ほど作ったものと同じような画面が、ダッシュボードに表示されました。

このように入力して　送信　をクリックします。

外観＞テーマ　をクリック

今作ったテーマが一覧に表示されました。

有効化　をクリックしてみてみると、

twentyfourteenそのままの表示になります。ちゃんと子テーマになってるかどうか、

外観＞テーマの編集　をクリックして

これを

こんな風に入力して

img_558cd50741093

ファイルを更新　をクリック

ちゃんと文字の色が変わりました。

こんな感じで、子テーマを簡単に作成して自由に手を入れられるようになりました。

プラグイン化したときに参考にさせてもらったサイトと書籍

ロジックはそれほどむずかしくなかったのですぐに出来たのですが、プラグイン化するのにだいぶ時間がかかりました。
情報はググって色々なサイトから教えてもらいました。

プラグインを作って管理画面メニューに追加する方法
[WordPress] 管理画面にメニュー項目を追加する

セキュアなWordPressプラグインの作り方
セキュアなWORDPRESSプラグインの作り方
グローバル変数・定数：WordPress私的マニュアル

まだこのプラグインでちゃんと出来てるとは思えませんが色々参考になりました。

セキュリティですが具体的な方法はこちらの本がとても参考になりました。

サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

posted with ヨメレバ
宮内 隆行,西川 伸一,岡本 渉,三好 隆之 SBクリエイティブ 2014-07-22   
Amazon
Kindle
楽天ブックス
7net
honto

                            

まとめ:今後このプラグインを色々いじっていきたいです

今時点では「とりあえず動く」という感じのモノです。まだ、色々手を入れたいところがあります。

・送信キーを押したときに「子テーマを作成しました」とメッセージを出す
・PHP部分をclassにする
・国際化(英語を入れる？)
・スクリーンショット作成機能

とか。色々思いついてるんですがまずは作ってみました。これからどんどん発展させていきたいと思っています。

WordPress プラグイン php JQuery

この記事が気に入ったら
いいね または フォローしてね！

あなたのシェアが励みになります！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメント一覧 （5件）

コメントを残す

記事をざっと見る