FTPの利用方法

ワードプレスを利用し、賢威等のテーマを一切カスタマイズしないのであれば、FTPを全く知らなくてもWEBサイトを作って公開すること自体は可能となります。
少しでもカスタマイズを行う場合はFTPの基礎的な知識は必ず必要になりますので、まだFTPについて知らない方は、当ページを読んでいただき理解するようにしましょう。

FTPとは

FTP(ファイルトランスファープロトコル)クライアントとサーバー間で、ファイルを送受信する通信方法(厳密には方法ではなく決まりごとのこと)です。
FTPの仕組み
もっと砕けた言い方をすると、パソコンとWEBサイトのデータが入っているサーバーとをつなぐ通信方法のことです。

FTPの基本的な考え方

WEBサイトを作って公開するためには、パソコン上にある文章や画像データ等をウェブサーバーに転送する必要があります。
転送したデータを編集する際はウェブサーバーからパソコン上に転送し、パソコン上で編集を行います。
このようにパソコンとウェブサーバーの双方間のデータ転送を行う、これがFTPの基本的な考え方です。
FTPの基本的な考え方

POINT

転送といってもパソコン上にある文章や画像データ等を移動させるわけではない(パソコン上のデータが無くなるわけではない)ので、実際にはウェブサーバーにコピー(複製)するということになります。逆も同様でウェブサーバーからパソコン上へ転送してもウェブサーバーのファイルが無くなるわけではありません。

転送作業はFTPソフトを利用

転送作業はFTPソフトを利用し、FTPサーバーに接続します。
するとウェブサーバーに存在するフォルダやファイルの一式がFTPソフト上で一覧となって表示されます。
FTPソフト上で一覧となって表示
そこで

  • パソコン上にあるファイルを転送して上書き
  • パソコン上にある新規ファイルを転送して追加
  • 一覧となって表示されたフォルダやファイルを削除

