WordPress自作テーマのディレクトリ構造のメモ
テーマを作成するときのディレクトリ構造のメモ。
参考にしたサイト。
» 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 MyNameWordPressCustomClass();
カスタムウィジェット
カスタムウィジェットは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
- プレフィックスが_で始まるscssファイル ↩
-
$ npm install -g grunt-cli
grunt0.4.1のメモ FindxFine | Web制作に関するメモ ↩ - grunt0.4.1のメモ FindxFine | Web制作に関するメモ ↩
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。