プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

WordPress、Sourcetree、Atomの簡単な連携

目的

InstantWordPressとSourcetree、Atomを連携させて、快適な環境を作る。
【プログラマー入門】 Windowsで一番簡単なGit導入方法とは?ではTortoiseGitを使った連携を書いたが、正直個人的にはここで説明するやり方が一番簡単だと思い別パターンとして投稿。

準備

各ツールのインストール

InstantWordPress

https://instantwp.com/
解説はこちら↓
InstantWordPress

Git

https://git-scm.com/
解説はこちら↓
【プログラマー入門】 Gitって?

Sourcetree

https://ja.atlassian.com/software/sourcetree

Atom

https://atom.io/
解説はこちら↓
【高機能エディタ】 ATOMが一番使いやすいかもしれない

Sourcetree

初めて紹介するSourcetreeについては以下に設定を記載

インストール

まずはSourcetreeをダウンロード

続いてBitbucketのアカウント作成

Bitbucketは簡単にいうとリモートのリポジトリのスペース。

リモートリポジトリの設定

アカウント作成し、ログインしたら、左メニューの「+」アイコンからRepositoryをクリック

リモートリポジトリの名前を決めて、リポジトリの作成をする

ここまでで、Git管理のリモートスペースの確保が完了。

InstantWordPressのテーマフォルダをインデックス付けする

SourcetreeでBitbucketのリモートリポジトリとの設定

Sourcetreeを起動し、ファイル→「新規/クローンを作成」から、先程作ったリモートの空のリポジトリをクローンしてくる。このとき保存先のパスに、InstantWordPressの、Git管理したいテーマディレクトリを指定。空のディレクトリでないとクローンできないので、既にあるテーマディレクトリの中身は退避しておく。(他にも方法はあると思うが手っ取り早いため)

InstantWordPressのファイルをコミット

先程指定した、Git管理したいテーマディレクトリの中身を確認し、「.git」フォルダが作成されていることを確認する。
退避しておいたテーマ内のファイルを元に戻すと、Sourcetreeの作業コピーに追加されることを確認する。
Sourcetreeで全てインデックスに追加し、「変更をすぐにpush」にチェックを入れてコミット。

ここまでで、InstantWordPressのGit連携が完了。

Atomの設定

Atomでの設定はもうできているようなもので、「ファイル→プロジェクトフォルダを追加」からInstantWordPressのテーマフォルダを追加。
「ctrl + shift + 9」または「パッケージ→GitHub→Toggle Git Tub」をクリックで、ステージングされているファイル、されていないファイル、コミット、差分などが見ることができる。
AtomのGit連携を強化したい場合は便利なプラグインなどがある。
https://loumo.jp/wp/archive/20151013000059/