りんろぐ。

女子でも分かるぷちまにあっく話。

Blog運用 テーマカスタマイズ

WordPressテーマのカスタマイズをする時はテキストエディタの比較機能が便利!

2013/09/08

Who's the Daddy?
photo credit: Cheddarcheez via photopin cc

どうも。メンドク・サガリ子、別名凛(@rin_wan)です。

お気に入りのWordpressテーマ”Stinger”が新しく”Stinger”3に変身したのでりんろぐ。も変身をしようと準備をしていますが元々色々カスタマイズしてるので大変です。

そんな時にとても頼りになる機能をご紹介しまーす!



比較機能

WordPressのテーマをそんなにガッツリ変更出来る分けじゃないけど、ちょっぴり自分なりの色を出したい時って些細なカスタマイズするんですよ。

でも些細すぎて一晩寝るとどこを変更したのか忘れるorz

コメントで目印を入れたりもするんですが、自分がどう変えたかどこを変えたか忘れるものですよ…人間だもの…。

そんな私のような方にオススメしたいのがテキストエディタの比較機能です。

2つのファイルを並べて自動的に差がある所を「ここちがってまっせー」と教えてくれる超絶親切な機能です(*´ω`*)

Mac派

私は最近作業を全てMacbook airでやっているので、Macのファイル比較アプリを探しました。

探した結果「FileMerge」アプリが一番楽そうである事を発見Σ(・艸・○)

インストール

まずはXcodeアプリをインストール。これは元々アプリ開発をする為のツール。ほら、これでアプリ開発するきっかけになりますよw

インストールして、利用規約に同意すると「Apple Developer Tools」ってダンボールから工具が見えてるような箱アイコンが出てきますよ。

これもインストールしておいて下さいね。今回はこの工具箱が大事ですから!!

全てインストール&最初の起動が終わったらXcodeは落としてOKです♪

次はFinderから「アプリケーション」>「Xcode」アプリを右クリック>パッケージの内容を表示>Contents>Applications>FileMerge.app

この「FileMerge.app」さんが助けてくれまーす:*:・(*´ω`pq゛

使ってみる!

FileMerge.appを起動すると「どれ比較するのさ?」と聞いてくれます。左と右好きな方に好きなファイルを入れて下さい。

私はよく左に現在利用中のテーマの各ファイル、右に新テーマのファイルを並べます。

ファイルを選んだら「Compare」ボタンをぽちっとな!このCompareが比較するって意味ですよー英語のお勉強にもなりますw
Compare Files 2013-09-07 22-52-58

ところがPHPファイルとかだと「日本語だからちょっと…」って難色を示されます(´;ω;`)ウッ…

でもよくみると「Proceed Anyway」ってある。とりあえず実行のような意味なので押してみると、とりあえあず比較してくれます。
2013-09-07 22-54-51

一応日本語だらけの短い行数のファイルで比較してみましたが、問題なく比較してくれてるような気がします。

※ご利用の環境や使用ファイルによって異なる可能性があるので各自ご確認下さい。

比較に成功したら、こんな風にどこが違うのか青いラインで教えてくれますよーヾ(o´∀`o)ノ
style.css vs. style.css 2013-09-07 22-48-24

左下の数字が違いのある箇所。スクロールバーに見える細い区切り線はその違いのある箇所の場所です。

これで恐ろしい行数のCSSファイルだってスクロールして追加すべきかどうか判断するだけ!怖くなーい♪

便利ツール

ちなみに右下にある「Actions」っていうのが非常に便利なツール。一番下に表示する部分の取り扱いが変更出来ます。

<意味>
・Choose left → 左側のファイルを下の欄に表示する
・Choose right → 右側のファイルを下の欄に表示する
・Choose both (left first) → 両方表示する。差分のある部分は左側ファイルの記述から先に表示する
・Choose both (right first) → 両方表示する。差分のある部分は左側ファイルの記述から先に表示する
・Choose neither → 両方のファイルを表示するけど差分がある部分は表示しない

また、下の欄で差分を修正した後は画面の一番上、File>Save Mergeで上書き保存、Save Merge Asで別名保存が可能です♪

これでかなり楽になる〜v(*´∀`*)v

Windows派

こちらは色々有名ドコロのソフトがあるので、もうご存知の方が多いかもしれませんねー。やれる事は同じような事です。

秀丸の場合

こんな感じになりますよ。

サクラエディタの場合

サクラエディタの場合は画面キャプチャ等が見つかりませんでしたが、別のツールを追加して使いますよー。

子テーマ作成

ちなみにWordpressのテーマをカスタマイズする時は子テーマ作成が便利だと聞きます。

WordPressテンプレートのカスタマイズは子テーマで | SaaSes Staff Blog

私は実はこの方法あまり使ったことがなくて…直接上書きしてカスタマイズしてますw

何度もやると嫌というほどコード読むようになるので勉強になるし私コード読んでるわ!!感が楽しいんですよー( ●´艸`)

そんな事に時間を使ってられるかーーー!!!という方はぜひご導入を♪

また、いやいや、子テーマ作りなよ!!こんな危険な事もあるじゃない!!という方いらっしゃいましたら凛(@rin_wan)までぜひ教えて下さいませー(*´ω`*)

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Blog運用, テーマカスタマイズ,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡

スポンサードリンク