「Cyberduck」で本番環境のWordpressのデータを直接修正する方法

WordPressでブログを作っていると、よくあるのが「このマージンをちょっと詰めたい…」「h2のフォントサイズをもう少し大きく…」といったように、次から次にちょこちょことCSSの修正をしたい場面が出てくること。

たぶん、Wordpressのみならず、自分でサイトを持っている人の多くは共感してもらえるんじゃないでしょうか。

ぼくもまさにそれで、ひとつ修正したかと思えば、あれもこれも…とどんどん修正したい箇所が湧き水のように出てきます。

WordPress本番環境のスタイルとかをエディタで修正したい

ただそんなとき、毎回wordpressの管理画面からスタイル編集をしたり、「カスタマイズ」から追加CSSを記述するのもちょっと面倒…。

かと言って、仮想サイトからポチッとワンクリックで本番環境に修正を反映できるような環境を構築するのもむずかしい…、という方もいるのではないでしょうか。

今回は、そんな「とりあえず本番環境のPHPやCSSをサクッとエディタで書き換えたい」というニーズを満たす方法をご紹介します。

WordPress熟練者というよりは、どちらかというと「HTMLやCSSをちょっといじれるので、Wordpress管理画面ではなくエディア上でカスタマイズしたい」というレベルの方向けの内容になります。

具体的には「Cyberduck」というFTPクライアントを使います。

FTPについての説明は割愛しますが、このFTPクライアントを使い、サーバに接続し、ファイルをダウンロードしたり、アップロードしたりします。

ですので、今回で言うと、サーバ上に格納されているWordpressのデータを直接書き換えたり修正したりして、Wordpressをカスタマイズしよう、という試みになります。

MacとWindowsのどちらの環境でも使用可能で、無料で使えるソフトです。今回はMacで使用したので、Mac版の解説になります。

まずは、以下よりご自身の環境に合ったバージョンをDLしてください。DLすると、こんな画面になります。

ここにどんどん接続されたサーバが羅列されていきます。

左上の「新規接続」をクリックし、サーバに接続します。

サーバ名やユーザ名、URLなどはサーバ契約時に送られてくるサーバの基本情報をそのまま入力します。

これらのデータは、たまに使うことがあるので、すぐにアクセスできる場所にメモしておくか書き記しておくとよいと思います。

サーバに無事接続されると、ここにサーバ情報が追加されます。いま、ぼくの環境では2つのサーバに接続しているので、このように表示されます。

接続済のサーバは、「（接続）履歴」や「ブックマーク」からアクセスできるので、接続しやすい状態にしておきましょう。僕は毎回「履歴」からアクセスしています。

アクセスしたいサーバをダブルクリックすると、サーバ内に格納されているフォルダが一覧で表示されます。ディレクトリ構造がそのまま再現されているので、どんどん階層を下り、目的のファイルを探します。

僕はよくWordpressのテーマのCSSを編集するので、style.cssを例にとります。

ファイルを選択肢右クリックすると、メニューが表示されます。ここで「エディタで編集」を選ぶと、すでにPCにインストールされているエディタか、純正のTextEditのどちらかが選択できるので、好きな方を選びます。

今回は、いつも使っているSublime Texeというエディタを使用します。

クリックすると、このように目当てのファイルが直接エディタで開かれます。この場合はstyle.cssですね。

あとは、このなかで修正したい部分を編集し、【⌘+S】で上書き保存します。保存が完了すると「アップデート完了」というアラートが出て、完了です。サーバ内のデータがその場で上書きされ、サイトのデータも修正されます。

最初の接続がちょっとめんどくさいのですが、一度接続さえしてしまえば、毎回管理画面からではなくFTPクライアント経由で直接エディタを編集してデータを書き換えられるので、ちょこちょこと頻繁に修正したい人にはぜひオススメしたい方法です。

またもし、記述が間違っていたり、ひとつ前の状態に戻したい場合は通常どおり【⌘+Z】を押せばひとつ前に戻れるので、そのあたりも気が楽でいいですね。