教科書には載っていないWordPressテクニック(開発環境・レンタルサーバー編)



教科書には載っていないWordPressテクニック(開発環境・レンタルサーバー編)

WordPressのプログラムやプラグインのCSSをチョット変更しようと思っても、その操作感ってチョット面倒くさいですよね。

レンタルサーバーからファイルをダウンロードして、編集して、アップロードするのも更新が重なると煩雑だし、かといってレンタルサーバー上のエディタは使いにくい。

そんな時は、レンタルサーバーと自分のパソコンをFTP接続しちゃえばタイムリーにWordPressを編集できるようになります。

今回はテキストエディタ一番人気のVisual Studio Codeを使って、レンタルサーバーと自分のパソコンを接続し、プログラムを編集する方法をご紹介していきたいと思います。

目次
  1. 教科書には載っていないWordPressの楽ちん開発環境(レンタルサーバー編)
  2. 自分のパソコンのテキストエディタとレンタルサーバーを接続するメリット
  3. Visual Studio Codeとレンタルサーバーを接続する方法
  4. レンタルサーバー上のファイル群をVisual Studio Codeでダウンロードする方法
  5. ftp-simple使用時の注意点
  6. ftp-simpleを使う様子(動画)
  7. まとめ

教科書には載っていないWordPressの楽ちん開発環境(レンタルサーバー編)

自分のパソコンのテキストエディタとレンタルサーバーを接続するメリット

image

今回ご紹介する『自分のパソコンのテキストエディタとレンタルサーバーを接続するメリット』をまずはじめに確認しておきたいと思います。

  • 開発スピードが上がる
  • プログラミングが楽しくなる
  • バックアップも取れる

まず1番のメリットは「スピード」です。FTPで自分のパソコンのテキストエディタとレンタルサーバーを接続することで、レンタルサーバー上のプログラムを直に編集できるようになります。いちいちローカル環境で作成したファイルをアップロードしなくても大丈夫。 これは特に何度も何度もプログラムを編集する時に効果を発揮し、開発スピードを飛躍的に押し上げてくれます。

次のメリットとして「プログラミングが楽しくなる」ことが挙げられます。これは筆者自身が実際にFTPで接続してWordPressを編集した時に感じたことで、手元で変更したことが即座にホームページの方に反映されるので、単純に面白いです。 またプログラムを書く環境も使い慣れたテキストエディタなので捗りますね。

最後の「バックアップ」ですが、多くの方がWordPressのバックアップをプラグインに任せている方が多いと思います。「でも、本当に大丈夫かな?」と思う方もいらっしゃるのではないでしょうか?FTPを使うことで、レンタルサーバーにアクセスしなくても簡単にWordPressのバックアップをとることができます。

今回のFTPでは、データベースへの接続は行いませんので、バックアップできる内容は、WordPress本体とアップロードした画像などです。

Visual Studio Codeとレンタルサーバーを接続する方法

atomやSublime TextでもFTPツールを使ってレンタルサーバーに接続できますが、今回は人気のエディタVisual Studio Codeを使ってFTP接続していきたいと思います。

FTP(File Transfer Protocol)は、サーバーと自分のパソコンの間で、ファイルを送受信するための決まりごと。

image

まずはVisual Studio Codeを起動し、左サイドバーの「Extensions」のアイコンをクリック。そして検索欄に「ftp」と入力するとたくさんのFTP関連のプラグインが紹介されます。今回は一番上の”ftp-simple”を選択。

Visual Studio Codeのプラグインを選ぶポイントとしては、「ダウンロード数が多い」「情報が多い」ことが挙げられます。プラグイン名でGoogle検索して複数のチュートリアルが紹介されれば、使っていて分からないことがあっても安心して対処できると思います。

image

ftp-simple のインストールが完了したら、次は接続設定です。自分のパソコンのキーボードの fn を押しながら F1 キーを押します。すると下図のように ftp-simple の操作メニューが表示。

image

まずは接続設定から行う必要がありますので ftp-simple:Config - FTP connection setting を選択(クリック)。すると下図右側のような設定ファイルが自動で開きます。

image

少し手間かも知れませんが、この設定ファイルにサーバー情報を書き込むことで自分のパソコンのVisual Studio Codeとレンタルサーバーが接続できるようになります。 設定ファイルの記入例は下記の通りです。

[
    {
        "name": "マイ バリューサーバー",
        "host": "s19.valueserver.jp",
        "port": 21,
        "type": "ftp",
        "username": "レンタルサーバーログインのユーザー名",
        "password": "レンタルサーバーログインのパスワード",
        "path": "/public_html",
        "autosave": true,
        "confirm": false
    }
]

上図は一つのレンタルサーバーと接続する設定で、複数のレンタルサーバーと接続したい場合は上図のように , で区切って書くことで、接続先を切り替えて使えるようになります。

port(ポート番号)はレンタルサーバーによって予め決められています。 私のVALUE SERVERの場合は 21 で、「value server ポート」で検索すると該当情報を確認できました。

"autosave": true は、自動保存に関する設定で、自動保存したくない時は "autosave": false にします。
"confirm": false は、ファイルの上書きに関する設定で、 false の場合はファイルを自動的に上書きします。

image

設定ファイルの作成・保存ができたら次は実際にレンタルサーバーに接続していきます。また fn + F1 を押して、今度は ftp-simple: Remote directory open to workspace を選択。すると先ほどの設定ファイルで記入した name の内容が表示されます(下図参照)。

image

接続先のレンタルサーバーを「バリューサーバー s2」に選択。

image

