HOME BLOG WordPress(ワードプレス) CyberduckとVSCodeでサーバー上のワードプレスのファイルを編集する方法【Mac編】

CyberduckとVSCodeでサーバー上のワードプレスのファイルを編集する方法【Mac編】

WordPress(ワードプレス)はウェブサイトやブログを簡単に立ち上げることができる、便利なコンテンツ管理システムですが、しばらくWordPressのサイトを運営していると、

「CSSファイルをカスタマイズしてみたい」
「functions.phpファイルに新機能を追加したい」

と思うことはありませんか?

軽微な修正であれば、WordPressの管理画面から編集することも可能ですが、WordPressには、他にもサーバー上のファイルを編集する方法があり、目的や編集頻度に応じて使い分けることができます。

この記事では、

  • サーバー上のWordPressファイルを編集する3つの方法
  • CyberduckとVSCodeを使ってWordPressファイルを編集する方法

をご紹介します。

WordPressのサーバー上のファイルを編集する3つの方法

サーバー上のWordpressファイルを編集する方法としてよく挙げられるのが、

  1. WordPressのテーマエディタorプラグインエディタを使う方法
  2. レンタルサーバーのファイル管理ツールを使う方法
  3. FTPソフト(Cyberduck)とコードエディター(VSCode)を使う方法

の3つです。

早速、それぞれの方法を見ていきましょう。

WordPressのテーマエディタorプラグインエディタを使う方法

3つの方法の中で、一番簡単なのがこのやり方です。

WordPressの管理画面には、デフォルトでテーマ編集機能が搭載されており、以下の画像のように、サーバー上のファイルのちょっとした編集が行えます。

軽微なカスタマイズを手軽にできるのがこの方法のメリットですが、

  • 修正量が多い
  • .htaccess」や「wp-config.php」は修正したい

といった場合には、あまり向きません。

レンタルサーバーのファイル管理ツールを使う方法

前述の方法と同様、比較的簡単な方法です。

各種レンタルサーバーには、ファイル管理ツールが搭載されていることが多く、管理画面から「.htaccess」「wp-config.php」などを修正することができます。

例えば、エックスサーバーというレンタルサーバーでは、サーバーパネルから「.htaccess」ファイルなどを簡単に編集することができます。

ただ、こちらの方法に関しても、

  • コードのハイライトができないので見にくい
  • 修正頻度が多い場合、「レンタルサーバーにログイン画面→ファイル管理ツールに移動」のプロセスが面倒

といったデメリットがあります。

では、これら2つの方法の欠点を補う方法はないのでしょうか?
それが、最後に紹介する方法です。

FTPソフト(Cyberduck)+テキストエディタ(VSCode)を使う方法

最後にご紹介するのが、FTPソフト+テキストエディタを組み合わせる方法です。

FTP」とは、サーバー上にある画像や文章などのファイルをダウンロード&アップロードする技術です。Webサーバーにあるファイルをクライエント(PCなど)に転送することで、安全にコードを編集することが可能となります。

今回は、FTPソフト「Cyberduck」とテキストエディタ「VSCode」を使ってサーバー上のWordPressファイルを編集する手順を解説します。

今回の記事ではMacでの手順をご紹介しますが、「Cyberduck」「VSCode」ともWindowsにも対応しているソフトです。
画面の見た目やインストール方法などは若干異なりますが、同様の手順でWindowsのパソコンからもファイル編集をおこなうことができます。

手順は以下の通りです。

  1. CyberduckとVSCodeをMacにインストールする
  2. Cyberduckを使って、サーバー上のWordPressファイルをパソコンにダウンロードする
  3. ダウンロードしたファイルを、VSCodeで編集する
  4. 編集したファイルを、Cyberduck経由でサーバーにアップロードする

インストールや初期設定に少し手間がかかりますが、2回目以降はアクセスが非常に簡単になります

また、VSCodeはCSSやJavascriptファイルをデフォルトでハイライトしてくれるので、複雑な構造になっているコードでも格段に編集しやすくなります。

それでは、具体的な手順を解説していきます。

CyberduckとVSCodeをインストールする

それでは、まず、

  • FTPソフト「Cyberduck」
  • テキストエディタ「VSCode」

をそれぞれインストールしていきましょう。

Cyberduckのインストール手順

Cyberduck公式サイト」へアクセスし、Download for macOS or Windowsをクリックします。

※「Download on the Mac App Store」からダウンロードすると有料になるのでご注意ください!


Windows版とMac版どちらをダウンロードするか聞かれるので、Cyberduck for macOSをクリックします。


ダウンロードが完了したら、zipファイルを解凍して出てきた[Cyberduck.app]アイコンをダブルクリックします。

