whiskers
メニュー
blog

VCCWではじめるWordpress シリーズVCCWでiemotoを使ったWordpressテーマ作成

    • Ryuichi Nonaka
    この記事は書かれてから1年以上経過しており、内容が古い場合があります。

    はじめに

    前回Gruntを使ったテーマ開発環境を作るという記事でVCCWを開発しているのmiya0001さんにiemotoを紹介いただいたので、実際にインストールして使えるところまで試してみました。

    VCCWについて

    VCCWの環境構築についてはこちらの記事Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」を参考にしてください。

    Iemotoについて

    Iemotoは_s(underscores)というスターターテーマをベースとしたGrunt/Gulpテンプレートです。

    仮想環境にSSH接続する

    すでにVagrant環境及びVCCWをインストールし$ vagrant upが実行可能という前提で進めます。まずは仮想環境にSSH接続しましょう。

    $ vagrant up
$ vagrant ssh
[vagrant@wordpress ~]$

    ここからはすべて仮想環境でコマンドを実行します。

    テーマ作る

    テーマディレクトリに移動し適当にディレクトリを作ります。

    $ cd /var/www/wordpress/wp-content/themes/
$ mkdir test

    iemotoのインストール

    VCCWにはrbenv, bundler, node.js, grunt-cliがインストール済みです。grunt-initコマンドで_sベースのスターターテーマを生成します。

    $ grunt-init iemoto
