WordPressをFTPのFileZillaでアップロード方法

みなさんこんにちは！エンジニアの高澤です。
今回はFTPについて解説したいと思います。
FTPと聞いても、
「FTPってなに？」「FTPの使い方が難しそうだしよくわからない…」
といった感じでそもそも疑問に思われていたり難しそうで敬遠してしまっている方もいらっしゃるのではないでしょうか。
筆者の僕も、エンジニアになる前の勉強仕立ての頃はなにがなんだかよくわかりませんでした。
ただ、FTPというソフトウェアを扱えるということはかなり重要であり、WebエンジニアやWebデザイナーなどWeb制作を仕事とする方にとっては必ず知っていること、扱えることが必要になってくるので、ぜひ当記事をお仕事や学習に活かしていただければ幸いです。
また、FTPとは何かを説明しなければならないがよくわからないWebディレクターの方、WordPressでブログを運営しているブロガーの方など制作する側ではない方にもFTPツールを扱えるようになっていると仕事の幅も広がりかなり便利なのでぜひご活用ください。

FTPとは

FTPとはサーバーの中身をパソコンの画面に表示し、そのサーバーの中にあるデータファイルの送受信を可能にするソフトウェアです。
結論をいってしまえば、このFTPが使えなければWebサイト・Webアプリを作ることができず、また突発的なエラーやテーマの修正作業など緊急対応するときに柔軟に対応することができません。。
FTPはFile Transfer Protocol（ファイル・トランスファー・プロトコル）の略です。
実際のWebサイト制作では、このFTPが使えないと開発業務をこなすことができません。
いろんな種類がありますが、当記事では一般的に使われている「Filezilla」というFTPツールを使って実際の実務に即して解説したいと思います。

FTPを使う場面とは

FTPは下記の場面で使うことになります。

WordPressなど、Webサイトのデータファイルを本番環境（サーバー）にアップするとき
WordPressの本体データをアップしてセットアップするとき
データファイルのバックアップをとるとき
Webサイトやアプリの機能やデザインを随時追加・修正したりするとき
htaccessなど、サーバーでしか扱えないファイルを随時追加・修正するとき

などなど、実にたくさんの使い道があります。
筆者はWebエンジニアなので上記のようなことにとどまりますが、他にも何通りもの使い方がありますのでとても便利なソフトウェアといえます。

FTPを使うメリット

当記事ではWordPressを使ってWebサイトの構築をしているエンジニアやWebデザイナーからWordPressでブログを運営しているブロガーの方まで、WordPressを扱う方にむけて記事を執筆しております。
その意図としては、WordPressにはテーマエディターの機能など管理画面の機能を使ってテーマを編集したりできますが、なんらかの不具合で、サイトの画面真っ白になってしまったり、画面上にPHPのエラーコードが表示されるなど、そもそも管理画面に入れずどうしようもなくなってしまう状態になる場合があります。
他にも例はありますが、そもそもFTPを使う以外に問題解決方法がない場面は実際のWebサイト制作などをしていてもよくある話なので、FTPを扱えるだけでメリットがあるといえます。
不具合の例とFTPを利用した解決例・WordPressの画面が真っ白になってしまった →FTPを使ってWordPress本体ファイルの中のwp-config.phpの内容を修正すれば解決
・WordPressのプラグインをインストールして有効化した際に画面にエラーコードのみ表示 →FTPを使ってプラグインのファイル「plugins」の中のプログラムを修正・削除で解決
上記の例は実際に筆者が体験したハプニングの例です。
特に、画面が真っ白になってしまった時は原因がわからず先が見えなくなってしまいましたが、冷静にFTPからサーバーの中のWordPressの設定ファイルの「wp-config.php」を修正してみたところ直ったので、FTPの必要性を身に染みて感じました。

FTPのインストール方法

それではFTPのインストールする方法を解説します。
なにも難しいことはございません。
ここではFTPのツールである「FileZilla」をインストールします。
FileZillaで解説する理由は、FileZillaは筆者も含め実際のWebサイト制作や運用にしばしば使われており、使いやすくシンプルなインターフェースでかつ高機能ということで利用していきます。さらに無料のソフトウェアなので、ここまでくるとメリットしかありません。
MacとWindowsのどちらでもインストールすれば使えますので、ぜひインストールして使ってみましょう。

１、下記のURLからFileZillaのダウンロードサイトを開きます。 FileZillaのダウンロードサイトURL：https://filezilla-project.org/

２、ページを開いたら「Download FileZilla Client」をクリックします。 ※Mac OSとWindowsでボタンが別れてるので、お使いのPCに合わせてクリックしてください。当記事ではMac OSを使って解説します。

