WordPressで作られたブログのカスタマイズを行うときには、FTPソフト(ファイル転送ソフト)を使うと便利です。

1. FTPクライアントソフトとは?

FTPクライアントソフト(FTPソフト)とは、サーバーに置いてあるファイルを手元のパソコンにダウンロードしたり、逆に手元のパソコンからアップロードしたりするためのソフトです。

WordPressの場合

 FTPソフトの役割

WordPressの場合、借りたサーバー上にWordPressの構成ファイルが置かれています。「構成ファイルを編集したい!」というときには、FTPソフトによりダウンロード&編集して、再度アップロードするわけですね。

2. FTPソフトでできること

テーマのデザインをカスタマイズ

FTPソフトがいちばん活躍するのは、サイトのデザインをカスタマイズしたり、管理画面からは行うことはできない細かな設定を変えるときですね。

テーマのデザインをカスタマイズ

WordPressのブログでは、複数のファイルが繋ぎ合わされることで、1つのページが作られることになります。FTPソフトにより、自分好みに変えたい部分のファイルをダウンロードして、書き直して、再アップロードすることで、カスタマイズができるのです。

ファイルの編集はテキストエディタで

あくまでもFTPソフトの役割は「ファイルの転送」です。ファイルの内容の編集は「Sublime Text(無料で評価できますが、継続使用にはライセンス購入が必要です)」などのテキストエディタで行います。

WordPressのファイルをバックアップ

FTPソフトを使えば、ファイルを簡単に手元のパソコンにダウンロードすることができます。

ファイルをバックアップ

ディレクトリ(フォルダー)をまるっとダウンロードすることもできます。たまには画像が入ったフォルダーや、デザインテーマの構成ファイルが入ったフォルダーをバックアップしておくと安心ですね。 ここで取れるのはファイルのバックアップです。通常のWordPressサイトを完全に復元するには、データベースも別にバックアップしておきましょう。

3. FTPソフトを使うメリット

テーマエディターからカスタマイズを行う場合

FTPソフトを使わなくても、WordPressの管理画面(外観テーマエディター)からもテーマファイルのカスタマイズを行うことができます。 この図は当時の管理画面です。クラシック/ブロックテーマ、権限や設定によってエディターの場所や利用可否は異なります。親テーマを直接変更すると更新で失われる場合があるため、子テーマなどを利用してください。

しかし、管理画面からの編集は、見づらいだけでなく様々なリスクがあります。

管理画面に入れないときの復旧にも使える

画面が真っ白に

WordPressのカスタマイズ中に「ファイルをどこか書き間違えて画面が真っ白になってしまった」という経験がある人も多いはず。

管理画面に入れなくなったときは、FTPソフトから原因のファイルを修正する方法があります。WordPressのリカバリーモードや、提供元のファイルマネージャー・SSHなどを使える場合もあります。利用条件を確かめ、元に戻せるバックアップを用意して作業しましょう。

管理画面のエディターで扱えないファイルも編集できる

また、WordPress管理画面の「テーマエディター」からカスタマイズできるのは、テーマのファイルだけです。その他のファイルを編集する方法のひとつがFTPソフトです。提供元のファイルマネージャーやSSHなどを使える場合もあります。

ファイルを直接扱うなら使い方を知っておくと便利

ファイルを直接扱ってカスタマイズする場合、FTPソフトの使い方を知っておくと便利です。ほかの方法もありますが、復旧が必要になる前に使い方を確かめておくと安心ですね。

4. FileZillaの使い方

ありがたいことに、無料で使える優秀なFTPソフトがたくさんあります(WordPressでブログをやる分には、無料のもので十分です)。

4-1. ダウンロード

FileZillaのダウンロードは、Windows/Macともに下のリンク先から行うことができます。


ダウンロードページ

上の図は公開当時のWindows向け配布画面です。最新の配布ページで、自分のOSとCPUに対応する版・動作要件を確認してください。現行の配布ページにはWindowsの32bit/64bit、MacのIntel/Apple Silicon向けの区別があります。自分のパソコンに合う版を確認しましょう。

公開当時はMicrosoftの公式ページで「使用中のPCが32bit、64bitどちらか」を判断する方法を紹介していました(こちらの旧参照先は現在404です)。OSのシステム情報と現在の配布ページを照合し、対応する版を選びましょう。

クリックしてインストールを始める

ファイルのダウンロードが完了したら、クリックしてインストールを始めます。

4-2. FileZillaをインストール

ここからのスクリーンショットは公開当時のWindows版FileZilla 3.28.0の例です。現行版やMacでは画面・項目が異なります。以降は操作の流れを参考に、実際の表示を確認して進めてください。

I Agreeをクリック

利用規約が表示されます。内容を読んで同意できる場合だけ「I Agree」などの同意操作で進みます。

インストールオプション

