タグ : , ,

WordPress自作テーマのディレクトリ構造のメモ

投稿日 : 2013年10月11日 | 更新日 : 2014年01月30日 前のページへ戻る

Pocket

テーマを作成するときのディレクトリ構造のメモ。

2013.01.30 追記

参考にしたサイト。

» Using Grunt to Speed Up & Standardize your WordPress Theme Development
» 10up/grunt-wp-theme

利用ツール

  • スタイル プリプロセッサ
    sass/compass
  • スタイルガイド
    styledocco
  • JavaScriptドキュメンテーション
    YUIDoc
  • PHPパッケージ管理
    Composer
  • PHPドキュメンテーション
    phpDocumentor
  • CI
    Grunt

ディレクトリ

mytheme
    |
    |-- assets
        |
        |-- css
            |
            |-- sass
                |
                |-- _module1.sass
                |-- _variables.sass
                |-- main.scss
            |
            |-- main.css
            |-- main.min.css
        |
        |-- fonts
        |
        |-- images
        |
        |-- js
            |
            |-- custom.min.js
            |
            |-- vendor
                |
                |-- myscript    # 自作スクリプト
                    |
                    |-- myscript1.js
                    |-- myscript2.js
            |
            |-- jquery.js
        |
        |
        |-- node_modules  # Grunt
        |
        |-- config.rb     # Compass設定ファイル
        |
        |-- Gruntfile.js  # Gruntコマンド
        |
        |-- package.json  # Grunt用npmパケージファイル
    |
    |-- docs
        |
        |-- css          # スタイルガイド StyleDocco
        |
        |-- js           # JavaScriptドキュメンテーション YUIDoc
        |
        |-- php          # PHPドキュメンテーション phpDocumentor
    |
    |-- languages        # WordPressテーマ翻訳ファイル
    |
    |-- lib   # PHPライブラリ
        |
        |-- composer.json #Composer
        |-- composer.lock #Composer
        |-- composer.phar #Composer
        |
        |-- vendor
            |
            |-- composer #Composer
            |
            |-- MyName   # 自作モジュール
                |
                |-- WordPress   # カスタムクラス
                    |
                    |-- Widget
                        |
                        |-- CustomWidget.php
                    |
                    |-- CustomClass.php
            |
            |-- monolog         # Composerでインストールしたパッケージ
            |
            |-- autoload.php    # Composerでインストールしたパッケージのオートロードスクリプト             
        |
        |-- SplClassLoader.php  # 自作モジュールのオートロードスクリプト
    |
    |-- functions.php
    |
    |-- index.php
    |
    |-- screenshot.png
    |
    |-- style.css 

オートロード

functions.phpでオートロードの設定をする。

SplClassLoader

自作モジュール(MyName)のクラスはSplClassLoaderを使ってロードする。

// SplClassLoader
require_once( dirname( __FILE__ ) . '/lib/SplClassLoader.php' );
$classLoader = new \SplClassLoader( 'MyName', dirname( __FILE__ ) . '/lib/vendor' );
$classLoader->register();

// カスタムクラスインスタンス作成
new MyName\WordPress\CustomClass();

カスタムウィジェット

カスタムウィジェットはnamespaceでロードする方法が解らなかったのでrequire_onceで直接ファイルを読み込む

require_once( dirname(__FILE__) . '/lib/vendor/MyName/WordPress/Widget/CustomWidget.php' );
add_action( 'widgets_init', function(){
    register_widget( 'CustomWidget' );
});

Composer

Composerでインストールしたパッケージのオートロードはautoload.phpを使う。
autoload.phpは自動でインストールされる。

require_once( dirname( __FILE__ ) . '/lib/vendor/autoload.php' );

ComposerのパッケージをSplClassLoaderを使う場合

require_once( dirname( __FILE__ ) . '/lib/SplClassLoader.php' );
$classLoader = new \SplClassLoader( 'Monolog', dirname( __FILE__ ) . '/lib/vendor/monolog/monolog/src' );
$classLoader->register();

CSSコンパイル

%MYTHEME% 自作テーマのルート。

$ cd %MYTHEME%/assets

compass

インストール

$ create compass --bare

config.rb

css_dir = "css"
sass_dir = "css/sass"

// compass専用コメントの出力を停止するとき(config.rb)
line_comments = false

compassはconfig.rbのsassディレクトリにあるモジュールファイル1を除いたscssファイルをコンパイルしcssで指定したディレクトリへ出力する。

コンパイル

$ compass watch css/sass/main.scss

スタイルガイド

StyleDocco

$ styledocco -n mytheme -o ../docs/css css/main.css

JavaScriptドキュメンテーション

YUIDoc

YUIDoc – Javascript Documentation Tool

grunt-contrib-yuidoc

// インストール
$ cd %MYTHEME%/assets
$ npm install grunt-contrib-yuidoc --save-dev

// Gruntfile.js
yuidoc: {
        compile: {
            name: 'myscript',
            description: 'myscript documentation',
            version: '1.0.0',
            url: 'http://wwww.example.com',
            options: {
                paths: 'js/vendor/infotown/',
                outdir: '../../docs/javascript/'
            }
        }
    } 
grunt.loadNpmTasks('grunt-contrib-yuidoc');

PHPドキュメンテーション

phpDocumentor

$ cd %MYTHEME%
$ phpdoc -d . -t ./docs/php

CI

