記事内に商品プロモーションが含まれる場合があります
WordPressで作られたブログのカスタマイズを行うときには、FTPソフト(ファイル転送ソフト)を使うと便利です。
1. FTPクライアントソフトとは?
FTPクライアントソフト(FTPソフト)とは、サーバーに置いてあるファイルを手元のパソコンにダウンロードしたり、逆に手元のパソコンからアップロードしたりするためのソフトです。
WordPressの場合
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」の使い方を解説します。日本語にも対応しています。
4-1. ダウンロード
FileZillaのダウンロードは、Windows/Macともに下のリンク先から行うことができます。
Windowsの場合には「64bit版」と「32bit版」があって、どちらをダウンロードすれば良いか分からない場合もあるかと思います。
Microsoftの公式ページで「使用中のPCが32bit、64bitどちらか」を判断する方法が分かりやすく解説されています(こちら)。対応している方をダウンロードするようにしましょう。
◯◯.exeと◯◯.zipの2種類のファイルが表示されている場合には、◯◯.exeの方をダウンロードすればOKです。
ファイルのダウンロードが完了したら、クリックしてインストールを始めます。
4-2. FileZillaをインストール
ここから例として載せるスクリーンショットはWindowsの場合のものですが、Macでもほとんど同じかと思います。
利用規約が表示されます。「I Agree」をクリックして進みましょう。
PCを共有して使っている場合に、他のユーザーもFileZillaを使えるようにするかどうかを選びます。自分だけでPCを使っている場合には「Only for me」にチェックを入れて「Next」をクリックしましょう。
FileZillaの機能をどこまで入れるかを選びます。ここでは、全てにチェックを入れるようにしましょう。特に「Language files」にチェックを入れ忘れると、日本語で使うことができません。
インストール先を選びます。とくにこだわりが無ければ、そのまま「Next」をクリックしましょう。
こちらは特に何も変えずに「Next」で進めばOKです。
「Recommended for your computer」とよく分からないソフト名が表示されるかもしれませんが、これは広告です。無料ソフトなので仕方がないですね。余計なものをインストールしたくなければ、チェックを外したうえで「Next」で進みましょう。
さらに別の広告が表示されるかもしれませんが、そのときも同じ手順で進みましょう。
ようやくインストールが始まります。
このような表示が出たら、インストール完了です。Finishをクリックすると、FileZillaが開きます。
こちらがFileZillaの画面です。ゴチャゴチャしていて抵抗感があるかもしれませんが、ご安心ください。すぐ慣れます。
4-3. 新しくサイトを登録する
FileZillaで「パソコン」と「サーバー」を繋げるための手続きをしましょう。
画面のいちばん左上にあるアイコンをクリックします。
サイトマネージャというウィンドウが開きます。①「新しいサイト」をクリックすると接続設定が作られます。②ここで、自分にとって分かりやすい名前をつけましょう(例:ブログ名など)。
4-4. 接続設定
次に、下の画像の①〜⑥の部分を埋めていきます。
設定の方法は以下のようになります。
設定内容 | |
---|---|
①ホスト | 下で解説 |
②プロトコル | 「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. いざ接続
オレンジ色の枠部分の入力&選択ができたら「接続」をクリックしましょう。
「不明な証明書」というウィンドウが表示された場合には、「今後もこの証明書を常に信用する」にチェックを入れて「OK」をクリックしましょう。
これでサーバーへの接続は完了です!
4-6. FileZillaの基本的な画面の見方
一見いろいろなアイコンやら文字やらが表示されていて複雑に見えますが、主に使うところは限られています。
画面の左側にはパソコン側のデータが表示されます。いつも見ているパソコンのフォルダーと同じようなものが表示されているかと思います。
画面の右側には、サーバー側のデータが表示されます。この中にWordPressブログを構成するデータが入っているわけですね。
クリックにより、さらに奥の(深くの)ディレクトリ(フォルダー)に進んでいくことができます。
4-7. WordPressのテーマフォルダーを見つけよう
WordPressのフォルダーは、サーバーや設定にもよるのですが「 public_html」や「 www」の中に入っていることが多いのではないかと思います。
「 wp-content」など「wp-◯◯」というファイル/フォルダーを見つけたら、きっとそこがWordPressのフォルダーです。
WordPressのテーマファイルは、 wp-content themes テーマ名(例:sango-theme)の中にあります。
テーマのデザインカスタマイズはここから行えば良いわけですね。
4-8. ドラッグでダウンロード&アップロード
編集したいファイルがある場合には、念のためそのファイルのバックアップを取っておきましょう。方法は簡単で、サーバー側(右)⇒自分のパソコン側(左)にドラッグするだけ。これでファイルが自分のパソコンへとコピーされます(コピーなので、元のファイルは残ったままです)。
逆に、自分のパソコン側⇒サーバー側にファイルをドラッグすることで、サーバーにファイルをアップロードすることができます。
4-9. 右クリック→「表示/編集」でファイルを編集
ファイルを右クリックして「表示/編集」を選ぶと、自動でテキストエディタで開かれます。
例えば、 style.cssを編集したいときには、 style.cssを右クリックしたうえで「表示/編集」をクリックします。
あとはエディタ上で自分の好きなように編集をすれば良いわけですね。
ファイルを上書き保存すると(Ctrl + S、Macなら⌘ + S)FileZillaで下のようなウィンドウが開かれます。
「はい」をクリックすると、サーバー側のファイルに編集内容が反映されます。続けて編集した後も、この流れで保存を行いましょう。
4-10. テキストエディタの設定をする
もしかすると「せっかくテキストエディタをインストールしたのに、WindowsやMacのデフォルトのエディタで開かれてしまう…」と困ることもあるかもしれません。
そんなときは「このテキストエディタを使って!」という設定をしましょう。
画面の左上で「FileZilla」「設定」をクリックしましょう。
①「ファイルの編集」 ②「カスタムエディタを使用」にチェック ③「参照」から使いたいエディタを選びましょう。
左下の「OK」をクリックすると設定が反映されるようになります。
はじめは分かりづらいかもしれませんが、色々と試行錯誤するうちに慣れていくはずです。というわけで「WordPressでFTPソフトを使う意味」と「FileZillaの使い方」の解説でした。
FTPソフトを使ってバックアップを取る方法は、こちらの記事で解説しています。バックアップの取り方も早めに覚えておくに限ります。ぜひチェックしてみてください。