【WordPress】無料テーマのカスタマイズ方法 ~WinSCPとSFTPで安全に編集する手順~

目次

ども。
今日も暮らしかた探索中Dadです。

自分がイメージする理想的なカッコいいサイトを作りたい!
しかも、お金をかけずに!
では、早速いってみましょう!

WordPressの無料テーマを安全にカスタマイズするには?

WordPressの無料テーマを使いこなすには、functions.phpをはじめとするファイル編集が必要です。
その際に安全に編集するためには「WinSCP」を使った暗号化通信(SFTP/FTPS)での接続が欠かせません。

なぜSFTP接続が必要なのか

XサーバーにあるWordPressのファイルを直接編集するとき、テーマエディターから操作すると万一のエラーでサイトが真っ白になるリスクがあります。
そのため、PCから暗号化通信を利用してサーバーへアクセスする方法を整えるのが大切です。

作業環境

  • Windows 10 / 11(PC)
  • Xサーバー
  • WordPress(Lightningテーマ 無料版)

※Mac環境の場合は「FileZilla」などを利用してください。

FTPの基礎知識

FTPとは?

FTP(File Transfer Protocol)は、PCとサーバーの間でファイルをやり取りする仕組みです。
例えるなら「宅配便」のようなもので、PCからサーバーへファイルを送ったり、逆にサーバーからファイルを受け取ったりできます。

FTPとファイルマネージャーの違い

ファイルマネージャー(ブラウザ上のツール)

  • メリット:簡単に操作できる
  • デメリット:大量ファイルや一括作業に不向き

FTPソフト(WinSCPなど)

  • メリット:フォルダごと一括アップロードが可能で高速
  • デメリット:初期設定が必要

FTP / FTPS / SFTP / SCP の違い

  • FTP:暗号化なし。今は非推奨
  • FTPS:SSL/TLSで暗号化したFTP
  • SFTP:SSHを利用して安全に転送できる。個人利用なら十分
  • SCP:SSHを使うが脆弱性の指摘あり

今回は「WinSCP」で SFTP接続 を選択します。
理由は、セキュリティと使いやすさのバランスが良いからです。

WinSCP設定方法

早速設定していきましょう!

【STEP1】事前準備

Xサーバー管理画面にログインしておきましょう。

【STEP2】WinSCPをインストール

手順

以下からダウンロードします。

WinSCPインストール01
WinSCPインストール02

推奨されている「すべてのユーザー用にインストール」を選択します。

WinSCPインストール03

使用許諾契約書が表示されます。
内容を確認し、「承諾」をクリックします。

WinSCPインストール04

「標準的なインストール(推奨)」を選択します。

WinSCPインストール05

任意ですが、ローカルとリモートの表示の仕方です。僕は「コマンダー」を選択しました。

WinSCPインストール06

確認画面が表示されますので「インストール」をクリックしてインストールを開始します。

WinSCPインストール07

インストールが完了したら、「完了」ボタンを押して画面を閉じます。
デスクトップにショートカットアイコンが生成されていればセットアップ完了です。

【STEP3】公開鍵の生成(Xサーバー側)

XサーバーでSSH設定をする場合は公開鍵を使いますので、生成します。

公開鍵と秘密鍵とは?

インターネット上で安全に情報をやりとりするための仕組みです。
「鍵」という名前の通り、情報を**ロック(暗号化)**したり、**解除(復号化)**したりするために使います。

  • 公開鍵(Public Key)
    誰にでも公開してよい鍵。相手がこちらに安全に情報を送るときに使います。
  • 秘密鍵(Private Key)
    自分だけが持っている鍵。絶対に他人に見せてはいけません。公開鍵で暗号化された情報を解読するのに使います。

仕組みのイメージ

手紙に例えるとわかりやすいです。

  • あなたが「公開鍵付きの南京錠」を相手に配る。
  • 相手はその南京錠で手紙をロックして送ってくる。
  • 鍵を開けられるのは、あなたの持っている「秘密鍵」だけ。

つまり「公開鍵で暗号化 → 秘密鍵で復号化」という流れになります。

利用されている場面

  • 電子署名(本人確認や改ざん防止)
  • SSH接続(サーバーへの安全なログイン)
  • HTTPS通信(WebサイトのSSL/TLS)

設定手順と画面例

公開鍵生成01

