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

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

2020年4月2日

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

「サーバーにファイルをアップロードって何?」「プロフィール写真をサイトに載せたい」「サイトのバックアップを取りたい」「FileZillaとは」「FTPとは」

そんな疑問に答えます。

本記事では、人気のFTPソフト「FileZilla」について、写真も交え分かりやすく紹介していきます!

FTPソフトで出来ること

そもそもFTPソフトとは

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

FTPという用語は「File Transfer Protocol(ファイル送信規約)」の頭文字から来ています。

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

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

 

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

 

FTPソフト導入のメリット:サイトで出来ることが増える

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

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

が可能になります。

それによってこんなことも出来るようになります。

1. サイトのカスタマイズ性の向上:より個性を出す

管理画面からは行えない、細部のカスタマイズが出来るようになります。

例えばこんな感じ。

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

2. サイトのバックアップ:万が一の時の安全策

サイトの情報を手元のパソコンにバックアップすることが出来ます。

バックアップは重要なので、最後に具体的なやり方を説明します。

エラーになった際に素早く対応できる為にも、バックアップはこまめにしておきましょう。

では早速始めます。

 

おすすめFTPソフト:FileZillaのダウンロード

 おすすめ理由は以下です。

  • 無料
  • ユーザーが多い
  • 直感的に操作ができる
  • セキュリティーがしっかり

では行きます。

  

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

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

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

    Macは左側、Windowsは右側💡

    無料、有料版あるのですが無料のもの(Proじゃない方)で十分です。

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

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

     

    使い方①:サイトとの連携

    FileZillaを開くと、こんな画面が出てきます。まだ連携していないので真っ白ですが、これから自分のサイトと連携していきます。

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

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

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

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

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

    これで接続完了です。

    ホスト&ユーザー&パスワードの確認方法

    これらは

    1. サーバー契約時に送られてきたメール
    2. レンタルサーバーアカウント内の「FTPソフト設定」のページ

    から確認することが出来ます。

     

    メールでの確認方法

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

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

     

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

    メールが見つからない場合、レンタルサーバーアカウントでも確認することが出来ます。

    1. ログイン
    2. FTPのページに行く
    3. 「初期FTPアカウントの設定内容」を確認

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

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

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

    次に「FTPソフト設定」を選択。

    設定対象ドメインが合っていることを確認。

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

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

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

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

    使い方②:画面の見方

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

    画面は2つのブロックに分かれています。

    • 左側「Local site」:手元のパソコン内にあるファイル
    • 右側「Remote site」:サーバー(サイト)上のファイル
    左がパソコン、右がサーバー💡

    アップロード先=WordPressファイルの場所

    サイトに何かをアップロードする時、アップロード先は必ずサーバー側のWordPressファイルになります。

    なので、どこにあるかしっかり確認しておきましょう。

    使っているサーバーやテーマによって若干の違いはあるかもしれませんが、WordPressに関するファイルは必ずサーバー(Remote site)側のどこかにあります。

    以下、具体的な探し方です。

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

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

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

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

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

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

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

    フォントのアップロード先は「wp-fonts」画像なら「wp-images」としておくと後で探しやすいので、どこに何があるのか把握しておきましょう。

    WordPress関連のファイルは、サーバー側「public_html」内のwp-シリーズを探そう!💡

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

    使い方③:アップロードとダウンロード

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

    具体的には、

    • アップロード:パソコン→サーバーにドラッグ&ドロップ
    • ダウンロード:サーバー→パソコンにドラッグ&ドロップ

    アップロードは左→右、ダウンロードは右→左にドラッグ&ドロップです。

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

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

    このあたりは具体例を使った方が分かりやすいと思うので、次の項目でそれぞれ紹介していきます。

    具体例①:ローカルファイルをサイトで表示

    これは「パソコン内のファイルをサイトで表示出来るようにする」という作業です。

    具体例としては以下です。

    • プロフィール画像
    • 個人的にダウンロードしたWebフォント
    • JS、CSSなどのコードファイル

    ここでは、「パソコン内のWebフォントファイルをサーバーにアップロード」の手順を紹介します。

    • アップロードするファイル名:woffファイル「Websushikifont」
    • アップロード先:WP子テーマファイル内「fonts」ファイル

    まずは、アップロード先となるファイルをサーバー(Remote site)側で開きます。

    写真の右側に「fonts」ファイルが開かれているのが見えますね。

    次に、パソコン(Local site)側からアップロードするファイルを選び、Remote site側にドラッグ&ドロップします。

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

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

    アップロード成功!

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

     

    具体例②:サイトのバックアップ

    「サーバー上のファイルをパソコンにダウンロード」という操作により、サーバー側ファイルのバックアップが可能になります。

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

    • バックアップするファイル名:「luxech」(使用中のテーマの名前そのまま)
    • バックアップ先:「WP-backup」

    まずは、自身のパソコン上にバックアップしたい場所を決め、バックアップ用フォルダを作ります。今回は、「WP-backup」というフォルダ名にしました。

    そしたらFileZillaのパソコン側で、作ったフォルダを開きます。

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

    次に、サーバー側からダウンロードしたい(バックアップを取りたい)ファイルをパソコン側にドラッグ&ドロップします。

    今回はサーバー側「luxech」をパソコン側「WP-backup」にドラッグ&ドロップしています。

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

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

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

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

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

    最後に

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

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