３、緑色の「Download FileZilla Client」ボタンをクリックします。

４、ポップアップ画面が表示されたら緑色の「Download」ボタンをクリックします。

５、クリック後、ブラウザで自動的にダウンロードされます。

６、ダウンロードされた.bz2ファイルをダブルクリックします。

７、FileZillaがインストールされデスクトップ画面にアイコンが表示されるので、クリックします。

８、「”〇〇”は、App Storeからダウンロードされたものでないため開ません。」というポップアップが表示されるので、開けるように設定していきます。 ※こちらはMacで起こる動作であり、またMacの最新のOSでない方はこのポップアップ画面は表示されません。Windowsの方は読み飛ばしていただいてかまいません。

９、Macの画面左上にあるアップルアイコンをクリックし、「システム環境設定」をクリックします。

１０、「セキュリティとプライバシー」をクリックします。

１１、上の4つのタブの中の「一般」をクリックします。

１２、下の「変更するには鍵をクリックします。」をクリックします。

１３、PCのユーザ名とパスワードを入力して「ロックを解除」をクリックします。

１４、「ダウンロードしたアプリケーションの実行許可：」のラジオボタンが選択できるようになるので、
・App Store ・App Storeと確認済みの開発元からのアプリケーション番号
の中の「App Storeと確認済みの開発元からのアプリケーション番号」を選択します。

１５、選択して設定ができたら、下の鍵のアイコンをクリックします。

１６、ここまで進んでいただければ設定完了です。
これで先ほど起動することができなかったアプリが使えるようになりました。
それではFileZillaを開いてみましょう。

１７、デスクトップもしくはLaunchpadにあるFileZillaのアイコンをクリックします。

１８、ポップアップが開くので、「開く」をクリックします。

１９、無事FileZillaが起動し、使えるようになりました！
起動すると下記のようにポップアップ画面が開きます。ここまでで、FileZillaのインストールは完了です。
次はFileZillaをサーバーに接続させる方法を解説いたします。

FTPをサーバーと接続する方法

FileZillaは無料で高機能なFTPソフトウェアですが、なんのためのソフトかというとサーバーに接続してファイル管理をおこなうためのソフトです。

共用サーバーとは

ここでいうサーバーとは「共用サーバー」のことをいいます。
共用サーバーとは、レンタルサーバーともいい1台のサーバーを複数のユーザーによってシェアされて運用されるサーバーのことです。
サーバーの種類としては、「共用サーバー」「専用サーバー」「VPS」の３つがあり、それぞれメリットデメリットがありますが、実際のWeb制作や個人で活動されているブロガーの方など多くが共用サーバーを利用しているかと思います。
共用サーバーのサービスとして下記のサービスがメジャーなものです。
・エックスサーバー・さくらのレンタルサーバー・ロリポップ・お名前.comレンタルサーバー
それぞれサービスや値段、メリットに違いがあるので、ご自身に最適なサーバーを選んで利用しましょう。

それでは早速、サーバーに接続してみましょう。

サーバーに接続する

サーバーに接続する方法はとても簡単です。
下記の手順ではFileZillaの「クイック接続」という方法を説明しており、筆者が制作業務の時によく行う接続方法なので、この方法を活用していただければと思います。

１、エックスサーバーの管理画面から下記の3つの情報を確認します。
・ホスト名（FTPサーバー名） ・ユーザ名（アカウント名） ・パスワード（ご自身でFTPアカウントを設定される際に作成したFTPのパスワード）
※上記3つの情報はサーバーの管理画面などから確認できます。

２、3つの情報（ホスト名、ユーザ名、パスワード）を上の方の3つの入力欄「ホスト名(H)」「ユーザ名(U)」「パスワード(W)」にそれぞれ入力します。

３、入力したら「クイック接続(Q)」をクリックします。

４、無事サーバーに接続されました！これでサーバー内のファイルを好きなように操作することができます。
最初はパッと見ると複雑そうでごちゃごちゃしていて扱うのが怖いな…と思ってしまいますが、大丈夫です。すぐに慣れますのでご安心ください。
あとは使い方だと思います。
次は実際にFTPを使って本番環境にWordPressを立ち上げるまでをおこない、FileZillaの使い方を伝授していきます。

FTPの使い方

FileZillaの基本的な見方・扱い方