PCを共有して使っている場合に、他のユーザーもFileZillaを使えるようにするかどうかを選びます。自分だけでPCを使っている場合には「Only for me」にチェックを入れて「Next」をクリックしましょう。

合わせてインストールするもの

FileZillaの機能をどこまで入れるかを選びます。ここでは、必要な機能だけを選ぶようにしましょう。「Language files」は多言語表示用です。現在の版の構成と、使いたい言語に必要な項目を確認してください。

インストール先

インストール先を選びます。とくにこだわりが無ければ、そのまま「Next」をクリックしましょう。

どこにファイルを作成するか

旧画面ではショートカットの作成先を選びます。表示された設定を確認し、必要に応じて変更してから進めます。

チェックを外してnext

この旧画面では別ソフトの追加提案が表示されています。追加提案の有無や辞退方法は版によって異なります。不要なら辞退してください。この旧例ではチェックを外したうえで「Next」を選んで辞退します。表示の意味が判断できなければ、インストールを中止して確認しましょう。

インストールが始まる

ようやくインストールが始まります。

finishをクリック

このような表示が出たら、インストール完了です。Finishをクリックすると、FileZillaが開きます。

windowsでのfilezilla

こちらがFileZillaの画面です。ゴチャゴチャしていて抵抗感があるかもしれませんが、ご安心ください。すぐ慣れます。

4-3. 新しくサイトを登録する

FileZillaで「パソコン」と「サーバー」を繋げるための手続きをしましょう。

接続ボタン

画面のいちばん左上にあるアイコンをクリックします。

新しいサイト

サイトマネージャというウィンドウが開きます。①「新しいサイト」をクリックすると接続設定が作られます。②ここで、自分にとって分かりやすい名前をつけましょう(例:ブログ名など)。

4-4. 接続設定

次に、下の画像の①〜⑥の部分を埋めていきます。

ftpアカウント設定

設定の方法は以下のようになります。 以下は当時の明示的FTPS設定例です。FTPSとSFTPは別のプロトコルです。ホスト・プロトコル・暗号化・認証・ポートなどは契約サービスの公式設定を優先してください。「通常」は認証情報を保存する選択肢で、必須ではありません。

設定内容
①ホスト下で解説
②プロトコル「FTP-ファイル転送プロトコル」を選ぶ
③暗号化「明示的なFTP over TLSが必要」を選ぶ
④ログオンの種類「通常」を選ぶ
⑤ユーザ下で解説
⑥パスワード

①ホスト、⑤ユーザ、⑥パスワード はサーバーにより確認方法が異なります。ここでは人気サーバーでの確認方法を紹介します。 以下のメール件名や入力例は公開当時の仮例です。自分の契約の情報に置き換え、現在の公式設定を確認してください。

エックスサーバーの場合

サーバーに申し込みをしたときに届くメールに必要な情報が書かれています。メールボックスを「Xserver」で検索してみてください。

件名:【Xserver】■重要■サーバーアカウント設定完了のお知らせ 〜略〜 FTPホスト   : sv****.xserver.jp ①ホスト名
FTPユーザー  : examplename ⑤ユーザ
FTPパスワード : abcdefgh ⑥パスワード 〜略〜

件名は上の例とは、少し違うかもしれません。メールが見当たらない場合には、サーバーパネルの「FTPアカウント設定」からも確認できます。 現行のXserverでは「サブFTPアカウント設定」から「FTPソフト設定」を確認する案内もあります。

さくらのレンタルサーバの場合

申し込みをしたときに届くメールに必要な情報が書かれています。メールボックスを「sakura」で検索してみてください。

件名:[さくらのレンタルサーバ] 仮登録完了のお知らせ 〜略〜 《契約サービスの接続情報》
FTPサーバ名: *****.sakura.ne.jp ①ホスト名
FTPアカウント : examplename ⑤ユーザ
FTP初期フォルダ : www
サーバパスワード: abcdefgh ⑥パスワード
〜略〜

件名は上の例とは、少し違うかもしれないのでご注意を。

ロリポップの場合

ホスト名やパスワードなどは、ユーザー専用ページの「アカウント情報/パスワード変更」から確認できます。

FTPサーバー:*****
FTPSサーバー:users000.lolipop.jp ①ホスト名
WebDAV:*****
FTP・WebDAVアカウント:abcdefg.jp-hogemoge ⑤ユーザ
FTP・WebDAVパスワード:abcdefgh ⑥パスワード

wpXの場合

サーバーの管理画面から「FTPアカウント設定」を有効にする必要があります。公式サイトの解説が画像付きでとても分かりやすいので、参考にすると良いかと思います。 この節は旧wpXクラウドの既存契約向けです。新規受付は終了していますが、サービス終了という意味ではありません。契約中のサービスの案内を確認してください。

なお、FileZillaに入力する①ホスト名は「サーバーID.wp-x.jp」となります。サーバーIDは申し込み時に自分で決めたものです。

MixHostの場合

登録時に送られてくるメールから確認ができます。