※ アイコンは、デスクトップなどの分かりやすい場所に配置しておきましょう。


確認を求められるので、[開く]を選択します。


以下の画面が開いたら、インストール成功です!
続いて、テキストエディタ「VSCode」のインストール方法を解説します。

VSCodeのインストール手順

VSCode公式サイト」にアクセスし、[Download Mac Universal]からダウンロードします。


ダウンロードが完了したら、zipファイルを解凍して出てきた[Visual Studio Code.app]アイコンをダブルクリックします。


VSCodeの黒い画面が起動したら、インストール成功です!
正常に起動できたので、[Visual Studio Code.app]を[アプリケーション]ディレクトリに移動しておきます。


デフォルトだと、言語設定が英語になっているので、「日本語化」していきます。

Japanese Language Pack for Visual Studio Code」にアクセスし、[インストール]をクリックします。


ポップアップが出たら、[Continue]をクリック。


ポップアップが出たら、[Visual Studio Codeを開く]をクリック。


VSCodeで、下のような画面が開くので、[install]をクリックします。


以下の画像のように日本語になっていたら、成功です!

「Cyberduck+VSCode」でWordpressのサーバー上のファイルを編集する方法

CyberduckとVSCodeのインストールが完了したので、いよいよ、この2つのアプリケーションを使って、サーバー上のWordPressファイルを編集する方法を解説していきます。

手順は以下の通りです。

  1. Cyberduckでサーバーに接続する
  2. サーバー上のファイルをダウンロードする
  3. ファイルを複製する
  4. VSCodeでファイルを編集する
  5. サーバーにファイルをアップロードする

Cyberduckでサーバーに接続する

Cyberduck.app」を起動したら、[>>]→[新規接続]をクリックします。


以下のFTP情報をそれぞれ入力してください。

  • 接続方式 :FTP(ファイル転送プロトコル)
  • サーバー:FTPサーバー名(FTPホスト名)
  • ユーザー名:FTPユーザー名(FTPアカウント名)
  • パスワード:FTPパスワード

 
必要な情報を入力したら、[接続]をクリックしましょう。

※ FTP情報はレンタルサーバーによって異なるので、ご契約のレンタルサーバーにてご確認ください。


下記のようなポップアップが表示されたら、[変更]をクリックします。


サーバーのファイルが表示されたら、接続成功です!

サーバー上のファイルをダウンロードする

サーバー上のファイルをダウンロードするには、

  • ドラッグ&ドロップする
  • 右クリック→[ダウンロード]

の2通りの方法があるので、お好きな方法でダウンロードしてみてください。

ファイルを複製する

編集したファイルに不具合が生じたり、削除してしまった場合に備えて、複製しておくことをオススメします。

編集したいファイルを右クリック→[ファイルを複製]をクリックします。


任意のファイル名を指定したら、[複製]をクリックして完了です。

VSCodeでファイルを編集する

ダウンロードしたファイルを、右クリック→[このアプリケーションで開く]→[Visual Studio Code.app]で開きます。


ファイルが開いたら、変更したい部分を編集し、保存します。

サーバーにファイルをアップロードする

ファイルを保存したら、

  • ドラッグ&ドロップする
  • 右クリック→[アップロード]

のどちらかの方法で、サーバー上にアップロードします。

以上で、完了となります!

追加:サーバー上のファイルを直接編集する方法

ファイルをダウンロードせずに直接VSCodeで開きたい」という方は、ファイルを右クリック→[エディタで編集]→[VSCode]ですぐにファイルを編集することができます。

※ ファイルを直接編集する場合も、万一の場合に備えて、必ずファイルを複製してバックアップを取るようにしてください

こちらの方法は、ファイルをダウンロードする手間がかからず、VSCodeで保存するとサーバーに即反映されるので利便性が高いです

最後に接続先をブックマークしよう

最後に、接続先をブックマークして、次回以降、簡単にアクセスできるようにします。

Cyberduck.app]→[ブックマーク]をクリックします。


+]をクリックします。


先ほど同じように、FTP情報を入力します。



ブックマーク一覧に接続先が表示されたら、成功です。
次回以降は、このブックマークをクリックすることで、簡単にサーバー接続することができます。

まとめ

この記事では、

  • サーバー上のWordPressファイルを編集する3つの方法
  • CyberduckとVSCodeを使ってWordPressファイルを編集する方法

をご紹介しました。

FTPソフトとテキストエディタを使った方法は、初期設定に手間がかかりますが、

  • 頻繁にWordPressファイルを編集できる
  • 複雑なコードをハイライトできる
  • バックアップが取りやすい

など、様々な利点があるので、サーバー上のファイルを編集する際には、ぜひ活用してみてください。