FileZillaの画面はローカル（つまりPC）にあるファイル構造とサーバーの中のファイル構造の2パターンが表示されています。
左側がローカル環境、右側がサーバー環境になっています。
なので、パソコンの中に存在するファイルを操作したいなという時は左側の方でファイルを操作し、サーバーのファイルを操作したいなという時は右側の方でファイルを操作します。
ここでいう操作とは、ファイルをクリックして任意の階層に移動したり、ファイルを削除したり編集したり、新たに作成したりということをいいます。
ここさえ覚えてしまえば実際の実務で十分通用する知識がついたことになるかと思います。
筆者もFileZillaに関してはここまでの内容までしか把握しておりませんが、実際のWebサイト制作の現場では十分に対応できております。
また、わかりやすいユーザーインターフェースになっているので、もし何かイレギュラーな対応が必要になったとしても、直感で操作がわかるので対応することができるでしょう。 FileZillaの基本がわかったところで次から具体的な内容に落とし込んで、すぐにお仕事で使える方法を解説したいと思います。

WordPress本体ファイルをアップしてセットアップする方法

ここからは、WordPressでWebサイト制作を考えていらっしゃる方、またWordPressの案件が発生してすぐにでもFTPで使えるようにしたいという方など、幅広い方にむけて解説いたします。
まずはWordPressのセットアップをする方法について解説しますが、事前に公式サイト（URL：https://ja.wordpress.org/）からWordPressの本体ファイルをダウンロードされていることを前提にお話を進めさせていただきます。
WordPressの本体ファイルのダウンロード方法に関する記事はこちら

１、FileZillaのアイコンをクリックして起動させます。 ↓

２、共用サーバーの3つの情報「ホスト名」「ユーザー名」「パスワード」を入力して「クリック接続」をクリックします。

３、サーバーに接続できたら右側にサーバーの中のファイル一覧が表示されます。

４、FileZillaの画面右側にサーバーの中身が表示されるので、WordPress本体ファイルを設置すべき階層まで移動します。
サーバーの中のファイルを確認し、「作成したドメイン名」のファイル（例：sampleblog.com）→「public_html」の階層にWordPress本体ファイルを設置します。上記の図の右側「この階層に「WordPress」ファイルをアップロード」は下記の2つの方法があります。お好きな方でアップロードしてください。

ドラッグ＆ドロップ
control＋クリック（Windowsの場合は右クリック）でパネルを開いてアップロード

ドラッグ＆ドロップ

control＋クリック（Windowsの場合は右クリック）でパネルを開いてアップロード

サービスによってファイル名や階層に違いがありますので、それぞれ適切な階層にWordPress本体ファイルを設置してください。
WordPress本体ファイルはファイル自体の容量が大きいので、アップロードに時間がかかります。

５、アップロードが完了したら、WordPress本体ファイルのファイル名を「sampleblog」に変更する ※sampleblogというファイル名は任意ですが、ここではsampleblogにします
こちらでダウンロードしてファイル名を変更したWordPress本体ファイルの「sampleblog」は、この後データベースを作成するので、それまで保管しておいてください。

６、ファイル名を変更後、ブラウザで（https://{ご自身で設定されたドメインのURL}/sampleblog/）で検索をします。 ※つまりブラウザからサーバーへ設置させたWordPress本体ファイルにアクセスします

７、「WordPressへようこそ」のページが表示されます。こちらの画面がWordPressのセットアップに必要な項目が記載されたページですが、セットアップに必要な項目として下記のような一覧があります。

データベース名
データベースのユーザ名
データベースのパスワード
データベースホスト
テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合)

内容からもわかるかと思いますが、データベースの設定が必要になります。なので、下記の画面からセットアップを始める前に、データベースの設定（作成）をしていきましょう。

データベースを作成する方法

データベースを簡単に作成するために、共用サーバーの管理画面から作成します。ここではさくらサーバーを用いてご説明しますが、他の共用サーバーでも同じようなフローになるかと思うので参考になるかと思います。
１、共用サーバー（ここでは例としてさくらサーバー）にログインして、管理画面を開きます。 ↓ログイン後

２、管理画面左メニューの「アプリケーションの設定」の中の「データベースの設定」をクリックしてデータベースの設定ページを開きます。

３、データベースの設定ページが開くので、「データベースの新規作成」をクリックします。

４、「データベースの新規作成」の「データベース名」のテキストボックスに「test」と入力し、「同意する」のチェックボックスにチェックをつけて、「データベースを作成する」をクリックします。

５、「データベース一覧」のページが開き、作成されたデータベースの一覧に設定したデータベースが新規で作成されました。

これでWordPressを立ち上げるためのデータベース「〇〇_test」データベースを作成することができました。
あとはこの「〇〇_test」データベースとWordPressを接続すれば、WordPressの機能が使えるようになり、取り急ぎWebサイトがインターネット上に立ち上がります。
立ち上がるといっても、ご自身で作成された文章や画像などオリジナルのコンテンツを入力したりしていないので、内容が空のテンプレート状態のWebサイトが立ち上がるだけなので、あとでコンテンツを設定したり、テンプレート（見た目）のカスタマイズをしたりします。

WordPressのセットアップを完了させる

１、WordPressの本体ファイルへ再度アクセスします。ブラウザから（https://{ご自身で設定されたドメインのURL}/sampleblog/）で検索をします。

２、対応言語を選択するための画面が開くので「日本語」を選択し「次へ」をクリックします。

３、「WordPressへようこそ」の画面が表示されるので、「さあ、始めましょう！」をクリックします。

４、WordPressに接続するデータベースの情報の入力画面が開くので、下記の5つを入力します。内容は先ほど作成したデータベースの情報を入力します。

データベース名
ユーザー名
パスワード
データベースのホスト名
テーブルの接頭辞

【データベース名】先ほど作成したデータベース名を入力します。「〇〇_test」を入力します。もちろん〇〇の部分はご自身で決められた英数字を入力してください。【ユーザー名】ご自身で作成されたデータベースのアカウント名を入力します。
【パスワード】ご自身で作成されたデータベースのパスワードを入力します。
【データベースのホスト名】要確認
【テーブルの接頭辞】デフォルトで「wp_」とあると思いますが、そのままで大丈夫です。
ただ、ハッキング対策などセキュリティ面などを気にされる方はご自身で決められた英数字を入力されるのがよろしいかと思います。（例）「sample_」など
上記のデータベース情報を入力した後、「送信」をクリックします。

５、WordPressの必要情報の入力画面が開くので、

サイトのタイトル
ユーザー名
パスワード
メールアドレス
検索エンジンでの表示

の5つの情報を設定します。

【サイトのタイトル】ご自身の任意のサイト名を入力します。ここでは「samleblog」を入力します。
【ユーザー名】ご自身の任意のユーザー名を入力します。ここでは「sampleblog_user」を入力します。
【パスワード】ご自身の任意のパスワードを入力します。「sampleblog_pass」を入力します。
【メールアドレス】ご自身の任意のメールアドレスを入力します。
【検索エンジンでの表示】チェックはつけずにそのままにします。 ※チェックをつけると、サイトが検索エンジンに認識されずインデックスされないため、ブラウザで検索をかけても検索結果に表示されなくなります。ご注意ください。

すべて入力したら、「WordPressをインストール」をクリックします。
するとWordPressのログイン画面が開くので、直前に設定したユーザー名とパスワードを入力してログインすれば管理画面が開きます。

これでWordPressのセットアップは完了です！
無事インターネットに公開されました。
ここまで大変お疲れ様でした！

データファイルを修正してアップする

Webサイト制作の現場でしばしばWordPressの作成したテーマファイルの中のPHPファイルに記述されたPHPのプログラムの追記・修正などの作業に関してはFTPを使います。
WordPressを使っていれば、テーマファイルの修正は管理画面にある「テーマエディター」でできてしまいます。
ですが、FTPを使えばWordPressのコアファイル（本体の機能を構成するPHPファイル）まで編集できるので、何かの不具合で画面が真っ白になるなどの管理画面からでは対応できないハプニングにも対応できます。
なのでどちらにしてもFTPを扱えるようにするのは必須だといえます。
それでは、どこかのプログラムを微修正した際にその修正したプログラムを更新するときを例にして更新作業の手順を解説したいと思います。
FileZillaを開いて、修正したPHPファイルを右のサーバーにドラッグ＆ドロップ、もしくはcontrol＋クリックでサーバーにアップします。サーバー側にアップロードしたファイルが確認できましたら成功です。

データファイルのバックアップをとる

データをバックアップすることは決して難しいことではありません。
FileZillaを開き、サーバー側のデータファイルをダウンロードします。
サーバー側のデータファイルをcontrol＋クリックしてダウンロードをクリックします。ローカル（PC）側にダウンロードしてファイルが確認できたらバックアップの成功です。
PC内の安全な場所に保管しておきましょう。

まとめ

今回はWebサイト制作をお仕事とする方にとっては必須のスキルであるFTPについて解説いたしました。
また、FTPは制作ではなく運営やディレクションをご担当されるWebディレクターの方やブロガーの方にも、使えるようになるとご自身でHTMLやCSSなどを編集できたりデータのバックアップが取れたりいろいろ自由にできるので、FTPを覚えておくことで仕事の質が変わるかと思います。
今回も、FTPについてここまで読んでくださり誠にありがとうございます。まだまだ文章はつたないですが、みなさまのWeb活用にお役に立てる記事を書くために精進しております。

その他、同じような話題で以下も取り上げていますので、よろしければご覧ください。