WordPressとAtomを連携してFTPサーバー内のPHPファイルなどを編集する方法

eyecatch

そろそろ母親のコロッケが食べたい、mizkyです。

今回は、WordPressとAtomを連携して、WordPressのFTPサーバー内のPHPファイルや、CSSファイルなどを編集する方法について書きたいと思います。

前提条件

Atomはインストールして使えるようにしてくださいw

また、PACPLEではレンタルサーバー LOLIPOP!(以下、ロリポップ)を使用していますので、FTPサーバーの接続設定では、ロリポップを例に説明しています。ご了承ください。

ロリポップは複数のプランが存在し、安価で始められるのでお勧めです・・・と宣伝しておきます笑

編集するまでの初期設定

1. Remote-FTPをインストールする

最初に、Remote-FTPというパッケージをインストールします。

メニュータブから、File > Settings > Install の順にクリックして、パッケージインストール画面に進みます。

「remote-ftp」で検索して目的のパッケージをインストールします。

2. 設定ファイルを作成する

FTPサーバーに接続するための設定ファイルを作成します。

その前に、設定ファイルを格納するプロジェクトフォルダを作成します。

File > Add Projet Folder の順にクリックして、設定ファイルを保存するフォルダを選択してください。

フォルダが無い場合は新規作成してください。

フォルダを選択したら、下記のような画面に遷移します。

フォルダを準備し終えたら、設定ファイルの作成に移ります。

メニューバーより、Packages > Remote FTP > Create FTP config file を選択します。

すると、以下のような.ftpconfigというファイルが表示されます。

host, port, user, passを各自の環境に応じて編集してください。

ロリポップ利用ユーザーの場合

 host:  ftp.lolipop.jp

 port: 21

 user: FTP・WebDAVアカウント

 pass:  FTP・WebDAVパスワード

となります。

WebDAVアカウントとWebDAVパスワードについては、ロリポップにログイン後、ユーザー設定のアカウント情報から確認することができます。

ロリポップの設定について詳しく知りたい方については、以下のリンクが参考になります。

Win FFFTP FTPS対応版の設定 / ファイル管理 / マニュアル - ロリポップ!レンタルサーバー
ロリポップ!レンタルサーバーのご利用マニュアル FTPソフト(Windows FFFTP FTPS対応版)の設定を説明したマニュアルページです。

3. FTPサーバーに接続する

設定ファイルを編集後、メニューバーより、Packages > Remote FTP > Connect をクリックして、FTPサーバーに接続します。

下記のような表示が出れば、接続成功です。

実際にファイルを編集するには

メニューバーより、Packages > Remote FTP > Toggle を選択してください。

すると、以下のようなRemoteタブが出現します。

あとは、好きなファイルを選択して、編集して下さい。

感想

コーディング作業後、わざわざFTPサーバーにファイルをアップロードする手間が省けるので、非常に時間の短縮になって嬉しいです。

コメント

タイトルとURLをコピーしました