Xサーバの管理画面は旧デザインで設定します。画面左上で旧デザインになっていることを確認してください。
アカウント>SSH設定をクリックします。

公開鍵生成02

設定がOFFになっている場合は「ON」にして確認画面へ進みます。
「国外アクセス制限」項目がある場合は、国外からのアクセスを許可するかどうかを選択します。

公開鍵生成03

隣のタブ「公開鍵認証用鍵ペアの生成」画面に移ります。
ラベル名は追加したり、後で分かりやすいようにしたい場合は任意で変更してください。デフォルトでは日付時間が入力されています。
パスフレーズは、WinSCPを接続する際に毎回使用しますので、忘れないようにしてください。

確認ボタンを押したのち、「生成ボタン」をクリックします。

公開鍵生成05

指定したフォルダに「サーバーID.key」というファイルが生成されていれば完了です。

【STEP4】WinSCPの設定

続いてWinSCP側の設定を行います。
デスクトップのショートカットアイコンをクリックして起動します。

手順と画面例

WinSCP設定01

ログインウィンドウが開きますので、Xサーバー管理画面で確認しながら以下を設定していきます。

項目 入力
転送プロトコル SFTP
ホスト名 FTPサーバー(ホスト名)
ユーザー名 ユーザー(アカウント名)
ポート番号 10022

入力が終わったら「設定」ボタンを押してください。

WinSCP設定03

左の窓の「認証」をクリックします。
秘密鍵入力エリアの右隣りの「…」をクリックします。
※OKボタンはまだ押さないでください。

WinSCP設定04

先ほど生成した「サーバーID.key」ファイルがあるフォルダを開きます。
ファイルが全て表示されるように画面右下のプルダウンから「全てのファイル」を選択しましょう。
「サーバーID.key」ファイルをクリックします。

WinSCP設定05

秘密鍵を選択すると、PuTTY形式に変換しますかと聞かれるので、「OK」を押します。

WinSCP設定06

先ほどXサーバー側で生成したパスフレーズを入力します。

WinSCP設定07

新しく、PuTTY形式のファイルが作成されますので保存します。

WinSCP設定08

秘密鍵が選択されていることを確認できたら、「OK」を押します。

WinSCP設定09

保存をしておくと、次回以降のログインの際にパスフレーズの入力だけで接続することができます。

WinSCP設定10

秘密鍵の設定ができたら、もう一度設定ボタンをクリックします。

WinSCP設定12

左の窓の「ディレクトリ」をクリックします。
「リモートディレクトリ」の入力欄に以下を入力しOKをクリックします。

💡/home/ユーザー名/サイトドメイン(HOGE.com)/public_html/

この設定はWinSCP接続時のディレクトリを指定しています。
よく使用するディレクトリ(フォルダパス)に設定しておくと便利です。

「保存ボタン」をクリックし設定完了です。

WinSCP設定13

いよいよ「ログイン」をしてみましょう。

WinSCP設定14

先ほどXサーバーで生成したパスフレーズを入力します。
※接続時に毎回入力しますので忘れないようにしましょう

WinSCP設定15

左の窓がローカル、右の窓がリモート(サーバー側)です。上記のように表示されていれば接続成功です。
赤枠部分がディレクトリ(フォルダパス)です。

WinSCP設定16

切断する時は、タブメニュー>「セッションを切断」で切断しましょう。
「×」ボタンで切断すると予期せぬエラーが起きることがありますので、必ず「セッションを切断」で切断するようにしましょう。

まとめ

WordPress無料テーマをカスタマイズするなら、サーバーへの安全なアクセス環境が必須です。
WinSCPを導入し、SFTP接続を設定することで「かっこいいサイトをお金をかけずに安全に育てていける」環境が整います。

ではまた!

注意事項・免責事項

  • 本記事の内容は、筆者が実際に行った設定手順をもとにまとめたものです。
  • 可能な限り正確な情報を記載しておりますが、環境やバージョンによって結果が異なる場合があります。
  • 設定や操作はご自身の責任で行ってください。
  • 本記事の内容を実践したことによる損害やトラブルについて、筆者は一切の責任を負いません。
  • 不安な場合は、公式マニュアルやサーバー会社のサポートをご利用ください。



無料メルマガ講座『@モアグリ通信』

いますぐ『@モアグリ通信』を読んでみたい方はこちらから!

お名前(空白・ニックネームでもOK)

メールアドレス

※オレンジフォームの確認ページが開きます。