WordPressテーマ作成のための備忘録 #WordPress

WordPressのテーマ作成のための備忘録(随時更新)

開発環境関連(Mac)

プラグインなどをインストールできるようにする

apacheがWordPressのディレクトリに書き込める権限を持っていないと、ブラウザ上からプラグインのインストールなどができないので不便。

chownでWordPressがあるディレクトリ全体の権限を_wwwにしてしまうのが楽。

chown -R _www wordpress

自動更新

BrowserSync

ファイルを更新した際のブラウザの自動リロードはLiveReloadよりもBrowserSyncの方が手軽で便利。

BrowserSyncのproxyモードを使う。

browser-sync start --proxy="localhost:80" --files "*"

proxy経由でアクセスしていてもWordPressのインストールURLにリダイレクトされてしまう場合は、テーマのfunctions.phpでCanonical Redirectionを無効にする。

<?php
remove_action('template_redirect', 'redirect_canonical');

※他にもっと良いやり方はないのだろうか

サーバーへのデプロイ

rsyncでの転送

特にサーバー側でファイルが増えるようなものでもないしファイル数も少ないので、rsyncによるデプロイでも十分

rsync -av -e ssh . user@serverhost:www/path/to/wordpress/wp-content/themes/mytheme/

gulpを使う場合

var gulp = require('gulp');

var browserSync = require('browser-sync');
var rsync = require('gulp-rsync');

gulp.task('deploy', function() {
  gulp.src('.')
  .pipe(rsync({
      hostname: 'serverhost',
      destination: 'www/path/to/wordpress/wp-content/themes/mytheme/',
      user: 'user',
      recursive: true,
      exclude: ['.git/', 'node_modules/', 'gulpfile.js'],
      args: ['--verbose']
    }));
});

gulp.task('browser-sync', function() {
  browserSync({
    proxy: "localhost:80",
    startPath: "~username/wordpress/"
  });
});

スケルトンの作成

WordPress4.1のデフォルトテーマのTwenty Fifteenは若干個性が強く、ベースとしては使いにくい。
Underscoresを使ってベースのテーマを作るのが良い。

Bootcampのインストール

難しく考えなくてもレスポンシブデザインを実現できるBootstrap最高。
特に理由がなければCDNを使ってインポートするのが楽。

header.php

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

footer.php

<?php wp_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>