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



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

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

WordPressの場合

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


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

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

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

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

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

あくまでもFTPソフトの役割は「ファイルの転送」です。ファイルの内容の編集は「Sublime Text(無料)」などのテキストエディタで行います。テキストエディタの導入方法については、こちらの記事で解説しています。


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

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

ファイルをバックアップ
ディレクトリ(フォルダー)をまるっとダウンロードすることもできます。たまには画像が入ったフォルダーや、デザインテーマの構成ファイルが入ったフォルダーをバックアップしておくと安心ですね。


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


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

FTPソフトを使わなくても、WordPressの管理画面(外観テーマエディター)からもテーマファイルのカスタマイズを行うことができます。

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

画面が真っ白になったときにはFTPソフトでないと対処できない


画面が真っ白に

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

管理画面から元に戻そうとしても、管理画面も真っ白になってしまっているので、直しようがありません。こんなときは、FTPソフトからエラー部分の修正を行う必要があります。

サルワカくんの顔(通常)
サルワカくん


いざ画面が真っ白になってから、FTPソフトの使い方を学んでいたら、その間、訪問者がブログにアクセスできなくなってしまいます。エラーになっている時間が長ければ、SEO的にも悪影響があるかもしれません。

FTPソフトでないと編集できないファイルがある

また、WordPress管理画面の「テーマエディター」からカスタマイズできるのは、テーマのファイルだけです。その他のファイルの編集をしたいときには、FTPソフトから行う必要があります。

WordPressを使い込むならFTPソフトは必須

細かな部分までカスタマイズを行うのであれば、FTPソフトは必須です。どうせ使うことになるのであれば、なるべく早く導入するに越したことはありませんね。



4. FileZillaの使い方

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



FileZillaのロゴ
FileZilla


今回はその中でも特に人気のある「FileZilla」の使い方を解説します。日本語にも対応しています。

4-1. ダウンロード

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



ダウンロードページ

Windowsの場合には「64bit版」と「32bit版」があって、どちらをダウンロードすれば良いか分からない場合もあるかと思います。

Microsoftの公式ページで「使用中のPCが32bit、64bitどちらか」を判断する方法が分かりやすく解説されています(こちら)。対応している方をダウンロードするようにしましょう。

サルワカくんの顔(通常)
サルワカくん


◯◯.exeと◯◯.zipの2種類のファイルが表示されている場合には、◯◯.exeの方をダウンロードすればOKです。


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

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

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

ここから例として載せるスクリーンショットはWindowsの場合のものですが、Macでもほとんど同じかと思います。

I Agreeをクリック
 利用規約が表示されます。「I Agree」をクリックして進みましょう。

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

合わせてインストールするもの
 FileZillaの機能をどこまで入れるかを選びます。ここでは、全てにチェックを入れるようにしましょう。特に「Language files」にチェックを入れ忘れると、日本語で使うことができません。

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

どこにファイルを作成するか
 こちらは特に何も変えずに「Next」で進めばOKです。

チェックを外してnext
 「Recommended for your computer」とよく分からないソフト名が表示されるかもしれませんが、これは広告です。無料ソフトなので仕方がないですね。余計なものをインストールしたくなければ、チェックを外したうえで「Next」で進みましょう。

サルワカくんの顔(通常)
サルワカくん


さらに別の広告が表示されるかもしれませんが、そのときも同じ手順で進みましょう。

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

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

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

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

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

接続ボタン

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

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

4-4. 接続設定

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

ftpアカウント設定

設定の方法は以下のようになります。


設定内容
①ホスト 下で解説
②プロトコル 「FTP-ファイル転送プロトコル」を選ぶ
③暗号化 「明示的なFTP over TLSが必要」を選ぶ
④ログオンの種類 「通常」を選ぶ
⑤ユーザ 下で解説
⑥パスワード
①ホスト、⑤ユーザ、⑥パスワード はサーバーにより確認方法が異なります。ここでは人気サーバーでの確認方法を紹介します。

エックスサーバーの場合

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

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

件名は上の例とは、少し違うかもしれません。メールが見当たらない場合には、サーバーパネルの「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アカウント設定」を有効にする必要があります。公式サイトの解説が画像付きでとても分かりやすいので、参考にすると良いかと思います。


なお、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」の中に入っていることが多いのではないかと思います。

サルワカくんの顔(通常)
サルワカくん


 wp-content」など「wp-◯◯」というファイル/フォルダーを見つけたら、きっとそこがWordPressのフォルダーです。


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

WordPressのテーマファイルは、 wp-content themes テーマ名(例:sango-theme)の中にあります。

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

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

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

サルワカくんの顔(喜)
サルワカくん


逆に、自分のパソコン側⇒サーバー側にファイルをドラッグすることで、サーバーにファイルをアップロードすることができます。

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

ファイルを右クリックして「表示/編集」を選ぶと、自動でテキストエディタで開かれます。



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

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

 MEMO
毎回右クリックをするのが面倒な場合には、画面最上部の「FileZilla」→「ファイルリスト」→「ファイルをダブルクリックしたときのアクション」を「表示/編集」に変える→「OK」とすれば、今後ファイル名をクリックするだけでエディタで開かれるようになります。

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

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

ファイルを上書き保存すると(Ctrl + S、Macなら + S)FileZillaで下のようなウィンドウが開かれます。

保存する
 「はい」をクリックすると、サーバー側のファイルに編集内容が反映されます。続けて編集した後も、この流れで保存を行いましょう。

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

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

filezillaの設定を開く

画面の左上で「FileZilla」「設定」をクリックしましょう。

エディタを選ぶ
 ①「ファイルの編集」  ②「カスタムエディタを使用」にチェック ③「参照」から使いたいエディタを選びましょう。
左下の「OK」をクリックすると設定が反映されるようになります。



サルワカくんの顔(通常)
サルワカくん


はじめは分かりづらいかもしれませんが、色々と試行錯誤するうちに慣れていくはずです。というわけで「WordPressでFTPソフトを使う意味」と「FileZillaの使い方」の解説でした。

FTPソフトを使ってバックアップを取る方法は、こちらの記事で解説しています。バックアップの取り方も早めに覚えておくに限ります。ぜひチェックしてみてください。