ここからは接続先のディレクトリを選択、今回は kesuyo.o-namae.com の中のファイルと接続してみます。kesuyo.o-namae.comの項目をクリックすると、kesuyo.o-namae.comの下のディレクトリが表示されます。

image

今回はkesuyo.o-namae.comで公開しているファイル群全てに接続してみたいと思いますので、「.Current directory: /public_html/kesuyo.o-namae.com」を選択。すると下図のようにレンタルサーバー上にある /public_html/kesuyo.o-namae.com の情報が表示されます(下図参照)。

image

レンタルサーバーと自分のVisual Studio Codeがつながったといっても物理的な変化は何も起きないため、実感湧きにくいですが、これでつながっています。尚、ローカル環境で編集した内容は、上図のようなディレクトリに保存されていきます。

ftp-simple 使用時のローカル環境保存先

/Users/a01/Library/Application Support/Code/User/globalStorage/humy2833.ftp-simple/remote-workspace-temp/cb1b365858f939611497d749dfbf21f4/public_html/kesuyo.o-namae.com

image

次に本当にローカル環境の変更がレンタルサーバーに反映されるかテスト。試しに hello.html をローカル側で追加し、 https://kesuyo.o-namae.com/hello.html にアクセスしてみると上記のようにhello.htmlの内容が出力されていることが確認できます。

image

ここで一旦、ローカル環境のファイル群の様子を確認してみます。先ほどVisual Studio Codeのターミナルで確認したftp-simpleの保存ディレクトリは、上図のような隠しフォルダ内に存在。Macの場合は、Shift + Command + . で隠しフォルダを表示することができます。

image

そしてftp-simpleの保存先まで辿ってみた結果、上図のように hello.html 以外は 0バイト、つまりデータがない状態です。Visual Studio Code上にはファイル群が表示されているのでデータが手元にあるような感じはしますが、実際には編集した時のみローカル環境にもレンタルサーバー上のファイルが記録されます。

image

最初のうちはいろいろ違和感がありますが、使っていくうちに慣れていくでしょう。上図は投稿ページを編集した様子。

レンタルサーバー上のファイル群をVisual Studio Codeでダウンロードする方法

ここまでの操作で、ftp-simpleでレンタルサーバー上のファイルを編集できるものの、ファイル群は編集したファイルしかローカルに保存されないことが分かりました。次は”編集有無関係なし”にレンタルサーバー上のファイル群をダウンロードする操作をご紹介したいと思います。

image

まずは fn+F1 を押して、ftp-simpleのメニューを表示します。そして

ftp-simple:Download-Download in working directory from FTP server

を選択(クリック)。

image

次はダウンロードするレンタルサーバーのディレクトリやファイルを指定。クリックして進めます。

image

image

今回は上図のように 2020 年にアップロードした画像群のディレクトリ(フォルダ)を指定。2020と表示されていることを確認し、

.Current directory:/public_html/kesuyo.o-namae.com/wp-content/uploads

を選択(クリック)。(上図)

image

次は少し似たような画面ですが、今度はダウンロード”先”のディレクトリを指定。先ほどと同じディレクトリで良さそうな感じはしますが、一つ上のディレクトリにしておかないといけません。つまり今回の場合は、

/kesuyo.o-namae.com/wp-content/uploads/2020/

の一つ上のディレクトリなので、ダウンロード先は

/kesuyo.o-namae.com/wp-content/uploads/

として、

. Current directory:/Users/a01/Library/Application ・・・・・

を選択(クリック)。(上図)

image

するとローカル環境のファイル群に上書きしていいか?と聞かれますのでOK。 これでレンタルサーバー上に保存されている

/public_html/kesuyo.o-namae.com/wp-content/uploads/2020/

の画像群がローカルにダウンロードできたことが確認できますね(下図参照)。

image

レンタルサーバーからもファイル群のダウンロードはできると思いますが、データ量が多くなるとエラーが出たりしますよね。しかし、FTP接続の場合はブラウザ操作に比べてエラーが発生しにくい特徴があります。

image

最後にプログラムの編集を中断する時やレンタルサーバーとの接続を切る時は、一旦ftp-simpleの接続を切ってからVisual Studio Codeを閉じるようにしましょう。

fn+F1 でftp-simpleのメニューを開いて、

ftp-simple: Close all FTP connections.

をクリック。

image

接続が切れたかどうかは、Visual Studio Codeの画面下、 OUTPUT --> ftp-simple で確認できます。(上図参照)

ftp-simple使用時の注意点

実際に筆者が体験した失敗談をご紹介します。

  • ローカルの変更内容が正しく反映されない
  • 知らない内にレンタルサーバーとの接続が切れていた

レンタルサーバー上のデータとVisual Studio Codeに表示されているデータ(コード)がリンクしていることがメリットなのに、ftp-simple使用時に上記のようなエラーが何度か発生しました。

恐らく原因は、パソコンを閉じる時に 「ftp-simpleの接続を切らなかった」ことが考えられます。 上記のような状態になると「あれっ、どこまで変えたっけ?」というパニック状態になりますので要注意です。

こうした状況を防ぐ方法としては、Visual Studio Code画面下で確認できるOUTPUTです。編集したファイルを保存する度にOUTPUTに変更内容が表示されますので、レンタルサーバーとの接続状況をライブで確認することができます。

ftp-simpleを使う様子(動画)

Webサイト制作スキルが身に付く

CodeCampの無料体験はこちら

まとめ

WordPressのローカル環境以前に”WordPress”が???という方、参考書やYouTubeもいいですが、CodeCampのWordPress講座、いかがでしょうか?

無料体験レッスンも受付中ですので、一度参考にしてみてください。 image

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp