/*Font Awesome*/ /*Prism.js*/

[FTPソフト] [WordPress]サーバー連携でサイトをもっと便利に!「FileZilla」の使い方を説明するよ!

2020年1月18日

駆け出しのWeb製作者向けです!

WordPressでサイトを開設して割と間も無く、

『サーバーにファイルをアップロード』って何のこと?

と困っていた自身の経験を基に書きました!

同じことで悩んでいる方の役に立ったらSuperはっぴーです!

そこで!

本記事では、

「そもそもFTPとは何なのか?」と言うところから、

FTPソフト「FileZilla」のインストール、WordPressとの連携の仕方、実際の使い方まで

写真も交えて分かりやすく紹介していきたいと思います!

FTPソフト(FTPクライアントソフト)とは

FTPソフトを一言でいうと、ファイル送受信のためのソフトです。

FTPという用語は「File Transfer Protocol」の頭文字から来ています。

名前通り、サーバー(Webサイト)&パソコン間でのファイル(データ/情報)のやりとりに使われます。

「FTPクライアントソフト」と呼ばれることもありますが、ものは一緒です。

FTPソフト=インターネット回線によるファイル送受信ソフトだよ💡

FTPソフトで出来ること

では、FTPソフトで実際に何が出来るのでしょうか。

FTPソフトを使ってサーバーとパソコンを連携すると、

  • サーバー上のファイルをパソコンにダウンロード
  • パソコン内のファイルをサーバーにアップロード

が可能になります。

具体的にはこんな風に使います。

1. サイト細部のカスタマイズ

パソコン内のファイルをサーバーにアップロードすることで、管理画面からは行えない、細部のカスタマイズが出来るようになります。

例えば、

  • パソコン上の画像ファイルをアップロードしてロゴやプロフィール画像を表示する
  • フォントファイルをアップロードしてオリジナルフォントを使う

などです!

個性を出すならFTP!

2. サイトのバックアップ

逆にサーバー上のファイルをパソコンにダウンロードすることで、サイトの情報を簡単にバックアップすることが出来ます。

具体的には

  • サイト内画像データのバックアップが取れる
  • WPのテーマファイルを手元のパソコンに保管できる
  • エラーになった際に素早く対応できる
サイト単体以上のポテンシャルを発揮するようになるので使うしかない!

では早速始めていきましょう!

  • FTPソフト「FileZilla」のインストール
  • 契約したレンタルサーバーのユーザー名&パスワード(サイト連携時に必要)
  • FileZillaのダウンロード

    FTPソフトにも幾つか種類はありますが、

    • Mac、Windows両方に対応💻
    • 操作が分かりやすい💡
    • セキュリティ対策がされている🛡
    • 無料!🆓

    上記の点から「FileZilla」をお勧めします。

    FileZillaのダウンロードサイトからファイルをダウンロードします。

    Mac版、Windows版あるので自身のデバイスに対応した方を選びましょう。

    Macは左側、Windowsは右側💡

    無料、有料版あるのですが無料のもので十分です。(Proを選ばないように💡)

    インストールが完了すると、「Downloads」や「Applications」内にFileZillaのアイコンが表示されます。

    クリックして開きましょう。

    サイトとの連携

    FileZillaを開くと、こんな画面が出てきます。

    まだ連携していないので真っ白ですが、これから自分のサイトと連携していきますよ😀

    まずは左上のアイコンをクリック!

    するとSite Managerウィンドウが開きます。

    New siteをクリック、Host、User、Passwordをそれぞれ入力します。

    その他の項目はデフォルトのまま=上のスクショと同じ物が選択されていればOKです。

    確認が済んだらConnectをクリック💡

    これで接続完了です😄

    その前にホスト&ユーザー&パスワードの確認方法を教えてください!

    サーバー契約時に送られてきたメール、もしくはレンタルサーバーアカウント内の「FTPソフト設定」のページから確認することが出来ます。

    メールでの確認方法

    どのレンタルサーバーも、契約時のメールから確認することが出来ます。

    受信ボックス内を、サーバー名で検索してみましょう。

    レンタルサーバーアカウントでの確認方法

    メールが見つからない!😱という方向けです。

    レンタルサーバーアカウントでも確認することが出来ます。

    🌾以下のスクショはエックスサーバーのものですが、他の会社でもおおよそ似た感じだと思います。

    まずはサーバーパネルにログインします。

    「FTP」→「サブFTPアカウント設定」をクリック。

    次に「FTPソフト設定」を選びます。

    設定対象ドメインが合っているか確認しましょう。

    すると、「初期FTPアカウントの設定内容」のところに

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

    の3つそれぞれ表示されていると思います!

    もっと詳しく知りたい方はこちらもご参照ください。

    画面の見方

    無事にサイトとの連携に成功すると、こんな感じで文字がたくさん表示されてくると思います。

    左側の「Local site」に表示されているのが手元のパソコン内にあるファイル、右側の「Remote site」がサーバー(サイト)上のファイルです。

    左がパソコン、右がサーバー💡

    WordPressファイルはどこにある?

    WordPressに関するファイルは、Remote site側にあります。

    WordPress関連のアップロード先は必ずそこになるので、自身のWordPressファイルがどこにあるか、しっかり確認しておきましょう。

    まずは対象となるドメイン名のフォルダをクリックして開きます。

    私のサイトドメインを発見💡

    次に、WordPressのフォルダーを探して開きます。

    サーバーや設定にもよるのですがだいたい「public_html」もしくは「www」の中に入っているのではないかと思います。

    「public_html」ファイルをクリックして開いたところ。

    それを開くと、上のスクリーンショットの様に「wp-○○」というファイルがずらっと並んでいる筈です。

    例えばテーマファイルだったら「wp-themes」といった感じです。

    WordPress関連のファイルを探したい時は、wp-シリーズをチェックしてみてください💡

    もう一度言いますが、WPファイルのアップロード/ダウンロードで必ずこのフォルダを使うので、場所をしっかり確認しておきましょう💡

    Remote site側、「public_html」内のwp-シリーズを探そう!💡

    それでは実際の使い方を見ていきましょう😄

    アップロードとダウンロード

    アップロードもダウンロードも、ファイルを選択し、移動したい場所にドラッグ&ドロップですることで出来ます。

    アップロード/ダウンロードされたファイルはコピーなので、元のファイルは同じ場所にそのまま保持されます。

    だからダウンロードでバックアップが取れるんだね!

    アップロード

    まずは、パソコン内にあるファイルをサーバーにアップロードしてみましょう。

    下のスクリーンショットは、「Websushikifont」というwoffファイルを、WP子テーマファイル内の「fonts」ファイルにアップロードする一例です。

    まずは、アップロード先となるファイルをRemote site側で開きましょう。

    この例で言うと、Remote site側に「fonts」ファイルが開かれているのが見えますね。

    次に、Local site側からアップロードしたいファイルを選び、Remote site側にドラッグ&ドロップします。

    ファイルを選んでドラッグ&ドロップ

    ドラッグ&ドロップしたファイルがRemote site側に表示されたら、無事にアップロードが完了です。

    アップロード成功!

    アップロード Local site側→Remote site側にドラッグ&ドロップ

     

    ダウンロード

    逆の操作で、サーバー上のファイルをパソコンにダウンロードも出来ます。

    WP子テーマのバックアップを取ってみましょう。

    今度はRemote site側から、Local site側にドラッグ&ドロップします。

    まずは、パソコン上のバックアップしたい場所を決め、Local site側でそのファイルを開きます。

    今回は、「WP-backup」というフォルダにしました。

    「WP-backup」ファイルを開いたところ

    そうしたら、Remote site側の子テーマファイル(この写真では「luxech」)をドラッグ&ドロップします。

    この処理には少し時間がかかることがあります。

    Local site側に、無事にコピーファイルが作成されました✏️

    正式にダウンロードされたかどうか、Finderを開いて確認します。

    「Downloads」内に表示されていればダウンロード成功です💡

    ダウンロード Remote site側→Local site側にドラッグ&ドロップ

    アップロードは左→右、ダウンロードは右→左💡

    ここまで出来たら、使い方はバッチリです✨

    次はFileZillaを使ってできることの一例、シンタックスハイライター「prism.js」の使い方について書くので楽しみにしていてね😄