WordPress自作テーマ作りが捗りすぎる！ぼくのテーマ作成環境を大公開 (後編)[設定編]

先日、ぼくのWordPress自作テーマ作成環境[プラグイン&アプリ編]について記事をあげました。

今回は作成環境の続き…後編として、設定編を書いていきます。

自作テーマのベースを作成

まずは作業用のスペースとして、テーマ関連のファイルを格納するフォルダを作成します。
場所は自分のPC内、どこでも構いません。

この時点で作っておきたいファイルが２つだけ。
この時点では中身は空でも構わないので、index.phpというファイルを一つ。
そしてもう一つ。style.cssというファイルを作成して、以下を参考に内容を記述しておきましょう。

/*---------------------------------------------------------
Theme Name: ilmio-theme-test
Theme URI: http://ilmio-notizie.com
Description: theme of ilmio-theme-test
Author: tohroa
Author URI: http://ilmio-notizie.com
License:
License URI:
Version: 20140302
---------------------------------------------------------*/

「Theme Name」に記述した名前(上記の場合、ilmio-theme-test)が、後々WordPressのテーマ選択画面で表示されるようになります。

ST2 プロジェクトの作成

上記、フォルダとファイルが用意できたら、Sublime Text 2(以下、ST2)を起動して、プロジェクトの作成を行います。(Compassのビルド等を行うために、プロジェクトを作成する必要があります)

ST2のメニューから、Project→Save Project As…を選択。任意のプロジェクト名をつけて保存しましょう。

ST2「CompassとSass」

続いて、ST2のCompass、Sass等に関するPackageをインストールします。
すでにインストール済みの方はスキップしてください。
あと…CompassとSassの設定は、大分前に書いていました。

