SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった

b36e8372f8cb90525c850b3e7e11d89c.jpg
ブログ技術

SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった

ブログデザイン(WordPressテーマ)の変更点などをちゃんと覚えておく&すぐに元に戻せるようにするために、 […]

最終更新日:2014年1月16日
ツイートする
ブックマークする
Evernoteへ送る
あとで読む

スクリーンショット 2014 01 16 16 54 09

ブログデザイン(WordPressテーマ)の変更点などをちゃんと覚えておく&すぐに元に戻せるようにするために、2014年からはgitを使った「バージョン管理」を始めました。

これまでは手動でEvernoteに変更点をメモするっていう方法を使っていたんですが、一手間かけて「git」を使い始めたおかげで、結果的にはEvernoteでの手動履歴管理よりもだいーぶ便利な環境が出来上がりました。

gitってなに?バージョン管理っておいしいの?

スクリーンショット 2014 01 16 17 26 38

一般的に、gitなどの「バージョン管理システム」というやつは、プログラムを書いたりする人が、より便利な環境を手に入れるための道具です。

大雑把にgitのメリットを挙げるとこんな感じ。

  • いつ、誰が、どのファイルの、どの部分を変更したかすぐわかる
  • 変更点にコメントを付けて残しておける
  • 複数人で同時にプログラムを作っても問題が起こりにくい
  • ちょっと前の状態に元に戻すのが簡単

もっと深く掘り下げていくと、もっとたくさんいい点は出てくるんですが、この「どの部分を変更したかわかる」「コメントを残せる」「すぐに元に戻せる」というのは、ウェブサイトのデザイン管理なんかにも結構役に立つわけです。

ブロガー的には、WordPressテーマに修正を加えたりした場合、いつ、どういう点を修正したのかがすぐわかるので、アクセス解析と組み合わせることで「何を変えたら何が変わったか」がわかりやすい

さらには、変更によって良くない結果が出た場合にも、すぐに元に戻すことが出来るので、より積極的に様々な事を試しやすくなる、というのもメリットかと思います。

Gitを簡単に使えるようにするSourceTree

スクリーンショット 2014 01 16 16 54 09

Gitは元々プログラマな人達が自分たちのために作り出したものなので、そのまんま使おうとするならばターミナルでの操作(黒い画面のやつ)が必要です。

とは言え、最近はもっと簡単にgitできるソフトなんかもいっぱい作られてきていて、そういうソフトを使ってやれば、わりと簡単にGitが使える環境を手に入れることが出来ます。

Git管理出来るソフトは色々あるんですが、今回はWindowsでもMacでも使える「SourceTree」というソフトを使うことにしました。(無料)

Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree

WordPressテーマ管理までの手順

今回やることは「ローカル環境WordPress」でテーマを編集して、その変更点などをちゃんとメモしておけるようにする環境を作る、というところまでの手順。

もっと頑張ると、サーバにgitをインストールして、ローカルで変更した部分をサーバにアップロードする、みたいなところまで出来ますが、そこは割愛。

SourceTreeをダウンロードして起動したらこんな画面が出るので、メアドやユーザー名を登録

スクリーンショット 2013 12 29 18 56 08

いろんなGit関連サービスのアカウントとも連携出来ますが、ここは後から設定もできるので空欄のままで問題なし。
スクリーンショット 2013 12 29 18 56 27

こんな感じでSourceTreeで管理しているプロジェクト一覧が出てくるので、一番左上の「リポジトリを追加」
スクリーンショット 2014 01 16 17 41 33

「レポジトリを作成」を選んで、レポジトリの保存先をWordPressのテーマの場所にする( WorePressフォルダ/wp-content/themes)
スクリーンショット 2014 01 16 17 44 48 12

これでSourceTreeの初期設定は完了。

名前を付けた「ブックマーク」を開くとこんな画面が出るので、最初に一通りのファイルをGitで管理するようにしてやります。

まずは一通りのファイルを全部選んで「ステージ」に上げる
スクリーンショット 2014 01 16 18 12 40 5

で、これらを「コミット」する。「コメント必須」ってのがポイント(強制的にどういうことをしたかメモしないといけない仕組み。だがそれが大事)
スクリーンショット 2014 01 16 18 13 21 6

これで、一通りのWordPressのテーマファイルを「バージョン管理」する仕組みが整いました。

テーマを修正したら随時「コミット」する

ここからは、随時テーマファイルを編集して一区切りが付いたところで「コミット」していくようにします。

ためしにindex.phpの先頭部分を変更して保存
スクリーンショット 2014 01 16 18 22 16 2

SourceTreeを開いてみると、「作業ツリーのファイル」にさっき編集をしたファイルが出てきて、そのファイルの「どの部分が変わったか」って部分も表示してくれます
スクリーンショット 2014 01 16 18 23 41 10

で、一通りの変更、修正が完了したら「ステージ」に持っていって「コミット」
スクリーンショット 2014 01 16 18 23 41 20

これを随時繰り返していくのが日常業務。

「過去の一部分だけ」をすぐに元に戻せる

こういう感じで「修正&コミット」を加えていくと「いつ」「どのファイルの」「どの部分を」変更したのか、ってのがずらーっと並びます。
スクリーンショット 2014 01 16 18 35 06 11

で、なんでわざわざこういうメンドクサイことをするのかという最大の理由は、むかーしむかしの一部の変更だけをサクッと元に戻すことが出来る、ということ。

ただ単純に「過去のファイルの履歴」が残っていれば「昔の状態」に戻すのは簡単なんだけど、同じファイルにその後違う修正を加えていた場合には、その修正まで「元に戻って」しまう。

でも普段からちゃんと「バージョン管理」で履歴を残しておいてやれば「その時に変更した部分だけ」を元に戻すってのがかなり簡単にできてしまいます。
スクリーンショット 2014 01 16 18 54 22 10
ファイルの変更部分によっては「元に」が出来ない場合もあるけど、どの行のどの部分が変わったか、ってのがわかるんで、人力でも比較的容易に「元に」ができる

これちょっと試してみたけど結果がいまいちだったからやーめた。

そういえばあの変更っていつからやってるんだっけ?

やっぱりあのときのあの感じの方が良かったから元に戻してぇなぁ。

バージョン管理って言うちょっとめんどくさい事をするおかげで、こういうホントにメンドクサイことを簡単にできるようになる。

おかげで、より多くのことが実験しやすくなって、より良い結果を生み出す可能性があがってくる。

本格的にgitを学ぼうとするとけっこう深い世界が広がっていますが、とりあえずこのくらいの「お手軽バージョン管理」だけでも、ブロガーにとって得られるメリットは大きいのではないかと思います。

参考

ブログの変更履歴とかをEvernoteに入れておく

MAMPを使って自分のMacの中にWordPressが表示できる環境を作る方法

Free Mercurial and Git Client for Windows and Mac | Atlassian SourceTree

もうちょっときちんとgitを覚えたい人は、このgit入門を一通り読んでみるのがオススメ
サルでもわかるGit入門

もっと色々ちゃんと設定すると、SourceTreeだけでサーバにも変更内容を送る、とかもできます
WordPressのテーマ等をgitで管理 【開発メモ】レンタルサーバー比較のつぼ!