等を行い、ウェブサーバーのデータを更新することができます。
また

  • ウェブサーバーにあるファイルをパソコン上へ転送してダウンロード
  • 等も可能となります。

    ワードプレスのカスタマイズには必ずFTPソフトが必要

    ワードプレスは管理画面からウェブサーバーにあるファイルの編集が行えますので、ブラウザ上の操作だけでファイルの編集を完結させてしまうことが可能です。
    ただし、ワードプレスの管理画面からウェブサーバーにあるファイルの編集を行うことは推奨されていません。
    弊社といたしましても、あまり推奨できません。
    なぜかというと、編集作業を行っていると必ず人的なミスが起こるからです。
    そのミスが起きた際に、ワードプレスの管理画面からだと復旧ができないことがあります。
    具体的な例を挙げますと「サイトが何も表示されなくなってしまった!」時です。
    エラー表示
    こういった場合、管理画面にも入れないことが多くあります。
    FTPソフトが使えれば、管理画面に入れなくてもファイルの編集が行えますので、すぐに復旧できる可能性が高くなります。
    ただし、ワードプレスの管理画面から編集を行っているということは、ファイルの編集前にファイルをバックアップしている可能性が低いので、いずれにせよ復旧は大変かもしれません。
    よって、ワードプレスをカスタマイズする前には、必ずFTPソフトを準備し、FTPソフトでファイルのバックアップ(パソコン上に一時的に保存する)を行ってからファイルを編集するようにしましょう。

    「FileZilla」のダウンロード方法

    FTPソフトは有料のものから無料のものまで、たくさんの種類がありますが、弊社では無料のFTPソフトを利用しています。
    今回は弊社でも利用している「FileZilla(ファイルジラ)」のダウンロード方法を説明させていただきます。

    実行ファイルをダウンロード

    「FileZilla」は複数のサイトからダウンロードができますが、ここでは以下のリンクからダウンロードしてみましょう。

    リンクにアクセスすると次のような画面が表示されます。
    実行ファイルをダウンロード
    色々と書かれていますが、ページの中ほどにある「最新リリース」の見出しがついたところの一番上のリンクをクリックするとスムーズです。
    ※日付はダウンロードされるタイミングで変わるかもしれません。古い日付だったとしても、ダウンロード後にバージョンの更新が可能となります。バージョンの更新は新バージョンがあると自動でメッセージが出るので「新しいバージョンをインストールする」をクリックするだけの仕様になっております。
    クリックすると、ずらっとダウンロードリンクが並んだ状態のページに移動しますので、今度はその中からご自身の環境に該当するファイルをダウンロードする必要があります。
    例えば、Windowsならばご自身の環境に合わせて、32ビット版用の「win32-setup.exe」、または64ビット版用の「win64-setup.exe」のどちらかクリックしてください。
    実行ファイルをダウンロード
    該当するリンクをクリックすると「FileZilla」の実行ファイル(パソコンに「FileZilla」をダウンロードするためのファイル)のダウンロードが始まります。
    ダウンロードが終わりましたら、実行ファイルをクリックしてください。
    ※ブラウザの下部分に以下の画像のような選択画面が出てくる方は保存せずに実行するだけでも問題ありません。
    実行ファイルをダウンロード

    「このアプリがデバイスに変更を加えることを許可しますか?」と出てきたら

    「このアプリがデバイスに変更を加えることを許可しますか?」と出てきたら「はい」をクリックしてください。
    このアプリがデバイスに変更を加えることを許可しますか?

    ご自身のWindowsのビット数がどちらかが分からない方

    検索エンジンで「Windows ビット数 確認」等で検索したいただくと確認方法を説明しているページが多数出てきますので、ページの説明に沿って調べるようにしましょう。

    「FileZilla」をダウンロード

    まずはライセンスに関するお知らせが表示されますので、確認して「I Agree」をクリックしてください。
    「FileZilla」をダウンロード
    次は「インストールプション」です。
    初期状態で「Anyone who uses this computer(all users)」にチェックが入っていますので、パソコン内のユーザーで使用制限をかける必要が無ければ、そのまま「Next」をクリックしてください。
    「FileZilla」をダウンロード"
    次は「Components」の選択です。
    初期状態で

    • Icon sets
    • Language files
    • Shell Extension

    にチェックが入っていますので、こちらは外さないようにしてください。
    デスクトップにショートカットアイコンを作る場合は一番下の

    • Desktop Icon

    にもチェックを入れるようにしてください。
    チェックを確認したら「Next」をクリックしてください。
    「FileZilla」をダウンロード
    次は「プログラムファイルをどこに保存するか」の選択です。
    特に「ここに入れたい!」という場所がなければ、そのまま「Next」ボタンをクリックしてください。
    「FileZilla」をダウンロード
    次は「スタートメニューでどんな名前で表示するか」の確認です。
    特に「こんな名前で表示したい!」という名前がなければ、そのまま「Install」ボタンをクリックしてください。
    「FileZilla」をダウンロード
    「Installing」と表示され「FileZilla」がインストールされます。
    「FileZilla」をダウンロード
    次は「Completing FileZilla Client ○.○○.○ Setup」と表示されるので「Finish」ボタンをクリックしてください。
    「Start FileZilla now」にチェックが入っていると「Finish」ボタンを押したあとすぐに「FileZilla」が立ち上がります。
    「FileZilla」をダウンロード
    「Start FileZilla now」のチェックを外していなければ「FilleZilla」が立ち上がります。
    「FileZilla」をダウンロード
    スタート時のダイアログが出ますので「OK」をクリックしてください。
    これで「FileZilla」のダウンロードが完了いたしました。

    「このアプリがデバイスに変更を加えることを許可しますか?」の質問を聞かれたら

    バージョンによって表現が少し異なりますが、上記のような質問を聞かれたら「はい」をクリックするようにしてください。
    本来この質問は、セキュリティのために設けられているものです。
    したがって常に「はい」とすればよいわけではありません。
    今回は「FileZilla」をインストールしようとしていて問われているものなので、「はい」で問題ありませんが、何もインストールしようとしていないのにこの表示が出る場合などは、注意が必要かもしれません。

    「新しいバージョンをインストール」が表示されたら

    新しいバージョンをインストール
    インストールした「FileZilla」が最新バージョンでは無かった場合、新しいバージョンのインストールが案内されます。こちらは迷わずに「新しいバージョンをインストール」をクリックして新しいバージョンを手に入れましょう。

    「FileZilla」の設定方法

    「FileZilla」の設定方法を説明させていただきます。

    サイトを設定する

    まずはサイトを設定する必要があります。
    サイトを設定する とは ご自身のウェブサーバーと「FileZilla」を紐付ける ということです。
    左上のメニューから「ファイル」→「サイトマネージャー」をクリックしてください。
    「FileZilla」の設定方法
    サイトマネージャーが表示されますので「新しいサイト」をクリックしてください。
    そうすると「自分のサイト」の下に「新規サイト」が表示されます。
    「FileZilla」の設定方法
    「新規サイト」は名前を変更できますので、後から複数のサイトを利用できるように、区別できる名前を付けておきましょう。
    もちろん後からでも名前の変更は可能ですので、まだ名前が決まらない方は変更せずにこのまま進んでください。
    ちなみに名前の変更は変更したいサイトを選択した状態で下の「名前の変更」をクリックすれば可能です。
    「FileZilla」の設定方法

    アカウント情報の準備

    次はご利用のレンタルサーバーが発行する「FTPアカウント情報」が必要となります。
    FTPを接続するには通常次のアカウント情報が必要となります。

    • ホスト
    • ユーザー
    • パスワード

    アカウント情報については、通常はご利用のレンタルサーバーからのメールに記載してあるか、レンタルサーバーの管理画面で確認できるはずです。
    お持ちでない方は一度メールボックスやサーバーの管理画面のヘルプを探してみましょう。
    見つからない方は検索エンジンで「レンタルサーバー名+FTP」等で検索したいただくと、どこを確認すればよいかを説明しているページが多数出てきますので、ページの説明に沿って調べるようにしましょう。

    エックスサーバーの場合

    エックスサーバーの場合、サーバーの申し込みが完了した際に「サーバーアカウント設定完了のお知らせ」というメールが届いているはずですので、確認してみてください。
    ▼「サーバーアカウント設定完了のお知らせ」のメール例
    ※タイトルやメール文章は変更になる可能性があります。
    アカウント情報の準備
    ▼メールの下の方を読み進めると「■FTP情報」がございます。
    アカウント情報の準備
    このFTP情報に書かれている「FTPホスト」「FTPユーザー」「FTPパスワード」を「FileZilla」のそれぞれの項目に入力します。入力したら最後に「OK」をクリックしてください。

    • FTPホスト ⇒ ホスト
    • FTPユーザー ⇒ ユーザー
    • FTPパスワード ⇒ パスワード

    アカウント情報の準備

    「パスワードを保存しますか?」と聞かれたら

    ここはご自身でご判断いただくことになりますが、「FileZilla」を操作する頻度が高ければパスワードは保存しておいた方が良いかと思います。パソコン自体にセキュリティソフトが入っていない等、不安がある方は「マスターパスワードで保護されたパスワードを保存する」を選択するのも良いかと思います。
    パスワードを保存しますか?
    選択したら「OK」をクリックしてください。
    これでサイトの設定が完了しましたので「接続」ができる状態になりました。
    早速「接続」してみましょう。

    サイトへ接続する

    左上のメニューから「ファイル」→「サイトマネージャー」をクリックするか、ファイルのすぐ下の「アイコン」をクリックしてください。
    サイトへ接続する
    サイトマネージャーが開いたら、先ほど設定したサイト名を選択し「接続」をクリックしてください。
    サイトへ接続する
    ちなみにアイコンのとなりの「」をクリックすると設定したサイト名が出てくるので、出てきたサイト名をクリックすると接続できます。接続だけするのでしたらこの方法が早いかもしれません。
    サイトへ接続する
    「サーバーの証明書は不明です。信用できるサーバーか・・・」というメッセージが出ますので、「OK」をクリックします。
    サイトへ接続する
    右側部分にフォルダやファイルの一覧が出てきましたら接続成功です。
    サイトへ接続する

    FTPソフトを利用する前に知っておきたいこと

    階層について

    そもそもサーバーというものには階層が存在します。
    これは複雑に考えずに、ご自身のパソコンのフォルダにあてはめて考えるようにしてください。
    例えば、「家族写真」というフォルダの中に「2019年」「2020年」といったフォルダがあって、それぞれのフォルダには思い出の写真があるとします。
    その場合、写真が入っているフォルダの階層は
    家族写真/2019年または家族写真/2020年
    ということになります。
    FTPソフトを利用する前に
    サーバーもパソコンのフォルダと同じで、フォルダの中にフォルダがあって、そのフォルダの中に・・・といったようにいくつもの階層が存在します。
    フォルダがあるということは、その中にフォルダやファイルがあるということになりますので、フォルダ=階層ということになります。

    サーバー内の階層は何層にもなっている

    サーバー内にはたくさんのフォルダが存在します。それはつまり階層が深いということになります。
    例えば、エックスサーバー内にある賢威子テーマのCSSファイルはこのような階層になっています。

    例:エックスサーバーの場合

    エックスサーバーの場合
    この構造を「パス」という文字列にすると
    /ドメイン名/public_html/wp-content/themes/keni8-child/base.css
    となります。階層を「/(スラッシュ)」で区切ったものが「パス」です。
    実際に接続を行って転送作業を行う前に、このようなイメージをしっかりと持っていただくと、正確かつ効率的にFTPソフトをご利用いただけるかと思います。

    階層=ディレクトリ、フォルダ=ディレクトリ

    サーバー内やコンピュータ内の階層、フォルダのことをディレクトリといいます。
    今後の説明でもディレクトリが出てきますので、階層=ディレクトリ、フォルダ=ディレクトリと覚えておきましょう。
    それでは実際の利用方法について説明します。

    「FileZilla」の利用方法

    実際にFileZillaを使ってファイルを更新する方法を説明します。

    接続先の確認

    接続したらまずはじめにサーバー内のどのディレクトリに接続しているのかということを確認してください。

    エックスサーバーの場合

    エックスサーバーの場合としましたが、多くのサーバーがこちらに該当いたします。
    通常は接続して最初に表示される一覧の中に「サーバーに設定したドメイン名」があるはずなので、確認してみてください。
    「FileZilla」の利用方法
    見当たらなければ、以下の点を確認してみてください。

    • 設定したFTPアカウント情報に誤りが無いか確認する。
    • ドメイン設定が完了しているかサーバー管理画面で確認する。

    確認しても問題が無かった場合は、以下をご確認ください。

    最初に表示される一覧の中にドメイン名のディレクトリが無い場合

    大体のサーバーは最初にドメインが表示されるディレクトリに接続されますが、一部サーバーは接続されるディレクトリが異なります。
    自分がどのディレクトリに接続しているのかわからない場合は、ご利用のレンタルサーバーへお問い合わせください。

    「FileZilla」の画面の見方

    「FileZilla」の画面は以下のようになっています。
    「FileZilla」の画面の見方
    まず右側部分ですが、こちらはサーバー側(接続先)となります。
    基本的な操作(ファイルの上書き追加削除、パソコン上へのダウンロード)は③の部分を使用します。
    一つ下のディレクトリに移動、もしくは一つ上のディレクトリに移動する場合は、②の部分③の部分を使用します。
    次に左側部分ですが、こちらはパソコン側(ローカル)となります。
    「FileZilla」の画面の見方

    ディレクトリを移動する方法

    ディレクトリを移動するには前途した通り、②の部分③の部分を使用します。
    ディレクトリを移動する方法
    移動したい先のディレクトリをダブルクリックしていただければ「FileZilla」の画面が切り替わります。
    ディレクトリを移動する方法
    ディレクトリを移動する方法
    移動した後に、一つ上のディレクトリに戻りたい時はの一番上の「‥」のフォルダをダブルクリックしてください。
    ディレクトリを移動する方法

    ファイルの転送方法

    実際にファイルを転送し、ファイルの上書き追加削除、パソコン上へのダウンロードを行う方法を説明します。

    上書き・追加:パソコン側からサーバー側にファイルを転送する

    パソコン(例えばデスクトップ上)にあるファイルを直接ドラッグするか、の部分のファイルをドラッグし、の部分にドロップしてください。
    この時の注意点ですが、ドロップする位置をフォルダ(ディレクトリ)の上にしてしまうと、そのフォルダ内にファイルがドロップされてしまいまいますので、ドラッグアンドドロップがフォルダにはかぶらないようにしましょう。
    ファイルの転送方法
    既に存在するファイルと同じ名前のファイルをドラッグアンドドロップするとファイル自体が上書きとなります。その場合「ターゲットファイルは既に存在してします」という画面が出ますので、「上書き」を選択し「OK」をクリックしてください。
    ファイルの転送方法

    削除:サーバー側のファイルを削除する

    の部分のファイルを選択し右クリックしてください。「削除」が出てきますので、クリックしてください。
    ※一度削除してしまうともとに戻せませんので、「削除」は慎重に行うようにしてください。
    サーバー側のファイルを削除する

    ダウンロード:サーバー側からパソコン側にファイルを転送する

    「上書き・追加」で行ったドラッグアンドドロップの作業を今度は逆に行います。
    の部分のファイルをドラッグし、の部分にドロップするか、パソコン(例えばデスクトップ上)にドロップしてください。

    FTPソフトの注意点

    ここまでで、「FileZilla」の利用方法の基本的な説明は終わりです。
    当ページだけでFTPソフトの操作を全て説明することは難しいので、細かい部分の操作に行き詰りましたら、検索エンジン等を活用しながら解決していきましょう。
    以下のFTPソフトご利用にあたっての注意点について、必ずご一読をお願いいたします。

    FTPソフトの注意点
    • サーバー内のファイルには消してはいけないファイル、上書きしてはいけないファイルが存在します。
    • それらのファイルを一旦削除・上書きしてしまうと元に戻すことができません。
    • それらを防ぐために、作業の際には必ずバックアップをとっておきましょう。

    バックアップの方法

    ファイルのバックアップ方法はたくさんありますが、ここではシンプルですぐに実践可能な方法をご紹介させていただきます。

    変更前のファイルをコピーしておく

    変更作業を行う前にパソコンにコピーし保存する方法となります。
    これが最も簡単ですぐに実践可能な方法となります。
    コピーしたファイルの名前には日時を含めておくと、後々確認した時にいつバックアップしたものかがすぐにわかるのでおすすめです。

    変更作業を行うファイル名 base.css
    コピーしたファイル名 base_20200409.css

    変更したファイルをサーバーに転送して、表示がおかしくなってしまった場合は、このコピーしたファイルをサーバーに転送し、変更前の状態に戻す(一度リセットをする)ようにしてください。
    (ファイル名を変更(日時を含める等)した場合は元に戻してください。)
    シンプルかつ有効的な方法ですので、変更作業を行う前の「コピー癖」を心がけていきましょう。