Packageの追加方法や、Compass/Sassの設定は以下の記事か、他のサイトをご参照ください。。。説明が雑X(
【Sublime Text 2】 Emmet/Sass/SCSS(Compass)を導入して、さくさくコーディングする準備をしよう！

最初に作成したフォルダの中に、Compassの設定ファイルを作成します。

config.rbという名称でファイルを作成して、中身は以下を参考に。
ご自分の環境に合わせて記述しましょう。

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "scss"
images_dir = "/images"
javascripts_dir = "/js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass common/css/input scss && rm -rf sass && mv scss sass

上記設定でのぼくのフォルダ構成は以下イメージの通り

Compassを起動してファイル監視を有効にすると、scssファイルを編集して保存すると、自動的にCSSファイルが css_dir で指定したフォルダへ出力されます。

ST2「SFTP」

続いて、ファイルアップロードの設定。
なんと、これもST2で出来ます！マジで恋に落ちます。Sublime Text 2。

ST2のPackage「SFTP」をインストールしましょう。
有料のPackageですが、無料でも度々ポップアップが表示される以外は特に制限無く使用可能です。
機能が素敵すぎるので、支払いをする価値は…あると思います！よく使う場合、ポップアップが鬱陶しくなるので支払いをしてしまうと楽。

Packageをインストールしたら、設定を行います。
sftp-config.jsonというファイルに設定を記入して保存。
内容は以下を参考に。

{
    // The tab key will cycle through the settings when first created
    // Visit http://wbond.net/sublime_packages/sftp/settings for help

    // sftp, ftp or ftps
    "type": "ftps", // ★ご自身のFTPサーバへのアクセス方式を設定

    "save_before_upload": true,
    "upload_on_save": true, 
	// ★保存した際に、サーバへアップロードされるようにする設定
    "sync_down_on_open": false,
    "sync_skip_deletes": false,
    "sync_same_age": true,
    "confirm_downloads": false,
    "confirm_sync": true,
    "confirm_overwrite_newer": false,

    "host": "********************", // ★サーバのホスト名を設定
    "user": "********************", // ★サーバにログインするためのユーザIDを設定
    "password": "****************", // ★サーバにログインするためのパスワードを設定
    //"port": "22",

    "remote_path": "/*****/wp-content/themes/ilmio-theme-test/", 
	// ★アップロード先のパスを指定(今回の場合 wp-content/themes 配下にします)
	// ★【注意】アップロード先のフォルダをサーバ側で作成しておかないとアップロードできません
    "ignore_regexes": [
        "\\.sublime-(project|workspace)", "sftp-config(-alt\\d?)?\\.json",
        "sftp-settings\\.json", "/venv/", "\\.svn", "\\.hg", "\\.git",
        "\\.bzr", "_darcs", "CVS", "\\.DS_Store", "Thumbs\\.db", "desktop\\.ini",
        "/scss/", "\\.scss","config\\.rb"
        // ★アップロード除外ファイルの指定。scssファイル等を指定しておくと、
        // 余計なファイルがアップロードされずに済みます:)
    ],
    //"file_permissions": "664",
    //"dir_permissions": "775",

    //"extra_list_connections": 0,

    "connect_timeout": 30,
    //"keepalive": 120,
    //"ftp_passive_mode": true,
    //"ssh_key_file": "~/.ssh/id_rsa",
    //"sftp_flags": ["-F", "/path/to/ssh_config"],

    //"preserve_modification_times": false,
    //"remote_time_offset_in_hours": 0,
    //"remote_encoding": "utf-8",
    //"remote_locale": "C",
}

赤字部分はみなさんの環境に合わせて設定をお願いします。
注意点として、アップロード先に指定したフォルダがサーバに存在しない場合エラーとなります。

この設定ファイルを作成することで、設定ファイルを配置したフォルダ配下のファイルを監視して、ファイルを保存した時にサーバ側に自動的にアップロードされます。

Theme Test Driveの有効化

サーバにファイル(style.cssが重要)がアップロードされると、WordPress管理画面のテーマ設定画面に、これから作成していくテーマが表示されているかと思います。
表示されていない場合は、ここまでの設定を見直してみて下さい。
style.css と index.php の両方がアップロードされていないと、不完全なテーマとして表示されている可能性もあります。

ここで外観→Theme Test Driveの設定で、これから作成していくテーマを設定することで、本番環境で訪問者には現在適用中のテーマ、自分では作成中のテーマを表示することが可能になります。

ちょっと話がそれますが、正確なアクセスをGoogleAnalyticsで確認したい場合、自分のアクセスは除外するように設定しておくと良いかと思います。
GoogleAnalytics 自分のアクセスは除外しとこう

全体の流れと注意点

これで一通りの設定は完了となります。

ST2でファイルを更新すると、自動的にサーバにアップロードされるので、WordPressの管理画面にアクセスする必要はほぼありません。(ウィジェットやプラグインの設定を変更する際は、管理画面から行う必要があります)

一つ注意点として、scssファイルを編集してCompassによるビルドが行われても、何もしないとcssファイルがアップロードされません。

cssファイルをST2で開いて、サイドバーでファイルのメニューを開いてSFTP/FTP→Monitor File (Upload on External Save)を有効にすることで、cssファイルが更新された際にアップロードされるようになりますので、忘れずに設定しておきましょう。

ST2でコーディング編集・保存したら、即ブラウザで確認が可能。
完成したらWordPress管理画面でテーマを切り替えるだけで反映終了。

もちろん本番環境に反映後も、ST2から直接編集が可能です。(何か問題が起こると大変なので、Theme Test Driveで確認しながら更新することをオススメしますが)

ちょっとざっと説明してしまったので、かなり不親切な説明になってしまっていますね…
今後追記・修正などしてもう少しわかりやすく書き直したいと思います。
とりあえず、現段階では…以上がぼくの自作テーマ作成時の環境です。

使い慣れたエディタで編集が出来て、アップロードの手間もかからない。
これがぼくにとってはかなり快適でした！

こんな感じの画面で(上でPHPファイル。下でCSS)編集してみたりしながら…

ブラウザでは、ドメインそのまま、作成中テーマの表示確認が行えます:)