Grunt

gruntクライアントプログラムはインストール済みとする2

packege.jsonファイル作成

%MYTHEME%/assetsにpackage.jsonを作成

{
    "name": "mytheme",
    "version": "0.0.1"
}

%MYTHEME%/assetsディレクトリにgrunt本体及びプラグインインストール。

gurnt本体とプラグインは各プロジェクト(テーマ)ごとにインストールする。

$ npm install grunt --save-dev

%MYTHEME%/assetsにnode_modulesディレクトリが作成される。
プラグインをインストールする。
–save-devをつければpackage.jsonのdevDependenciesにプラグイン情報が追記される3

$ npm install grunt-contrib-cssmin --save-dev
$ npm install grunt-contrib-compass --save-dev
$ npm install grunt-styledocco --save-dev // 2013.11.29 追記
$ npm install grunt-contrib-uglify --save-dev // 2013.12.14 追記
$ npm install grunt-csscomb --save-dev // 2014.01.21 追記

package.jsonは下記のようになる。

{
  "name": "shikinohana.jp",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-cssmin": "~0.6.1",
    "grunt-contrib-compass": "~0.4.0",
    "grunt-styledocco": "~0.1.0" // 2013.11.29 追記
    "grunt-contrib-uglify": "~0.2.7", // 2013.12.14 追記
    "grunt-csscomb": "~2.0.1" //2014.01.21 追記
  }
}

Gruntfile.jsにタスク記載

module.exports = function(grunt) {
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        cssmin: {
            compress: {
                files: {
                    'css/main.min.css': [ 'css/main.css' ]
                }
            }
        },
        styledocco: {
            dist: {
                options: {
                    name: 'MYTHEME'
                },
                files: {
                    '../docs/css': 'css/main.css'
                }
            }
        },
        uglify: {
            my_target: {
                files: {
                    'custom.min.js': ['js/vendor/MyScript/myscript1.js', 'js/vendor/MyScript/myscript2.js']
                }
            }
        },
        csscomb: {
            custom: {
                files: {
                    'css/custom.css': ['css/custom.css']
                }
            }
        }
    });

    grunt.loadNpmTasks( 'grunt-contrib-compass' );
    grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
    grunt.loadNpmTasks( 'grunt-styledocco' ); // 2013.11.29 追記
    grunt.loadNpmTasks( 'grunt-contrib-uglify' ); // 2013.12.14 追記

    // Default task(s).
    // 2013.11.29 コメントアウト grunt.registerTask( 'default', [ 'compass', 'cssmin', 'styleguide' ] );
    grunt.registerTask( 'default', [ 'compass', 'cssmin', 'styledocco' ] ); // 2013.11.29 追記
};

2013.01.30 ディレクトリ構成変更

ディレクトリ

mytheme
    |
    |-- assets
        |
        |-- css
            |
            |-- vendor
                |
                |-- bootstrap
                    |
                    |-- bootstrap.min.css
            |
            |-- sass
                |
                |-- _module.sass
                |
                |-- core.scss
            |
            |-- core.css
            |-- coren.min.css
        |
        |-- fonts
        |
        |-- images
        |
        |-- js
            |-- vendor
                |
                |-- bootstrap.js
                    |
                    |-- bootstrap.js
                    |-- bootstrap.min.js
                |
                |-- mylib    # 自作スクリプト
                    |
                    |-- myscript.js
            |
            |
            |-- scripts.js
            |-- scripts.min.js
        |
        |-- php
            |
            |-- composer.json     # Composer
            |
            |-- composer.lock     # Composer
            |
            |-- composer.phar     # Composer
            |
            |-- core     # wordpress mytheme core file
                 |
                 |-- init.php   # functions.php includes
                 |
                 |-- some.php   # mytheme php file
            |
            |-- vendor
                |
                |-- composer #Composer
                |
                |-- MyName   # 自作モジュール
                    |
                    |-- WordPress   # カスタムクラス
                        |
                        |-- Widget
                            |
                            |-- CustomWidget.php
                    |
                    |-- CustomClass.php
                |
                |-- monolog         # Composerでインストールしたパッケージ
                |
                |-- autoload.php    # Composerでインストールしたパッケージのオートロードスクリプト             
            |
            |-- SplClassLoader.php  # 自作モジュールのオートロードスクリプト
        |
        |-- node_modules  # Grunt
        |
        |-- config.rb     # Compass設定ファイル
        |
        |-- Gruntfile.js  # Gruntコマンド
        |
        |-- package.json  # Grunt用npmパケージファイル
    |
    |-- docs
        |
        |-- css          # スタイルガイド StyleDocco
        |
        |-- js           # JavaScriptドキュメンテーション YUIDoc
        |
        |-- php          # PHPドキュメンテーション phpDocumentor
    |
    |-- languages        # WordPressテーマ翻訳ファイル
    |
    |-- functions.php
    |
    |-- index.php
    |
    |-- screenshot.png
    |
    |-- style.css

  1. プレフィックスが_で始まるscssファイル 
  2. $ npm install -g grunt-cli
    grunt0.4.1のメモ FindxFine | Web制作に関するメモ 
  3. grunt0.4.1のメモ FindxFine | Web制作に関するメモ 

Programming,WordPress | 固定リンク | Comments (0)

このページの上へ移動

コメント

No comments yet.

コメントの投稿

改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。

 

 

 


このページの上へ