件名:【mixhost】 サーバーアカウント設定完了のお知らせ 〜略〜 FTP接続情報
FTPホスト名: ****.mixh.jp
FTPSホスト名: ****.mixhost.jp ①ホスト名
ユーザー名 : examplename ⑤ユーザ
パスワード: abcdefgh ⑥パスワード
〜略〜

4-5. いざ接続

ftpアカウント設定

オレンジ色の枠部分の入力&選択ができたら「接続」をクリックしましょう。

不明な証明書と表示される場合

「不明な証明書」が表示されたら、すぐに承認せず、接続先ホスト名・証明書の発行先と有効期間を確認します。信頼できる経路で提供元が案内する証明書情報と照合し、不一致や確認できない点があれば接続を中止して提供元へ問い合わせましょう。正しい接続先と確認できた場合だけ続行します。保存する場合は「今後もこの証明書を常に信用する」にチェックを入れるかを選び、「OK」で続行します。

接続に成功するとサーバー側のファイル一覧が表示されます。エラーが出た場合は設定や接続先を確認してください。

4-6. FileZillaの基本的な画面の見方

一見いろいろなアイコンやら文字やらが表示されていて複雑に見えますが、主に使うところは限られています。

ftpソフトの基本

画面の左側にはパソコン側のデータが表示されます。いつも見ているパソコンのフォルダーと同じようなものが表示されているかと思います。
画面の右側には、サーバー側のデータが表示されます。この中にWordPressブログを構成するデータが入っているわけですね。

クリックして目的のファイルを探していく

左のツリーはクリック、ファイル一覧のフォルダーはダブルクリックで開き、さらに奥のディレクトリへ進めます。

4-7. WordPressのテーマフォルダーを見つけよう

WordPressのフォルダーは、サーバーや設定にもよるのですが「 public_html」や「 www」の中に入っていることが多いのではないかと思います。 FTPで見える範囲や配置は契約・設定によって異なります。

WordPressの構成ファイルのうちよく触るところ

WordPressのテーマファイルは、 wp-content themes テーマ名(例:sango-theme)の中にあります。 上の公開当時の図にある「wp-uploads」は誤記で、通常の画像保存先は「wp-content/uploads」です。テーマを変更する場合は子テーマなど、更新で変更を失わない方法を選びましょう。

テーマのデザインカスタマイズはここから行えば良いわけですね。

4-8. ドラッグでダウンロード&アップロード

ドラッグでアップロード

編集したいファイルがある場合には、念のためそのファイルのバックアップを取っておきましょう。方法は簡単で、サーバー側(右)⇒自分のパソコン側(左)にドラッグするだけ。これでファイルが自分のパソコンへとコピーされます(コピーなので、元のファイルは残ったままです)。

4-9. 右クリック→「表示/編集」でファイルを編集

ファイルを右クリックして「表示/編集」を選ぶと、ローカルへ取得したコピーをエディターで編集できます。版や設定によってエディターの選択が必要になる場合があります。

編集したいファイルを右クリック

例えば、 style.cssを編集したいときには、 style.cssを右クリックしたうえで「表示/編集」をクリックします。

MEMO

毎回右クリックをするのが面倒な場合には、画面最上部の「FileZilla」→「ファイルリスト」→「ファイルをダブルクリックしたときのアクション」を「表示/編集」に変える→「OK」とすれば、今後ファイル名をダブルクリックするとエディタで開かれるようになります。 これは旧Macの設定例です。設定メニューの位置はOS/版によって異なります。


テキストエディタで開かれる

あとはエディタ上で自分の好きなように編集をすれば良いわけですね。

ファイルを上書き保存すると(Ctrl + S、Macなら⌘ + S)FileZillaで変更のアップロードを確認します。下のウィンドウは公開当時の例です。

保存する

旧画面の「はい」は変更をアップロードする操作です。現在の確認画面の内容を読んで転送し、転送完了と失敗の有無を確認します。続けて編集した後も、ローカルの保存だけで終わらずアップロードを確認しましょう。

4-10. テキストエディタの設定をする

もしかすると「せっかくテキストエディタをインストールしたのに、WindowsやMacのデフォルトのエディタで開かれてしまう…」と困ることもあるかもしれません。
そんなときは「このテキストエディタを使って!」という設定をしましょう。

filezillaの設定を開く

画面の左上で「FileZilla」「設定」をクリックしましょう。 これは旧Mac画面の例です。Windowsを含め設定メニューの場所はOS/版で異なるので、実際のメニューで設定を開いてください。

エディタを選ぶ

①「ファイルの編集」 ②「カスタムエディタを使用」にチェック ③「参照」から使いたいエディタを選びましょう。
左下の「OK」をクリックすると設定が反映されるようになります。 この画面も公開当時の例です。現行版のエディター設定の名称・選択肢を確認してください。


バックアップの取り方も早めに覚えておくに限ります。