WordPressのテーマ作成のための備忘録(随時更新)
開発環境関連(Mac)
プラグインなどをインストールできるようにする
apacheがWordPressのディレクトリに書き込める権限を持っていないと、ブラウザ上からプラグインのインストールなどができないので不便。
WordPress更新時にFTP情報入力画面が表示される場合の対処方法3つ
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>