[?] Project title (Iemoto) test
[?] PHP function prefix (alpha and underscore characters only) (iemoto)
[?] Description (This is a awesome cool theme.)
[?] Project homepage (https://example.com/) http://test.io/
[?] Author name nukos.kitchen
[?] Author url (https://example.com/) http://whiskers.nukos.kitchen/
[?] Use gulp? (y/N) N
[?] Do you need to make any changes to the above before continuing? (y/N) N

    設定入力後、確認をスキップするとテーマファイルが生成されます。Gruntを使いたい方は[?] Use gulp? (y/N)をNにします（そろそろGulpも使おうと思う）。

    { '.gitignore': 'iemoto/root/.gitignore',
  '.jshintrc': 'iemoto/root/.jshintrc',
  '404.php': 'iemoto/root/404.php',
  'Gruntfile.js': 'iemoto/root/Gruntfile.js',
  'README.md': 'iemoto/root/README.md',
  'archive.php': 'iemoto/root/archive.php',
  'comments.php': 'iemoto/root/comments.php',
  'content-none.php': 'iemoto/root/content-none.php',
  'content-page.php': 'iemoto/root/content-page.php',
  'content-search.php': 'iemoto/root/content-search.php',
  'content-single.php': 'iemoto/root/content-single.php',
  'content.php': 'iemoto/root/content.php',
  'footer.php': 'iemoto/root/footer.php',
  'functions.php': 'iemoto/root/functions.php',
  'gulpfile.js': 'iemoto/root/gulpfile.js',
  'header.php': 'iemoto/root/header.php',
  'inc/custom-header.php': 'iemoto/root/inc/custom-header.php',
  'inc/customizer.php': 'iemoto/root/inc/customizer.php',
  'inc/extras.php': 'iemoto/root/inc/extras.php',
  'inc/jetpack.php': 'iemoto/root/inc/jetpack.php',
  'inc/template-tags.php': 'iemoto/root/inc/template-tags.php',
  'index.php': 'iemoto/root/index.php',
  'js/customizer.js': 'iemoto/root/js/customizer.js',
  'js/iemoto.js': 'iemoto/root/js/iemoto.js',
  'js/navigation.js': 'iemoto/root/js/navigation.js',
  'js/skip-link-focus-fix.js': 'iemoto/root/js/skip-link-focus-fix.js',
  'languages/_s.pot': 'iemoto/root/languages/_s.pot',
  'languages/ja.mo': 'iemoto/root/languages/ja.mo',
  'languages/ja.po': 'iemoto/root/languages/ja.po',
  'languages/readme.txt': 'iemoto/root/languages/readme.txt',
  'page.php': 'iemoto/root/page.php',
  'rtl.css': 'iemoto/root/rtl.css',
  'sass/_reset.scss': 'iemoto/root/sass/_reset.scss',
  'sass/editor-style.scss': 'iemoto/root/sass/editor-style.scss',
  'sass/elements/_elements.scss': 'iemoto/root/sass/elements/_elements.scss',
  'sass/elements/_lists.scss': 'iemoto/root/sass/elements/_lists.scss',
  'sass/elements/_tables.scss': 'iemoto/root/sass/elements/_tables.scss',
  'sass/forms/_buttons.scss': 'iemoto/root/sass/forms/_buttons.scss',
  'sass/forms/_fields.scss': 'iemoto/root/sass/forms/_fields.scss',
  'sass/forms/_forms.scss': 'iemoto/root/sass/forms/_forms.scss',
  'sass/layout/_content-sidebar.scss': 'iemoto/root/sass/layout/_content-sidebar.scss',
  'sass/layout/_sidebar-content.scss': 'iemoto/root/sass/layout/_sidebar-content.scss',
  'sass/media/_captions.scss': 'iemoto/root/sass/media/_captions.scss',
  'sass/media/_galleries.scss': 'iemoto/root/sass/media/_galleries.scss',
  'sass/media/_media.scss': 'iemoto/root/sass/media/_media.scss',
  'sass/mixins/_mixins-master.scss': 'iemoto/root/sass/mixins/_mixins-master.scss',
  'sass/modules/_accessibility.scss': 'iemoto/root/sass/modules/_accessibility.scss',
  'sass/modules/_alignments.scss': 'iemoto/root/sass/modules/_alignments.scss',
  'sass/modules/_clearings.scss': 'iemoto/root/sass/modules/_clearings.scss',
  'sass/modules/_infinite-scroll.scss': 'iemoto/root/sass/modules/_infinite-scroll.scss',
  'sass/navigation/_links.scss': 'iemoto/root/sass/navigation/_links.scss',
  'sass/navigation/_menus.scss': 'iemoto/root/sass/navigation/_menus.scss',
  'sass/navigation/_navigation.scss': 'iemoto/root/sass/navigation/_navigation.scss',
  'sass/site/_site.scss': 'iemoto/root/sass/site/_site.scss',
  'sass/site/primary/_asides.scss': 'iemoto/root/sass/site/primary/_asides.scss',
  'sass/site/primary/_comments.scss': 'iemoto/root/sass/site/primary/_comments.scss',
  'sass/site/primary/_posts-and-pages.scss': 'iemoto/root/sass/site/primary/_posts-and-pages.scss',
  'sass/site/secondary/_widgets.scss': 'iemoto/root/sass/site/secondary/_widgets.scss',
  'sass/style.scss': 'iemoto/root/sass/style.scss',
  'sass/typography/_copy.scss': 'iemoto/root/sass/typography/_copy.scss',
  'sass/typography/_headings.scss': 'iemoto/root/sass/typography/_headings.scss',
  'sass/typography/_typography.scss': 'iemoto/root/sass/typography/_typography.scss',
  'sass/variables-site/_colors.scss': 'iemoto/root/sass/variables-site/_colors.scss',
  'sass/variables-site/_structure.scss': 'iemoto/root/sass/variables-site/_structure.scss',
  'sass/variables-site/_typography.scss': 'iemoto/root/sass/variables-site/_typography.scss',
  'sass/variables-site/_variables-site.scss': 'iemoto/root/sass/variables-site/_variables-site.scss',
  'screenshot.png': 'iemoto/root/screenshot.png',
  'search.php': 'iemoto/root/search.php',
  'sidebar.php': 'iemoto/root/sidebar.php',
  'single.php': 'iemoto/root/single.php',
  'style.css': 'iemoto/root/style.css' }
Writing .gitignore...OK
Writing .jshintrc...OK
Writing 404.php...OK
Writing Gruntfile.js...OK
Writing README.md...OK
Writing archive.php...OK
Writing comments.php...OK
Writing content-none.php...OK
Writing content-page.php...OK
Writing content-search.php...OK
Writing content-single.php...OK
Writing content.php...OK
Writing footer.php...OK
Writing functions.php...OK
Writing gulpfile.js...OK
Writing header.php...OK
Writing inc/custom-header.php...OK
Writing inc/customizer.php...OK
Writing inc/extras.php...OK
Writing inc/jetpack.php...OK
Writing inc/template-tags.php...OK
Writing index.php...OK
Writing js/customizer.js...OK
Writing js/iemoto.js...OK
Writing js/navigation.js...OK
Writing js/skip-link-focus-fix.js...OK
Writing languages/_s.pot...OK
Writing languages/ja.mo...OK
Writing languages/ja.po...OK
Writing languages/readme.txt...OK
Writing page.php...OK
Writing rtl.css...OK
Writing sass/_reset.scss...OK
Writing sass/editor-style.scss...OK
Writing sass/elements/_elements.scss...OK
Writing sass/elements/_lists.scss...OK
Writing sass/elements/_tables.scss...OK
Writing sass/forms/_buttons.scss...OK
Writing sass/forms/_fields.scss...OK
Writing sass/forms/_forms.scss...OK
Writing sass/layout/_content-sidebar.scss...OK
Writing sass/layout/_sidebar-content.scss...OK
Writing sass/media/_captions.scss...OK
Writing sass/media/_galleries.scss...OK
Writing sass/media/_media.scss...OK
Writing sass/mixins/_mixins-master.scss...OK
Writing sass/modules/_accessibility.scss...OK
Writing sass/modules/_alignments.scss...OK

    これでテーマファイルはできました。
    あとはGruntが動くようにgemやnpmのモジュールをインストールします。

    Gemのインストール

    すでにbundlerがインストールされているのでbundle initでGemfileを作ります。

    $ bundle init
Writing new Gemfile to /var/www/wordpress/wp-content/themes/test/Gemfile

    Gemfileを編集

    今回はIemotoが生成するGruntfile.jsに書かれているSassやCompassを動かすために必要なgemをインストールします。$ vi GemfileでGemfileを編集します。

    source "https://rubygems.org"

gem "sass"
gem "compass"

    Gemfileが書けたらbundle installでインストールします。

    $ bundle install --path=vendor/bundle

    node.jsモジュールのインストール

    続いてnode.jsモジュールをインストールします。すでにpackage.jsonが用意されているのでインストールコマンドを実行するだけです。

    $ npm install

    package.jsonの中身

    {
  "name": "test",
  "title": "test",
  "description": "This is a awesome cool theme.",
  "version": "0.1.0",
  "homepage": "http://test.io/",
  "author": {
    "name": "Ryuichi Nonaka",
    "url": "http://whiskers.nukos.kitchen/"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-compass": "^0.9.1",
    "grunt-contrib-jshint": "^0.10.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-text-replace": "^0.3.12",
    "load-grunt-tasks": "^0.6.0"
  },
  "keywords": []
}

    Gruntfileの修正

    compassをbundler経由で実行するためにbundleExecの指定をGruntfileに追加します。

    // compass(sass)
    compass: {
      options: {
        bundleExec: true
      },
      dev: {
        options: {
          sassDir:        'sass',
          cssDir:         'css',
          imagesDir:      'images',
          outputStyle:    'expanded',
          relativeAssets: true,
          noLineComments: true,
          sourcemap:      true
        }
      },
      dist: {
        options: {
          sassDir:        'sass',
          cssDir:         './',
          imagesDir:      'images',
          outputStyle:    'expanded',
          relativeAssets: true,
          noLineComments: true,
          sourcemap:      false,
          force:          true
        }
      }
    }

    Gruntの実行

    Gruntを実行して下記のようにタスクが処理されれば成功です。

    [vagrant@wordpress test]$ grunt
Running "jshint:dist" (jshint) task
>> 1 file lint free.

Running "compass:dev" (compass) task
directory css
    write css/editor-style.css (5.887s)
    write css/editor-style.css.map
    write css/style.css (4.584s)
    write css/style.css.map

Running "compass:dist" (compass) task
    write editor-style.css (4.436s)
    write style.css (4.268s)

Running "replace:dist" (replace) task

Done, without errors.

    これでテーマ作成の準備は完了です。 あとはgrunt-contrib-watchとか入れて自分好みにカスタマイズします。

    まとめ

    今回は仮想環境上でGruntを動かしましたが、Sass/Compassだけでも処理に4秒write css/style.css (4.766s)かかっていたりします。自分の環境が悪いのか設定が悪いのか･･･あまり良い数字ではないですね。原因までは調べてないのでどこが悪いとか言えませんがローカルで走らせるのも1つの方法かもしれません。

    シリーズ

    1. VCCWでiemotoを使ったWordpressテーマ作成
    2. VCCWでWP-CLI（A command line interface for WordPress）を試す
    3. WP-CLIでWordpressプラグインをインストールし有効化する
    4. VCCWでファイルがアップロードできなくてはまった話

    関連記事

    Vagrantの最初の一歩

    • vagrant, Wordpress, chef

    Vagrant + Chef ベースのWordpress Theme / Plugin 開発環境「VCCW」

    • vagrant, Wordpress, VCCW, chef

    コメント・フィードバック