WinSCPを利用してサーバー上のWordPressテーマファイルを直接、手持ちの使い慣れたエディターで編集する方法

Wordpress

WordPressテーマのスタイルをちょっと編集したい時、どのようにしていますか?

例えば、テーマのスタイルをちょっと書き換えたくて「style.css」の編集を行いたいとき、以下の手段を取っている人もいるかもしれません。

  1. FTPソフトで「style.css」をダウンロードしてエディターで編集してアップロード
  2. WordPress管理画面「外観→テーマ編集→スタイルシート」から編集

けれど、それぞれには次のような面倒な点があります。

  1. エディターでの編集は楽だけどダウンロード・アップロードが面倒くさい
  2. ブラウザ上で編集することになるのでエディターを使って編集できない

今回は、これらの面倒な点を一気に解消するための手段、「サーバー上のファイルを普段使っているエディターで直接編集する方法」を紹介したいと思います。

サーバーファイルの直接編集を実現するにはいろいろな方法があるでしょうが、今回はWinSCPというソフトを使います。WinSCPはWindows用のソフトなので、当記事はWindowsユーザー向けの内容になっています。

photo by Aaron Hockley

スポンサーリンク
レクタングル(大)広告

WinSCPとは

WinSCPとは、Windows上で動くFTPFTPSSFTPクライアントプログラムです。

WinSCPとは

サーバー上のファイルをWindowsのエクスプローラーライクに操作することができます。

見た目の簡単さとは裏腹に、とても高機能なので基本的なファイルマネージャー機能の他にも、いろいろなことができます。

今回は、このWinSCPを設定してサーバー上のファイルを直接エディターで編集できるようにしたいと思います。

WinSCPのインストール

まずは、WinSCP – 窓の杜ライブラリあたりから、WinSCPをダウンロードしてインストールします。

インストールは、特に難しいことはなく、「次へ」を押していけば問題なく終了すると思います。1つお勧めとしては、途中の「ユーザーの初期設定」の「インターフェーススタイル」では「エクスプローラー」を選択した方が個人的には作業がしやすいと思います。(インストール後でも変更できます。)

winSCPセットアップ

インストールが終了したらWinSCPを起動してください。

WinSCPの起動

サーバー情報の設定

WinSCPを起動したら、「WinSCPログイン」フォームが表示されるので、使用中のサーバー情報を入力します。

WinSCPログイン

次の箇所を編集します。

  • 転送プロトコル:FTP
  • 暗号化:暗号化なし(デフォルト)
  • ホスト名:サーバーのFTPホスト
  • ポート番号:21(FTPデフォルト)
  • ユーザー名:サーバーのFTPユーザー名
  • パスワード:サーバーのFTPパスワード

ここらへんは、普段利用しているFTPソフトとほとんど同じです。

設定が完了したら、「保存」ボタンを押してください。

「保存」を押したら「セッションの保存名」フォームが表示されるので保存名を入力し、「OK」ボタンを押してください。

セッションの保存名

パスワードを毎回入力するのが面倒な場合は、「パスワードを保存」にチェック入れて「OK」ボタンを押してください。ただしセキュリティ的に非推奨とされています。

設定が完了したら「ログイン」ボタンを押してください。

ログインボタンを押す

WinSCP設定で外部エディターの設定

「ログイン」ボタンを押してログインが成功すると、以下のようなエクスプローラ風のフォームが表示されます。(※表示が「大きいアイコン」→「一覧」に変更済み)

WinSCPテスト

「表示→環境設定」からWinSCPの設定画面を表示します。

WinSCPの設定

「環境設定」フォームが表示されたら、「エディタ」を選択し、「追加」ボタンを押してください。

エディターの設定

「エディタの追加」フォームが表示されるので、エディタに「外部エディタ」を選択し、「参照」ボタンから、普段使っているエディターの実行ファイルを選択してください。エディターを選択したら「OK」ボタンを押してください。

エディターの追加

僕の場合は、Sublime Textを使っているので、「sublime_text.exe」を選択しました。

エディターを追加したら、追加したエディターを選択し、「上へ」ボタンを何度か押して一番上まで持って行きます。

上へボタンを押す

追加したエディターを一番上に持っていくとこんな感じになります。一番上まで行くと「OK」ボタンを押してください。

上へボタンを押した

これでエディターの設定は終了です。

サーバー上のファイルをエディターで直接編集

サーバー上のファイルを、ローカルにあるエディターで編集するには、編集したいファイル例えば「style.css」などを右クリックで選択し「編集」メニューを選択してください。

編集メニューをクリック

使い慣れたエディターで起動します。

エディターで編集

エディター上でスタイルなどを変更し、「保存(Ctrl+S)」などを行えば、サーバー上のファイルも更新されます。

手に馴染んだエディターで簡単に編集が行え、面倒なダウンロード・アップロード作業も必要ありません。

まとめ

WinSCPを使うとサーバー上のファイル編集がとても簡単になります。

WordPressテーマの簡単なスタイル変更や、WEBから取得したタグをフッターなどにペタッと貼るだけなら、かなり手軽な方法だと思います。

ただし、大掛かりなスタイルの変更をする時や、PHPのコードの編集を行う場合は、ローカルにインストールしたWordpress上であらかじめテストした上で、ファイルをアップロードすることをお勧めします。

あくまで、ちょっとした編集向けの方法です。